目に留まるファーストビュー！グラデーションを活用したデザインとCSS解説

css

SHARE

目次

はじめに

この記事の概要

みなさん、こんにちは！
Webサイト制作において以下のような悩みはありませんか？

  • ユーザーの興味を引けるようなファーストビューを作ることができない
  • インパクトのあるファーストビューを作りたいが、容易に実装したい

ファーストビューは訪問者が最初に目にする部分であり、印象を左右する大切な要素です。
ユーザーの関心を引きつけ、サイトへの滞在時間を延ばすためにはデザインに工夫が必要ですが、あまり複雑なデザインにしてしまうと実装が難しくなってしまいます。

そんな時におすすめなのが、グラデーションを使用したファーストビューです！
単色ではなく複数の色をスムーズに変化させることで奥行き感や動きを演出でき、ユーザーの目を引くことができます。
また、グラデーションであれば背景や文字などへの実装も容易で工数がかかりません。

今回はファーストビューにグラデーションを使用したデザイン事例を数点紹介し、合わせてHTML・CSSのコードも紹介させていただいます！

対象読者

  • CSS初学者の方
  • ファーストビュー制作にお悩みの方

デザイン事例およびコード紹介

背景をグラデーションにする

背景をグラデーションにするだけでも奥行き感や視覚的な広がりを持たせることができ、モダンな雰囲気を醸し出すことができます。また、カラフルで印象的な背景を作ることで、ユーザーにインパクトを与えることができます。
画像をあえて再度に寄せるところもポイントです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ファーストビュー</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">LOGO</div>
        <nav class="menu">
            <ul>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
            </ul>
        </nav>
    </header>

    <div class="first-view">
        <div class="copy">
            <h1>Innovating the Future</h1>
        </div>
        <div class="image-container">
            <img src="image.jpg" alt="Main Image">
        </div>
    </div>
</body>
</html>

.logo {
    font-size: 24px;
    font-weight: bold;
}

.menu ul {
    list-style: none;
    display: flex;
}

.menu ul li {
    margin-left: 20px;
}

.menu ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
}

.first-view {
    position: relative;
    height: calc(100vh - 70px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right, #89D4FE, #4491FC);
}

.copy {
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
}

.copy h1 {
    font-size: 48px;
    color: white;
}

.image-container {
    position: relative;
    height: 100%;
    width: 70%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.image-container img {
    height: 70%;
    width: auto;
}

文字をグラデーションにする

文字にグラデーションを使うと、通常のテキストよりも視覚的にインパクトが増し、単なるテキストがあしらいに早変わりします。目立たせたいキャッチコピーやタイトルに使用すると効果的です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ファーストビュー</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">LOGO</div>
            <nav class="menu">
                <ul>
                    <li><a href="#">Menu 1</a></li>
                    <li><a href="#">Menu 2</a></li>
                    <li><a href="#">Menu 3</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="first-view">
        <div class="copy">
            <h1>Innovating the Future</h1>
        </div>
        <div class="image-container">
            <img src="image.jpg" alt="Main Image">
        </div>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    background-color: white;
    width: 90%;
    padding: 10px 0;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.menu ul {
    list-style: none;
    display: flex;
}

.menu ul li {
    margin-left: 20px;
}

.menu ul li a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
}

.first-view {
    position: relative;
    width: 100%;
    height: calc(100vh - 100px);
    background: linear-gradient(to right, #89D4FE, #4491FC);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.copy h1 {
    font-size: 48px;
    color: white;
}

.image-container {
    margin-top: 20px;
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container img {
    width: 100%;
    height: auto;
}

ボタン・パネルをグラデーションにする

ボタンやパネルにグラデーションを使うことで、インタラクティブな要素に視覚的なアクセントを加え、ユーザーのクリックを促します。ファーストビュー以外のセクションにも同色のボタン等を使用することでサイトに統一感が出ます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ファーストビュー</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">LOGO</div>
            <div class="contact-button">
                <a href="#">お問い合わせ</a>
            </div>
        </div>
    </header>

    <div class="first-view">
        <div class="copy">
            <h1>Innovating the Future</h1>
        </div>
        <div class="image-container">
            <img src="image.jpg" alt="Main Image">
        </div>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    background-color: white;
    width: 90%;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.contact-button {
    width: 240px;
    background: linear-gradient(to right, #89D4FE, #4491FC);
    text-align: center;
    border-radius: 5px;
}

.contact-button a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 10px 0;
    display: block;
}

.first-view {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container {
    width: 85%;
    position: relative;
}

.image-container img {
    width: 100%;
    height: auto;
}

.copy {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px 20px;
    border-radius: 5px;
}

.copy h1 {
    font-size: 36px;
    color: black;
}

あしらいにグラデーションをつける

細い線やボーダー、枠線にグラデーションを使用することで、デザインに微妙な動きやアクセントを加え、シンプルな要素を際立たせます。小さな要素にもグラデーションを適用することで、全体のデザインがより統一感を持ち、洗練された印象になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ファーストビュー</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <aside class="sidebar"></aside>

    <div class="first-view">
        <div class="triangle gradient-fill"></div>
        <div class="triangle gradient-border"></div>
        <div class="triangle grey-fill"></div>
        <div class="triangle gradient-fill"></div>
        <div class="triangle gradient-border"></div>
        <div class="triangle grey-fill"></div>

        <div class="image-container">
            <img src="image.jpg" alt="Main Image">
        </div>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    height: 100vh;
    display: flex;
}

.sidebar {
    background-color: #89D4FE;
    width: 40px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}

.first-view {
    width: calc(100% - 40px);
    height: 100vh;
    position: relative;
    margin-left: 40px;
}

.image-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    width: 60%;
}

.image-container img {
    width: 100%;
    height: auto;
}

.triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 150px solid;
}

.gradient-fill {
    background: linear-gradient(to right, #89D4FE, #4491FC);
    border-bottom-color: transparent;
    opacity: 0.8;
}

.grey-fill {
    border-bottom-color: grey;
    opacity: 0.

おわりに

いかがでしたでしょうか？

グラデーションを意識するだけで単調なデザインから脱出でき、シンプルながらも視覚的に強いインパクトをユーザーに与えられることがお分かりいただけたかと思います。
また、コード自体も複雑なものはないため、容易に実装ができます。
もちろん、ファーストビューだけでなく強調したいセクションに使用していただくことで、ユーザーの興味を引き付けることも可能です。

ぜひ、ご自身の制作時にもお試しください！

前の記事

【Zod】union/discriminatedUnionとr…

次の記事

Railsでのtransactionと例外処理：raiseの使…