HTML&CSSでおしゃれなファーストビューを作ろう

はじめに

Webサイトを訪れたとき、最初に目に入る「ファーストビュー」は、訪問者の第一印象を左右する重要なパートです。本記事では、HTMLとCSSだけで簡単におしゃれなファーストビューを作る方法をご紹介します。初心者の方でもすぐに実践できるコード例やデザインのコツも解説します。

ファーストビューの重要性

ファーストビューは「3秒ルール」とも呼ばれ、訪問者がサイトを離れるかどうかを決める非常に大事な領域です。

• サイトの世界観や雰囲気を伝える
• サービスや商品の魅力を一瞬で伝える
• 次のアクション（スクロールやクリック）を促す

など、ユーザー体験に直結します。
だからこそ「おしゃれ」で「わかりやすい」ファーストビュー作りが求められます。

作り方

ここでは「ヒーローセクション」と呼ばれる、画面いっぱいに画像や見出し・ボタンを配置した定番デザインを例に説明します。

基本のHTML

index.html

<header class="hero">
  <div class="hero-content">
    <h1>Welcome to Stylish Web</h1>
    <p>あなたのWebサイトを、もっと魅力的に。</p>
    <a href="#service" class="cta-btn">サービスを見る</a>
  </div>
</header>

style.css

.hero {
  background: url('sea.jpg') center/cover no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.cta-btn {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 2.5rem;
  background: #FF7878;
  color: #fff;
  border-radius: 32px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  transition: background 0.2s;
}

.cta-btn:hover {
  background: #D94545;
}

ポイント

• 画像に黒フィルターを重ねて文字を見やすくしています
• シンプルなボタンと余白でモダンな印象に

レスポンシブ対応

スマホやタブレットでも見やすいデザインにするためのポイントです。

style.css

/* ここから */
@media (max-width: 768px) {
  .hero {
    height: 60vh;
    padding: 2rem 1rem;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .cta-btn {
    width: 100%;
    font-size: 1.2rem;
    box-sizing: border-box;
  }
}
/* ここまで追記 */

スマートフォンへの対応もすることができました。

ポイント

• 高さを下げて余白を広げる
• 見出し・ボタンを大きくしてタップしやすく

Tips

Google Fontsでおしゃれなフォントを使うと雰囲気が変わる

index.html

<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">

style.css

body {
  font-family: 'Sawarabi Gothic', 'sans-serif';
}

画像が無い場合はグラデーション背景もおすすめ

style.css

.hero {
  /* 差し替え */
  background: linear-gradient(135deg, #ffb6b9, #fae3d9, #bbded6, #61c0bf);
}

アニメーションで注目度UP

例：フェードイン

style.css

.hero-content {
  /* ここから */
  opacity: 0;
  animation: fadeIn 1.2s 0.3s forwards;
  /* ここまで追記 */
}

/* ここから */
@keyframes fadeIn {
  to { opacity: 1; }
}
/* ここまで追記 */

リロードすると文字が遅れて表示されるのがわかります。

backgroundプロパティの解説

background: url('image.jpg') center/cover no-repeat;

上記が何を意味しているのかわかりにくいですよね。
１つ１つ解説します。

分解すると

1. url('image.jpg')

背景画像として「your-image.jpg」という画像を読み込む指定です。

2. center

画像の表示位置を「中央」に配置します。

3. cover

画像のサイズを「領域いっぱいに拡大・縮小」して表示します。
アスペクト比（縦横比）は保たれ、はみ出す部分は見切れます。

4. no-repeat

画像を「繰り返し（リピート）」しない指定です。
1枚だけ表示し、余白は埋めません。

最後に

HTMLとCSSだけでも、工夫次第で「おしゃれなファーストビュー」は作れます。まずはシンプルな構成から始めて、少しずつ自分のサイトに合うアレンジを加えてみてください！