webデザイン勉強本

『ほんとに、フォント。』を読んで、アウトプットして学んだこと。〜レビュー〜

『ほんとに、フォント。』を読んで、アウトプットして学んだこと。〜レビュー〜のバナー

みなさん、フォントの勉強はどうやってしていますか?

webサイトのデザインしたり、バナーを作る時、どんなフォントを使うか結構迷いますよね?

私は『ほんとに、フォント。』という本を読んで、約2週間少しずつ勉強してみました。

結構有名な本なので、デザインの勉強をしている人はどこかで見かけたことがあるかと思います。

今回は『ほんとに、フォント。』を読んで学んだことをアウトプットしたデザインをお見せしながらご紹介したいと思います。

▼こちらの本です

私のおすすめフォント

【Adobe font】webデザイナーおすすめ日本語フォントまとめ〜26選〜のブログのバナー
【Adobe fonts】webデザイナーおすすめ日本語フォントまとめ〜26選〜デザインをしている時に「フォントどうしよ〜」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts」か...

「ほんとに、フォント。」のレビュー

 

新米デザイナーの いまいちさん が作ったデザインに
ベテランデザイナーの しゅっと先輩 がアドバイスしていくという進め方です。

 

どこがよくないのか、どうしたらより良いフォント選びができるのかを詳しく教えてくれるので分かりやすいです。

お手本も5パターンを提案されているので、ターゲットやイメージなどに合わせたフォントの使い方を学ぶことができました!

フォントデザインの勉強の進め方

私はただ読むだけだとあまり頭に入らないので、デザインのジャンルごとに読んだ後自分もデザインをしてアウトプットをすることにしました。

紹介されているフォントを実際に使うことで記憶に残り、実際のデザイン作業に勉強したことが活かせると思います。

最後に自分なりにフォントの表を作成してまとめてみました。

「ほんとに、フォント。」を読んでアウトプットしたデザイン紹介

ここからは

  • 私がアウトプットのために作ったデザイン
  • 使用したフォント
  • 学んだことのまとめ

をデザインのジャンルごとに紹介します。

カフェデザイン

カフェデザインのポスター

カフェのポスターのデザインをしてみました。

■設定

30代の落ち着いた男女向けのオーガニックカフェ

■学んだこと

ペンで書いたような筆記体でリラックス感を出し、
縦長で太めのサンセリフ体を組み合わせると引き締まる!
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

■使用フォント
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
Professor / DIN 2014

スタイリッシュデザイン

スタイリッシュデザインのポスター

ヘアサロンのポスターのデザインをしてみました。

■設定

高級感のあるヘアサロンオープンの告知ポスター

■学んだこと

強弱がついたセリフ体と、細身のサンセリフ体を合わせたコントラストのあるデザインで、スタイリッシュな印象に。
サロン名と他の文字のジャンプ率を付けてコントラストを意識。
斜めラインのデザインを入れることで洗練された印象に。
文字間を広げることで抜け感UP。

■使用フォント

Mrs Eaves / futura
このフォントの組み合わせがすごく好きです。

【Mrs Eaves】
幅広で丸みのある部分があり、大人な女性の雰囲気にぴったり。高級感も感じるフォント。

【futura】
直線的でシンプルなのに、可愛らしさがある。PやRの形が特に好き!
Mrs Eaves と合わせるときは、ウェイトを小さくした方がくどくならなくてスッキリ洗練された印象になる。

 

ポップデザイン

アイスクリーム屋さんのポスターのデザインを制作しました。

■設定

女子学生向けのポップなデザイン

■学んだこと

文字を曲げて配置することでポップさを出す。
手書きのイラストで可愛らしい雰囲気に。
少し大人っぽいスクリプト体と日本語はゴシップ体を使用し、甘々にならないようにメリハリを付けた。

■使用フォント

Shelby / FOT-セザンヌ ProN
学生向けデザインは、幼くなりすぎないようにバランスをとることがポイントだと感じました!

 

ナチュラルデザイン

パン屋のバナーを制作しました。

制作時間:約50分

■設定

ナチュラルで優しい雰囲気のデザイン

