「もっと詰めて、たくさん載せて」が、ホームページを読みにくくする

1. 「この空いているところ、もったいなくないですか」

中小企業の経営者の方とお話していて、こんな言葉をよく聞きます。

「デザインの案を見せてもらったら、右側も下も、けっこう空いているんです。せっかくのホームページなので、もっと詰めて、実績の写真も資格も全部載せてほしいんですよね。空いていると、手を抜いているように見えて」

この気持ちは、よく分かります。お金をかけて作るのですから、伝えたいことは全部伝えたい。空いている場所があると、そこに何か置けたはずだと感じます。

ただ、ホームページで同じことをすると、載せたものが増えるほど、1つずつが読まれなくなります。全部が同じ大きさで、すき間なく並んでいると、読む人はどこから見ればいいか分からないまま、画面を送ってしまいます。

この記事では、空いている場所、つまり余白を、どう取ればいいかを書きます。情報を減らす話ではありません。載せる量はそのままで、置き方を変える話です。

近い記事との分け方

近い話を書いた記事があるので、先に役割を分けておきます。

• 文章をどれくらいの長さにするか ― ホームページの文章は、長いほうがいいのか に書きました
• 1文ずつの直し方 ― ホームページの文章を、読みやすく直す に書きました
• トップの最初の画面に何を置くか ― トップページの最初の画面に、何を置くか に書きました
• この記事 ― 書いた文章や写真を、画面の上でどう並べ、どこを空けるかに絞った話です

この記事で書くこと

• 余白とは何か。なぜ詰めたくなるのか
• 1つの画面で、言いたいことを1つにする
• 段落と段落の間、見出しと写真の周り
• スマートフォンでは、とくに気をつけること
• 削らずに、別のページや折りたたみへ移す
• 全部を同じ幅・同じ並びにしない

2. 余白は、何もない場所ではない

先に、言葉を1つ説明しておきます。

余白とは

デザインの世界で余白（ホワイトスペースとも言います）と呼ぶのは、文字や写真が置かれていない場所のことです。白い場所とは限りません。背景が薄い色でも、何も置かれていなければ余白です。

段落の間も、写真の周りも、ページの端から本文までの距離も余白です。何かと何かの間にある距離は、全部余白だと考えてください。

余白があると、大事なものが目に入る

余白の役目は、置いたものを目立たせることです。

人の目は、周りが空いているものに先に向きます。壁一面に貼り紙がある掲示板と、白い壁に1枚だけ貼ってある紙を思い浮かべてください。同じ紙でも、1枚だけのほうが先に目に入ります。

ホームページも同じです。電話番号の周りが空いていれば、電話番号が目に入ります。すぐ横に資格のロゴやお知らせが並んでいれば、電話番号はその中の1つになります。周りを空けることは、そのものに「ここを見てください」と言う方法です。

詰めると、全部が同じ重さに見える

反対に、全部を詰めて並べると、全部が同じ重さに見えます。読む人は、どれが大事なのかを自分で決めなければいけません。

決められない人は、読まずに次の画面へ進みます。載せたのに読まれていない状態が、ここで生まれます。

空いている場所が、もったいなく見える理由

それでも空いた場所がもったいなく見えるのには、理由があります。

• 紙の感覚 ― チラシは紙の大きさに限りがあるので、空いた場所は使い残しに見えます。ホームページは下へ送れば続くので、その限りはありません
• 費用の感覚 ― 払ったお金に対して載っている量が少ないと、損に感じます。けれども、払っているのは載せる量ではなく、伝わるかどうかのはずです
• 大きな画面で見ている ― 確認をパソコンの大きな画面でしていると、余白は広く見えます。スマートフォンでは、その余白がかなり縮みます

3. 1つの画面で、言いたいことを1つにする

余白を取るための考え方で、いちばん効くのがこれです。

「1つの画面」とは

ここで言う「1つの画面」は、ページを下へ送っていくときに、一度に目に入る範囲のことです。トップページの最初の画面だけではありません。2つ目の画面、3つ目の画面、それぞれに言いたいことが1つずつある状態を目指します。

たとえば、ある画面では「どんな仕事か」、次は「どの地域で受けているか」、その次は「どう頼めばいいか」。1つの画面に1つの話なので、余白を取っても話は欠けません。

