制作日記 3-2:トップページの作り方

トップページの作り方（サイトの顔をデザインする）

こんにちは、リキマルです！

今日は 「サイトの顔」となるトップページの作り方 について、シンプルで伝わるレイアウトのコツをお話ししますね。

トップページは 訪れた人が最初に目にする場所 なので、「このサイトは何を伝えたいのか？」が 一瞬で分かるデザイン にすることが大切です。

🔹 シンプルで伝わるレイアウトのコツ

トップページを作るとき、つい 情報をたくさん詰め込みたくなる ことがありますよね。でも、情報が多すぎると どこを見ればいいのかわからず、訪問者が迷ってしまう ことも…。

だからこそ、 「見せる情報を厳選する」ことがポイント になります！

📌 基本のレイアウトはこの3つを意識すればOK！

① メニュー（ナビゲーション） → どこに何があるのか分かりやすくする

② ロゴ（サイトのシンボル） → サイトの印象を決める大切な要素

③ メイン画像（またはキャッチコピー） → 訪問者の目を引く一番重要な部分

この3つをしっかり設定すれば、シンプルで分かりやすいトップページが作れます！

🔹 メニュー・ロゴ・画像の設定方法

① メニュー（ナビゲーション）を設定しよう

メニューは サイト内の「案内板」 のような役割を持っています。

📌 メニュー作成のコツ

✅ 最も重要なページをメニューに入れる（5〜6個がベスト）

✅ シンプルな言葉でわかりやすく（「ホーム」「ブログ」「お問い合わせ」など）

✅ 順番を工夫する（大事なものを左に）

💡 設定方法（WordPressの場合）

1.ダッシュボード → [外観] → [メニュー] に進む

2.「新しいメニューを作成」 をクリック

3.メニューに入れたいページを選び、追加する

4.メニューの位置を「ヘッダー」に設定 すればOK！

② ロゴ（サイトのシンボル）を設定しよう

ロゴは サイトの「顔」 です。

シンプルでもいいので、 サイトのテーマに合ったデザインを選ぶ ことが大切！

📌 ロゴ作成のコツ

✅ シンプルなデザインがベスト（ごちゃごちゃしない）

✅ 文字のみ or シンプルなアイコン＋文字

✅ 背景が透明なPNG形式で作る（WordPressで使いやすい）

💡 設定方法（WordPressの場合）

1.ダッシュボード → [外観] → [カスタマイズ] に進む

2.[サイト基本情報] をクリック

3.「ロゴを選択」 を押して、画像をアップロード

4.サイズを調整して保存すれば完了！

③ メイン画像（またはキャッチコピー）を設定しよう

トップページで 最初に目を引くのが「メイン画像」 です。

または、 インパクトのあるキャッチコピー を配置するのもアリ！

📌 メイン画像の選び方

✅ 「このサイトは何を伝えたいのか？」が一目で分かる画像 を使う

✅ 横幅が1200px以上の高画質画像を選ぶ（ぼやけないように）

✅ シンプルな背景の画像だと文字を重ねやすい

💡 設定方法（WordPressの場合）

1.ダッシュボード → [外観] → [カスタマイズ]

2.[ヘッダー画像] をクリック

3.「新規画像を追加」 を押して画像を設定

4.必要なら キャッチコピーを追加 して保存！

🔹【リキマルの失敗例】トップページでやってしまったミス…！

実は、僕も最初 「フロントページを作らなきゃ！」 と思って作業していたら…

✅ 結果的にトップページとは別に「フロントページ」ができてしまった…！

✅ 何がなんだか分からなくなり、全部削除して作り直すハメに…！

👉 結論：「フロントページを意識しすぎなくてOK！」

WordPressでは、 固定ページから新規作成 すれば、それが 自動的にフロントページ扱いされる から、特別な設定をしなくても大丈夫！

📌 だから注意！

⚠ 「フロントページを作るぞ！」と意識しすぎないこと！

⚠ 普通に「固定ページ」で作ればOK！

この失敗を活かして、今はシンプルに 固定ページでトップページを作るだけ で済ませています！

🔹 まとめ：トップページ作成のポイント

✅ シンプルなレイアウトがベスト（メニュー・ロゴ・画像を意識）

✅ メニューは5〜6個までに抑え、順番を工夫する

✅ ロゴはシンプル＆背景透明のPNG画像がおすすめ

✅ メイン画像はサイトのテーマに合った高画質のものを選ぶ

✅ 「フロントページを作るぞ！」と意識しすぎないこと！

これで、訪問者にとって 分かりやすく、魅力的なトップページ が作れるはず！

リキマルのサイト作り、楽しみながら進めていこうね！