破るとダサくなる…デザインをするときに守りたい10のルール

文字や画像、背景の色など、WEBデザインは数多くの要素から成り立っています。

初心者のうちは考えることが多くてなかなか進まない、なんてことがあるかもしれませんね。

「やっぱり自分には無理かな……」
「何か特別なセンスが必要なのかな……」

悩み続けているとこんな考えも浮かんでしまいます。

しかしWEBデザインは、センスで決まるものではないので安心してください!

実は、WEBサイトの多くはルールに従ってデザインされているのです。

決められたルールに沿って作業できれば、スムーズに質の高いデザインを生み出せますよ。

そこでこの記事では、初心者のうちから知っておきたいWEBデザインの基本的なルールをまとめました。

またWEBデザイナーとして一層ステップアップできる普段の考え方についてもお伝えします。

今より高品質なものをサクサク作りたい人は、デザインの基本ルールと考え方をぜひチェックしてみてください!

▼ ▼ 期間限定で無料プレゼント ▼ ▼

WEBデザインを勉強したいけど、やり方がイマイチわからない、、、。そんな方のためにプロがおすすめする7つの最強勉強法をまとめました。ぜひ手に取って勉強をするときの参考にしてくださいね。

無料のうちに受け取る

スムーズな作業には、準備が欠かせない!

さっそくWEBデザインの基本ルールをお伝えしたいところですが、それに先駆けてやっておくべき2点を学んでおきましょう。

お仕事が入ったからといって、いきなりデザイン作業に入ってしまうのはNGです。

まずはリサーチして、よく考えていく工程が必要になってきます。

遠回りに感じるかもしれませんが事前準備をしっかりすることで、むしろ作業が早く進み、クライアントさんの求めるデザインに近づきますよ。

WEBデザインの基本！WEBデザイン用語を覚えよう

WEBデザインの基礎を理解するうえで、まずは主要な用語を覚えておくことが重要です。

各パーツの役割や配置を把握することで、ユーザー体験を向上させるデザインの組み立てが可能になりますよ。

以下に、WEBデザインに欠かせない基本的な用語とその説明をまとめた表を紹介します。

この表を活用して、WEBサイトの構造や要素の役割をしっかり理解しておきましょう！

「何のため?」目的をハッキリさせる

WEBデザインは自分を表現するアートではなく、誰かの問題を解決する手段です。

これを踏まえて、自分が関わるWEBサイトは何を目的として作られるのかを明確にしておきましょう。

以下のように、WEBサイトによってゴールはさまざまです。

商品・サービスを買ってもらう
自社商品の認知度アップ
見込み客の獲得

このようにWEBサイトが目的とする成果のことを「コンバージョン（CV）」といいます。

コンバージョン設定があいまいなサイトはデザインの完成度も上がらず、修正の手間が生まれてしまいます。

そのためクライアントさんやディレクターさんとは、どんな人をターゲットとして何を達成したいかを確認し合い、共有しておきましょう。

目的がハッキリすれば、目指す雰囲気や強調したいメッセージが見えてきます。

競合他社のサイトをチェックしておく

WEBサイトの目的を確認したら、同じような商品・サービスを扱うサイトも見ておきましょう。

書体、配色、背景画像でどんな見せ方をしているのか。

複数のサイトを見ると共通点が浮かび上がり、それがデザインの参考になります。

そして他社のサイトを見ることには、自分が担当する商品・サービスの強みを見極められるというメリットもあります。

他社にはない強みがあった場合は、それを強く打ち出して差別化する方針が生まれますね。

その一方で同じような特徴だったとしても、「じゃあどういう見せ方をしていくか?」と考えるきっかけになるでしょう。

具体的な方法として、想定されるキーワードで検索してみます。

検索で上位表示されるサイトはもちろん要チェックです。

それ以外にも商品内容・ターゲット・解決する問題が同じなのかそうでないかも確認しておきましょう。

サイトを見たらその都度、商品や見せ方についてどう感じたのか記録しておくのも有効です。

WEBデザインの基本ルールをおさえよう!

デザインの目的をハッキリさせて競合他社をリサーチしたら、いよいよ作業に入っていきます。

その指針となるルールをここから学んでいきましょう。

読みやすく具体的なアクションにつなげられるサイトは、以下のルールに沿ってデザインされています。

