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制作会社に正社員で入社することを強くオススメしています。
Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強い『ワークポート』と『Webist』の２つです。
※コロナもほぼ収まりつつありますが、まだワークポートもWebistですら未経験OKの求人が少ない状況です。ただ、少しでも選択肢を増やすために、また今後状況が改善されてきた時のために、ポートフォリオを制作後に登録しておきましょう。
エンジニアになるのは本当に難しいです。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。
でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。
ほとんどの人がエンジニアにはなれないので、50〜60万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』のようなスクールに行きましょう。プログラマカレッジは、学校＆就職支援の一体型サービスです。
他にも、PHPに特化した無料の『無料PHPスクール』もあります。PHPはがっつりプログラミングの言語である一方で、ECサイト構築やWordPressにも使われるWeb系と親和性が高い言語なので、Web系に進みたい人には無料PHPスクールはオススメです。23日間通学でけっこうハードなカリキュラムです。
この２つの学校のどれかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。
「ポートフォリオを作ってみたけど不安...」「周りにレビューをしてくれる人がいない...」
そんなお悩みを解決するために、ポートフォリオのチェックリストを作りました！27,000文字以上の大ボリュームです笑。noteで販売中です。激安のワンコイン500円です。このチェックリストで改善点を見つけて、少しでもポートフォリオの質を上げて、自分が望む就職に繋げましょう！
ご質問や感想など、お気軽にどうぞ！