隣に置くと、競い合う

1つの画面に2つ3つの話を並べると、話同士が目を取り合います。サービスの説明の横に、採用の募集とお知らせが並んでいる。どれも大事ですが、隣に置かれた瞬間に、どれも半分しか読まれなくなります。

並べたくなったら、「この画面を見た人に、何を1つ持ち帰ってほしいか」を考えてください。2つあるなら、画面を2つに分けます。ページは縦に長くなりますが、長いことと読みにくいことは別です。

確かめ方は、一言で言えるか

できあがったページで、画面を1つ送るごとに、「この画面は何を言っているか」を一言で言ってみてください。

• 一言で言える ― その画面は、言いたいことが1つにまとまっています
• 「〇〇と、それから△△と」になる ― 2つの話が同居しています。どちらかを次の画面へ移せないか考えます
• 何を言っているか分からない ― 飾りや一覧だけが並んでいて、話が無い画面です。いちばん直しがいがあります

4. 段落と段落の間、見出しと写真の周り

画面の大きな区切りが決まったら、次は細かい間の取り方です。ここは制作会社が組むところですが、どう見えていれば良いかを知っておくと、直してほしいところを伝えやすくなります。

行と行の間

行間は、文章の行と行の間のことです。行間が詰まっていると、読んでいる途中で次の行に目が移るとき、どの行に移ればいいか迷います。結果として、同じ行を二度読んだり、1行飛ばしたりします。

広すぎても、文章がばらばらに見えます。3行ほど読んでみて、次の行に目が自然に移るかを確かめてください。

段落と段落の間

段落の間は、行間より少し広く取ります。段落が変わるところで話が変わるので、間が広いと、読む人は「ここで話が切り替わった」と気づけます。

段落の間が行間と同じだと、文章全体がひとかたまりの壁に見えます。どこまで読んだか分からなくなります。

見出しは、上を広く、下を狭く

見出しの周りの余白には、決まりごとが1つあります。見出しの上は広く、下は狭く取ることです。

人は、近くにあるものを仲間だと受け取ります。デザインの言葉では近接と呼ぶ考え方です。見出しの上が広く、下が狭ければ、見出しは下の本文の仲間に見えます。反対に、見出しの上と下が同じ間隔だと、見出しが前の段落のものか、後ろの段落のものか、一瞬迷います。

同じことは、写真と説明文、ボタンと補足の一行にも言えます。一緒に読んでほしいものは近くに、別の話は離して。これだけで、読む人は線や枠が無くても、どこからどこまでが1つの話かを見分けられます。

写真の周り

写真は、本文より強く目を引きます。そのぶん、周りが詰まっていると窮屈に見えます。

• 写真と本文の間を空ける ― 写真の端に文字がくっついていると、写真も文字も読みにくくなります
• 写真を並べるときは、すき間をそろえる ― 横に並べた写真のすき間がまちまちだと、それだけで雑に見えます
• 写真に文字を重ねるなら、写真の中の空いた場所に ― 空や壁のように、何も写っていない部分に文字を置きます。人の顔や商品の上に文字を重ねると、どちらも見えなくなります

線や枠で区切りすぎない

詰めたページによくあるのが、話ごとに線を引いたり、枠で囲んだりして区切るやり方です。枠の中にさらに枠があり、その中に小さな箱が並ぶ。区切りが多いほど、画面は線だらけになります。

区切るだけなら、余白で足ります。話と話の間を広く空ければ、線が無くても別の話だと分かります。線や枠は、本当に分けて見せたいところにだけ使い、ほかは余白に任せたほうが、すっきり見えます。

5. スマートフォンでは、とくに余白が効く

ホームページは、スマートフォンで見られることが多くなっています。そして、余白の取り方でいちばん差が出るのも、スマートフォンです。

パソコンの余白は、スマートフォンでは縮む

パソコンで広く見えていた余白は、スマートフォンでは横幅に合わせて小さくなります。パソコンで「空きすぎでは」と感じた余白が、スマートフォンではむしろ足りないこともあります。

ですから、余白が多すぎるかどうかは、スマートフォンで見てから判断してください。パソコンの画面だけで「もっと詰めて」と決めると、スマートフォンではすき間の無い画面になります。

