Webサイト制作の前に知っておきたい！よく使われる「基本設定」まとめ【フォントサイズ＆カラーなど】

藤原

2025.05.14

WebサイトやECサイトを新しく作ろうとしている方や、リニューアルを検討しているWeb担当者さん向けに、よく使われている「定番のWebデザイン設定」をご紹介します。

「まずは何から決めたらいいの？」「自分のサイトのターゲットに合うフォントやサイズって？」
そんなお悩みがある方に向けて、実際のWeb制作現場でよく使われている“ベーシックな設定”を、わかりやすくまとめました！

定番のフォントサイズは？

フォントサイズ	イメージ	用途・使用例
16px	16pxの大きさ	・本文スマホ・PC問わず、多くのサイトで本文に使われる標準サイズ。読みやすさとレイアウトの安定性のバランスがよく、デフォルトのブラウザサイズでもある。
14px	14pxの大きさ	・小さめ本文高齢者向けでない一般的なECや情報サイトで、補足テキストや価格表記に多用される。スマホ表示ではこれが最低ラインのことも。
12px	12pxの大きさ	・補足・注釈利用規約や補足文、フッター内の細かい情報によく使われる。可読性にはやや注意が必要なので、使用箇所を限定するのが一般的。
18px	18pxの大きさ	・小見出しスマホでの見出しや、本文よりも一段大きく目立たせたいパーツに使用。特に読みやすさを重視したUI/UX設計で増加傾向。
20〜32px	20pxの大きさ 32pxの大きさ	・大見出し PCサイトのヒーローヘッダーや大カテゴリ名等で使用。フォントにより行間調整が必要になるため、慎重に使われる。

年齢層別で変わる「読みやすさ」への配慮

ターゲットの年齢層によっても、デザインの“ちょうどよさ”は変わります。
自社サイトのターゲット層に合わせてフォントサイズも調整しましょう。

年齢層	本文フォントサイズの傾向	特徴
20〜30代	14〜16pxが中心	スタイリッシュさやスピード重視
40〜50代	16〜18pxが読みやすい	情報の整理と行間の余裕がポイント
60代以上	18px〜が推奨されることも	ボタンサイズやコントラストも大事に

16pxがよく使われますが、上記のようにターゲット層によりフォントサイズを大きくすることも必要です。
また、ECサイトではターゲット層の目線に合わせたサイトの見やすさが、CV（コンバージョン）にも影響します。売り上げアップのために適切な設定を行なっていきましょう！

よく使われるベーシックなフォントカラー

テキストカラーの黒は実は１色だけじゃないんです。Webサイトのテキストといえば「黒文字」が定番ですよね。でも実は、この“黒”にもいろんな種類があるんです。

色コード	印象	使用例
#000000	強くはっきり	見出しやキャッチコピーに
#333333	柔らかく読みやすい	本文にぴったり
#222222	落ち着いた印象	シンプル系のサイトに合う
#444444	やや明るめのダークグレー	サブテキストや補足情報にgood
#1A1A1A	ソフトな黒色	ダークモードや高コントラストが求められる場面で

パッと見は同じように見えても、ほんの少しだけ明るかったり、グレーがかっていたり。
基本的な黒は#000ですが、#000はコントラストがはっきりしているため特に見出しや強調に向いていて、#333や#222は本文にちょうどいい濃さです。
適切なカラーを設定して見やすいサイトを作るよう心がけましょう！

日本語Webサイトでよく使われるフォントって？

Webサイトの印象は、フォント選びでも大きく変わります。
特に日本語フォントは、明朝体・ゴシック体・丸ゴシック体など、印象に幅があるため、サイトの目的やターゲットに合わせて選びます。

フォント名	特徴	よく使われる場面
Noto Sans JP	Google提供・視認性が高くバランス◎	多言語やECサイトなどに安心して使える
Yu Gothic / 游ゴシック体	Windows標準・スタイリッシュで読みやすい（※Macではインストールされていないので注意）	企業・役所系のWebサイトでも使用多い
游明朝体 / Yu Mincho	高級感あり・フォーマルな印象	雑誌風、商品紹介など雰囲気重視の場面に

特に金融・医療・教育・行政など、信頼や情報の正確さが重視されるサイトでは、落ち着いたゴシック系 or 明朝系が多く使われています。
ECサイトなら「読みやすさ」「親しみやすさ」が重視され、読みやすいゴシック体・優しい印象の丸ゴシック体がよく使われます。

レイアウトや構造の基本もおさえよう

レイアウトの基本設定は、サイト全体の“読みやすさ”や“きちんと感”に深く関わってくる大事なポイントです。


コンテンツ幅	1000〜1200px	PC表示での読みやすさを考慮
行間（line-height）	1.6〜1.75	日本語はゆったりが読みやすい
カラム構成	1〜2カラム	サービス内容に応じて使い分け
ナビゲーション	グローバルナビ＋ハンバーガー	PC・スマホ両対応が基本

コンテンツ幅が狭すぎると窮屈に見えたり、広すぎると読みづらくなったり。
行間が詰まりすぎていると文字がギュッと押し合って、読む気がなくなってしまうことも…。
特に日本語は“文字の密度”が高いので、ゆったりとした余白や行間がとても大事。
見る人が「なんとなく気持ちいいな」「ちゃんと読もうかな」と思えるように、目線の流れや情報の区切りを意識して、レイアウトを整えるのがポイントです。

また、最近ではPCだけでなくスマホやタブレットからのアクセスが主流なので、
「どの画面でもストレスなく見られるか？」も忘れずにチェックしたいですね！

コーポレートサイトとECサイト、どう違うの？

まず、コーポレートサイトとECサイトでは目的が異なるため、使われるデザインや構成にも違いがあります。

サイトの種類	主な目的	よくある特徴
コーポレートサイト	会社のことを正しく伝え、信頼感を持ってもらう（例：会社紹介、採用、取引先への情報提供など）	落ち着いた色づかいで、すっきりとしたデザインが多い。企業の“らしさ”や考え方が伝わる構成が大事。明朝体や細めのフォントを使って、誠実・まじめな印象にすることも。
ECサイト	商品購商品を見てもらい、買ってもらう	商品画像やボタンが目立つレイアウト。ボタンがやや大きめで、スマホでも押しやすいデザインに。買いやすさや見やすさを優先して作られている。

コーポレートサイトは会社の顔となる存在。「この会社、信頼できそう」「きちんとしてるな」と感じてもらうことが大切なので、余白をしっかりとった落ち着いたデザインや、フォーマルな印象のフォントがよく使われます。
また、「どんな雰囲気の会社なのか」「大切にしている価値観」「他社との違い」など、企業としての“らしさ”や“色”を感じてもらえるかどうかも、とても重要なポイントです。

一方で、ECサイトは商品を見てもらって、最終的には「買ってもらうこと」がゴール。
そのためには、「どこに何があるか」がすぐにわかる視認性の高さや、スマホでもスムーズに購入できる使いやすさが重要です。
また、ECサイトでは商品写真や価格が目立つレイアウトになっていることが多く、ボタンや文字も少し大きめで、「ここを押せばOK」と感覚的にわかるように設計されています。
同じ“Webサイト”でも、目的が違えば「見た目」や「使いやすさ」の正解も変わってくるんですね。

まとめ：基本をおさえて、サイト設計をスムーズに

Webサイトづくりは、まず「定番」から始めるとスムーズです。

読みやすいフォントサイズ・色の選び方
ターゲットに合った情報設計
レスポンシブ対応を考慮したレイアウト構成

こうした“基本”が整っているだけで、サイトの信頼感・印象・使いやすさがグッと変わります。

制作のご相談は猫の手へお任せください！

「自分たちのターゲットに合ったサイトって、どんな見た目が正解？」
「今のサイト、ちょっと古い気がする…どこを直せばいいの？」
そんなときは、ぜひWeb制作のプロ・猫の手にご相談ください！
ECサイトや企業サイトの制作はもちろん、“誰に見せるか”を大事にした設計・デザインを得意としています。
お気軽に以下のお問い合わせフォームからご相談ください。猫の手がお力になります。

この記事をシェアする