あらかじめ定められたルールを念頭に置くことで、統一感あるデザインとなるのです。

さらに「ここどうしようかな……」と考えるタイムロスを減らす効果もあるので、ぜひ取り入れてください!

ユーザービリティを最優先しよう

Webデザインにおいて、見た目の美しさやトレンドも重要ですが、何より大切なのはユーザーが快適に利用できる「ユーザービリティ（使いやすさ）」です。

デザインがどれだけおしゃれでも、ユーザーが迷ったり、使いにくさを感じたりすると、そのデザインは効果を発揮しません。

ユーザービリティを高めることで、訪問者がストレスなくサイトを利用でき、結果的にコンバージョン率の向上やリピート率アップにつながります。

例えば、メニューやナビゲーションはシンプルでわかりやすくすることが基本です。

ユーザーが目的のページや情報にすぐアクセスできるように構成されていなければ、離脱の原因となってしまいます。

また、視覚的な階層構造を設けることで、ページ全体の情報が整理され、ユーザーにとっての「見やすさ」も向上します。

具体的には、見出しやボタン、アイコンの大きさや配置に一貫性を持たせることで、視覚的なガイドとして機能します。

さらに、デザインのアクセシビリティにも配慮が必要です。

文字サイズや背景色とテキストのコントラストを適切に設定し、視覚に制約のあるユーザーや、異なるデバイスでも視認性が保たれるように心がけましょう。

モバイルフレンドリーを意識しよう

近年、スマートフォンからのアクセスが増加しており、モバイルフレンドリーなデザインはWebサイトに欠かせない要素です。

どれだけPC画面で美しいデザインでも、スマホで閲覧したときにレイアウトが崩れていたり、操作が難しいと感じたりする場合、ユーザーはストレスを感じ、離脱してしまう可能性が高くなります。

そのため、モバイル端末でも快適に操作できるレスポンシブデザインを導入することが重要です。

モバイルフレンドリーなデザインを実現するには、画面サイズに応じてレイアウトが自動的に調整される仕組みを取り入れると効果的です。

また、スマホでの操作を意識した要素も重要で、例えばボタンのサイズを十分に大きくすることで、指でタップしやすくなります。

テキストも小さすぎると読みにくくなるため、適切なフォントサイズを設定しましょう。

さらに、余白や間隔を活用して情報を整理し、スクロールやタップが自然に行えるように配慮することも大切です。

モバイル対応を意識したデザインにより、ユーザーの満足度が向上し、滞在時間やリピート率の増加にもつながります。

多くのユーザーがスマートフォンからアクセスする今、モバイルフレンドリーを意識しないデザインは「ダサい」と感じられる原因にもなりかねません。

SEOを意識しよう

Webデザインにおいて、「見た目が良い」だけでは十分ではありません。

ユーザーに見てもらえるサイトを作るためには、検索エンジンでの上位表示を狙う「SEO（検索エンジン最適化）」を意識したデザインが必要です。

SEOはテキストコンテンツだけでなく、サイト全体の構造やデザインにも深く関わっており、適切に対策を行うことで検索エンジンからの流入を増やし、より多くのユーザーにアクセスしてもらうことができます。

まず、見出しタグ（H1、H2など）を使った情報の階層化は基本です。

適切な見出しタグを設定することで、検索エンジンがコンテンツの内容を理解しやすくなり、SEO効果を高められます。

また、画像には必ず「alt属性」を設定し、画像の内容を説明するテキストを加えることで、視覚障害のあるユーザーに配慮するとともに、検索エンジンにもコンテンツの情報を伝えやすくなります。

さらに、ページの読み込み速度もSEOに影響するため、画像や動画などのメディアファイルを適切に圧縮して表示速度を改善しましょう。

ユーザーが快適に閲覧できることはSEOの観点からも重要であり、ページ速度の向上は離脱率の低下にもつながります。

SEOを意識したデザインを取り入れることで、検索エンジンからの評価も向上し、ユーザーにとっても見やすく役立つサイトに仕上がります。

デザインとSEOのバランスを取ることが、見た目も機能も充実した「ダサくない」サイトの条件です。

どんな雰囲気を目指すのかを決めよう

WEBサイトで大事なこととして、「トーン＆マナー（トンマナ）」が挙げられます。

トンマナは、デザインの一貫性を保つためのルールです。

このトンマナを必ず設定し、出来上がりの雰囲気を想定しておきましょう。

