- 『けっきょく、よはく。』で有名なingectar-eさんが制作したFullmeの体験記です。
- Web Design 初級コースの Lesson 4 のまとめ！
こんにちは、涼太郎です。
この記事は、デザイン書籍『けっきょく、よはく。』でお馴染みのingectar-eさんが提供するFullme Web Design セットコースの体験記録です。
今回は、初級コース Lesson 4の範囲で僕が学んだことのまとめをしていきます。
Fullmeに興味があってこれから挑戦してみようと思っている方でもネタバレにならずに楽しんでもらえるように、かつ僕自身の振り返りに役立つような内容にしていきたいと思いますので、ぜひ最後までお付き合いくださいね。
Lesson 4 フォントの基本
Fullme Web Designコースの第4回目は「フォント」がテーマです。
レッスンは以下の内容です。
- タイポグラフィとフォント
- フォントの種類
- フォントの選び方
- デバイスフォントとWebフォント
- フォントの適切なサイズ
フォントはデザインの重要テーマのひとつですよね。
どんなフォントを選ぶかでデザインから伝わる印象が大きく変わります。だけどどの場面でどんなタイプのフォントを使えばよいか判断が難しいし似たフォントが多くて選ぶのに困ってしまう…。
そんなデザイン初心者の気持ちに応えてくれるレッスンです。
このレッスンから学んだこと
デバイスフォントとWebフォント
デバイスフォントはユーザの端末上にあるフォントを利用することで表示速度への影響を抑えることができます。
ただし、その端末上にあるフォントが適用されるため、デザイナーの意図したとおりに表示することはできないので注意。
Androidってデバイスに明朝体フォントが入っていないんだねー。
代わりにWebフォント（Google Fonts）があるからそっちを使ってねってことなのかな。
フォントの適切なサイズ
フォントの種類だけではなくて、文字の大きさの違いや行の長さを「どんなふうに読ませたいか」を意識して適切に決めていくことが大切なのですね。
推奨される文字サイズは16px、一行あたりの文字数は35~45文字とのことでした。
このブログでは文字サイズは16pxより5~10%大きく、一行あたりの文字数はパソコンだと40文字前後でスマートフォンだと20文字前後になっていました！
また、デザイン要素のサイズ差を表すジャンプ率は、高いのが良いとか悪いとかではなくてどのような印象を持たせたいかによって使い分けることを知りました。
このブログでは本文の文字サイズを気持ち大きめにしているので、見出しとのサイズ差がそれほどなくて比較的落ち着いた印象になるのかなと思います。けど、見出しと本文の違いがわからにくくならないように気をつけなくては！
自主課題
今回のレッスンでは、「フォントを変更して、力強い印象のデザインにしてみよう」ということで、架空の企業サイトのファーストビューが提供されるのでそれを自分なりに改善する課題です。
ポイントとしては課題に指定されている「頼もしくて力強い」「スタイリッシュで信頼感がある」を意識してフォント選定や色作りをしていくことにします。
写真、色、フォントのデフォルトデータは提供されますが、オリジナルで色々と変えてみようと思います。
出来上がったものがこちら👇
使用フォント
「力強い」や「信頼感」というキーワードからフォントを選考しました。
日本語にはモリサワフォントの ゴシック MB101 を、英語には Prelude Pro を使用しています。ナビゲーションメニューは Prelude Condensed Pro です。
どちらも誠実感があって、なんだか成果を出してくれそうな感じがしますよね。
色使い
色を選ぶ際には、ingectar-eさんの書籍『見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色PART2』を参考にしました。
今回選んだのは、オネスト・ブルー(#005F94)をベースにしてイエロー・フラッシュ(#FAE200)をサブにすることで、クールな印象で信頼感を演出しています。
画像上の縦書き文字の色は悪目立ちしないくらいのブルーグレー(#8D9396)にしています。
画像
写真の右側が空いていて誠実そうな印象のビジネス系画像を写真ACにて検索して、よさそうなものを選択しました。
三分割した時に女性の右目が交点に当たるように配置しています。
黄色い枠はingectar-eさんの書籍『最強構図 知ってたらデザインうまくなる。』からデータを活用しています。
そのほか工夫したところ
白文字が背景と同化して見えなくなってしまうので、台形を文字の背景として持ってくることでカバーしました。
右上がりにすることで信頼感や成長を感じさせるような印象になっています。
他のひし形と角度を合わせたかったのですが、そうするとものすごい角度になってしまうため諦めました。
他に、コンテンツ部分においてはSERVICEを白文字として黄色背景の左上にピッタリと合わせることで、白文字が背景の白色と重なるようにしてオシャレな雰囲気になっているかなと思います。文字間隔を広げています。
また、黄色四角の右下に白い斜めの線を入れることにより、小慣れた感じが出ていることを期待しています。（今度は台形の角度と合わせることができました）
さらに、ページ内の要素全体は12列のグリッドにより位置を調整しています。
ここまでひとつひとつ考えながら作り込んでいくとなかなか達成感があります。
完成品
最後に、作成したページの画像を載せておきます。
Webデザインを学びたいなら、Fullmeしよう。
手を動かしながら、新しく知ったことや工夫したところをブログに書くと着実に自分の力が向上している実感があります。
フォントひとつ取っても語れることは様々です。場面に合わせたフォント選びをできるようになりたいですね。
ここまで読んでくださったあなたもFullme体験しませんか？
こちらの書籍がおすすめ。
