文字や画像、背景の色など、WEBデザインは数多くの要素から成り立っています。初心者のうちは考えることが多くてなかなか進まない、なんてことがあるかもしれませんね。悩み続けているとこんな考えも浮かんでしまいます。WEBデザインは、センスで決まるものではないので安心してください!実は、WEBサイトの多くはルールに従ってデザインされているのです。決められたルールに沿って作業できれば、スムーズに質の高いデザインを生み出せますよ。そこでこの記事では、初心者のうちから知っておきたいWEBデザインの基本的なルールをまとめました。WEBデザイナーとして一層ステップアップできる普段の考え方についてもお伝えします。【お知らせ】2000名以上の人生を変えるキッカケになった「好きなことで生きていく!WEBデザイナーという働き方セミナー」では、WEBデザイン業界の「最新」ウラ事情WEBデザイナーにおける「未経験OK」のワナWEBデザインの学習で失敗した「しくじり先生」の話などをお伝えしています。「WEBデザインの学び方がわからない」「WEBデザイン業界について知りたい」という方はぜひご参加ください。>>詳しくはこちらスムーズな作業には、準備が欠かせない!さっそくWEBデザインの基本ルールをお伝えしたいところですが、それに先駆けてやっておくべき2点を学んでおきましょう。お仕事が入ったからといって、いきなりデザイン作業に入ってしまうのはNGです。リサーチして、よく考えていく工程が必要になってきます。遠回りに感じるかもしれませんが事前準備をしっかりすることで、むしろ作業が早く進み、クライアントさんの求めるデザインに近づきますよ。「何のため?」目的をハッキリさせるWEBデザインは自分を表現するアートではなく、誰かの問題を解決する手段です。これを踏まえて、自分が関わるWEBサイトは何を目的として作られるのかを明確にしておきましょう。以下のように、WEBサイトによってゴールはさまざまです。商品・サービスを買ってもらう自社商品の認知度アップ見込み客の獲得このようにWEBサイトが目的とする成果のことを「コンバージョン(CV)」といいます。コンバージョン設定があいまいなサイトはデザインの完成度も上がらず、修正の手間が生まれてしまいます。そのためクライアントさんやディレクターさんとは、どんな人をターゲットとして何を達成したいかを確認し合い、共有しておきましょう。目的がハッキリすれば、目指す雰囲気や強調したいメッセージが見えてきます。どんな見せ方をしているのか。複数のサイトを見ると共通点が浮かび上がり、それがデザインの参考になります。他社のサイトを見ることには、自分が担当する商品・サービスの強みを見極められるというメリットもあります。他社にはない強みがあった場合は、それを強く打ち出して差別化する方針が生まれますね。その一方で同じような特徴だったとしても、「じゃあどういう見せ方をしていくか?」と考えるきっかけになるでしょう。具体的な方法として、想定されるキーワードで検索してみます。検索で上位表示されるサイトはもちろん要チェックです。それ以外にも商品内容・ターゲット・解決する問題が同じなのかそうでないかも確認しておきましょう。サイトを見たらその都度、商品や見せ方についてどう感じたのか記録しておくのも有効です。無料でWEBデザインを学びませんか?WEBデザイン基礎学習の約40時間が節約できちゃう5大特典をプレゼント中です。\受け取りは簡単30秒!/まずはこちらのボタンをクリックして詳細をご確認ください。無料で特典を受け取るWEBデザインの基本ルールをおさえよう!デザインの目的をハッキリさせて競合他社をリサーチしたら、いよいよ作業に入っていきます。その指針となるルールをここから学んでいきましょう。読みやすく具体的なアクションにつなげられるサイトは、以下のルールに沿ってデザインされています。定められたルールを念頭に置くことで、統一感あるデザインとなるのです。「ここどうしようかな......」と考えるタイムロスを減らす効果もあるので、ぜひ取り入れてください!どんな雰囲気を目指すのかを決めようWEBサイトで大事なこととして、「トーン&マナー(トンマナ)」が挙げられます。マナは、デザインの一貫性を保つためのルールです。このトンマナを必ず設定し、出来上がりの雰囲気を想定しておきましょう。マナに沿ってデザインすることで、ユーザーさんはWEBサイトに載った情報内容・コンセプトを理解しやすくなります。商品・サービスにふさわしい雰囲気を演出できれば、ブランド感を出したり購入・申し込みへつなげたりできます。ポップな感じやエレガントな感じなど、どんな雰囲気にするべきかは商品内容・ターゲットの年齢・性別などによって異なります。上でお伝えした、クライアントさんや競合他社へのリサーチがここで役立ちますね。仕入れた情報をもとに方向性を決めていきましょう。縦・横の適切なサイズを知っておこう画像など各要素のレイアウトにあたって、ページ幅いっぱいより少し狭くしておく必要があります。大きな理由としては、視線を動かすユーザーさんの負担を減らすためです。横幅のサイズは、1000px以内での配置を心がけましょう。1920×1080や2560×1440など、製品によってモニターの大きさは異なります。自分が作業するパソコン画面いっぱいに配置してしまうと、他の人が見たときに見切れてしまうなんてことも......。ユーザーさんがいつも画面いっぱいにブラウザを開いてくれるとは限りません。縮小したウィンドウを、複数同時に見ることも考えられます。小さいウィンドウでの閲覧も視野に入れて、幅は控えめにする必要があるのです。縦幅、具体的にファーストビューを取り上げます。ファーストビューとはWEBサイトを開いて最初に見る部分であり、スクロールなしで表示される部分です。このファーストビューも幅は1000px以内に収めましょう。雰囲気や大事な情報をちゃんと伝えるため、スペースに余裕をもっておくことを意識します。レイアウトを組む手順を守ろう各要素のレイアウトは順番を守っておこないましょう。ここでは、レイアウトのはじめに取り掛かる「ワイヤーフレーム」というものを主に解説していきます。ワイヤーフレームはレイアウトの設計図の役割をもちます。図形を使用して、どこにどのような情報を配置するのかを決めてください。ワイヤーフレームを作ることには、要素の過不足や視線誘導のやり方などを確認できるというメリットがあります。チームで作業する場合、メンバーに共有することで意志疎通が容易になります。注意点はあまり凝りすぎないこと。ワイヤーフレームはあくまでも設計図であり、デザインの情報を整理するものです。そのため、できるだけシンプルな線や文字を使っていきましょう。案件によってはディレクターさんがワイヤーフレームを渡してくれます。そのときは念のため、デザイナー側がワイヤーフレームをどこまで変えていいのかを確認しておきましょう。ワイヤーフレームを作ったら、配置方法をより具体的にしていきます。インパクトに強弱をつけるため、メインビジュアルなどユーザーさんの記憶に残らせたい要素は大きく、それ以外の要素は小さくしていきます。情報量が多いページでは、同じ配置を繰り返すことを意識しましょう。大手ショッピングサイトでは多種多様な商品が掲載されているにもかかわらず、あまり疲れを感じさせませんよね。これは同じ配置の繰り返しによって、脳への負担が軽くなっているおかげなのです。以上のように、まずおおまかな配置の計画を立て、そこからだんだんと細かい調整を加えるようにしていってください。WEBサイトにおいて、とても重要なレイアウト。どんなにおしゃれなテイストでデザインができていたとしても、レイアウトがうまくできていないと、途端に古臭くてかっこ...読みやすい書体を心がけよう文字を入力するときには明朝体やゴシック体など、いろいろな書体(フォント)を選べます。同じ文章でもフォントによって印象や見やすさが変わるので、注意してください。WEBの文章は、「シンプルで読みやすい」が基本です。クセがなく読みやすいフォントを選びましょう。メイリオ、ヒラギノ角ゴシック、游ゴシックがおすすめです。ちなみに明朝体は、画面の解像度によっては潰れて見えてしまいます。明朝体を使う場合、フォントサイズや太さの調整が必要なので注意しておいてください。ここまでシンプルなフォントの使用を推奨してきましたが、見出しは例外です。見出しは最初に目にする部分であり、ユーザーさんの興味を引けるかどうかを左右します。本文と見出しが全部同じフォントだと、メリハリがなくて読む気をなくしちゃいますよね?そのためサイトの雰囲気やターゲットに合わせて、見出しでは特徴のあるフォントを使っていきましょう。注意点として使うフォントは2種類、多くても3種類におさえておきましょう。フォントが多いとそれぞれの印象が薄くなり、サイトの統一感も失われてしまうからです。ここぞという場面だけフォントを変えれば、読みやすさとインパクトを両立できますよ。WEBデザインに使える定番フォントはこちらの記事で解説しています。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サイトを見ておく習慣をつけましょう。継続していろいろなデザインを見ることには、さまざまなメリットがあります。レイアウトや色づかいにおける定番・流行を把握できる点が挙げられます。ポップなものから堅いものまで勉強すると、アイデアの引き出しが増える効果も期待できます。net(JDN)」というサイトです。企業やデザイナーさんへのインタビュー項目があるので、お仕事への姿勢や考え方を学べます。その他にはSNSを活用するのもいいでしょう。TwitterやInstagramもいいですが、特におすすめなのはデザイナーさん向けの「Dribbble」です。気になるデザイナーさんのアカウントはフォローしておきましょう。WEBデザインの基礎学習やインプットには、ブログがおすすめです。ここ数年で、デザインのTipsやWEBデザイナーの働き方を発信するブログが急増しました。デザイン系の...自分のデザインには、必ず根拠をもつすでに述べた通り、WEBデザインはしっかりとした準備とルールに沿って進めていくものです。すべての工程には必ず、明確な根拠が伴います。「なぜこうするのか」と、常に自問自答して根拠あるデザインにすることが大切です。納品時にクライアントさんから説明を求められることもあります。そのときに自信をもって答えられるレベルまで、根拠を言語化しておきましょう。考えるときは、いろいろな可能性を検討するのも大事です。サイトのメインカラーに赤を選ぶとします。このとき「なぜ赤を選んだのか」だけでなく、「なぜ他の色ではダメなのか」も追求しておきましょう。赤といっても、真っ赤、オレンジがかった赤、少し暗めの赤など、候補はたくさんありますよね?他の候補に関する指摘があったとき、「そちらも考慮しましたが、こういう理由で今回はこうしました」と言えると説得力が増します。する話だったかもしれませんが、そこまで身構えなくても大丈夫です。そのサイトの目的を共有しWEBデザインのルールに従ったのなら、それは立派な根拠となります。まとめWEBデザイナーになったばかりで自信がない時期でも、「こうすればうまくいく」という法則性を知っていると安心ですよね!この記事では、WEBデザインの基本ルールや日常的な考え方をご紹介してきました。サイトの目的達成とユーザーさんの快適さを両立できるよう、フォントや配色、余白などに気を配っていきましょう。ルールに従って地道に取り組めば成長できます。その先に待ってるのは、確実に自分で稼いでいける未来です。そのために、WEBデザインの基本ルールはしっかりおさえてくださいね。WEBデザイナーを目指して勉強している人にとって、大きな壁の1つがWEB業界特有の専門用語です。どのような業界でもそうですが、WEB業界にも専門用語が多くあります。「日本人の生き方・働き方をより幸せにし、日本をより良い国にする。」をモットーに、デザインスクールでは1700名以上に指導しています。※スクロールできます日本デザイン誰かのために生き、自分のために働く。誰かのために働き、自分のために生きる。自分が働くこと、自分が生きること、そんな当たり前のことを誰かに認められて求められる。誰もが生きたいと思う世界。誰もが行きたいと思う未来。そんな毎日を誰もが送れる日本に変えること。それを頭の中ではなく、目の前に創り出すこと。それが私たちのビジョンです。生き方、働き方、日本デザイン。/とりあえず詳細を見てみる。