トンマナに沿ってデザインすることで、ユーザーさんはWEBサイトに載った情報内容・コンセプトを理解しやすくなります。

さらに商品・サービスにふさわしい雰囲気を演出できれば、ブランド感を出したり購入・申し込みへつなげたりできます。

ポップな感じやエレガントな感じなど、どんな雰囲気にするべきかは商品内容・ターゲットの年齢・性別などによって異なります。

上でお伝えした、クライアントさんや競合他社へのリサーチがここで役立ちますね。

仕入れた情報をもとに方向性を決めていきましょう。

縦・横の適切なサイズを知っておこう

画像など各要素のレイアウトにあたって、ページ幅いっぱいより少し狭くしておく必要があります。

大きな理由としては、視線を動かすユーザーさんの負担を減らすためです。

まず横幅のサイズは、1000px以内での配置を心がけましょう。

1920×1080や2560×1440など、製品によってモニターの大きさは異なります。

自分が作業するパソコン画面いっぱいに配置してしまうと、他の人が見たときに見切れてしまうなんてことも……。

またユーザーさんがいつも画面いっぱいにブラウザを開いてくれるとは限りません。

縮小したウィンドウを、複数同時に見ることも考えられます。

小さいウィンドウでの閲覧も視野に入れて、幅は控えめにする必要があるのです。

そして縦幅、具体的にファーストビューを取り上げます。

ファーストビューとはWEBサイトを開いて最初に見る部分であり、スクロールなしで表示される部分です。

このファーストビューも幅は1000px以内に収めましょう。

雰囲気や大事な情報をちゃんと伝えるため、スペースに余裕をもっておくことを意識します。

レイアウトを組む手順を守ろう

各要素のレイアウトは順番を守っておこないましょう。

ここでは、レイアウトのはじめに取り掛かる「ワイヤーフレーム」というものを主に解説していきます。

ワイヤーフレームはレイアウトの設計図の役割をもちます。

図形を使用して、どこにどのような情報を配置するのかを決めてください。

ワイヤーフレームを作ることには、要素の過不足や視線誘導のやり方などを確認できるというメリットがあります。

さらにチームで作業する場合、メンバーに共有することで意志疎通が容易になります。

注意点はあまり凝りすぎないこと。

ワイヤーフレームはあくまでも設計図であり、デザインの情報を整理するものです。

そのため、できるだけシンプルな線や文字を使っていきましょう。

案件によってはディレクターさんがワイヤーフレームを渡してくれます。

そのときは念のため、デザイナー側がワイヤーフレームをどこまで変えていいのかを確認しておきましょう。

さてワイヤーフレームを作ったら、配置方法をより具体的にしていきます。

インパクトに強弱をつけるため、メインビジュアルなどユーザーさんの記憶に残らせたい要素は大きく、それ以外の要素は小さくしていきます。

また情報量が多いページでは、同じ配置を繰り返すことを意識しましょう。

大手ショッピングサイトでは多種多様な商品が掲載されているにもかかわらず、あまり疲れを感じさせませんよね。

これは同じ配置の繰り返しによって、脳への負担が軽くなっているおかげなのです。

以上のように、まずおおまかな配置の計画を立て、そこからだんだんと細かい調整を加えるようにしていってください。

あわせて読みたい

【基本から実例まで】レイアウトデザインはこれだけ読めばOK！ WEBサイトにおいて、とても重要なレイアウト。 どんなにおしゃれなテイストでデザインができていたとしても、レイアウトがうまくできていないと、途端に古臭くてかっこ…

読みやすい書体を心がけよう

文字を入力するときには明朝体やゴシック体など、いろいろな書体(フォント)を選べます。

同じ文章でもフォントによって印象や見やすさが変わるので、注意してください。

WEBの文章は、「シンプルで読みやすい」が基本です。

クセがなく読みやすいフォントを選びましょう。

メイリオ、ヒラギノ角ゴシック、游ゴシックがおすすめです。

ちなみに明朝体は、画面の解像度によっては潰れて見えてしまいます。

明朝体を使う場合、フォントサイズや太さの調整が必要なので注意しておいてください。

ここまでシンプルなフォントの使用を推奨してきましたが、見出しは例外です。

見出しは最初に目にする部分であり、ユーザーさんの興味を引けるかどうかを左右します。

