あなたが普段目にするバナーや
WEBサイトのデザインは、
実は “あるルール”に
乗っ取って作られているんです。
つまり、WEBデザインはセンスがなくても
ルールを守れば
“誰でもできる”ということなんです。
では、そのルールとは何か。
今回は未経験の方に絶対に押さえてほしい
デザインの基本ルールをご紹介します。
さらに、日常生活にも取り入れられる
WEBデザインのレベルアップ方法を
お伝えします。
① どんな雰囲気を目指すのか決めよう
WEBサイトで大事なこととして、「トーン＆マナー（トンマナ）」が挙げられます。
トンマナは、デザインの一貫性を保つためのルールです。
このトンマナを必ず設定し、出来上がりの雰囲気を想定しておきましょう。
トンマナに沿ってデザインすることで、ユーザーさんはWEBサイトに載った情報内容・コンセプトを理解しやすくなります。
さらに商品・サービスにふさわしい雰囲気を演出できれば、ブランド感を出したり購入・申し込みへつなげたりできます。
ポップな感じやエレガントな感じなど、どんな雰囲気にするべきかは商品内容・ターゲットの年齢・性別などによって異なります。
上でお伝えした、クライアントさんや競合他社へのリサーチがここで役立ちますね。
仕入れた情報をもとに方向性を決めていきましょう。
② 縦・横の適切なサイズを知っておこう
画像など各要素のレイアウトにあたって、ページ幅いっぱいより少し狭くしておく必要があります。
大きな理由としては、視線を動かすユーザーさんの負担を減らすためです。
まず横幅のサイズは、1000px以内での配置を心がけましょう。
1920×1080や2560×1440など、製品によってモニターの大きさは異なります。
自分が作業するパソコン画面いっぱいに配置してしまうと、他の人が見たときに見切れてしまうなんてことも……。
またユーザーさんがいつも画面いっぱいにブラウザを開いてくれるとは限りません。
縮小したウィンドウを、複数同時に見ることも考えられます。
小さいウィンドウでの閲覧も視野に入れて、幅は控えめにする必要があるのです。
そして縦幅、具体的にファーストビューを取り上げます。
ファーストビューとはWEBサイトを開いて最初に見る部分であり、スクロールなしで表示される部分です。
このファーストビューも幅は1000px以内に収めましょう。
雰囲気や大事な情報をちゃんと伝えるため、スペースに余裕をもっておくことを意識します。
③ レイアウトを組む手順を守ろう
各要素のレイアウトは順番を守っておこないましょう。
ここでは、レイアウトのはじめに取り掛かる「ワイヤーフレーム」というものを主に解説していきます。
ワイヤーフレームはレイアウトの設計図の役割をもちます。
図形を使用して、どこにどのような情報を配置するのかを決めてください。
ワイヤーフレームを作ることには、要素の過不足や視線誘導のやり方などを確認できるというメリットがあります。
さらにチームで作業する場合、メンバーに共有することで意志疎通が容易になります。
注意点はあまり凝りすぎないこと。
ワイヤーフレームはあくまでも設計図であり、デザインの情報を整理するものです。
そのため、できるだけシンプルな線や文字を使っていきましょう。
案件によってはディレクターさんがワイヤーフレームを渡してくれます。
そのときは念のため、デザイナー側がワイヤーフレームをどこまで変えていいのかを確認しておきましょう。
さてワイヤーフレームを作ったら、配置方法をより具体的にしていきます。
インパクトに強弱をつけるため、メインビジュアルなどユーザーさんの記憶に残らせたい要素は大きく、それ以外の要素は小さくしていきます。
また情報量が多いページでは、同じ配置を繰り返すことを意識しましょう。
大手ショッピングサイトでは多種多様な商品が掲載されているにもかかわらず、あまり疲れを感じさせませんよね。
これは同じ配置の繰り返しによって、脳への負担が軽くなっているおかげなのです。
以上のように、まずおおまかな配置の計画を立て、そこからだんだんと細かい調整を加えるようにしていってください。
④ 読みやすい書体を心がけよう
文字を入力するときには明朝体やゴシック体など、いろいろな書体(フォント)を選べます。
同じ文章でもフォントによって印象や見やすさが変わるので、注意してください。
WEBの文章は、「シンプルで読みやすい」が基本です。
クセがなく読みやすいフォントを選びましょう。
メイリオ、ヒラギノ角ゴシック、游ゴシックがおすすめです。
ちなみに明朝体は、画面の解像度によっては潰れて見えてしまいます。
明朝体を使う場合、フォントサイズや太さの調整が必要なので注意しておいてください。
ここまでシンプルなフォントの使用を推奨してきましたが、見出しは例外です。
見出しは最初に目にする部分であり、ユーザーさんの興味を引けるかどうかを左右します。
本文と見出しが全部同じフォントだと、メリハリがなくて読む気をなくしちゃいますよね？
そのためサイトの雰囲気やターゲットに合わせて、見出しでは特徴のあるフォントを使っていきましょう。
注意点として使うフォントは2種類、多くても3種類におさえておきましょう。
フォントが多いとそれぞれの印象が薄くなり、サイトの統一感も失われてしまうからです。
ここぞという場面だけフォントを変えれば、読みやすさとインパクトを両立できますよ。
⑤ 世界観に合った色づかいをしよう
WEBサイトで使う色には3種類あります。
背景や余白など大部分を占める「ベースカラー」、キャッチコピーなど強調したい部分に使う「メインカラー」、そして変化をつける「アクセントカラー」です。
目指す雰囲気に合うよう、これらの配色にも気をつけていきましょう。
上でお伝えしたトンマナを参考にすると、方針がスムーズに決まります。
使用する色の数を増やせばポップで楽しい雰囲気に、反対に少なくすればクールな印象を与えられます。
まずは何色まで使うかを決めておきましょう。
あらかじめ制限を設けておくことで色を選びやすくなりますよ。
そして色を選ぶときは、その色が与えるイメージを考慮していきます。
例えば赤や黄色、オレンジなどの暖色は、ポジティブで明るい印象や温かみを感じさせてくれますよね。
一方で青、青緑、青紫などの寒色は、知性やクールさを醸し出したり、信頼感や誠実感を打ち出したいときに有効です。
色の使い分けに自信がない人は、他のデザインを見ると勉強になります。
検索結果が多く、参考になるものが見つかりやすいPinteretがおすすめですよ。
⑥ 余白の心地よさを意識しよう
文章、画像、ボタンなど盛り込みたい要素はたくさんありますが、詰め込み過ぎにならないよう注意が必要です。
たくさんの情報でギュウギュウのサイトは見栄えが悪く、購入・申し込みボタンなど肝心の部分が見つけにくいです。
これではWEBサイトとしての役割を果たせなくなってしまいますね。
快適に閲覧してクリックしてもらえるよう、十分な余白を設けましょう。
余白の大きさですが、WEBデザインで活用されている「8の倍数ルール」に従うのが効果的です。
8の倍数ルールとは余白をはじめ、各コンテンツ幅やボタンの大きさなどいろいろな要素を8の倍数ピクセルで設計するやり方です。
多くのデバイスの解像度は8の倍数なので、いろいろなサイズ基準に合わせた設計がしやすいというメリットがあります。
余白の場合8px、16px、24px、32px、48px、64px、96px、128px、160px、192px、256pxなどを使っていきましょう。
また、柔軟に余白の大きさを変えることも必要です。
余白は均一にするのがセオリーですが、関連した要素を並べるときはあえて少し狭くします。
パッと見てまとまった情報だと認識できれば、そのぶんサイトの内容に集中してもらえます。
⑦ ボタンなど、装飾にもルールを設けよう
WEBサイトには文章や画像のほかに、多くの装飾があります。
装飾のルールも決めてしまったほうがいいでしょう。
ここでは購入・申し込みボタンを例に解説していきます。
ボタンで最も大事なのは、「それがボタンである」と一目見てわかることです。
たとえ商品を気に入ってもクリックする部分がわからなければ、ユーザーさんは使いづらいと感じるでしょう。
カーソルの形で確認できないスマートフォンの場合、より不便に感じて離脱してしまうかもしれません。
そうならないよう、ボタンはしっかり目立たせておきましょう。
影をつけて立体的に見えるようにしておくのが一般的です。
また複数ボタンを配置するとき、理由がなければ仕様を統一しておくのが無難です。
立体的なボタンと平面的なボタンが隣り合わせにあったら混乱してしまいますよね？
もし区別したいのであれば、大きさや色を変えたりするくらいに留めておいたほうがいいでしょう。
センスを磨けて信頼もされる！２つの習慣
① 日頃からたくさんのサイトを見て、学ぶ
いいものを作るには、日々のインプットが欠かせません。
国内外問わず、他の人や企業のWEBサイトを見ておく習慣をつけましょう。
継続していろいろなデザインを見ることには、さまざまなメリットがあります。
例えば、レイアウトや色づかいにおける定番・流行を把握できる点が挙げられます。
さらにポップなものから堅いものまで勉強すると、アイデアの引き出しが増える効果も期待できます。
またWEBデザイナーならぜひ見ておきたいのが、国内外のデザイントレンドを配信している「Japan design net(JDN)」というサイトです。
企業やデザイナーさんへのインタビュー項目があるので、お仕事への姿勢や考え方を学べます。
その他にはSNSを活用するのもいいでしょう。
TwitterやInstagramもいいですが、特におすすめなのはデザイナーさん向けの「Dribbble」です。
気になるデザイナーさんのアカウントはフォローしておきましょう。
② 自分のデザインには、必ず根拠をもつ
すでに述べた通り、WEBデザインはしっかりとした準備とルールに沿って進めていくものです。
つまりすべての工程には必ず、明確な根拠が伴います。
「なぜこうするのか」と、常に自問自答して根拠あるデザインにすることが大切です。
納品時にクライアントさんから説明を求められることもあります。
そのときに自信をもって答えられるレベルまで、根拠を言語化しておきましょう。
そして考えるときは、いろいろな可能性を検討するのも大事です。
例えばサイトのメインカラーに赤を選ぶとします。
このとき「なぜ赤を選んだのか」だけでなく、「なぜ他の色ではダメなのか」も追求しておきましょう。
赤といっても、真っ赤、オレンジがかった赤、少し暗めの赤など、候補はたくさんありますよね？
他の候補に関する指摘があったとき、「そちらも考慮しましたが、こういう理由で今回はこうしました」と言えると説得力が増します。
少しヒヤリとする話だったかもしれませんが、そこまで身構えなくても大丈夫です。
そのサイトの目的を共有しWEBデザインのルールに従ったのなら、それは立派な根拠となります。
最後に
このページでは、
WEBデザインの基本ルールをお伝えしましたが、
実際どうやってWEBデザインを
学べばいいのかわからないですよね。
そんなあなたに向けて
無料のセミナーを開催中です。
このセミナーでは、
WEBデザインの最短学習法の秘訣のほかに、
- 未経験からWEBデザイナーに
なった方の成功事例 - WEBデザイナーに求められる
作品のクオリティ - WEBデザイナーのお給料事情
などもお伝えしているので、
WEBデザイナーに少しでも興味ある方は
下のボタンをクリックして
参加してみてくださいね。
＼参加費無料！席が埋まりやすいので、お早めに／
