トップページは、HPを開いた人が最初に見る場所です。このHPでは、難しそうなAIサイトではなく、「初心者でもここから学べそう」と感じられる見た目を目指しています。
この記事では、トップ画像、ナビゲーション、文章ブロック、リンクカード、色と余白の整え方をまとめます。
01
最初に見える部分を作る
トップ画像でサイトの印象を伝える
このHPでは、トップページの大きな画像に「はじめてでも大丈夫。今日から始めるAI活用への第一歩。」というメッセージを入れています。文章だけで説明するより、最初の画面で雰囲気が伝わりやすくなります。
- 横長の画像を使う
- 初心者向けの明るい印象にする
- 文字が読みやすい余白を残す
- AIらしさは控えめに入れる
- スマホで切れても困らない構図にする
- 画像の内容とサイトテーマを合わせる
03
本文とリンクカードを作る
トップページは短い案内役にする
トップページでは、すべてを長く説明しすぎず、サイトの目的、AIを活用できる場面、読み進めるページへのリンクを置きます。
トップページに入れる内容
- サイトのテーマ
- 初心者向けの導入文
- AIを活用できる場面
- 自己紹介へのリンク
- ツール導入ページへのリンク
- 新着記事へのリンク
04
CSSで雰囲気を整える
CSSは、文字サイズ、色、余白、カードの形、スマホ表示などを決めるファイルです。このHPでは、紺、青緑、金色を中心に、落ち着きと前向きさが出るようにしています。
大切にした見た目
明るさ、清潔感、読みやすさ、初心者でも入りやすい安心感。
注意した見た目
文字を小さくしすぎない、装飾を増やしすぎない、スマホで窮屈にしない。
05
表示確認をする
HPはパソコンで見てきれいでも、スマホでは文字が詰まったり、画像が見切れたりすることがあります。公開前に必ず確認します。
- ナビゲーションのリンクが押せるか
- トップ画像が大きすぎないか
- スマホで文字が読みやすいか
- カードの文章がはみ出していないか
- 画像のパスが間違っていないか
- ページ下部から一覧へ戻れるか
トップページは、HP全体の入口です。きれいに見せるだけでなく、読者が次に読むページへ自然に進めることを意識して作ります。