本文と見出しが全部同じフォントだと、メリハリがなくて読む気をなくしちゃいますよね？

そのためサイトの雰囲気やターゲットに合わせて、見出しでは特徴のあるフォントを使っていきましょう。

注意点として使うフォントは2種類、多くても3種類におさえておきましょう。

フォントが多いとそれぞれの印象が薄くなり、サイトの統一感も失われてしまうからです。

ここぞという場面だけフォントを変えれば、読みやすさとインパクトを両立できますよ。

WEBデザインに使える定番フォントはこちらの記事で解説しています。

あわせて読みたい

WEBデザインで誰もが使う定番フォント16選！基礎知識も解説します WEBサイトにおいて、本文の読みやすさは非常に重要です。また、フォントが持つ印象はサイト全体の印象を大きく左右します。 とはいえ、種類がありすぎてどれを選べばい…

世界観に合った色づかいをしよう

WEBサイトで使う色には3種類あります。

背景や余白など大部分を占める「ベースカラー」、キャッチコピーなど強調したい部分に使う「メインカラー」、そして変化をつける「アクセントカラー」です。

目指す雰囲気に合うよう、これらの配色にも気をつけていきましょう。

上でお伝えしたトンマナを参考にすると、方針がスムーズに決まります。

使用する色の数を増やせばポップで楽しい雰囲気に、反対に少なくすればクールな印象を与えられます。

まずは何色まで使うかを決めておきましょう。

あらかじめ制限を設けておくことで色を選びやすくなりますよ。

そして色を選ぶときは、その色が与えるイメージを考慮していきます。

例えば赤や黄色、オレンジなどの暖色は、ポジティブで明るい印象や温かみを感じさせてくれますよね。

一方で青、青緑、青紫などの寒色は、知性やクールさを醸し出したり、信頼感や誠実感を打ち出したいときに有効です。

色の使い分けに自信がない人は、他のデザインを見ると勉強になります。

検索結果が多く、参考になるものが見つかりやすいPinteretがおすすめですよ。

Pinterest

また、色についてはコチラの記事も参考にしてみてくださいね。
▶︎初心者でもわかる！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デザインが学べる人気ブログ27選｜2024 WEBデザインの基礎学習やインプットには、ブログがおすすめです。 ここ数年で、デザインのTipsやWEBデザイナーの働き方を発信するブログが急増しました。 デザイン系の…

自分のデザインには、必ず根拠をもつ

すでに述べた通り、WEBデザインはしっかりとした準備とルールに沿って進めていくものです。

つまりすべての工程には必ず、明確な根拠が伴います。

「なぜこうするのか」と、常に自問自答して根拠あるデザインにすることが大切です。

納品時にクライアントさんから説明を求められることもあります。

そのときに自信をもって答えられるレベルまで、根拠を言語化しておきましょう。

そして考えるときは、いろいろな可能性を検討するのも大事です。

例えばサイトのメインカラーに赤を選ぶとします。

このとき「なぜ赤を選んだのか」だけでなく、「なぜ他の色ではダメなのか」も追求しておきましょう。

赤といっても、真っ赤、オレンジがかった赤、少し暗めの赤など、候補はたくさんありますよね？

他の候補に関する指摘があったとき、「そちらも考慮しましたが、こういう理由で今回はこうしました」と言えると説得力が増します。

少しヒヤリとする話だったかもしれませんが、そこまで身構えなくても大丈夫です。

そのサイトの目的を共有しWEBデザインのルールに従ったのなら、それは立派な根拠となります。

まとめ

WEBデザイナーになったばかりで自信がない時期でも、「こうすればうまくいく」という法則性を知っていると安心ですよね！

この記事では、WEBデザインの基本ルールや日常的な考え方をご紹介してきました。

サイトの目的達成とユーザーさんの快適さを両立できるよう、フォントや配色、余白などに気を配っていきましょう。

ルールに従って地道に取り組めば成長できます。

その先に待ってるのは、確実に自分で稼いでいける未来です。

そのために、WEBデザインの基本ルールはしっかりおさえてくださいね。

あわせて読みたい

WEBデザイン・サイト用語50選｜何この言葉…をスッキリ解決 WEBデザイナーを目指して勉強している人にとって、大きな壁の1つがWEB業界特有の専門用語です。どのような業界でもそうですが、WEB業界にも専門用語が多くあります。 こ…