トップページの最初の画面に、何を置くか

1. 「トップは、とにかく印象に残るものにしたいんです」

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

「トップページは会社の顔なので、大きな写真をドンと出して、かっこいい一言を載せたいんです。細かい説明は下に書けばいいですよね」

お気持ちはよく分かります。トップページは、会社の印象を決める場所です。ただ、ここで1つだけ考えていただきたいことがあります。その「下」まで、読む人はスクロールしてくれるでしょうか。

トップページを開いた人が、スクロールせずに見える範囲。この記事では、そこを「最初の画面」と呼びます。最初の画面は、サイトを開いた人の全員が見る、ほぼ唯一の場所です。2画面目から先は、最初の画面を見て「続きを読もう」と思った人しか見ません。

ですから、最初の画面の役目は、印象を残すことより先に、「この会社のサイトを、もう少し見てみよう」と思ってもらうことです。そのために何を置き、何を置かないか。この記事では、それを順番に決めていきます。

この記事で書くこと

• 最初の画面で、読む人が確かめている4つのこと
• 大きな写真と抽象的なキャッチコピーだけ、の何が困るのか
• 4つを1つの画面に収める組み方
• スライドショーをどう扱うか
• スマートフォンの最初の画面で気をつけること
• 最初の画面に置かないほうがいいもの

会社の強みのうち、どれを最初の画面に出すかは 「うちの強み」を、ホームページにどう書くか で書きました。この記事では、強みに限らず、最初の画面という場所そのものの組み立て方を扱います。

2. 最初の画面で、読む人が確かめている4つのこと

トップページを開いた人は、文章を読む前に、画面をざっと眺めます。そのとき頭の中で確かめているのは、だいたい次の4つです。

① 何の会社か

いちばん先に知りたいのはこれです。工事の会社なのか、士業の事務所なのか、製造業なのか。業種が分からないと、その先を読む理由がありません。

社名だけで業種が分かる会社は、意外と少ないものです。カタカナや英語の社名、創業者の名前を冠した社名では、知らない人には何の会社か伝わりません。

② どこの会社か

地域で商売をしている会社なら、場所はとても大事です。読む人は「自分のところまで来てくれるか」「通える距離か」を知りたがっています。市区町村の名前が1つあるだけで、自分に関係のある会社かどうかが分かります。

全国から仕事を受けている会社でも、本社の所在地は書いておいて損はありません。どこの誰がやっているのか分かることが、安心の材料になるからです。

③ 誰向けか

同じ業種でも、相手によって中身は大きく変わります。個人のお宅向けか、法人向けか。新築か、修理か。自分が対象に入っているかどうかを、読む人は最初の画面で判断します。

「誰向けか」が書かれていないと、法人の担当者は「個人向けの会社かな」と思って閉じ、個人の方は「うちみたいな小さい依頼は受けてくれないかな」と思って閉じます。どちらにも取りこぼしが出ます。

④ 次に押すもの

最後に、「この会社かもしれない」と思った人が、次にどこを押せばいいか。サービスの説明を見るのか、料金を見るのか、電話をかけるのか。次の一歩が見えていると、人はスクロールするか、押すかのどちらかをします。見えていないと、戻るボタンを押します。

ボタンの言葉と置き場所の決め方は 「お問い合わせはこちら」のボタンを、何と書き、どこに置くか に詳しくまとめました。ここでは、最初の画面に置くボタンは1つか2つまで、とだけ覚えておいてください。

3. 大きな写真と抽象的なキャッチコピーだけ、の何が困るのか

よく見かけるのが、画面いっぱいの写真に、短いキャッチコピーが重なっている形です。「未来をつくる」「想いを、かたちに」「挑戦し続ける」。写真はきれいで、言葉も前向きです。それでも困ることがあります。

写真は、業種を説明してくれない

写真は雰囲気を伝えるのが得意です。ただ、何の会社かを説明するのは苦手です。青空と建物の写真は、建設会社にも、不動産会社にも、設計事務所にも見えます。握手している人の写真は、どの業種にも当てはまります。

