制作の久保田です。
今回は、デザイン初学者、ノンデザイナーに向けて、デザインガイドラインを意識することが大切だよって話をまとめたいと思います。

デザインガイドラインとは？

デザインガイドラインは、デザインの設計図みたいなものです。
大手のブランドロゴには必ずと言っていいほど使用上のルールがあります。

  • 色の指定
  • ロゴの周りの余白
  • 最低使用サイズ
  • 変形の禁止
  • 背景色の指定

みたいな感じです。
このルールによって、ブランドの信頼性が保たれています。例えばアップルのロゴを反転して、左側がかじられていたら誰も本物だと思いませんし、場合によっては罰せられます。

webデザインでも、サイト全体のガイドラインを制作することで、統一感やブランディング（信頼）に役立ちます。
さらに、最初にデザインの制約をつくっておく事で、後から「ここはどうしよう、、？」って悩むケースも減るので効率化にもなると思います。

デザインガイドラインは、復数人でデザインする際に用意する事が多いですが、一人でデザインする場合でも役に立ちます。書面化はしなくとも、「このサイトはこのルールに沿ってつくる」といったルールを意識しましょう。

では、実際にルール決めのポイントとヒントを見ていきます。

サイトで使用する色を選ぶ

サイト全体を通して使用する色を決めます。

  • メインカラー
  • サブカラー
  • アクセントカラー

を決めるケースが多いです。
メインカラーは、サイト全体に使用するキーカラー、サブカラーはメインカラーを補足するようなカラー、アクセントカラーは強調したい箇所、目立たせたい箇所に使う色です。
色数が増えるほど難易度は上がるので、個人的には「メインカラー」「アクセントカラー」のみでも良いかと思ってます。

色を選ぶヒント

「色が決められない」ってときは、色のもともと持つ特徴から選ぶと違和感が無いです。
赤と青を比べた場合、青の方が熱いって思う人は少ないと思います。同様に黄より緑の方が落ち着いてます。
こういった、色のイメージと作りたいサイトのイメージが近いものを選びます。

例えば、リクルートサイトで「信頼感」と「楽しさ」をを伝えたければ、「メイン = 青（信頼）」「アクセント = 黃（楽しさ）」みたいな感じです。

良い感じの色にするためにはHSBで選ぶ

色は決まってるけど、何かしっくりこないってことはよくあります。
そんな時はHSBで色味を調整してみてください。

  • RGB（ 赤、緑、青 ）
  • Hex（ 赤緑青の16進数値　）
  • CMYK（ シアン、マゼンタ、イエロー、ブラック ）
  • HSB（ 色相、彩度、明度 ）

色の指定方法はいろいろありますが、webで指定する数値はRGBかHexです。この2つは光の3原色で数値を指定します。加算するほど白に近づきます。CMYKは色の3原色+黒で、加算するほど黒に近づきます。絵の具を混ぜると黒っぽくなってくのと同じで、印刷の現場ではこの数値が使われます。ちなみに、黒がプラスされているのは、CMYのみでパキッとした黒を出すのが難しいからです。
HSBは色相（色）、彩度（鮮やかさ）、明度（明るさ）で色指定するため、選ぶ段階では一番選びやすいです。

色味がしっくりこないって時は、「彩度」が高すぎる事が多いです。
彩度を落とす事で、落ち着いた雰囲気の色になります。
「色」が決まったら、「彩度」と「明度」を調整することで良い感じの色味にできます。

 
 

※左はHexで指定したブルー、右はHSBで「彩度」を落として調整したブルー

HSBでの指定は、カラーバリエーションをつくる場合にも役立ちます。
彩度と明度を固定して、色相を変更することで、トーンの近い色のパターンかんたんに作成できます。
※実際には、黄色や赤は青よりも鮮やかに見えるため多少の数値の調整は必要です。

欧文フォントを選ぶ

色と同じように、使用するフォントも定義します。ここで言うフォントはコンテンツ内で使用するwebフォントです。日本語フォントにもこだわるデザイナーも多くいますが、個人的には形の特徴が大きい欧文フォントの定義のみで良いと思います。
デザインが決まらないってときにちょこっと欧文のフォントが入れば、それだけで洗練されて見えたりするので便利です。

ここでも

  • メインで使用するフォント
  • アクセントとして使用するフォント

を選びます。

フォントの種類

最近では Google Font を使用することが多いので、Google Fontの分類別にフォントの特徴を見ていきます。
https://fonts.google.com/

Serif（セリフ）

セリフ体は日本語の明朝体に近い、装飾のあるフォントです。「伝統的」「丁寧」「上品」なイメージにしたい場合、ここから選ぶとしっくりきます。

Sans Serif（サンセリフ）

サンセリフ体は、日本語のゴシック体に近い、視認性の高いフォントです。「わかりやすさ」「信頼感」「親しみやすさ」などのイメージに近いです。

Display（ディスプレイ）

ディスプレイフォントは個性的にデザインされたフォントが多く、パッと見が装飾されているため選びがちですが、癖が強いためやや扱いづらいです。明確な意図がある場合を覗いて、ここからは選ばない方が無難です。

Handwriting（ハンドスクリプト）

ハンドスクリプトは手書き風のフォントです。手書き文字は、メインのフォントとして使用するのは難しいですが、「アクセント」としてのフォントには向いてます。カチッとさせるためメインフォントにサンセリフ体を選び、ちょっと遊びがほしい箇所に「手書き」文字を入れるみたいな使い方ができます。