左右の端に、文字をくっつけない

スマートフォンで多いのが、画面の左右の端まで文字が来ている状態です。画面が狭いからと左右の余白をゼロにすると、かえって読みにくくなります。左右に少し空きがあるほうが、1行ずつ目で追いやすくなります。

横に並んでいたものが、縦に並ぶ

パソコンで横に3つ並んでいた箱は、スマートフォンでは縦に3つ並びます。このとき、箱と箱の間が狭いと、3つが1つの長いかたまりに見えます。どこで次の話に変わったのかが分かりません。

縦に並べ替わる部分は、パソコンより間を広めに取るくらいでちょうどいいことがあります。

押すもの同士の間

スマートフォンでは、指で押します。電話のボタン、メニュー、地図へのリンク。押すもの同士が近すぎると、隣を押してしまいます。押し間違えが続くと、戻って押し直さずに閉じてしまう人もいます。

押すものの周りの余白は、見た目のためだけでなく、押しやすさのための余白でもあります。スマートフォンで人が離れる原因は、スマートフォンで見たときに、人が離れる7つのこと に一覧にしてあります。

6. 削らずに、別のページや折りたたみへ移す

余白を取るためには、1つの画面に置くものを減らす必要があります。ここで多くの方が、「では、何を削ればいいのか」と考えます。

情報を削るのではなく、置き場所を変える

答えは、削らずに移すことです。載せたいものを諦める必要はありません。載せる場所を、いまのページから別のページへ、あるいは開いたときだけ見える場所へ移します。

トップページに全部の情報を置こうとすると、トップがあふれます。けれども、トップの役目は全部を説明することではなく、読む人を、知りたい情報のあるページへ案内することです。詳しい説明は、詳しく読みたい人が行く先のページにあれば十分です。

移す先は3つ

移す先は、だいたい次の3つです。

• 別のページ ― 量が多く、読みたい人がはっきりしているもの
• 折りたたみ ― 押すと開き、もう一度押すと閉じる仕組みです（アコーディオンとも呼ばれます）
• 表 ― 文章で並べると長くなる比較や条件

折りたたみに向くもの、向かないもの

折りたたみは便利ですが、何でも畳めばいいわけではありません。

• 向くもの ― よくある質問、細かい手順、補足の説明。読む人が、自分に関係のある項目だけを選んで開くもの
• 向かないもの ― 料金、断る条件、営業時間、電話番号。誰もが知っておくべきことを畳むと、開かれないまま読まれません

迷ったら、「開かなかった人が困るかどうか」で決めてください。困る人がいるものは、畳まずに見える場所に置きます。

7. 全部を同じ幅・同じ並びにしない

余白を取ったのに、なぜか単調に見える。そういうページもあります。原因はたいてい、全部が同じ形で並んでいることです。

一本調子に見える、よくある形

次のような形が続くと、ページは一本調子に見えます。

• 全部の文章が、同じ幅で左に寄っている ― 上から下まで、同じ位置から始まり、同じ位置で折り返す
• 全部の話が、同じ大きさの箱に入っている ― 箱の大きさも、間隔も、角の形も同じ
• 写真と文章が、毎回同じ並び ― 左に写真、右に文章。次も、その次も同じ

1つずつは間違っていません。けれども、全部が同じだと、読む人はどこが大事なのかを形から読み取れなくなります。

強弱をつける

デザインの言葉で言えば、強弱（メリハリとも言います）をつけることです。やり方はいくつかあります。

• 幅を変える ― 本文は読みやすい幅に収め、大事な一言や写真だけ画面いっぱいに広げる
• 余白の量を変える ― 大事な話の前後だけ、ほかより広く空ける
• 並びを変える ― 写真と文章の左右をときどき入れ替える。中央にそろえる場所と、左にそろえる場所を分ける
• 大きさを変える ― いちばん見せたい写真1枚だけを大きくする

強弱をつけるときに大事なのは、変える理由があるところだけ変えることです。全部を変えると、今度はまとまりが無くなります。大事な話を1つ決めて、そこだけ形を変える、という順番で考えてください。

色と書体も、同じ考え方