素材として販売されている写真を使っている場合は、なおさらです。同じ写真をほかの会社も使っているかもしれません。読む人の記憶には、写真の会社として残っても、貴社としては残りません。

抽象的な言葉は、どの会社にも当てはまる

「未来をつくる」は、ほぼすべての会社に当てはまります。どの会社にも当てはまる言葉は、初めて見る人にとって、何も書いていないのと同じです。

こうした言葉は、社内や取引先のように、すでに貴社を知っている人に向けた言葉です。知っている人が読むと「うちの会社らしい」と感じます。ところが、トップページを初めて開いた人は、貴社のことをまだ何も知りません。知らない人に、知っている人向けの言葉を見せている状態です。

キャッチコピーを捨てる必要はない

ここで誤解のないように書いておきます。キャッチコピーをやめましょう、という話ではありません。会社の考え方を表した言葉には、ちゃんと意味があります。見出しの一行そのものの決め方は トップページの見出しを、どう決めるか に分けて書きました。

足りないのは、その横に添える説明の一行です。「〇〇市の外壁塗装・屋根工事の会社です」のような、飾りのない一行。キャッチコピーが会社の考え方を伝え、説明の一行が何の会社かを伝える。役割を分ければ、どちらも生きます。

名刺にたとえると分かりやすいと思います。名刺には社名だけでなく、肩書きや事業内容が書いてあります。トップページの最初の画面にも、この肩書きにあたる一行が要るのです。

4. 4つを、1つの画面にどう収めるか

では、4つをどう収めるか。組み方を具体的に書きます。

説明の一行に、3つをまとめる

何の会社か、どこの会社か、誰向けか。この3つは、1つの文にまとめてしまうのがいちばん収まりがいいです。

• たとえば「神戸市西区・北区で、戸建て住宅の外壁と屋根の塗り替えをしています」
• たとえば「尼崎で、町工場の就業規則と労務の相談を受けている社会保険労務士事務所です」
• たとえば「姫路から、精密部品の試作と小ロットの加工をお受けしています」

例はすべて架空です。どれも、地域・相手・仕事の3つが入っています。長く見えても、1文に収まっていれば読まれます。3つを別々の行に分けると、かえって目が散ります。

キャッチコピーと説明の一行は、大きさで分ける

両方を置くときは、どちらを主役にするかを決めて、文字の大きさで差をつけます。同じ大きさで2つ並ぶと、どちらを読めばいいか迷われます。

初めての人が多いサイトなら、説明の一行を大きく、キャッチコピーを小さく。名前で検索して来る人が多いサイトなら、その逆でも構いません。迷ったら、説明の一行を大きくしてください。困る人が少ないのはこちらです。

次に押すものは、1つを目立たせる

ボタンは、最初の画面に1つか2つ。2つ置くなら、重さの違うものにします。「無料で見積もりを頼む」と「施工事例を見る」のように、決めた人の一歩と、まだ迷っている人の一歩です。

電話で受けることが多い商売なら、電話番号と受付時間を最初の画面に置くのも有効です。番号だけでなく、受付時間を添えてください。夜に見た人が、今かけていいのか迷わずに済みます。

最初の画面のすぐ下に、何を置くか

最初の画面で「もう少し見よう」と思った人は、すぐ下を見ます。ここには、説明の一行を裏づけるものを置きます。主なサービスへの入口、実績を2〜3件、料金の目安などです。

サービスのページそのものをどの順番で書くかは サービス紹介のページは、どの順番で書けばいいか にまとめました。トップページは、そのサービスのページへ人を送り出す玄関だと考えると、置くものが決めやすくなります。

5. スライドショーは、何が困るのか

最初の画面で写真が数秒ごとに切り替わる、スライドショー。今も多くのサイトで見かけます。これにも、困ることがいくつかあります。

2枚目から先は、ほとんど見られない

