現役WEBデザイナー・コーダーが選ぶ、デザインカンプで使用されている有料フォントの代替案

2024-11-282024-11-29

現役WEBデザイナーコーダが教えるデザインカンプで使用される有料フォントの代替案

現役WEBデザイナー・コーダーが使用するGoogleフォント：デザインカンプで使用されている有料フォントの代用フォント早見表の提案

早見表の情報だけ欲しい！！！という私のようなせっかちさんはコチラから

1. はじめに

最近WEBデザインデータの制作だけではなく、すでにデザインカンプを制作されたPSDやfigumaのデザインデータをいただき、有料テーマや無料テーマでのWordPressコーディングのみのお仕事を承ることが増えてきました。

もともとは私もPhotoshopやXDなどでデザインデータのみを触るWEBデザイナーとして働いていましたが、現在はコーディングまで完結できるWEBデザイナー・コーダーとしてフリーランスでお仕事をしています。

そのお取引させていただいている
数社の企業様や個人事業主の制作会社様からいただくデザインデータを見て
そこで感じたのが、使用しているフォントが有料フォント（Adobeフォントやモリサワ）が多く、似たGoogleフォントを探して代用することがあまりにも多い……！！！

WEBデザイナーを始める人が爆発的にコロナ禍以降に増えてきて、スキルがピンキリと耳にはしていましたがコーダーとしてかなり「うわ〜〜〜！！！(画像書き出しに思いっきり時間がかかる絶望、小数点以下乱用のフォントサイズ、統一感のないマージンect…)」と感じるデータ作りに鉢合わせるのも増えてきました。

そんな案件や、その案件に困る同業のデザイナーさんコーダーさんが一人でも少なくなることを願って今回は記録としてフォントの早見表を残しておきます。
この記事で大体のフォント代用早見表を作って、見ていただいた方ももちろん、私自身の作業効率UPにも繋げれたら嬉しいです。

「この有料フォントWEBに実装できない、どのフォントを使えばいいかわからない…」
「デザインのテイストは決まっているけど本文のフォントどれにしようか迷う」

そう思ったことがある方へ。

本記事では、現役のWEBデザイナー・コーダーが実際に使用しているおすすめのGoogleフォントと、その導入方法をわかりやすく解説します。初心者の方でもすぐに使える内容なので、ぜひ参考にしてみてください！

2.Googleフォントとは？

Googleフォントは、Googleが提供する無料のWebフォントサービスで、以下のようなメリットがあります。

完全無料で使用可能
商用利用OK（ライセンスフリー）
デザイン性と可読性に優れたフォントが多数
簡単にWebサイトに導入できる
PCやスマホ、様々なデバイスごとでのデザイン表示の統一ができる

これらの特徴から、初心者からプロまで、幅広いWEBデザイナーやコーダーが活用しています。
私は「PCやスマホ、様々なデバイスごとでのデザイン表示の統一ができる」この点においてWebサイトではほとんどGoogleフォントを使用してデザイン・コーディングを行なっています。

昨今では本当に多岐にわたるデバイスでの閲覧がありますので
確認するデバイスが違えど、同じデザインが差異なく表示されるのが
そのサイト・ブランドの共通イメージを崩さずに伝えられるメリットが大きいと思っています。

WEBコーダー必見！頻出有料フォントのGoogleフォント代用早見表

※テーブル内の代用フォントをクリック・タップでGoogleフォントページへジャンプします。

2024/11/28 最終更新

有料フォント（Adobe等）	代用Googleフォント和文	代用Googleフォント欧文
ヒラギノ角ゴ	Noto Sans JP BIZ UDP ゴシック
游ゴシック	Zen Kaku Gothic Antique
リュウミン游明朝	Noto Serif JP
Futura		Jost
DIN		Oswald
Helvetica		Hind