企業ホームページの作り方③｜SWELLでトップページの作り方

これまで一歩ずつ積み上げてきたお城づくりも、いよいよ最終仕上げの段階です。

せっかく素敵なお部屋（固定ページ）や活気ある掲示板（投稿ページ）を作っても、玄関が閉まっていたり、中が迷路のようになっていたりしては、お客さまはすぐに帰ってしまいます。

そこで活躍するのが、高機能テーマ「SWELL」の魔法です。

この記事では、SWELLの機能を最大限に活かして、プロ顔負けの「動くトップページ」や、使い勝手の良い「ナビゲーションメニュー」を作る手順を詳しく解説しますね！

難しいコードを書く必要はありません。不器用な僕たちだからこそ、SWELLの便利な道具を賢く使って、お客さまが「ここなら任せられる」と確信してくれる、誠実で美しいトップページを完成させましょう。

真っさらな土地からここまでお城を築き上げるのは、決して簡単なことではなかったはずです。でも、今あなたの目の前にあるのは、間違いなくあなた自身の力で立てた「商売の拠点」です。

あなたが誇りを持って門を開けられるよう、最後の一仕上げを丁寧にご一緒しましょう。完成したお城の姿を想像すると、ワクワクしてきますね！

🌱 まだ、自分のお城をもっていない方へ！

もし、この記事を読んでいるあなたが、「まだ自分のお城（ブログ）を持っていないけれど、書く準備だけはしておきたい！」という段階なら、まずはそのワクワクした気持ちを形にしてみませんか？

SWELLで制作する企業サイト｜出来上がりイメージ

魅力的な企業ホームページのトップページにするために……。

トップページの作成は、なるべく最後に

ここまで、「固定ページ」「投稿ページ」「カテゴリー」といったサイト構成の基本を順に解説してきましたが、まだトップページには手をつけていません。初心者の方がやりがちなのが、トップページの見栄えばかりに時間をかけてしまうこと。でも、実はトップページは最後に制作するくらいがベストなんです！

その理由は、WordPressでは先に作った「固定ページ」や「投稿ページ」を整理・統合する形でトップページを仕上げると、訪問者が使いやすく、自然と回遊性が高まるサイトになるからです。例えば、今回のデモサイトも、トップページはほぼデフォルト状態。しかし、必要な情報をバランスよくまとめたことで、見やすく使いやすい仕上がりになっています。

もちろんサイトの規模によりますが、トップページは他のページを作り終えた後に制作する方が、全体を見渡して最適なデザインがしやすくなります。トップページは最後に仕上げる、これが質の高いサイトを作るコツです！

せっかくなので、トップページのイメージを変えてみよう！

SWELLのデフォルトでは、サイトの構造が2カラムになっています。メインエリアと右側にサイドバーがありますよね！もちろんそのままでもよいのですが、いかにもトップページと主張できるように、トップページだけを１カラム（サイドバーなし）にしてみましょう。SWELLは、簡単に設定できるようになっています。

SWELLでトップページの作り方

１、ナビゲーションメニュー

ホームページの構成の骨格にあたる大切な部分です。デモサイトでは、最初に設計した「サイト構成」と同じ構造になっています。

 ナビゲーションメニューの作り方、設置方法は、コチラをご覧ください。

２、お知らせバーの設置

「お知らせバー」は、イベントの告知や期間限定セールのお知らせなど、ブログの訪問者に「今すぐ見てほしい情報」をアピールするのにピッタリの機能です。SWELLの「お知らせバー」は、ブログのファーストビューで高い視認性を発揮するので、読者に情報がしっかり届くだけでなく、ユーザーの行動を促す効果も期待できます。

３、メインビジュアルの設定

メインビジュアルは視覚的に重要な部分になります。会社や事業に合った画像やイラストを用意しましょう。このデモサイトでは、スライダー画像に設定してあり、３枚の画像を用意しました。（スライダー画像は５枚まで設定できます）

デモサイトの画像の大きさは、横1600×縦700pxにしましたが、作成のサイトに合わせて調整されると良いと思います。

設定自体は簡単で、直感④にできます。

• 「カスタマイズ」「トップページ」「メインビジュアル」から設定できます。

４、ワンポイントの案内

目につくメインビジュアルの下部にワンポイントの案内を作ってみました。

デザインツール「CANVA」で作成しています。
作り方は、割愛させていただきます。

• 画像の大きさは、800×100pxにしてみました。

５、私たちの事業