スライドショーは、待っていれば次の写真が出てきます。ただ、読む人は待ってくれません。最初の1枚を見て、スクロールするか閉じるかを決めます。2枚目、3枚目に大事なことを載せても、見ているのは一部の人だけです。

文字を重ねると、読み終わる前に消える

写真ごとに違う言葉を重ねている場合は、さらに困ります。読んでいる途中で次の写真に切り替わり、言葉が消えてしまうからです。読み直したくても、一周するまで待つしかありません。

表示が重くなりやすい

大きな写真を何枚も読み込むので、表示に時間がかかりやすくなります。特にスマートフォンでは、写真が出るまでの間、何もない画面を見せることになります。重さの見直し方は ホームページが重いと言われたときに、まず見るところ にまとめてあります。

スライドショーは、決めずに済ませる仕組みになりやすい

もう1つ、作る側の事情もあります。スライドショーが選ばれる理由をお聞きすると、「どの写真も捨てがたい」「どの事業も載せたい」という声が多いのです。

つまり、1枚に決められないので、全部を順番に出しているわけです。これは、社内の合意としては楽な形です。ただ、読む人にとっては、何の会社か分かりにくくなる形でもあります。

1枚に決めるときの選び方

写真は、1枚に決めてください。選ぶときの目安は3つです。

• 仕事をしている場面 ― 完成品だけより、手を動かしている場面のほうが業種が伝わります
• 人が写っている ― 社員や代表の顔が見えると、どんな人がやっているかが伝わります
• 文字を置く余白がある ― 空や壁など、説明の一行を重ねても読める場所がある写真

選ばなかった写真は、捨てる必要はありません。サービスのページや実績のページで、その写真がいちばん効く場所に置いてください。トップに背景動画を置く場合の考え方も、ほぼ同じです。詳しくは ホームページに、動画は載せたほうがいいのか に書きました。

6. スマートフォンの最初の画面は、もっと狭い

ここまでの話は、スマートフォンだとさらに切実になります。

パソコンで見えていたものが、スマートフォンでは見えない

パソコンの画面は横に広いので、写真と説明の一行とボタンが、横に並んで1画面に収まります。ところが、スマートフォンでは同じものが縦に積まれます。写真で画面が埋まり、説明の一行もボタンも、スクロールしないと見えなくなります。

パソコンで最初の画面を確かめて安心していると、スマートフォンでは写真しか見えていない、ということが起きます。

説明の一行は、写真より上か、写真の上に

スマートフォンでは、説明の一行が写真より先に目に入るように組みます。写真の上に重ねるか、写真の高さを抑えて、その上か下にすぐ文字が来るようにします。

上の帯（ロゴとメニューが入っている部分）が太すぎないかも見てください。帯が太いと、それだけで最初の画面の上のほうが埋まります。ロゴは小さくても読めれば十分です。

文字を写真に焼き込まない

説明の一行やキャッチコピーを、写真の中に画像として焼き込んでいるサイトもあります。これは避けてください。スマートフォンで縮むと、文字が読めない大きさになるからです。

また、画像の中の文字は、検索の仕組みにも文字として読まれにくくなります。文字は文字として置き、写真の上に重ねる形にしてください。直すときに、画像を作り直さずに済むという利点もあります。

自分のスマートフォンで、入口ごとに開いてみる

確かめ方は簡単です。自分のスマートフォンで、お客様が来る入口からトップページを開いてください。会社名で検索して開く。Googleマップの「ウェブサイト」から開く。名刺のQRコードから開く。

開いたら、スクロールする前の画面だけを見て、何の会社か・どこの会社か・誰向けかが分かるかを確かめます。スマートフォンで人が離れるほかの原因は スマートフォンで見たときに、人が離れる7つのこと にまとめました。最初の画面を直したら、あわせて確かめてみてください。

7. 最初の画面に置かないほうがいいもの

最後に、最初の画面から外したほうがいいものを挙げます。どれも悪いものではありません。置く場所が、最初の画面ではないというだけです。

