フォントの基本【体験記】2023年8月19日いいねこの記事でわかること『けっきょく、よはく。』で有名なingectar-eさんが制作したFullmeの体験記です。|【先行リリース中】デザインスクールこんにちは、涼太郎です。この記事は、デザイン書籍『けっきょく、よはく。セットコースの体験記録です。4の範囲で僕が学んだことのまとめをしていきます。Fullmeに興味があってこれから挑戦してみようと思っている方でもネタバレにならずに楽しんでもらえるように、かつ僕自身の振り返りに役立つような内容にしていきたいと思いますので、ぜひ最後までお付き合いくださいね。フォントの基本このレッスンから学んだこと自主課題Webデザインを学びたいなら、Fullmeしよう。こちらの書籍がおすすめ。Designコースの第4回目は「フォント」がテーマです。レッスンは以下の内容です。タイポグラフィとフォントフォントの種類フォントの選び方デバイスフォントとWebフォントフォントの適切なサイズフォントはデザインの重要テーマのひとつですよね。どんなフォントを選ぶかでデザインから伝わる印象が大きく変わります。どの場面でどんなタイプのフォントを使えばよいか判断が難しいし似たフォントが多くて選ぶのに困ってしまう...。そんなデザイン初心者の気持ちに応えてくれるレッスンです。このレッスンから学んだことデバイスフォントとWebフォントデバイスフォントはユーザの端末上にあるフォントを利用することで表示速度への影響を抑えることができます。その端末上にあるフォントが適用されるため、デザイナーの意図したとおりに表示することはできないので注意。涼太郎Androidってデバイスに明朝体フォントが入っていないんだねー。Fonts)があるからそっちを使ってねってことなのかな。フォントの適切なサイズフォントの種類だけではなくて、文字の大きさの違いや行の長さを「どんなふうに読ませたいか」を意識して適切に決めていくことが大切なのですね。推奨される文字サイズは16px、一行あたりの文字数は35~45文字とのことでした。涼太郎このブログでは文字サイズは16pxより5~10%大きく、一行あたりの文字数はパソコンだと40文字前後でスマートフォンだと20文字前後になっていました!また、デザイン要素のサイズ差を表すジャンプ率は、高いのが良いとか悪いとかではなくてどのような印象を持たせたいかによって使い分けることを知りました。涼太郎このブログでは本文の文字サイズを気持ち大きめにしているので、見出しとのサイズ差がそれほどなくて比較的落ち着いた印象になるのかなと思います。今回のレッスンでは、「フォントを変更して、力強い印象のデザインにしてみよう」ということで、架空の企業サイトのファーストビューが提供されるのでそれを自分なりに改善する課題です。ポイントとしては課題に指定されている「頼もしくて力強い」「スタイリッシュで信頼感がある」を意識してフォント選定や色作りをしていくことにします。写真、色、フォントのデフォルトデータは提供されますが、オリジナルで色々と変えてみようと思います。使用フォント「力強い」や「信頼感」というキーワードからフォントを選考しました。