弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が出てしまいイマイチな仕上がりになってしまいます。
今回はそういった方に是非読んでもらいたい記事を、すぐにでも実践できる内容を中心にピックアップしました。Webサイトやアプリケーションのデザインだけでなく、企画書やプレゼンテーション資料の作成などでも応用できるものなので、どなたでも覚えておいて損はないと思います。
フォント選び
▲フォントの系統から書体、ウェイトの選定方法まで、ユーザーへ与える印象を軸に丁寧に解説されています。フォント選びに正解はありませんが、基本的なフォント選びの手法として覚えておきましょう。
▲「Helvetica」や「新ゴ」など、デザイナーさんたち御用達のフォントが紹介されています。最初はPCの中の大量のフォントから選択するのは難しいかもしれません。そういった時は有名なフォントの中から選択してみましょう。
▲こちらは和文フォントを中心に有名なフォントが紹介されています。万能性や可読性など、それぞれのフォントの特徴や使い所を詳しく解説されており、選定の参考だけでなくフォントの理解にも非常に役立ちます。
文字組み
▲テキストの文字詰めの役割から、Photoshopでの実践方法（カーニング・トラッキング）まで解説されています。字詰めが難しいと思われる方は、こちらで紹介されている「オプティカルカーニング」の設定だけでもしておきましょう。
▲こちらはより具体的に字詰めが有効なケースや、部分的にフォントサイズを変更するなど、見栄えをさせるためのテクニックが紹介されています。広く使われている手法ですので、是非覚えておきましょう。
配色（色選び）
▲色彩の基礎的な知識（彩度・明度・色相）と配色パターンの作成方法が紹介されています。色の性質や、色ごとのユーザーへ与える印象など、分かりやすく解説しています。また効果的な配色パターンを用いた参考サイトも紹介されています。
▲こちらでは一般的によく利用されている配色技法が紹介されており、配色を考える時のアイデアとして知っておくと便利です。前述のサイトと合わせて見ておくのがオススメです。
▲既存の配色パターンを参考に場合はコチラ。配色パターンのアイデアがカテゴリ毎に多数まとめられているため、ながめるだけでも参考になると思います。また配色に関するサイトも紹介されています。
レイアウト
▲「揃える」「まとめる」「余白を取る」「コントラスト」というレイアウトのルールが解説されています。レイアウトの基礎となり非常に重要な内容ですので、必ず押さえておきましょう。
▲「見やすく素敵なデザインをつくる」ために必要な「近接」「整列」「コントラスト」「反復」の4つの基本原則が解説されています。前述のサイトと内容が近い部分もありますが、より詳細で具体的な手法が丁寧に紹介されています。
テクニック
▲「ズルい線」や「ズルいグラデーション」など、少ない手間と知識で見栄えのするズルいテクニックが多数紹介されています。ズルいといっても広く使われている見栄えのするデザインのコツですので、是非覚えておきましょう。
▲装飾に質感を出すためにグラデーションやシャドウ、ノイズなどの使い方について紹介されています。デザインしたけどノッペリしてなにか物足りない… そういった時に非常に効果的です。さらにこちらの記事「【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを」で具体的にPhotoshopの操作方法などを解説されているので、こちらも合わせて見ておきましょう。
まとめ
デザインに対して苦手意識を持たれている方も多いと思います。しかし、デザインでまず必要になるのはセンスではなく、知識とテクニックです。今回紹介したサイトを見ながら1つ一つ実践することで、どなたでも確実にスキルアップできると思います。是非お試しください。