強弱は、色や書体でもつけられます。ただし、使う色や書体を増やしすぎると、余白で整えたものがまた騒がしくなります。色と書体の決め方は、ホームページの色と書体を、どう決めるか にまとめました。余白で強弱をつけ、色と書体は控えめに、という組み合わせが落ち着きます。

Step 1（今日）：スマートフォンで、画面ごとに一言で言ってみる

ここからは進め方です。まず、自社のトップページをスマートフォンで開いて、画面を1つ送るごとに「この画面は何を言っているか」を一言で言ってみてください。言えなかった画面に、印をつけておきます。

Step 2（今週）：印をつけた画面の、移す先を決める

印をつけた画面に並んでいるものを書き出して、この画面に残すもの1つと、移すものに分けます。移すものは、別のページか、折りたたみか、表か、行き先を決めます。

Step 3（今月）：制作会社に、移す先と一緒に伝える

「もっとすっきりさせて」ではなく、「この画面は〇〇だけにして、△△は会社概要へ移してほしい」と、移す先まで添えて伝えてください。やりとりが短くなります。

8. 雄喜晃の伴走：載せたいものは削らずに、置き場所から一緒に決めます

私たち雄喜晃のホームページ制作では、載せたいとおっしゃるものを、こちらの判断で削ることはしません。全部を伺ったうえで、どのページの、どの画面に置くかを一緒に決めます。

私たちがやること

最初のお打ち合わせで、載せたいものを全部書き出していただきます。そこから、トップに置くもの、別のページへ移すもの、折りたたみや表にするものを分け、画面ごとに言いたいことが1つになる並びを組みます。大事な話の前後は広く空け、全部が同じ形で並ばないように、幅や並びに強弱をつけます。

写真は、貴社で撮っていただいたものをお預かりし、明るさや切り取り方を整えて、周りの余白と一緒に配置します。組んだページは、パソコンより先にスマートフォンでお見せします。片手で送りながら、画面ごとに何の話か伝わるかを、一緒に確かめてからお渡しします。

公開したあとに「この情報も足したい」と思われたときも、月5回までの更新代行が月額に含まれているので、置き場所を考えたうえでこちらで反映します。

料金と条件

料金は制作費0円、月額8,800円（税別）からです。6ページ構成のプランは月額13,800円（税別）です。サーバー、独自ドメイン、SSL、保守はすべて月額に含まれます。

最低契約期間は6ヶ月です。7〜35ヶ月で解約された場合、サイトは非公開になります。36ヶ月以上ご継続いただいた場合は、サイトをお渡しします。

私たちがやらないこと

先に書いておきます。どの情報を載せるか、載せないかを、私たちが決めることはしません。それは貴社の商売の判断だからです。私たちがやるのは、決めていただいた中身を、読まれる置き方に組むことです。

また、空いた場所を埋めるために、貴社の事実に無い言葉や、意味の無い飾りを足すこともしません。余白を整えることで、検索の順位が上がる、問い合わせが増えるとお約束することもいたしません。

実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台を拠点に、2025年10月から活動しています。

「載せたいものが多すぎて、どう並べればいいか分からない」という方は、一度ご相談ください。

9. まとめ：空けた場所が、大事なものを見せてくれる

ホームページの余白で押さえることは、5つです。

• 余白は、置いたものを目立たせるための場所 ― 周りが空いているものに、人の目は先に向く
• 1つの画面に、言いたいことは1つ ― 送るたびに一言で言えるかで確かめる
• 近いものは仲間、離れたものは別の話 ― 見出しは上を広く下を狭く。線や枠より、余白で区切る
• 判断はスマートフォンで ― パソコンで広く見える余白は、スマートフォンでは縮む
• 削らずに移し、形に強弱をつける ― 別のページ・折りたたみ・表へ。全部を同じ幅・同じ並びにしない

詰め込みたくなるのは、伝えたいことがたくさんあるからです。その気持ちは大事にしてください。伝えたいことが多い会社ほど、置き方を決めると、一つひとつが読まれるようになります。

まずは今日、ご自分のスマートフォンで自社のトップページを開いて、画面を1つずつ送ってみてください。一言で言えない画面が、直す場所です。

ぜひ一度、お話を聞かせてください。貴社の載せたいものを全部伺って、置き場所を決めるところから、ご一緒します。