ホームページのデザインを初めてする。
という方だけでなく、
ホームページを制作していくうえで、ウェブデザイナーにデザインを依頼するときも知ってて損はない基礎知識を書いていきたいと思います
ホームページデザインに入る前にしておくこと
いきなりデザインに入る事はほとんどないと思います。
たいていはデザインする前にやることがあります。
それは、ページの構成を考え、文章なり簡単な図なりにおこすことです。
それをもとにレイアウトなども考えると、デザインの進行がスムーズに行えます。
ホームページの作成手順自体が、
- ページの構成を作る
- ページ構成をもとに各ページのレイアウト（ワイヤーフレーム）を作成する
- 決まったページ構成とレイアウトをもとにデザインしていく
- デザインをコーディングしてウェブページにする
- デバック等が完了すればアップ
ざっくりいうと上記の流れで制作しています。
（デザイン会社や制作会社などによっては分業しているうえでさらに細かく手順があるかもしれません）
それぞれが大事な作業になります。
１.ページの構成を作るとは
ページ構成は、簡単に言うと
どんなページがあって各その中身はどうなっているか、
コンテンツはどんなコンテンツがあるのか、全体のページの周遊性はどうなっているのか…
などなど、その名の通りページの構成を作ります。
私の場合はページの構成を表で作り、さらにモックを作って視覚化します。
※実際にクライアントさんとやり取りしているものです。一部ボカシを入れています
必要なページがこれで書き出されて総ページ数や作成が必要なものがわかってくるので、
各ページのモックを作っていきます。
モックとは
モックアップとは？基礎知識とデザインフローにおける位置づけ
２.ページ構成をもとに各ページのレイアウト（ワイヤーフレーム）を作成する
必要に応じてワイヤーフレームも作成していきます。
ワイヤーフレームとは
Web制作者のためのワイヤーフレーム講座「役割と考え方」編
※実際にクライアントさんとやり取りしているものです。
この段階でだいたいのレイアウトなどを作ってしまうことが多いですが、
さらに詳細を詰める場合は、さらに細かなワイヤーフレームを作成したりして、具体的にしていきます。
こういうものを作成しながら、ページ内の各コンテンツの順番をどうするとか、
このページからこのページに遷移はしやすいかとか、
このページに多く誘導したい、そのためにはどういうレイアウトにするかとか、
バナーの位置、ボタンの位置、画像の位置、
はたまた、アニメーションを入れるのか入れないのか、
会員制サイトにする場合はどのような仕組みにするのか、
新規会員の獲得のためのレイアウトはどれが一番効果的なのか…
などなど、詳細に決めていきます。
この辺があやふやだと、実際デザインに入るときに、
ここどうする？
え、これ何なの？
みたいなことが多発します。
そうです。
ページはできてはいませんが、この段階でサイトのコンテンツ内容や仕組み、入れたいスクリプト等が決まっていないとデザインとても困ります。
３.構成やワイヤーフレームをもとにデザインを起こす
構成がしっかり決まっていれば、デザインの時に気を付けるのは、
やはり、いかにユーザビリティの高いデザインにするかだと思います。
ウェブの世界のトレンドも年々変わってきているので、今、求められているデザインというものもあります。
構成に沿って、それらのトレンドも取り入れつつ、デザインをしていく必要があります。
この流れを踏まえたうえで、デザインする前に必要な知識を考える
上で述べた流れを見て、こう思った方も多いかともいます。
デザインの段階でトレンドを取り入れても、
構成がトレンドに沿っていないと矛盾が生まれるのではないか？
そうです。
デザインする前の構成の段階で、現在のデザインのトレンドがわかっていないと、
結局いいデザインにならないんです。
特にワイヤーフレームを作成する場合に、現在のデザイントレンドを見据えたレイアウトを考える必要があります。
また、どんなアニメーションがウケているのか、
スクリプトなどはどんなものがあるのか
等といった、「動き」の部分も理解したうえでサイトを構成していく必要があります。
つまりデザインに入る前に必要な事は…
- しっかりとしたページ構成を作る
- 現在トレンドとなっているウェブサイトのレイアウトはどんなものなのかを知る
- 同じくトレンドとなっているカラーやアニメーションはじめとしたスクリプト関係は何があるか知る
これらが必要になってきます。
でもそれだけじゃないんです
実はほかにもデザインする前に気にしてほしいことがあります。
それは「コーディングする際にどうなるか」です
具体的に言うと、
- ヘッダー・フッター・サイドバーなどの共通部分
- コンテンツの見出し部分（h1～h7）
- 更新していく記事内のレイアウトやその中身（ｐ、ul、ol、blockquote…等）
といった、コーディングをする際に共通して使用する部分や、
複数ページにわたって、ページのコンテンツ内容は違うが、基本テンプレートは同じになる構造のページだったり。
そういった共通するいわばテンプレート部分がサイト作成の場合出てくるので、
それら全体のデザインバランスを考えることが必要になってきます。
ですので、どういう部分がテンプレートに該当するのかをデザインする前に頭に入れておく必要があります。
※テンプレートとなる部分の一例
また、アニメーションなどに関しては、静止画で動画の動きを伝えるのは難しいので、
アニメーションなどの担当者との連携も必要となってくるかと思いますが、
こちらも動きによって変化する部分等も踏まえてデザインすることが必要になってきます。
レスポンシブの場合は、極端に並びが変わらないように
クライアントがレスポンシブサイトを求めている場合は、
適合性がなくなるような大きなデザインの変更や並びの変更は無いようにした方がユーザーが混乱しにくいです。
画面が縦長・横長、の違いがあるので、
どうしても動かす部分というのは出てくると思います。
また、ある程度の並びの変更などはコーディングでも対応できますが…
レスポンシブの場合は、単純にスマホページとパソコンページが分かれているのと違い、
パソコンのブラウザを可変しただけでもスマホ版のページが見れてしまいます。
その段階で、あまりにも大きな変化があると、ユーザーの使い勝手が悪くなる可能性が高いので、
なるべく避けた方がいいのではないかという私の見解です。
デザインするだけでもいろんなところにかかわっている
「ホームページをデザインしてください。」
と依頼されたときは、デザインの知識だけでなく、ページの構成や掲載コンテンツの把握、
また、コーディングはできなくていいので、ウェブページで何ができるのか、どのような仕組みになっているのか
といったことは最低限知ったうえでデザインするとよりよいデザインができると思います。