こんにちは。デザイナーの岡本です。
今回は、webのデザインをどういう流れで製作してるのかを、デザイナーの視点で簡単にですが解説いたします。私はデザイナーですが、デザイナー以外の方でもこれから実際にサイトの制作にかかわる方は、一度読んでみてください。おおまかですが、webサイトのデザインが完成するまでを知る事が出来ます。
この記事の内容
サイトの制作手順
KOMARIが運営している節句商品販売店Preferの楽天市場店内での新しい商品のサイトを制作したので、こちらを参考にしながら進めさせて頂きます。
実際のサイトはこちら
手順1.サイトの方向性
まず、サイトの方向性を決めていきます。方向性を決める段階で、どんな人に見て欲しいのか、何を目的とするサイトなのか、ターゲットやコンセプトを定めることが大切です。誰でもいいから見て欲しい、とりあえず綺麗な見た目にしたい、というような漠然な考え方だと、コンテンツやデザインを決める際にも基準を見失い、本来来るべきユーザーが来ず、誰も来ない空っぽなサイトになってしまうでしょう。しっかりと方向性を話し合う事で、クライアントとの共通意識を固める事が出来て、後々の制作もやりやすくなると思います。
手順2.サイト構造
いきなりデザインから制作するのではなく、どのような内容を入れるのか、サイトの構造をツリー状の図にしていきます。デザインを制作していく上でも、サイトの構造が決まっていると枠組みもしやすくなります。
まず、どんな内容を入れるのか箇条書きなどで分かりやすく書き出して、それぞれの情報を分類化したのちに、このような階層の図を書いていきます。
図にすることで視覚的にもわかりやすく、クライアントなど複数の人数で進める場合も意見の交換や修正もしやすくなり、方向性を決めるうえでも重要な工程です。
ちなみに、サイト構造の図ではTOPを最上位にもってきていますが、今回参考にしているサイトは、内容量の事も踏まえ、TOPという位置づけを無くして、コンテンツを縦長のひとページ内にまとめることにしました。こちらのようなサイトの事をランディングページと呼んでいます。今回は省略しますが、ランディングページに関してもいずれ詳しく書けたらなと思います。
●制作ツール
サイト構造の制作はPowerPointやGoogleスプレッドシート、Excelなど自分が使いやすいソフトを使用して大丈夫です。簡単に編集して他の方とも共有しやすいものがいいですね。
手順3.ワイヤーフレーム
先程のサイト構造を元に、どの内容をどの位置で見せたいのか、おおまかな枠組みしたものを「ワイヤーフレーム」と言います。この段階では細かいデザインの事は考えずに、内容の優先順位や量などを考慮しながら、コンテンツの配置を意識して制作していきます。そうすることで、デザインをする際もスムーズに進めていくことができます。
デザインの作業に入ってからの修正やコンテンツの追加などは、作業時間のロスに繋がることも多いので、ワイヤーフレームの制作時点で、コンテンツの内容や量はあらかじめ決めておきましょう。
●制作ツール
Adobe IllustratorやAdobe Photoshop、Adobe XDなどのデザイン制作系のソフトが向いています。ワイヤーフレームからデザインを起こしやすくなるので、デザイナーとしては便利ですね。
また、デザインのツールを使い慣れていない人は、PowerPointやGoogleスプレッドシート、Excelでも充分だと思います。サイト全体の構成や意図が伝わるものを制作し、共有することが大切です。
手順4.デザインカンプ
実際にサイトに表示される完成形の見た目を作り込んでいきます。こちらはデザインカンプと呼ばれています。
色味や文字のサイズ、写真やイラストの配置など視覚的な部分でどう情報をわかりやすく見せていくのか、重要な部分です。デザインカンプを作ることで、情報も明確に見えてきて、制作する方々と意見のすり合わせもしやすくなります。
●制作ツール
こちらもAdobe IllustratorやAdobe Photoshop、Adobe XDのデザイン制作ソフトを使用するのが無難だと思います。個人で制作するなら特にこだわりは必要ないと思いますが、仕事で他の方と共有することも考えるとシェア率の高いソフトを使用することもweb制作では大切だと思います。
手順5.プロトタイプテスト
実際のページの動きを想定したものを試作してテストすることをプロトタイプテストと言います。制作したプロトタイプを元に、ユーザーが使いやすいか、コンテンツの見易さなど、テストを繰り返し意見を交換することで、サイトを公開してしまってからの変更を未然に防ぐことができます。
プロトタイプの制作は、ワイヤーフレームの時点で行う場合もありますし、デザインカンプが出来てからする場合もあるので、その時々で対応していけばいいと思います。
●制作ツール
Adobe XDだとプロトタイプという機能が備わっているので画面遷移など、デザイナーの方でも簡単にプロトタイプを制作することが可能です。またプロトタイプのためのツールが他にもあるので、サイトに合ったものを選ぶのも良いかもしれません。こちらは手軽に画面上でプロトタイプを行う方法です。
その他にも、実際に動きの部分のみコーディングしたり、紙でサイト上の動きを試したりと、やり方は様々です。
手順6.コーディング
以上ここまでしっかりと見た目を作り込んだら、あとはコーディングの作業です。私はデザイナーの為、コーディングの作業には関わることは無いですが、実際コーディングしてみて不明な点が出てきたりすることもあるので、その際は要望を伝えながら進めることもあります。
コーデイングが完了すると、見た目上のデザインは完成と言えるでしょう。
サイトのレスポンシブ化
近年、サイトを制作する上で重要となってくるのが、サイトのレスポンシブ化です。今の時代、スマートフォンやタブレットなどパソコン以外の様々なデバイスでwebサイトを見る人が多くなりました。そうなると、使うデバイスによって、画面のサイズや比率はバラバラですよね。ですが、サイトをレスポンシブ化しておくと、デバイスに対して最適な見た目で表示してくれます。
実際、デザインを制作する際にもレスポンシブの事を考えて進めていきます。パソコン表示のデザイン、タブレット表示のデザイン、スマートフォン表示のデザインと主に3パターンは考えるようにしています。それぞれデバイスの名前を書いてますが、あくまで目安の基準となるものであって、実際はブラウザのサイズが横幅何px以下で表示を切り替える、というような作り方で考えていきます。
そのため、レスポンシブ化するサイトのデザインは複合的に考えて進めるため、結構大変です。また、対象のユーザー層によってもデザインの見せ方は変わってくると思います。
最後に
サイトを制作する上で、どんな人がこのサイト利用するのか、何の目的でサイトを作るのか、明確にしていくことが大切だと思います。なんとなく綺麗なサイトを作りたい、という漠然とした思いで進めてしまうと、制作するのも基準が無く曖昧になったり、集客の面でも何の効果もないサイトになってしまうかもしれません。そういったことを防ぐためにも、上記のサイト制作の手順を踏んでいくことで、意見の共有もしっかりとできて、より明確なサイト制作が行えるのではないでしょうか。
