allWeb制作フローが変わる!便利な最新オンラインツール43個まとめ【2020年版】2020年2月21日ずっと使える、デザインの基本まとめました。改訂版3Homeウェブ制作ウェブ考察これでフォントの組み合わせは完璧!確認しておきたい基本ルール、手順まとめ2017年5月18日ウェブ考察Advertisementデザイナーとして学ぶことができる重要なスキルのひとつは、書体を選択する力です。デザインの主要ポイントのひとつとして扱われることが多いフォント、書体は、デザインの仕上がりを良くも悪くもしてしまいます。この記事では、これから学びたいひとに向けた書体をうまく選択する基本ルールをまとめてご紹介します。普段からよく利用しているフォント以外に、新しい組み合わせ方を詳しくみていきましょう。デザインの目的をはっきりさせよう。デザインをはじまる前に、目的はなにかきちんと確認しましょう。どのような情報を伝えたいですか。ウェブや印刷などどんな媒体を対象にしていますか。優れているとされるデザインは、その目的に合わせてタイポグラフィーを合わせています。これは、タイポグラフィーが雰囲気や色調、スタイルを決める鍵となるからです。イラストを多用したグリーティングカードをデザインするとき、イラストのスタイルに合った書体を選択すると良いでしょう。デザインと書体がしっくり調和するように心がけましょう。写真やイメージを主体するランディングページを作成するときは、イメージを損なわないシンプルな書体を選択しましょう。伝えたいメッセージを強調するために書体を利用します。オーディエンスをはっきりさせよう。デザインの目的をはっきり決めたら、次はオーディエンスです。ターゲットとなるユーザーの年齢や関心、文化的背景によって書体の選択に影響があるため、この手順は重要となります。一部のフォントは子供向けに最適です。よって開発されたもので、子供がどのような手紙を読むのが簡単であるかの調査を基にしています。高齢者に最適な書体とは一体どんなフォントでしょう。シニアフレンドリーなフォントは判読可能なサイズ、くっきりとしたコントストの色を使用し、スクリプトや装飾的なスタイルを避けるようにしましょう。書体を選択するときは、ユーザーとそのニーズを考慮するようにしましょう。ユーザーの問題を解決することが、デザイン成功への近道と言えるでしょう。インスピレーションを探そう。他のデザイナーが制作した作品ものぞいてみましょう。その書体をデザインに利用したのか考えてみても良いでしょう。書体を選択するとき役に立つでしょう。各書体ごとに特徴や使用ポイントなどがまとめられています。2015も参考にしてみると良いでしょう。タイポグラフィーに関するリソース情報をまとめたページも公開されています。商用可で完全無料!2016年公開のフリーフォント素材105個総まとめ2016年、今年もたくさんのフリーフォントが公開され、当サイトで紹介しただけでも600個を超えており、実際どれを使おうか迷ってしまうほどです。10:30日本語フリーフォント、これだけは持っておきたい厳選22個まとめ日本中の書体デザイナーさんの努力によって、素敵な日本語フリーフォントが数多く公開されるようになったいま、複数の書体をインストールしているひとも多いでしょう。このサイトでは、印象的なフォントの使い方をしているウェブサイトを集めており、各CSSスタイリングも一緒に表示してくれます。利用すれば、どんなウェブサイトでも利用しているフォントを、マウスホバーするだけでフォントの種類やサイズなどを確認することもできます。拡張機能29個まとめこの記事は、2017年5月8日に公開してから再編集、アップデートを随時行っています。12:59フォント組み合わせインスピレーション書体以外にも、フォントの組み合わせについてもみていきましょう。フォントの組み合わせは、書体と同じくらい重要で、うまく利用することで視覚的な階層をうまく表現でき、デザインの可読性を向上させることもできます。フォント組み合わせインスピレーションに最適なサイトのひとつです。さまざまなサイトからフォントの組み合わせをリスト化しており、利用したいオススメ書体など詳しいタイポグラフィーガイドも公開中です。フォント好きはぜひ目を通しておきたいサイト。フォントに特化しています。この他にもたくさんのデザイナーが、オンライン上でフォントの組み合わせを公開しています。Pairing」と検索してみると良いでしょう。09:24書体を選ぼう。ここまで調べてきたデザインコンセプトとインスピレーションを武器に、いよいよ書体を選ぶ準備が整いました。書体を選ぶときは、読みやすさ、可読性、目的を原則として念頭におきましょう。普段から見慣れている読みやすいフォントを選択します。シンプルで実用的なフォントを選択するときは、装飾的なフォントは避けるべきでしょう。フォントを利用する目的についても注意を払いましょう。一部のフォントは本文テキストではなく、見出しタイトルにより向いているなど。このような細かい注意点があることを考慮しながら、フォントを選択する前にデザインの目的をきちんと確認しておきましょう。フォントの組み合わせに関しては、使用するフォントを最高で3つに保つことで、シンプルさを保つことができます。コントラストの取れた組み合わせを心がけると良いでしょう。異なるフォントサイズ、色、および重みを利用することで、視覚的なコントラストを表現することもできます。代表的と言えるでしょう。フリーフォントと有料フォントの両方が揃っています。12:04フォントサイズを決定しよう。フォントの組み合わせを決めたら、次のステップはフォントサイズの決定です。歴史的に好ましいフォントの比率を特定したり、規模を決めて型のサイズを決定するシステムが特長です。黄金比にもとづいてスケールを決めることもできます。ここではまず設定できる、最初の5つのフォントサイズオプションとなります。11.089直面する可能性のある問題のひとつが、比率が大きすぎるという点です。黄金比に基づいて、スケール適用後のどのようになるか見てみましょう。122.966ご覧の通り、数字の感覚が開きすぎしまいます。多くのユーザーインターフェースでは、より小さな間隔が日宇町となります。基づいたさまざまな比率に対応しています。55.927比率を決めてしまえば、あとは四捨五入したフォントサイズを代入してあげれば完成です。ツールを利用したこの方法は、フォントサイズを決めるために数学的な正確な精度を使用していますが、基本ガイド程度で気に留めておきましょう。この方法を出発点として、最終的には目視でサイズを調整してください。11:02タイポグラフィー用スタイルガイドを作成しよう。プロセス最後のステップでは、タイポグラフィー用のスタイルガイドを作成して、デザイン全体で書体を標準、スタンダード化してしまいましょう。ようなプログラムでは、共通となるスタイルガイドを作成しておくことで、瞬時にテキストスタイルを適用することもできます。このプロセスの段階では、色や重量、サイズなどの要素を微調整しながら、最終的なスタイルを決定すると良いでしょう。色を選択するときは、組み合わせる配色カラーパレットを考えてみましょう。書体に合った配色カラーパレットを選択してみましょう。12:42【2020年版】もう配色デザインには迷わない!すごい無料カラーパレットツール59個まとめこの記事は、2016年8月22日に公開してから再編集、アップデートを随時行っています。12:34スタイルガイドでは、少なくともフォント名など各種設定、フォントサイズ、色、実際の使用サンプル例を含めるようにしましょう。マテリアルデザインのタイポグラフィー用ガイドラインは、スタイルガイドに何を記載するべきか検討するときに確認したい参考例となるでしょう。タイポグラフィー用ガイドも確認してみると良いでしょう。Google、Twitterを見てみると、どの会社も独自のユニークなデザインセンスを持っていることが分かります。11:02書体は実験がすべて、科学とアートの両方。普段同じ書体やフォントばかり使ってしまいがちなひとは、新しいデザインの可能性を探ってみてはいかがでしょう。現役デザイナーが明かす!デザインを良くする12個の鉄板ルールと具体例2015/06/24現役デザイナーが教える!完璧な書体を決める10個の黄金ルールまとめ2017/11/18現役デザイナーが実践している、フォント組み合わせ10個の黄金ルール2015/06/16"ウェブ考察"の最新記事はこちらずっと使える、デザインの基本まとめました。