この記事は、Twitterで連載していた「1枚の画像でフォントの特徴と使い方がわかる」に追加の情報を加えて記事にしたものです。
Webデザインを勉強されている方や、フォントの知識を深めたい方に最適な記事です。
ヒラギノ角ゴシック
ヒラギノ角ゴシックは、日本語環境のMacに標準でインストールされているフォントです。
太さがW0（極細）からW9（極太）まで豊富に揃っているのが特徴で、癖がなく美しい書体なので、幅広くさまざまな用途で使いやすいと思います。
画像の右側は広告バナーなどで使用する場合を想定しています。
これらの画像は「スマートフォン時代のWebデザインスクール」をお手伝いいただいているUSAGI DESIGN emi.のemiさんにご協力いただき作成しました。
ヒラギノ明朝
こちらも日本語環境のMacに標準でインストールされているフォントです。
以前Apple Japanに問い合わせたところ、Macにインストールされているフォントは、フォントデータそのものを再配布したり販売したりしない限り商用利用が可能とのことです。
つまり、広告バナーやポスターなどで問題なく使用することができます。
この画像では茶道体験の広告バナーを想定していますが、ほかにも和風旅館や和食、京都の観光名所案内などさまざまな使いどころがあると思います。
Webページの本文テキストで明朝体を使用すると読みづらいと感じる方も多いので、もし広告バナーなどの画像ではなくテキストとして使用したい場合は見出し程度に留めておきましょう。
なお、ヒラギノとは京都の地名である「柊野（ひらぎの）」に由来しているそうです。
平成丸ゴシック
Adobe CCを契約している方はAdobe Fontsというサービスでこのフォントを使用することができます。
商用利用が可能です。
おそらく、官公庁のポスターやお知らせなどで見たことがある方も多いのではないでしょうか？
ゴシック体と似ていますが角が丸いため柔らかな印象を与えることができます。
明るく可読性が高いため、ビジネスからプライベートまで幅広く使用できます。
直線的な線分で構成されているため、広告バナーなどでも使用しやすいと思います。
Adobe Fonts: 平成丸ゴシック Std | Adobe Fonts
ABキリギリス
このフォントもAdobe Fontsで使用できるものですが、一般的な日本語フォントと違い漢字が約1000文字しか含まれていないのでご注意ください。
Webページの本文などで使用するには不向きですが、広告バナーやメインビジュアルといった画像やポスターなどで使用するには適していると思います。
Adobe Fonts: ABキリギリス | Adobe Fonts
もしたくさんの漢字を使いたいという場合は、ABキリギリスと似たフォントとして「DSきりぎりす」というフォントが販売されています。
こちらは全3809文字で税込16500円です。
Win版販売: DSきりぎりす (DS-kirigirisu) Win版 / 七種泰史/デザインシグナル – フォントダウンロードのデザインポケット
Mac版販売: DSきりぎりす (DS-kirigirisu) Mac版 / 七種泰史/デザインシグナル – フォントダウンロードのデザインポケット
Helvetica
ここからは、欧文フォント（半角英数字と半角記号のみのフォント）を紹介していきます。
Helveticaのように、日本のゴシック体に似た欧文フォントのことは「サンセリフ体」と呼ばれます。
Helveticaは代表的なサンセリフ体で、クセがないため幅広くさまざまな場面で利用できます。
Macにも標準でインストールされています。
Helveticaを使用したロゴ
Helveticaはさまざまな企業のロゴとしても利用されています。
この画像はHelveticaをただ並べたもので、文字間調整などはおこなっていません。
Google画像検索や各企業の公式Webサイトなどで、本物のロゴと見比べてみてください。
Francfrancはほぼそのままですが、evianは字形をアレンジしています。Nestleは丸ゴシック風にアレンジされていることがわかると思います。（MUJIのみ派生フォントのHelvetica Neueを使用しています）
Trajan
ローマ帝国時代の「トラヤヌス帝の記念柱」に刻まれた文字を参考に作られたといわれています。映画のポスターやGODIVAのロゴでもおなじみですね。
以下の写真は、私がローマのフォロ・ロマーノ遺跡で撮影したものですが、柱の上部の文字がTrajanフォントとよく似ていることが分かるでしょうか？
この写真は、「ぱくたそ」で写真素材として配布しています。
素材リンク: フォロ・ロマーノの柱跡（ローマ）の写真を無料ダウンロード（フリー素材） – ぱくたそ
さらに詳しい動画を制作中です
この記事の内容をもとに、フォントについてさらに詳しく知るための動画を制作中です。
この動画では、この記事の内容だけにとどまらず、以下のような話もする予定です。
- Helveticaの歴史（Helveticaのような書体は「グロテスク」と呼ばれていた？1964年に開催された東京オリンピックとHelvetica、など）
- Windowsユーザー向け: Adobe Fontsで使える、Helveticaに似たフォントの紹介
ただいま「スマートフォン時代のWebデザインスクール」にお申し込みいただいた方は、9月からフォントについてさらに詳しく知るための動画をご覧頂けるようにする予定です。
現在、体験レッスン動画無料・受講料2万円引きのキャンペーンも実施中です。
詳細とお申し込みは以下のページからどうぞ。
スマートフォン時代のWebデザインスクール
