すぐれたデザイナーと仕事すると、プロの仕事に尊敬の念を覚えます。彼らは対象の手がかりから象徴を掬って、シンプルなカタチに置き換えます。そのような本物のクリエイティブは、素人には真似できません。
しかし私のようなノンデザイナーであっても、先人たちが作ったデザインセオリーに従うことは可能です。今回は、ノンデザイナーでもそれなりにきれいにみせるためのTIPSについてまとめてみます。あくまでもそれなりにですので、本職の方々のツッコミはご容赦を。
ジャンプ率をジェネレーターに沿って設定する
フォントの大きさは、ページの印象に影響します。本文、タイトル、小見出しなどのフォントサイズの違いの比率をジャンプ率とよびます。一般的にジャンプ率を高くすると勢いや元気さ、ジャンプ率を低くすると知的さや落ち着きなどの印象を与えます。
ジャンプ率の違いも、ツールを使って簡単に適切なサイズを選べます。
たとえば、ベースサイズが16pxであるならば、デフォルトジャンプ率（1.414）はだいたい以下のようになります。
「44px、32px、22px、16px（ベース）、11px」
この場合は、h1ヘッダーが32px、h2ヘッダーが22px、h3ヘッダーが太字、注釈文などのサブテキストを11pxといったように設定すると、まとまりがよくなるでしょう。
フォントをよく使われているものから選ぶ
書体はページが持つ印象に影響します。やや乱暴ですが、日本語フォントはヒラギノか游系に設定の上、英文フォントはgoogle fontsの人気書体から選びます。くせの強いフォントの使用と、ひとつのページにたくさんのフォントを使うのは控えましょう。
ポップ体のネタ記事
『絶対に創英角ポップ体しか使ってはいけないゲーム業界 ２０選』
よく使われている人気のgoogle fontsがわかります。
『google fonts公式（利用状況）』
用途別、業種別にわかれているので、目的にあったフォントを探せます。
『超厳選！Googleフォントおすすめ40選を用途別に紹介【導入方法解説付き】』
Helveticaなどのオーソドックスなフォントに似ているgoogleフォントを探してくれています。
『あのフォントがWebフォントに？！有名フォントにそっくりなWebフォントを見つけたよ』
グリッドシステムに沿って要素を配置する
グリッドデザインの定義として、以下を引用しました。
グリッドデザインとは、Webページなどのデザイン手法の一つで、画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせて内部の要素の大きさや配置を決定していく方式。特に、ページを方眼紙のように同じ大きさの微細な正方形に分割し、これを複数組み合わせて要素や余白を構成する方式。
引用：http://e-words.jp/w/%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3.html
グリッドに沿って要素を揃えたり余白のルールを一定にすることで、見やすくわかりやすいレイアウトが可能になります。
Webデザインにおけるグリッドシステムは、有名なところで978pxのグリッドシステムがあります。12カラムで要素とマージンを整えられるため、幾種類もの段組に対応可能です。ターゲットの対象にもよりますが、最近はもっと広い幅のグリッドシステムが用いられることが多いようです。
こちらから、978px、1218pxなどのグリッドテンプレートがダウンロードできます。
https://github.com/MChorfa/978-Grid-System
矩形の比率を意識する
矩形を使う場合は、比率を意識してみましょう。矩形が美しく見える黄金比と白銀比という縦横比が存在します。
基準色をベースに、ジェネレーターで配色を決める
以下は個人的に参考にしている方法論で、monospace板橋さんの言葉です。最初はモノクロで作るそうです。
＜③モノクロで作るという考え方＞まずはモノクロで作って、配色は最後に考えれば良い。Yahoo!のサイトをガラッと配色を変える仕事が来たとき、モノクロで１から色を付けるのと、既存のサイトを見ながら色を考えるのではどちらがやりやすいですか？モノクロで作って重要なものから順に配色を
引用：https://matome.naver.jp/odai/2134604729086884201
目指す印象にあったベース色を決めます。派生色はジェネレーターを使いましょう。ジェネレーターは配色セオリーに従って色を定義してくれます。
ジェネレーター
https://coolors.co/
http://paletton.com/
http://colovely.nofach.com
https://color.hailpixel.com
配色の考え方
【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」
まとめ
私が実践していることをまとめると以下のようになります。
- 文字のジャンプ率を設定する
- フォントを選ぶ
- グリッドに沿ってオブジェクトを配置
- 可能ならば矩形の比率を意識
- 色はモノトーンではじめて、目的に合ったベース色を決める
- ジェネレーターで配色を決める
もちろんデザインについて細かいことを言い出したらきりがありませんが、とりあえずこれでなんとなく整って見えてはいます。ノンデザイナーがデザインする場合は、ある意味クリエイティブな要素を廃して、従順にルールに従うことが大切だと感じます。
.gif){kind=link}