Advertisement

1-bvoyx8imtwprv36xvy6ryq

 

デザイナーとして学ぶことができる重要なスキルのひとつは、書体を選択する力です。デザインの主要ポイントのひとつとして扱われることが多いフォント、書体は、デザインの仕上がりを良くも悪くもしてしまいます。

 

 

この記事では、これから学びたいひとに向けた書体をうまく選択する基本ルールをまとめてご紹介します。普段からよく利用しているフォント以外に、新しい組み合わせ方を詳しくみていきましょう。

 

 

 

デザインの目的をはっきりさせよう。

 

デザインをはじまる前に、目的はなにかきちんと確認しましょう。どのような情報を伝えたいですか。ウェブや印刷などどんな媒体を対象にしていますか。

 

優れているとされるデザインは、その目的に合わせてタイポグラフィーを合わせています。これは、タイポグラフィーが雰囲気や色調、スタイルを決める鍵となるからです。

 

たとえば、イラストを多用したグリーティングカードをデザインするとき、イラストのスタイルに合った書体を選択すると良いでしょう。デザインと書体がしっくり調和するように心がけましょう。

 

1-j4sjruq6wffkzr0ukofnxw

 

写真やイメージを主体するランディングページを作成するときは、イメージを損なわないシンプルな書体を選択しましょう。伝えたいメッセージを強調するために書体を利用します。

 

1-3hkvdeybfit3cgad20quew

 

 

 

オーディエンスをはっきりさせよう。

 

デザインの目的をはっきり決めたら、次はオーディエンスです。ターゲットとなるユーザーの年齢や関心、文化的背景によって書体の選択に影響があるため、この手順は重要となります。

 

たとえば、一部のフォントは子供向けに最適です。読むことをはじめて学ぶとき、子供はわかりやすくて読みやすい書体が必要で、その参考サンプルは Sassoon Primary です。Rosemary Sassoon によって開発されたもので、子供がどのような手紙を読むのが簡単であるかの調査を基にしています。

 

1-25g6pgjro44fepoou-a8kg

 

では、高齢者に最適な書体とは一体どんなフォントでしょう。シニアフレンドリーなフォントは判読可能なサイズ、くっきりとしたコントストの色を使用し、スクリプトや装飾的なスタイルを避けるようにしましょう。

 

書体を選択するときは、ユーザーとそのニーズを考慮するようにしましょう。ユーザーの問題を解決することが、デザイン成功への近道と言えるでしょう。

 

 

 

インスピレーションを探そう。

 

他のデザイナーが制作した作品ものぞいてみましょう。なぜその書体をデザインに利用したのか考えてみても良いでしょう。

 

フォント用インスピレーション

フォント用インスピレーションとしては、The 100 Best Free Font は書体を選択するとき役に立つでしょう。各書体ごとに特徴や使用ポイントなどがまとめられています。

 

また100 Greatest Free Fonts Collection for 2015も参考にしてみると良いでしょう。Invision ではタイポグラフィーに関するリソース情報をまとめたページも公開されています。

 

best-of-free-font-2016
2016年、今年もたくさんのフリーフォントが公開され、当サイトで紹介しただけでも600個を超えており、実際どれを使おうか迷ってしまうほどです。 今回は2016
japanesae-free-fonts-1
日本中の書体デザイナーさんの努力によって、素敵な日本語フリーフォントが数多く公開されるようになったいま、複数の書体をインストールしているひとも多いでしょう。しかしデザインのとき

 

1-fevzbxe7wwbwet186shmew

 

 

実際のウェブサイトが利用している書体を参考にしたいときは、Typ.io を確認してみましょう。このサイトでは、印象的なフォントの使い方をしているウェブサイトを集めており、各CSSスタイリングも一緒に表示してくれます。

 

Chrome 拡張機能 WhatTheFont を利用すれば、どんなウェブサイトでも利用しているフォントを、マウスホバーするだけでフォントの種類やサイズなどを確認することもできます。

 

chrome-extension-2017-half
ウェブサイトやグラフィック制作をより快適にし、生産性をアップさせてくれる、ウェブ制作に携わるすべての人にオススメしたい Chrome 拡張機能をまとめてご紹介します

 

フォント組み合わせインスピレーション

書体以外にも、フォントの組み合わせについてもみていきましょう。フォントの組み合わせは、書体と同じくらい重要で、うまく利用することで視覚的な階層をうまく表現でき、デザインの可読性を向上させることもできます。

 

level3-top
海外デザインブログCanva Design School Blogで公開された「Why Every Design Needs Three Level of Typo

 

1-mvyb8tt4xllz4pxz_sxx8q

 

Typewolf は、フォント組み合わせインスピレーションに最適なサイトのひとつです。さまざまなサイトからフォントの組み合わせをリスト化しており、利用したいオススメ書体など詳しいタイポグラフィーガイドも公開中です。フォント好きはぜひ目を通しておきたいサイト。

 

FontPair もフォント組み合わせを集めているサイトで、Google フォントに特化しています。

 

1-mafglpdsphpjqkpjgwbsba

 

この他にもたくさんのデザイナーが、オンライン上でフォントの組み合わせを公開しています。たとえば、Typography: Google Fonts CombinationsTypography: Google Fonts Combinations Volume 2 などがあります。Behance や Dribbble などで 「Font Pairing」と検索してみると良いでしょう。

 

10font-combination-top
海外デザインブログCanva Design School Blogで公開された「10 Golden Rules You Should Live by When Co

 

 

