Webデザインの現場で使う定番フォント
Web制作の現場では、よく使う定番フォントがあります。ここでは、膨大なフォントの中から、デザインとコーディング（CSSでの設定）で使う定番中の定番フォントを厳選して紹介していきます。
普段見かけないフォントや有名では無いフリーフォントを使うと、素人感が出るためフォント選びは気をつけましょう。
企業の場合は、年間契約のフォントパック『モリサワパスポート』を契約していることが多いです。モリサワにはヒラギノやリュウミンなどの定番フォントが含まれています。
また、AdobeのCreativeCloudプランを契約すると『AdobeFonts』といういくつか有名フォントが使えるサービスを利用できるようになります。AdobeFontsは日本語フォントも続々と登場しているため、必ず利用しましょう。
最近は日本語・欧文ともに無料フォントもよく使われるため、便利なフォントは全部ダウンロードしておきましょう。
よく使う日本語フォント
ゴシック体
下記の中では「ヒラギノ角ゴ」「游ゴシック」「新ゴ」がずば抜けて使用頻度が高いです。
- ヒラギノ角ゴ（モリサワ・Macにはインストール済み）
- 游ゴシック（Windows8以降・Macにはインストール済み）
- 新ゴ（モリサワ）
- ゴシックMB101（モリサワ）
- UD新ゴ（モリサワ）
- 筑紫ゴシック（フォントワークス・Macにはインストール済み）
- コーポレートロゴ（フリーフォント）
「ヒラギノ角ゴ」は、デザイン、コーディングともに頻繁に使うフォントです。ゴシック体で迷ったらまずはヒラギノ角ゴです。
「游ゴシック」も安定感のあるゴシックです。ややスタイリッシュでスマートな印象があり、CSSでは、ヒラギノ角ゴに次いで人気のゴシック体です。Photoshopなどでデザインをする際には、それほど使わていないというのが僕個人の実感です。
「新ゴ」はインパクトが強く可読性も高いため、デザインでは頻繁に使用されます。
最近の「コーポレート・ロゴ」の使われっぷりと言ったら半端ではありません。フリーのフォントにも関わらず、Webサイトからテレビ番組のテロップにまで至るところで見かける大人気フォントです。どこかエンタメ感を醸し出してくれます。僕の場合２日に一回は必ずどこかで見かけています。無料なのでぜひダウンロードしておきたいフォントです。
ちなみにWindows標準フォントの「メイリオ」はCSSでは設定しますが、デザインではほぼ使用しません。
明朝体
下記の中では「ヒラギノ明朝」「游明朝」「リュウミン」がずば抜けて使用頻度が高いです。
- ヒラギノ明朝（モリサワ・Macにはインストール済み）
- 游明朝（Windows8以降・Macにはインストール済み）
- リュウミン（モリサワ）
- 秀英明朝（モリサワ）
- 筑紫明朝（フォントワークス）
- 黎ミン（モリサワ）
- うつくし明朝体（フリーフォント）
フリーフォントでは、「うつくし明朝体」が人気です。以前ローソンの菓子パンのフォントとしても使われていました。無料なのでぜひダウンロードしておきたいフォントです。
よく使う欧文フォント
- Arial
- Avenir
- BankGothic
- Bebas Neue
- Bodoni
- CopperplateGothic
- DIN
- Didot
- Futura
- Franklin Gothic
- Frutiger
- Garamond
- Georgia
- Gill Sans
- Gotham
- Helvetica
- Lucida
- Myriad
- Trajan
- Verdana
- Univers
このあたりが欧文フォントでは有名でよく使われます。Macには、すべて最初からインストール済みかと思います。Windowsの場合は購入するかAdobe Fontsに含まれている場合があります。Bebas Neue、Trajanはフリーフォントですね。それぞれのどのようなフォントかを知っておいて、デザインテイストに合わせて、とっさに使用できるようになるといいですね。
「Didot」と言えば、ハーパーズバザーのフォントですね。非常に上品で洗練された印象を持つセリフ体です。「Bodoni」と同様に女性誌でよく使われます。
「CopperplateGothic」は上品なお菓子屋や新しめだけど高級感のあるレストランの看板のフォントとして頻繁に見かけます。日本人はこれもうホント大好きなフォントですね。
「Futura」も相当な人気があります。未来的なクールさを持ちながら、使い方によっては可愛さも出せる不思議なフォントです。
「Trajan」は古代ローマの文字を彷彿とさせる格式のあるフォントです。
Googleフォント
『Googleフォント』はGoogleが無料で提供しているWebフォントです。ダウンロードして自分のPhotoshopで使うことも可能です。下記のフォントがよくWebフォントとしてCSSで設定されることが多いです。
個人的にはOswaldが都会的で洗練された印象があって、お気に入りです。Lobsterはオシャレなカフェやレストランで活躍しそうですね。
欧文でWebフォントを使おうと思ったら、まずはこの定番Googleフォントたちをチェックしてみてください。
このサイトでは、本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社か教育体制のしっかりしている事業会社に正社員で入社することを強くオススメしています。
やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強い『ワークポート』です。ワークポートでも、さすがに未経験の方にWeb制作会社を紹介するのは難しいですが、事業会社のWebデザイナー・フロントエンドエンジニアを紹介してもらえる可能性があります。また、Webデザイナーにこだわらなければ、WebディレクターやECサイト担当者などの求人も多数保有しているため選択肢の幅が広がります。一度面談を受けておきましょう。
Web/IT系特化の転職サイト『Green』に登録しておきましょう。Web系転職の定番サイトです。
「デザインスキルを一気に上げる方法は「レビュー」です。つまりデザインに対するダメ出しを何度もしてもらって直すことを繰り返すことで、デザインスキルは急激にレベルアップします！
これを一番実現しやすいのが会社です。会社なら現場で上司や先輩にサイトやバナーのデザインのレビューをしてもらえるからです。じゃあ就職しておらず未経験のうちはどうすればいいかというと、「レビュー付きのデザインスクールの活用」です。普通のスクールはPhotoshopの使い方やコーディングの基礎を学ぶだけで「デザインスキル」についてはほぼ教えてくれません。レビュー付きのデザインスクールは運営側にも高いデザインスキルが求められるため非常に少なく希少性が高く『fullme』が現在は最高峰だと僕は思っています。「けっきょく、よはく」「ほんとに、フォント」など有名デザイン書籍を手がけるingectar-eの運営です。
僕が駆け出しの頃に『fullme』があれば絶対に受講していました...。デザインスキルを高めたい人はぜひ受講しましょう。
「ポートフォリオを作ってみたけど不安...」「周りにレビューをしてくれる人がいない...」
そんなお悩みを解決するために、ポートフォリオのチェックリストを作りました！27,000文字以上の大ボリュームです笑。noteで販売中です。激安のワンコイン500円です。このチェックリストで改善点を見つけて、少しでもポートフォリオの質を上げて、自分が望む就職に繋げましょう！
ご質問や感想など、お気軽にどうぞ！