- これで解決！ 企業ホームページの作り方③｜SWELLでトップページの作り方
企業ホームページの顔ともいえるトップページ。SWELLを使えば、初心者でも魅力的なトップページを作ることができます。本記事では、トップページの作り方をわかりやすく解説し、質の高いホームページ制作をサポートします！
WordPress初心者の方が陥りがちなのが、トップページに時間をかけすぎて全体のバランスを見失うこと。実は、トップページは「固定ページ」「投稿ページ」「カテゴリー」など各ページの情報を上手にまとめて作ることで、回遊性が高まり、ユーザーにとって使いやすいサイトになります。
トップページは視覚的にも重要な役割を果たします。SWELLの固定ページ機能を活用して、事業内容やサイトの目的に合ったデザインを施しましょう。今回のデモサイトはシンプルなデフォルトデザインですが、SWELLの豊富な機能を活かせば、それだけで見栄えの良いページが完成します！
効果的なトップページ作りのポイントを押さえて、訪問者を惹きつけるホームページを実現していきましょう！
メチャじじおお！やっとここまで来たぞ！固定ページや投稿ページも作ったが…トップページってどうやって作ればいいんじゃ？
チョイジジトップページかぁ…。目立つし大事だけど、どうしても時間がかかりそうだよね。何から始めればいいんだろう？
ひろおじ心配いらないよ！実はトップページは最後に作るのがコツなんだ。これから、わかりやすくポイントを教えていくね！
この記事では、「企業ホームページの作り方③｜SWELLでトップページの作り方」についてお話をしていきます。
- WordPress初心者で企業ホームページを初めて作る方
- SWELLを使用してホームページを作成したい方
- トップページの制作手順がわからない方
- サイト全体のバランスを重視したホームページを作りたい方
- ホームページに回遊性を持たせたいと考えている方
- トップページのデザインポイントを知りたい方
- 自分で事業用ホームページを作成・管理したい方
- 訪問者にとって使いやすいサイトを作りたい方
早く希望の記事箇所に到達したい方はコチラ
SWELLで制作する企業サイト｜出来上がりイメージ
ひろおじ今回SWELLで制作する企業ホームページのデモサイトはコチラです！
魅力的な企業ホームページのトップページにするために……。
トップページの作成は、なるべく最後に
ここまで、「固定ページ」「投稿ページ」「カテゴリー」といったサイト構成の基本を順に解説してきましたが、まだトップページには手をつけていません。初心者の方がやりがちなのが、トップページの見栄えばかりに時間をかけてしまうこと。でも、実はトップページは最後に制作するくらいがベストなんです！
その理由は、WordPressでは先に作った「固定ページ」や「投稿ページ」を整理・統合する形でトップページを仕上げると、訪問者が使いやすく、自然と回遊性が高まるサイトになるからです。例えば、今回のデモサイトも、トップページはほぼデフォルト状態。しかし、必要な情報をバランスよくまとめたことで、見やすく使いやすい仕上がりになっています。
もちろんサイトの規模によりますが、トップページは他のページを作り終えた後に制作する方が、全体を見渡して最適なデザインがしやすくなります。トップページは最後に仕上げる、これが質の高いサイトを作るコツです！
せっかくなので、トップページのイメージを変えてみよう！
SWELLのデフォルトでは、サイトの構造が2カラムになっています。メインエリアと右側にサイドバーがありますよね！もちろんそのままでもよいのですが、いかにもトップページと主張できるように、トップページだけを１カラム（サイドバーなし）にしてみましょう。SWELLは、簡単に設定できるようになっています。
- 「カスタマイズ」「サイドバー」
- 「トップページにサイドバーを表示する」のチェックマークを外します。
これだけで、トップページのみが１カラムになりました。
SWELLでトップページの作り方
１、ナビゲーションメニュー
ホームページの構成の骨格にあたる大切な部分です。デモサイトでは、最初に設計した「サイト構成」と同じ構造になっています。
ナビゲーションメニューの作り方、設置方法は、コチラをご覧ください。
２、お知らせバーの設置
「お知らせバー」は、イベントの告知や期間限定セールのお知らせなど、ブログの訪問者に「今すぐ見てほしい情報」をアピールするのにピッタリの機能です。SWELLの「お知らせバー」は、ブログのファーストビューで高い視認性を発揮するので、読者に情報がしっかり届くだけでなく、ユーザーの行動を促す効果も期待できます。
３、メインビジュアルの設定
メインビジュアルは視覚的に重要な部分になります。会社や事業に合った画像やイラストを用意しましょう。このデモサイトでは、スライダー画像に設定してあり、３枚の画像を用意しました。（スライダー画像は５枚まで設定できます）
デモサイトの画像の大きさは、横1600×縦700pxにしましたが、作成のサイトに合わせて調整されると良いと思います。
設定自体は簡単で、直感④にできます。
- 「カスタマイズ」「トップページ」「メインビジュアル」から設定できます。
４、ワンポイントの案内
目につくメインビジュアルの下部にワンポイントの案内を作ってみました。
デザインツール「CANVA」で作成しています。
作り方は、割愛させていただきます。
- 画像の大きさは、800×100pxにしてみました。
５、私たちの事業
固定ページを表示しています。サイト構成の中で、「事業内容」を表示しています。ここは「固定ページ」ですから、カテゴリーを表示させることができませんから、画像とボタンで設置しています。
- 「ブロック挿入ツール」「フルワイド」
- フルワイドブロックの中に全体を設置
- SWELLの「リッチカラム」を利用して、バランスよく配置
６、ちょっとした資料
簡単な表や、イラストは、デザインツールCANVAで適当に作りました。
- 「ブロック挿入ツール」「フルワイド」
- フルワイドブロックの中に全体を設置
- SWELLの「リッチカラム」を利用して、バランスよく配置
７、最新トピックス
「投稿ページ」「カテゴリー」を表示しています。動きのある内容が表示できます。
- 「ブロック挿入ツールを切り替え」「投稿リスト」
- 表示方法や表示数など、細かく設定できます。
- ここもフルワイドブロックで設置しています。
８、スタッフブログ
スタッフブログですが、7の最新トピックスと全く一緒で、スタッフブログというカテゴリーを設置しているだけです。⑦や⑧のように、配置方法を変えることができます。
- 「ブロック挿入ツールを切り替え」「投稿リスト」
- 表示方法や表示数など、細かく設定できます。
- ここもフルワイドブロックで設置しています。
９、フッター(PC)1～3
フッターの上部に当たる部分です。ウィジェットを利用します。設置方法は極めて簡単で、カテゴリーやアーカイブなど、選ぶだけです。
１０、フッター
下部のフッターには、会社情報やお問い合わせ、プライバシーポリシーなどの固定情報を設置します。
- 「外観」「メニュー」から設置します。
企業ホームページの作る際、SWELLでのトップページの作り方でよくある Q＆A
SWELLで企業サイトの始め方（エックスサーバー）
エックスサーバーで事業用のホームページを始める場合、まずサーバーを選ぶ必要があります。
法人専用の「XServerビジネス」と個人用の「エックスサーバー」です。
小規模事業者を超える環境の方は、法人専用の「XServerビジネス」を選んだ方が良いでしょう。より安定や耐性、サービスがセットになっていて、安心してサーバーが利用できます。
対して、「エックスサーバー」は、個人から小規模事業者、小企業まで幅広く利用されており、契約こそ「個人扱い」になりますが、事業で利用しても全く問題ありません。「エックスサーバー」は費用を最大限抑えて運営可能です。
１、「XServerビジネス」でWordPressの始め方
サーバーはコチラ！
安心・安全・安定の法人向け
国内シェアNo.1の高性能レンタルサーバー『エックスサーバー』を安心・安全・安定を重視する法人向けに特化したサービスです。導入企業数は21万社を突破！
＼ 公式サイトは、コチラ！ ／
＼ わかり易く解説！ ／
WordPressテーマ「SWELLは」はコチラ！
専門知識がなくても本格的なデザイン
¥17,600
WordPewssでブログ運営するならSWELLがオススメ。買い切り型で複数サイト使用可能
＼ 公式サイトは、コチラ！ ／
＼ わかり易く解説！ ／
２、「エックスサーバー」でWordPressの始め方
WordPressブログを始めるには、「レンタルサーバー」「ドメイン」「WordPressテーマ」が必要です。当サイトのオススメは・・・・
レンタルサーバーとドメイン
エックスサーバー
WordPress「テーマ」
SWELL
エックスサーバーの「WordPress クイックスタート」を利用するとすぐにSWELLブログを始められます！
👉エックスサーバーの「WordPress クイックスタート」を利用すれば、レンタルサーバーの申し込み時に、SWELLも一緒に購入することができ、ドメインの取得・設定、WordPressのインストール、SWELLのインストールまで、一気に完了させることができます。運用管理も一括ですから本当にオススメです！（SWELLも割引価格で購入可能）
- エックスサーバーは、国内で最も信頼される高性能なサーバーであり、これから初めてブログ運営をされる方は、エックスサーバーを選んでおけば間違いありません。
- 価格面においても最初から必要なものが全部そろっており、後から機能を追加することもありませんので、返ってコストパフォーマンスが高いと言えます。
エックスサーバーの「WordPress クイックスタート」でSWELLブログの始め方については、『申し込み〜ブログ開設まで』の手順を詳しく解説していますので、コチラをご参照ください！
簡単・安心、エックスサーバー
¥ 495円／月〜・2025年2月4日(火)17:00まで…
高性能なレンタルサーバーを個人でも利用できる。WordPewssでブログを始めるならエックスサーバーが最適解。しかもコスパNo.1！
＼ 公式サイトは、コチラ！ ／
＼ わかり易く解説！ ／
尚、現在ブログを運営している方、又、レンタルサーバーを既に契約されていて【SWELLを単体で購入したい方】は、コチラ！
まとめ：企業ホームページの作り方③｜SWELLでトップページの作り方
最後までお付き合いいただき、心より感謝申し上げます。😊
本記事では、企業ホームページにおけるトップページ作りの重要性とその具体的な方法について解説しました。トップページは、訪問者が最初に目にする場所であり、サイト全体の印象を左右する非常に重要な要素です。しかし、最初から作り込みに時間をかけすぎるのではなく、サイト全体の構成が整った後に仕上げることが成功の秘訣です。
SWELLの便利な固定ページ機能を活用することで、初心者でもプロフェッショナルなデザインを実現することができます。「固定ページ」「投稿ページ」「カテゴリー」などの情報を的確にまとめ、回遊性とユーザビリティを高めたトップページを作ることで、訪問者の満足度とサイトの成果を向上させることができます。
デモサイトを参考にしながら、まずはシンプルな形でスタートしてみてください。SWELLの豊富な機能を試しながら、少しずつデザインを進化させることで、理想的なトップページを作り上げることができるでしょう。
最後に、ホームページ制作は試行錯誤の連続です。しかし、その過程で得られる成果は必ず事業の発展につながります。本記事が、魅力的で効果的なホームページ作りの第一歩となることを願っています。あなたのサイトが多くの訪問者に愛され、成功へと導かれることを心から応援しています！
具体的に気になる記事箇所をチェックするのはコチラ
魅力的でユーザビリティの高いトップページをめざしましよう！
背景をトリッキーに消す方法ってどういうこと？
また「企業ホームページの作り方③｜SWELLでトップページの作り方」が終わりましたら、次は、「ブログのトップページをおしゃれにしてみよう！｜SWELL編」を確認してみましょう！
詳しいやり方は下記の記事で紹介しているので、あわせて読んでみてくださいね。