書体を選ぼう。

 

ここまで調べてきたデザインコンセプトとインスピレーションを武器に、いよいよ書体を選ぶ準備が整いました。書体を選ぶときは、読みやすさ、可読性、目的を原則として念頭におきましょう。

 

1-5mhptsentrmpkd-a12ddhg

 

普段から見慣れている読みやすいフォントを選択します。シンプルで実用的なフォントを選択するときは、装飾的なフォントは避けるべきでしょう。また、フォントを利用する目的についても注意を払いましょう。たとえば、一部のフォントは本文テキストではなく、見出しタイトルにより向いているなど。

 

このような細かい注意点があることを考慮しながら、フォントを選択する前にデザインの目的をきちんと確認しておきましょう。

 

1-9cokzcdvar_hxpc2fyif3w

 

フォントの組み合わせに関しては、使用するフォントを最高で3つに保つことで、シンプルさを保つことができます。コントラストの取れた組み合わせを心がけると良いでしょう。異なるフォントサイズ、色、および重みを利用することで、視覚的なコントラストを表現することもできます。

 

ウェブフォントの場合、Google フォントTypekitFont Squirrel などが代表的と言えるでしょう。Google フォントは無料で、Typekit とFont Squirrel にはフリーフォントと有料フォントの両方が揃っています。

 

font-pairing2-top
海外デザインブログCanva Design School Blogで公開された「The Design School's Ultimate Guide to

 

 

フォントサイズを決定しよう。

 

フォントの組み合わせを決めたら、次のステップはフォントサイズの決定です。ここで利用したいツールが、Adobe の書体部門トップ Tim Brown 氏の開発した Modular Scale です。歴史的に好ましいフォントの比率を特定したり、規模を決めて型のサイズを決定するシステムが特長です。

 

1-xikcg1urlq-2z8myz7bzta

 

たとえば、黄金比にもとづいてスケールを決めることもできます。ここではまず設定できる、最初の5つのフォントサイズオプションとなります。

 

 

直面する可能性のある問題のひとつが、比率が大きすぎるという点です。黄金比に基づいて、スケール適用後のどのようになるか見てみましょう。

 

  

ご覧の通り、数字の感覚が開きすぎしまいます。多くのユーザーインターフェースでは、より小さな間隔が日宇町となります。うれしいことに、Modular Scale ツールは幾何学、自然、音楽などに基づいたさまざまな比率に対応しています。

 

 

黄金比の代わりに、より数字の間隔の小さな Perfect Fourth は以下の通り。

 

 

比率を決めてしまえば、あとは四捨五入したフォントサイズを代入してあげれば完成です。

 

 

Modular Scale ツールを利用したこの方法は、フォントサイズを決めるために数学的な正確な精度を使用していますが、基本ガイド程度で気に留めておきましょう。この方法を出発点として、最終的には目視でサイズを調整してください。

 

golden-ratio-top
海外デザインブログCanva Design School Blogで公開された「What Is the Golden Ratio? What You Nee

 

 

タイポグラフィー用スタイルガイドを作成しよう。

 

プロセス最後のステップでは、タイポグラフィー用のスタイルガイドを作成して、デザイン全体で書体を標準、スタンダード化してしまいましょう。

 

1-ekikhsro94ay_6q56xzysa

 

Sketch のようなプログラムでは、共通となるスタイルガイドを作成しておくことで、瞬時にテキストスタイルを適用することもできます。

 

このプロセスの段階では、色や重量、サイズなどの要素を微調整しながら、最終的なスタイルを決定すると良いでしょう。

 

色を選択するときは、組み合わせる配色カラーパレットを考えてみましょう。書体に合った配色カラーパレットを選択してみましょう。

 

10color-theory-top
デザイン制作でもっとも頭を悩ます作業のひとつ、「配色カラー決め」で覚えておきたい色の基本原則10個をまとめたインフォグラフィックス、「The 10 Commandm
100color-combo-top
海外デザインブログCanva Design School Blogで公開された「100 Brilliant Color Combinatinos: And How
color-tool2015-top
PhotoshopVIP編集部: 2016年8月22日に公開された記事を再編集し、前回より17個のツールやサービスが増え、合計36ツールをご紹介しています。

 

1-xgeensuqtpclhvfxs08la

 

スタイルガイドでは、少なくともフォント名など各種設定、フォントサイズ、色、実際の使用サンプル例を含めるようにしましょう。

 

Google マテリアルデザインのタイポグラフィー用ガイドラインは、スタイルガイドに何を記載するべきか検討するときに確認したい参考例となるでしょう。その他にも、MailchimpAppleFocus Labs などのタイポグラフィー用ガイドも確認してみると良いでしょう。

 

styleguide-design-jp (1)
Dropbox や Google、Twitterを見てみると、どの会社も独自のユニークなデザインセンスを持っていることが分かります。モバイルからウェブサイトまで、す
styleguide2014-top
[fancy_box]この記事は、海外デザインブログDesignModoで公開された「How to Create a Web Design Style Guide」
50styleguide-top
海外デザインブログCanva Design School Blogで公開された「50 Meticulous Style Guides Every Startup S

 

 

書体は実験がすべて、科学とアートの両方。

 

普段同じ書体やフォントばかり使ってしまいがちなひとは、新しいデザインの可能性を探ってみてはいかがでしょう。では、デザインを楽しんで。

 

 

参照元リンク : Typography can make or break your design: a process for choosing type by Jonnathan Z. White – Medium