固定ページを表示しています。サイト構成の中で、「事業内容」を表示しています。ここは「固定ページ」ですから、カテゴリーを表示させることができませんから、画像とボタンで設置しています。

６、ちょっとした資料

簡単な表や、イラストは、デザインツールCANVAで適当に作りました。

７、最新トピックス

「投稿ページ」「カテゴリー」を表示しています。動きのある内容が表示できます。

８、スタッフブログ

スタッフブログですが、7の最新トピックスと全く一緒で、スタッフブログというカテゴリーを設置しているだけです。⑦や⑧のように、配置方法を変えることができます。

９、フッター(PC)1～3

フッターの上部に当たる部分です。ウィジェットを利用します。設置方法は極めて簡単で、カテゴリーやアーカイブなど、選ぶだけです。

１０、フッター

下部のフッターには、会社情報やお問い合わせ、プライバシーポリシーなどの固定情報を設置します。

お城は完成、そしてここから「新たな物語」が始まる

これで、企業ホームページの作り方シリーズは完結です。不器用な一歩から始まったこの挑戦が、あなたの事業を大きく飛躍させる素晴らしい武器になることを心から願っています。

🍵 ひろおじの「お茶の間、最後の一息」

最後まで読んでくださり、本当にありがとうございます…😄。

試行錯誤しながら作り上げたこのホームページは、どんなに高いお金を払ってプロに作らせたものよりも、あなたの「想い」が詰まった世界に一つだけのお城です。

あなたが今日掲げたこの看板が、たくさんのお客さまとあなたを繋ぐ「架け橋」になりますように。
さあ、自信を持って門を開けましょう。あなたの新しい物語のスタートですよ！

🏁 まだお城を建てる前の方が人生の第2幕をスタートするには？

さて、「SWELLでトップページの作り方」が理解できたところで、あなたには、それを形にする『お城（ブログ）の準備』はできていますか？

📌 マニュアルは、コチラ！

トップページに載せる情報は、多いほうがいいですか？

詰め込みすぎは逆効果です。「何をしている会社か」「どんな悩みに応えてくれるか」を絞って伝えましょう。詳しい話は各固定ページへ誘導する、というのがお城をスッキリさせるコツです。

メインビジュアル（大きな画像）に最適な写真は？

あなたの事業を象徴する、明るく清潔感のある写真を選びましょう。小規模事業者なら、笑顔のスタッフや作業風景を載せると、一気に安心感（信頼）が高まります。

メニュー（ナビゲーション）の数はどれくらいが適切？

パソコンで見てもスマホで見ても、パッと把握できる「5〜7個」以内に収めるのが理想的です。多すぎると、お客さまは何をクリックしていいか迷ってしまいます。

SWELLの「メインビジュアル」で動画を使うのはアリ？

はい、アリです！ただし、動画は読み込みに時間がかかる場合があるため、お城の門（表示スピード）が重くならないよう、ファイルサイズには注意しましょう。

ロゴ画像を持っていないのですが、文字だけでも大丈夫？

もちろん大丈夫です！SWELLは文字だけでもきれいに表示されます。後でおしゃれなロゴを作った時に、いつでも差し替えられるのがWordPressの良いところです。

スマホ用メニュー（ハンバーガーメニュー）の設定は難しい？

SWELLなら設定画面でチェックを入れるだけで、スマホ専用の使いやすいメニューが自動で作れます。不器用な僕たちには本当にありがたい機能です。

トップページに最新記事を表示させるべきですか？

法人サイトなら、3〜5記事ほど表示させておくと「動いている（営業している）」ことが伝わり、お客さまに安心感を与えられます。

メニューの言葉選びで気をつけることは？

「サービス紹介」や「アクセス」など、誰が見ても一瞬で中身が想像できる「分かりやすい言葉」を使いましょう。お城の案内板は、優しさが一番です。

フッター（ページの一番下）には何を載せるべき？

住所や電話番号、お問い合わせボタンなど、お客さまが最後に「連絡したい」と思った時にすぐ見つけられる情報を載せておくのが定番です。

トップページのデザイン、途中で飽きたら変えられますか？

SWELLならパーツの配置換えも簡単です。季節やキャンペーンに合わせて、気軽にお城の模様替えを楽しんでみてくださいね。

また「企業ホームページの作り方③｜SWELLでトップページの作り方」が読み終わりましたら、次は、「「記事構成」をテンプレート化する魔法｜不器用な僕が2時間で1記事書けるようになった「書き方の作法」」を確認してみましょう。

 詳しい内容は下記の記事で紹介しているので、あわせて読んでみてくださいね！