■学んだこと

穏やかな雰囲気を出すために、ウエイトの細いフォントを使う。
フォントサイズの変化を付けることで、上品だけど動きがでる。

■使用フォント

ことだまR / FOT-筑紫A丸ゴシック
文字の色を焦げ茶にしても、暖かさ・ナチュラルさが出ると思いました。

 

ビジネスデザイン

社員募集のバナーを作成しました。

制作時間:約40分

■設定

誠実さと信頼感のあるビジネスのデザイン

■学んだこと

若い人向けなので力強いゴシックを使用。
全て直線的なデザインにして素直さを出す。

■使用フォント

A-OTF 見出ゴMB31 pr6n / DNP 秀英角ゴシック銀 STD

 

ガーリーデザイン

ファッションブランドのバナーを制作しました。

制作時間:約50分

■設定

ガーリーな雰囲気のデザイン

■学んだこと

柔らかい印象の特徴的なフォントをタイトルに使用し視線を集める。
文字を波の形にすることで柔らかく可愛らしい印象を与えることができる。
紫を使用し可愛すぎないように大人っぽさを出し、全体を引き締めた。

■使用フォント

Duos Round Pro / 筑紫A丸ゴシック / GaramondFBDisplay
ブランド名のフォント(Duos Round Pro)が特徴的なので他はシンプルなフォントにしました。

 

カジュアルデザイン

カジュアルデザインのバナー

旅行の割引きキャンペーンのバナーを制作しました。

制作時間:約40分

■設定

若者向けのわくわくするデザイン

■学んだこと

太い縦線と細い横線のおしゃれに見えるタイポス書体に版ズレ処理をしてわくわく感を出す。
カラフルな水着に合わせて文字もカラフルにして楽しい雰囲気に。
吹き出しは手書き文字のフォントを使用。

■使用フォント

漢字タイポス412 std / Domus Titling / あんずもじ

 

ラグジュアリーデザイン

ジュエリーの期間限定ショップのバナーを制作しました。

制作時間:約50分

■設定

高級感のあるラグジュアリーデザイン

■学んだこと

シンプルなデザインで高級感を出した。
縦長のセリフ体のイタリックは上品で綺麗な印象を与える。
斜線を意識したデザインで女性の目を引く。
全て同じフォントで統一感を出した。

■使用フォント

Kepler Std

 

おわりに

たくさん有益な情報が詰まっているので、何度も読み込んでしまいました。

多分一番読み込んだデザインの参考書だと思います♪

アウトプットしながら読み進めていくことで流し読みをせずに、じっくり理解しながら勉強することがでました!

shio
shio
これからのフォント選びが楽しみです❋

他のおすすめ本はこちら

webデザイン初心者おすすめ勉強本3冊|未経験webデザイナーが最初に読んだのバナー
未経験webデザイナーが最初に読んだwebデザイン初心者おすすめ勉強本今回はこれからwebデザインを勉強し始める方に向けてお勧めしたい本をご紹介します。 未経験から勉強を始めた私も実際この3冊を読んで...
【webデザイナーおすすめ】デザインする時に役立つデザイン勉強本8選のバナー
【webデザイナーおすすめ】デザインする時に役立つ勉強本8選+こんにちは ^^💐 今回は私がデザインする時によく読んでいる本をご紹介します。 私はデザインに困ったとき、本...

私のおすすめフォント

【Adobe font】webデザイナーおすすめ日本語フォントまとめ〜26選〜のブログのバナー
【Adobe fonts】webデザイナーおすすめ日本語フォントまとめ〜26選〜デザインをしている時に「フォントどうしよ〜」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts」か...
【Adobe font】webデザイナーおすすめ欧文フォントまとめのブログのバナー
【Adobe fonts】webデザイナーおすすめ欧文フォントまとめ〜20選以上〜デザインをしている時に「フォント何使おう。。。」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts...
webデザイナー|Canva公式クリエイター
shio
webデザイナーshioのアイコン
*月7000人が読んでるデザインブログ運営 *ナチュラルな婚姻届を心を込めて制作 webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと|webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー