素人っぽいホームページとプロっぽいホームページの違いは、たった5つの箇所です

「上司にもっとキレイにしてって言われたんですけど、どこをどう直したらいいのか分かりません」
「自分で作ったサイトを友達に見せたら、なんか素人っぽいねって言われました」

この相談、本当に多いんです。

そして、こう聞かれたとき、私がまず確認するのはデザインの良し悪しではありません。5つの箇所を順番に見ていくだけです。

素人っぽさの正体は、センスではありません。直せる箇所が5つあるだけです。

素人っぽく見える原因、5つ

1つずつ書きます。

① 余白がない

余白の不足が一番多い原因です。文字と文字、画像と画像の間にスペースがない。ぎゅうぎゅうに詰まっている。

プロが作ったサイトを見てみてください。びっくりするほど余白があります。「こんなに空けていいの？」と思うくらい。でも、それで成立している。余白は何もないのではなく、見やすさを作っているんです。

② フォントと色が多すぎる

フォントが3種類以上。色が5色以上。これだけで、散らかった印象になります。

プロが使うフォントは、たいてい2種類まで。色も3色まで。少ないから統一感が出る。増やすのは簡単ですが、減らすのが難しい。でも、減らしたほうが洗練されて見えます。

③ 写真の質が低い

暗い。ぼやけている。サイズがバラバラ。

写真は、ホームページの印象を最も大きく左右します。文字を全部読まなくても、写真は目に入りますから。スマホで撮った写真でも、明るさと構図を整えるだけで印象は変わります。

④ 端が揃っていない

文章の左端、画像の左端、見出しの左端。これが微妙にずれている。

人の目は、縦のラインに非常に敏感です。端が揃っていると、内容がまったく同じでも整って見える。揃えるだけです。特別なスキルは要りません。

⑤ 文字が詰まっている

行間が狭い。段落の区切りがない。1つの段落が10行以上続いている。

特にスマホで見たとき、行間が狭いと文字の塊にしか見えません。行間を広げて、段落を短く区切る。たったこれだけで、読める文章に変わります。

5つとも、センスではなく作業で直せます

余白を取る。色を減らす。端を揃える。行間を広げる。——全部、作業として手を動かせば直せることです。

「センスがないから無理」じゃないんです。見るべき場所を知っていれば、誰でも直せる。

私はエイベックス主催のWebデザインコンテストでグランプリを獲ったことがあります。そのとき正直に思ったのは、デザイン力では他の参加者に敵わない、ということでした。（魅せるサイトの話で詳しく書いています）

勝負したのは、コンテンツ力です。見た人がどう感じるか、何を知りたいか。——「かっこいいサイト」と「伝わるサイト」は、同じに見えて違うんです。

実際に直してみると、どう変わるか

ここで、実際にどれくらい変わるかを見てみましょう。

直す前：

• 見出しが赤、本文が緑・紫・紺と、色が分かれている
• 見出しと本文でフォントが違い、強調の一文だけ色も違う
• 写真の縦と横が違って、大きさが揃っていない
• 要素のあいだが狭く、上に寄っている
• 見出し・本文・写真・ボタンの位置がばらばら

直した後：

• 色は3つ。見出しとボタン、本文だけにした。ボタンは大きくして角丸にした
• フォントは見出しと本文の2つだけにした
• 同じ写真を、同じ形・同じ大きさに揃え、角を少し丸くした
• 余白を取り、「初めての方も参加できます。」の前で改行し、「申し込みは下の案内からどうぞ。」を別の段落にした
• 文字は左、写真は右で、それぞれの端を揃えた

中身は同じです。載せている情報は1文字も変えていない。変えたのは見た目の5箇所だけ。それでも、印象はまるで違うものになります。

なぜ、自分では気づけないのか

自分のサイトを毎日見ていると、「見慣れて」しまうんですよね。おかしいところが分からなくなる。制作会社に作ってもらった場合でも、納品された状態が基準になってしまうので、問題点に気づきにくい。

もう一つ。パソコンで見ているから気づけない、というケースが非常に多い。

私は自社のサイトとクライアントのサイト、あわせて20以上を運用しています。その実データを見ると、8割がスマホです。そのほとんどがiPhoneです。パソコンで見ている人は2割弱しかいません。

一般的な統計より、スマホ比率は高めに出ます。私のクライアントに習い事教室やお店が多いからだと思います。会社相手のビジネス（BtoB）だと、パソコンの割合は上がります。でも、これが私の見ている事実です。

つまり、パソコンの大きな画面で「いい感じにできた」と思っていても、実際に見ている人の8割はスマホの小さな画面で見ているんです。

先ほどの5つの問題、特に余白と行間と文字の大きさは、スマホで見ると一気に目立ちます。パソコンでは気にならなかった詰まりが、スマホでは読めない壁になる。

スマホで3つだけ、チェックしてみてください

今、手元のスマホで、あなたのサイトを開いてみてください。まだサイトをお持ちでなければ、「こんなふうに作りたい」と思っているお手本のサイトでかまいません。

見るのは3つだけです。

1. 余白は十分にありますか。要素と要素の間に、息がつける空間がありますか
2. 色は何色使っていますか。4色以上なら、減らすことを検討してください
3. 文字を拡大せずに読めますか。指でピンチしないと読めないなら、それはスマホ対応ができていません

3つのうち1つでも引っかかったら、そこが最初に手をつける場所です。見た目を直したら、次は集客できるサイトの条件もチェックしてみてください。

AIで作っても、ここは直らない

最近はAIを使ってサイトを作る方も増えてきました。AIが出すデザインは一見きれいなんですが、5つの箇所を細かく指示しないと、そのままでは直らないことが多い。

たとえば「余白をもっと広く」「色は3色で」「行間を1.8に」——こういう具体的な指示が出せるかどうかで、AIから出てくるものが変わります。

「かっこいいサイトを作りたい」という気持ちは、否定しません。実際にかっこよく見せる方法はあります。ただ、かっこよさの正体が何なのかを分解できると、指示の出し方が変わるんですよね。（AIを使ったサイト制作については、Cursor・Claudeでサイトは作れるかで詳しく書いています）

5つを直す順番

最後に、直す順番を書いておきます。全部を一度にやろうとすると、どこから手をつけていいか分からなくなるので。

1番目：スマホで表示を確認する。まず現状を把握する
2番目：余白を広げる。これだけで印象が変わります
3番目：色を減らす。3色にする
4番目：端を揃える。左端のラインを意識する
5番目：行間を広げる。段落を短くする

写真は、差し替えに手間がかかるので、最初にやらなくて構いません。まず1番目と2番目だけやってみてください。5分でできます。

5つの直し方は、レッスンで一緒にやります

ここまで読んで、「具体的にCSSでどう書けばいいのか」「スマホ対応って何をすればいいのか」と思った方もいると思います。

5つの箇所を直す具体的な方法は、レッスンの中でお伝えしています。あなたのサイトを画面に映しながら、どこを、どう直すか、その場で指摘して一緒に直します。

今あるサイトを見せてください。どこを直せば見違えるか、体験レッスンでその場でお伝えします。

「自分の目的に合う学び方が分からない」という方は、何から学べばいい？——目的別の学習ルートも参考にしてください。