事業がいくつもある会社は、いちばん多いお客様に向けて書く

事業が複数ある会社は、説明の一行に全部を入れたくなります。ただ、全部を入れると、一行が長くなり、誰向けかがぼやけます。説明の一行は、いちばん多いお客様に向けて書くのが基本です。

ほかの事業は、すぐ下の段で並べて入口を作ります。どの事業を一行に入れるかは、売上の大きさだけでなく、これから伸ばしたい事業かどうかも含めて、経営者が決めることです。

Step 1（今日）：最初の画面だけを、スマートフォンで撮っておく

ここからは、やる順番です。まず、自分のスマートフォンでトップページを開き、スクロールする前の画面を画面写真で残してください。これが直す前の記録になります。

Step 2（今週）：説明の一行を書き、社外の人に見せる

地域・相手・仕事の3つを入れた説明の一行を書きます。書けたら、貴社を知らない知人やご家族に、最初の画面だけを短い時間見せて「何の会社だと思う？」と聞いてみてください。答えが一行と合っていれば、最初の画面は役目を果たしています。

Step 3（今月）：置かないものを、移す先へ移す

表の左の列に当てはまるものがあれば、右の列の場所へ移します。写真は1枚に決め、ボタンは1つを目立たせます。直したら、Step 1と同じ画面写真を撮って並べてみてください。

8. 雄喜晃の伴走：最初の画面の一行から、一緒に決めます

私たち雄喜晃のホームページ制作では、トップページの最初の画面を、写真選びより先に、説明の一行から決めます。最初のお打ち合わせで、どんなお客様が、どこから、どんな用件で来るのかを伺い、その方たちに向けた一行を一緒に書きます。

私たちがやること

説明の一行の言葉を決め、写真を1枚に絞り、ボタンの言葉と数を決めます。そのうえで、パソコンとスマートフォンの両方で、最初の画面に4つが収まっているかを確かめてから公開します。置かないほうがいいものは、効く場所へ移して配置します。

料金と条件

料金は制作費0円、月額8,800円（税別）からです。6ページ構成のプランは月額13,800円（税別）です。サーバー、独自ドメイン、SSL、保守は月額に含まれます。月5回までの更新代行も同じ月額の中なので、公開後に説明の一行や写真を差し替えたくなったときも、ご連絡いただければこちらで反映します。

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

私たちがやらないこと

どの会社にも当てはまる言葉だけで、最初の画面を飾ることはしません。素材の写真を何枚も切り替えて見栄えを整えることも、おすすめしていません。また、最初の画面を直せば検索の順位が上がる、問い合わせが増える、といったお約束もしていません。やるのは、初めて来た人に何の会社かが伝わる画面を、貴社の事実で組むことです。

実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台を拠点に、2025年10月から活動しています。「トップページはきれいだけれど、何の会社か伝わっているか自信がない」という方は、一度ご相談ください。

9. まとめ：最初の画面は、名刺の肩書きと同じ

トップページの最初の画面で押さえることは、5つです。

• 4つを確かめられるようにする ― 何の会社か・どこの会社か・誰向けか・次に押すもの
• 説明の一行を足す ― キャッチコピーは捨てずに、地域・相手・仕事を入れた飾りのない一行を添える
• 写真は1枚に決める ― スライドショーは2枚目から先が見られにくい。選ばなかった写真は効くページへ
• スマートフォンで確かめる ― 縦に積まれると、写真だけで画面が埋まる。一行を写真より先に
• 置かないものは、移す ― 挨拶文、お知らせ一覧、ロゴの列、SNSのアイコンは、効く場所へ

最初の画面は、会社の名刺の肩書きにあたる場所です。社名とロゴだけの名刺では、何をしている人か伝わりません。トップページも同じで、飾りのない一行があるだけで、読む人は「自分に関係のある会社だ」と分かります。

まずは今日、自分のスマートフォンでトップページを開いて、スクロールする前の画面だけを見てみてください。何の会社か分かるかどうか。そこから始められます。