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