【webサイトができるまで⑧】デザイン作成その２
記事コラム
こんにちは、Leycoです。
普段はwebページ制作を通じて、お客様の商品やサービスをより多くの人へ届けるお手伝いをしています。
（webページとは、ホームページやLP全般のことを指します）
今回、webページ制作に関するお悩みやギモンを持っている方が多いことに気づき、こちらのブログを立ち上げました。
この記事では次のような方を対象に作っています。
・「webページに興味はあるけど、準備とか大変そう」とあきらめたことがある
・webサイトを作ったほうがいいとは思うけど、webに関する知識があまりなくて、使われている言葉も意味がわからない
「自分にあてはまるかも……」と思われた方は、ぜひ最後まで読んでみてください。
今回は「webサイトができるまで」の８回目です。
【webサイトができるまで⑧】ページ全体のデザイン作成
一般的にwebサイトは、次のような手順で作成されます。
今回は、「【３】デザイン作成」の最終回として、ページ全体のデザインに関してのお話です。
はじめに：webページは「見やすく」「飽きさせない」デザインを目指しましょう
webページを最後まで読んでもらうためには、見やすいことが大切です。
見やすいとは、「統一感がある」「内容が一目でわかる」と言い換えることができるかと思います。
一方、見やすいとしても同じようなデザインの繰り返しでは、見る方は飽きてしまいます。
そのため、統一感だけではなく、変化をつけることも大切です。
「飽きさせない」工夫としては、いくつかのレイアウトのパターンを組み合わせる、動きをつけるなど色々あります。
今回は「見やすい」デザイン作りのポイントを３つご紹介します。
【見やすいページデザインのポイント１】デザインの４原則を守りましょう
webページに限らず、デザインに迷ったときに必ず使うのが「デザインの４原則」。
・「近接」
・「整列」
・「対比」
・「反復」
の４つになります。
それぞれの例を挙げますので、ご覧ください。
上がNG例、下がOK例です。
それぞれ、場所を変えただけですが、一目でわかりやすくなりました。
何か見づらいな、と感じたら、まずこの４原則を思い出してみましょう。
【見やすいページデザインのポイント２】トンマナを揃えましょう
トンマナとは、「トーン＆マナー」の略で、デザインのイメージを表しています。
トンマナがバラバラだと、全体が統一感がなく、ちぐはぐな印象を見る人に与えてしまうので、そろえることが大切です。
大きなポイントとしては、
・色
・フォント（字体）
・形
があります。
トンマナは商品イメージやペルソナ（購入者のイメージ）をもとにして決定。
トンマナに合った色やフォントなどを選ぶだけではなく、使う画像やイラストのテイストも合わせることが大切です。
【見やすいページデザインのポイント３】余白を意識しましょう
「デザインの４原則も守っていて、トンマナも統一されているのに、何か見づらい」というときには、余白が合っていないことがあります。
下の２つの図をご覧ください。
右のデザインのほうが、左よりも見やすいのではないでしょうか。
左は、それぞれの余白の大きさが統一されていません。
それに対して、右では余白ルールを作って、テキストや図形を配置しています。
余白の部分に、色をつけたものが次の図です。
右のデザインで、同じ色の余白が同じサイズです。
このように、余白の大きさを決めておくと、全体が見やすくなります。
まとめ：まずは「見やすく」、そして「飽きさせない」デザインを目指しましょう！
ここまで、webページのデザインをご紹介してきました。
実際のところ、デザイナーさんたちは他にも色々なことに気をつけながらデザインを作成しています。
ただ、今回ご紹介したことは、webページだけではなく、たとえばスライド１枚作成でも使える知識かと思います。
ぜひ、何かを作るときに活用してみてください。
ここまでご覧いただきまして、ありがとうございました。
webサイトを作るときに少しでもお役に立てればうれしいです。
webデザインに関しては、次のようなサービスを出品しております。
よろしければこちらもご覧ください。