Monospace（モノスペース）

モノスペースは等幅（文字と文字の感覚を詰めない）のフォントです。コンピューターなどテクニカルなデザインに向いてますが、これも意図があいまいな場合は使用しない方が良いと思います。

フォントの選び方

フォントの太さや形も、色の特徴と同じく、感覚的に選んでokです。
細いフォントは見た目通り、繊細さ、上品なイメージに近く、太いフォントは、安定感やインパクトがあります。
都会的で洗練されたイメージのサイト制作であれば細めのフォント、力強いイメージであれば太めのフォントを選ぶのが良いかと思います。
丸い形状のフォントは、かわいらしさ、やわらかさ等の印象をもつので子供向けのサイトなどに向いてます。

また、有名フォントに近いものや、イメージに近いサイトで使用されているフォントを参考にするのも良いかと思います。
Helvetica であれば、RobotやOpen Sansであったり、Garamondであれば、EB Garamondなど、そっくりなフォントもあります。

文字サイズ・行間・余白

ここは割と軽視されがちですが、文字のサイズを揃える・余白を揃えるなど、サイト全体を通してのルールは重要です。
ここに微妙な違いがあると、何か気持ちわるいけどどこがおかしいか分からない、など、後々に面倒くさい事になる事もあります。
例えば、16pxの本文の下に17pxの記事が続くと、パッと見は同じに見えるけど何か違和感がでたり、左の余白と右の余白が微妙にずれてたりすると理由が分からなくてもグラっとした印象を受けます。

ここでは

  • PCの文字サイズ
  • スマホの文字サイズ
  • 見出しなどの文字サイズ
  • 最小文字サイズ
  • 本文の行間
  • 見出しの行間
  • マージン（要素の外の余白）
  • パディング（要素の中の余白）

を定義します。

PC・スマホの本文の文字サイズを決める

ブラウザのデフォルトの文字サイズは16pxです。
万人に読みやすいのはこのサイズなんだろーなーってことで、個人的にはリードのサイズは16pxのままにしておくことが多いです。
小さな文字の方が好きってデザイナーも多いと思いますが、下げても14pxまでかな、と思います。
どんなにデザインに凝っても、結局読まれなかったら自己満足になってしまうので、読みて側の読みやすさを基準にサイズ設定します。

スマホの場合は画面の横幅が350px程度のため、16pxだと改行が多く読みづらい、という事が結構あります。
スマホのディスプレイは解像度が高く、割と小さい文字でも読めるって印象もあるんで、個人的には本文は、14-15px程度に指定する事が多いです。

見出しなどの文字サイズ・最小文字サイズ

これもあくまで個人的ルールなんですが、微妙なサイズ差の文字は使わないようにしてます。
実際、16pxと17pxの定義差は、何かの意図があって行なうケースは少なく、デザインのミスであったり、無理やりボリューム感をあわせるために行われるケースが多いです。
ボリュームを調整したい場合は、そもそものレイアウトから見直す必要があると思います。

個人的には本文を16pxと決めたら、18px、20px、22pxと2pxおきの見出しサイズにするか、15pxの本文で、18px、21px、24pxと3pxおきのサイズに決める事が多いです。
最小文字サイズも決めておいたほうが良いです。PC、スマホとも12px程度にする事が多いですが、実際スマホはもう少し小さくても読めます。

本文・見出しの行間

本文の行間は、少し広めにとると読みやすくなるります。目安としては、本文の文字サイズの1.8倍〜2.2倍くらいにすると、ある程度余裕があって読みやすいです。
見出しの行間は、開きすぎると逆に読みづらいので、本文より少し狭めにします。見出しサイズの1.4倍〜1.6倍くらいが読みやすいと思います。
ここはセクションによってバラつきが出るケースは少ないですが、念の為ルール化しておきます。

余白

割と何となく、で作ってるデザイナーも多いですが、余白の統一化もかなり重要です。
ブランドロゴのルールでも、ロゴの独立性を保つため、必ずといっていいほど決められています。

マージンとは要素の外側の余白、パディングとは要素の内側の余白です。
ひとくくりのブロックを罫線で囲んだデザインがあるとして、罫線の外側の余白はマージン、罫線の内側の余白はパディングです。

余白は広めにとるとゆったりと余裕があるように、少なめにとるとギュッと詰まった印象になります。PCではパディング20-30px程度、スマホでは10-20px程度に決める事が多いです。ブロックの区切りが分かりづらい時は、マージンを大きめにとるとコンテンツの区切りがわかりやすくなります。

最後に

実際には、今回決めた要素を元に、見出し、ボタンのデザインなど確定していくのですが、ちょっと長くなってしまったので次回にまわします、、
ただ、ここまで先に決めてしまうと、ボタン1つ作るのにも、色はメインカラーで、ちょっと大きめがいいから文字サイズは18px、等かんたんに確定できます。

白紙のまま上から順にデザインしていると、「次のセクションどうしよう、、」ってことになりがちです。また、「ここのセクションは目立たせたい」とか「このセクションに合った見出しデザイン」とかを都度考えていると、結果的にチグハグなデザインになったりします。こういったことはデザインガイドラインで制限を設けることである程度回避できると思います。

最後に、今年のeccoの夏の思い出をお届けしつつ終わりたいと思います。、、では！