はじめに
ウェブサイトの最初に目に入る部分であるメインビジュアルは、ウェブサイトの魅力や目的を伝える重要な役割を果たします。
メインビジュアルのコーディングには、HTMLやCSSの基礎知識やレスポンシブデザインの原理などを理解する必要があります。
また、画像やテキスト、ボタンなどの配置やサイズ、アニメーションやエフェクトなどの実装にも工夫が必要です。
この記事では、メインビジュアルのコーディングを実際に行い、メインビジュアルをコーディングする際のポイントやテクニックを紹介します。
この記事の対象者
- ウェブ制作初心者の方
- メインビジュアルの作り方に興味がある方
- ウェブサイトの見た目を改善したい方
この記事で学べること
- メインビジュアルの種類と役割
- メインビジュアルをコーディングする前提知識
- メインビジュアルをコーディングするポイントとテクニック
メインビジュアルの役割
ウェブ制作において、メインビジュアルは大きな役割を持っています。
メインビジュアルはウェブサイトの第一印象を左右し、ユーザーの興味を引く要素であり、ウェブサイトの魅力を高めたり特徴を表現する役割を果たしています。
メインビジュアルの表現方法は様々であり、画面いっぱいに広がる画像やスライダー、動画、3D要素など、ウェブサイトの目的やコンテンツに合わせて多くの表現方法から選択できます。
しかし、過度なアニメーションや読み込み時間の長いメインビジュアルはユーザーの離脱を招く可能性があり、メインビジュアルはユーザー体験やコンバージョンと深い関わりを持ちます。
メインビジュアルをコーディングしてみよう
ウェブ制作の初心者の方向けに、一般的によくあるメインビジュアルのコーディング方法を解説します。
また、様々なデバイスに対応したfont-sizeの指定方法や、CSSでできるアニメーションの実装方法についてもご紹介します。
メインビジュアルは、同じレイアウトや構造でも、アニメーションやフォント、画像やテキストなどのコンテンツの内容で印象は大きく変わります。
基本的なメインビジュアルのコーディングを学び、工夫を凝らすことで多くのバリエーションを実装できるようになります。
実際に手を動かしてコーディングすることをオススメします。
メインビジュアルの仕様
ここで制作するメインビジュアルの仕様は以下です。
- 画面いっぱいに画像を広げる
- 画像の中央にテキストとボタンを配置する
- レスポンシブ対応
- テキストとボタンにフェードインアニメーションを付ける
- 画像にズームインアニメーションを付ける
メインビジュアルをコーディングするには、画像やテキスト、ボタンなどの要素をHTMLで配置し、CSSでスタイルを指定します。ここでは以下のようなデザインを作ってみます。
コーディングは以下の手順で行います。
- HTMLの作成
- 画像のダウンロード
- 基本的なスタイリング
- メインビジュアルの装飾
- レスポンシブ対応
- アニメーションの実装
また、レスポンシブ対応についてはモバイルファーストで行っていきます。それでは始めましょう。
HTMLの作成
デスクトップなど分かりやすいところにディレクトリを作成し、index.htmlを作成します。ディレクトリ名は自由に決めて問題ありません。また、index.htmlには以下を記述しておきます。
<!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="style.css">
</head>
<body>
<main>
</main>
</body>
</html>まずはmain要素内にsectionを配置し、その中でメインビジュアルのコンテンツをマークアップします。
<section class="main-visual">
<picture>
<source srcset="img/mainv-sp.jpg" media="(max-width: 430px)">
<img class="main-visual-img" src="img/mainv.jpg" alt="">
</picture>
<div class="main-visual-textwrap">
<h2 class="main-visual-title">メインビジュアルを<br>コーディングする</h2>
<p class="main-visual-text">HTMLとCSSの基礎知識と<br>テクニックを学びましょう</p>
<a href="#" class="button">詳しく見る</a>
</div>
</section>この例ではpictureタグを使用しており、画面幅430px以下で表示するときは「mainv-sp.jpg」を読み込むようにしています。メインビジュアルに関しては特にpictureタグでの画像の出し分けが重要になりますが、今回はサンプルなので最小限にしています。
pictureタグについては以下の記事で解説しているので、しっかりと実装したい方は参考にしてみてください。
また、この画像は装飾の用途なのでalt属性は空にしています。ただし、画像内に重要なテキストが含まれている場合は必ずalt属性に代替テキストを設定します。
ちなみに、この画像はCSSで大きさを指定するのでwidth、height属性を記述しなくてもレイアウトシフトは起こりません。
また、メインビジュアルに関してはloading=”lazy”などの遅延読み込みは逆効果なのでこれも行いません。
main-visual-textwrap内には、子要素としてh2, p, a要素があります。これらにもスタイリングが必要なので、main-visual-title、main-visual-text、buttonというクラスを付けています。
これでメインビジュアルのマークアップは完成です。続いて、画像のダウンロードを行います。
画像のダウンロード
今回使用する画像をダウンロードしましょう。ご自身で用意されたものでも構いませんが、画像の色や大きさ、縦横の比率などによっては調整が必要になる可能性があります。
自動でダウンロードされない場合、右クリックのコンテキストメニューから「名前を付けて画像を保存」を選択すればダウンロードできます。
ダウンロードができたらindex.htmlと同じ階層に「img」というディレクトリを作成し、その中に画像を配置しましょう。ここまでできたら以下のように表示されます。
基本的なスタイリング
メインビジュアルに基本的なスタイリングを適用します。まずはindex.htmlと同じ階層に「style.css」という名前のCSSファイルを作成し、HTMLで読み込ませましょう。
CSSのリセット・基本設定
デザイン性の高い要素をコーディングする際、ブラウザが持つユーザーエージェントスタイルシートの影響を受けるとコードの記述量が増えて読みづらくなる場合があります。
今回はメインビジュアルの範囲内で強めにリセットをかけます。
@charset "UTF-8";
/* =============================
基本設定
============================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.main-visual * {
margin: 0;
padding: 0;
}.main-visual内の全ての要素のmarginとpaddingを一旦0にしています。こうすることで.main-visual以外のところにはリセットが掛からないようにすることができます。
全体的にリセットしたい場合は以下でもかまいません。
* {
margin: 0;
padding: 0;
}続いて画像やテキストのレイアウトを調整します。
レイアウトの調整
今回作成するメインビジュアルには以下のような仕様がありました。
「画面いっぱいに画像を広げる」
まずはこれを行います。
/* =============================
メインビジュアル
============================= */
.main-visual-img {
width: 100%;
height: 100vh;
}こうすることで、画面がどのような幅や高さでも画像がいっぱいに表示されるようになります。しかし、このままでは画面のアスペクト比を維持できないという問題があります。
これは、object-fitというプロパティを指定することで解決できます。以下を追加します。
/* =============================
メインビジュアル
============================= */
.main-visual-img {
width: 100%;
height: 100vh;
object-fit: cover; /* 追加 */
}object-fitプロパティは、画像や動画の表示方法を制御するためのプロパティです。このプロパティを使用することで、画像の親要素に合わせてどのように振る舞うかを指定することができます。
object-fit: cover;とすることで画像がアスペクト比を維持したままコンテナ全体に表示され、余った部分は切り取られるような振る舞いになります。確認してみましょう。
画像の高さと画面の高さが同じになり、横にあふれた部分はトリミングされたように横スクロールが発生することなく表示されているかと思います。
次に行う調整ですが、レイアウトに関わる仕様として以下がありました。
「画像の中央にテキストとボタンを配置する」
また、メインビジュアルのテキスト部分は以下のようにマークアップしました。
<section class="main-visual">
<picture>…</picture>
<div class="main-visual-textwrap">
<h2 class="main-visual-title">メインビジュアルを<br>コーディングする</h2>
<p class="main-visual-text">HTMLとCSSの基礎知識と<br>テクニックを学びましょう</p>
<a href="#" class="button">詳しく見る</a>
</div>
</section>これを実装するために、テキストとボタンをラッピングしている.main-visual-textwrapをメインビジュアルの中央に配置します。
方法はいろいろありますが、今回はpositionプロパティを使用します。
まずは配置の基準となる.main-visualに記述します。.main-visual-imgの上あたりに記述すると分かりやすくて良いでしょう。
/* =============================
メインビジュアル
============================= */
.main-visual {
position: relative;
}
.main-visual-img {…}次に、main-visual-textwrapにpositionの指定と位置を定義します。以下を記述してください。
.main-visual-textwrap {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}注意点として、position: absolute;を指定した要素は子要素のコンテンツ幅までwidthが縮小します。なのでwidth: 100%;を指定しています。
top: 50%;とtransform: translateY(-50%);で縦中央に配置し、text-align: center;でテキストを中央に配置しています。
これでメインビジュアルのレイアウトは完成です。表示を確認してみましょう。
次はメインビジュアルの装飾を行います。
メインビジュアルの装飾
現状では以下の問題があります。
- 文字が目立たない
- 余白をリセットしたのでテキストが詰まって見える
- ボタンのスタイルがない
順番にスタイリングしていきます。
文字を目立たせる
文字が目立たない理由は2つ挙げられます。1つ目は、メインビジュアルとしては文字サイズが小さく、線も細いことが原因です。それぞれにfont-sizeとfont-weightを指定してあげましょう。
.main-visual-title {
font-size: 32px;
}
.main-visual-text {
font-size: 20px;
font-weight: bold;
}
.button {
font-size: 18px;
font-weight: bold;
}今回はモバイルファーストでコーディングを行うので、スマホサイズで最適になるように設定しました。画面幅が広くなればまた調整が必要になるでしょう。
文字が目立たない2つ目の原因は、画像の主張が強すぎることが原因だと考えられます。少し調整してみましょう。
.main-visual-img {
…
filter: brightness(70%); /* 追加 */
}要素に視覚的なエフェクトを適用するためのプロパティとしてfilterというものがあります。また、brightness()関数を使用することで要素の明るさを変更することができます。
filter: brightness(70%);とすることで、画像を少し暗くしました。
テキストが黒文字なので画像を明るくするというアプローチもありますが、今回使用している画像には適していないのでテキストを白くします。
また、テキストに影を付けると視認性が高くなるのでこれも行います。
.main-visual-textwrap {
…
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}text-shadowプロパティは子孫要素に継承されるので、.main-visual-textwrapに指定することでこれに含まれる全ての要素に適用されます。
これでテキストも目立つようになりました。以下のように表示されます。
余白の調整
次に余白の調整を行います。marginを指定して調整しますが、縦方向はmarginの相殺が起きるので今回はmargin-topのみを使用します。
また、.buttonはa要素に指定しているため、インライン要素として扱われます。
インライン要素は縦方向のmarginを設定できないのでdisplay: inline-block;を指定します。
.main-vislual-title {
…
line-height: 1.25;
}
.main-visual-text {
…
margin-top: 0.5em;
}
.button {
…
display: inline-block;
margin-top: 1.5em;
}単位にemを使用することで、font-sizeに応じた余白の調整ができるようになります。
これにより、レスポンシブ対応で各テキストのfont-sizeが変わった場合に自動でmargin-topも広がるようになります。
また、.main-visual-titleの行間が広くて纏まってないように感じるので、line-heightで調整しました。
現状では以下のように表示されます。
余白の調整はこれで完了です。次にボタンのスタイリングを行います。
ボタンのスタイリング
ボタンは背景色を黒にし、文字色を白にします。また、border-radiusプロパティで左右を丸くし、paddingなどの調整をして見た目を整えていきます。
.button {
…
color: white;
background-color: black;
padding: 0.6em 1.7em;
border-radius: 1.7em;
text-decoration: none;
text-shadow: none;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
}paddingやborder-radiusも、font-sizeに応じて自動で調整させたいのでemを使用しています。
また、テキストにだけ影があるのは違和感を感じるので、ボタンにはtext-shadow: none;でボタンテキストの影を無効化し、box-shadowを使用してボタンそのものに影を追加しています。
ちなみに、影の位置やぼかしをテキストと区別させることで、視覚的なレイヤー構造を表現しています。
テキストと同じ値でも大きな違いはありませんが、ボタンが手前にあるように見せることにより、さりげなくボタンを目立たせることができます。
次に、hover時のスタイルの変更を行います。今回は背景色と文字色を0.3秒かけて変更するような簡単なアニメーションを実装します。
.button {
…
transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.button:hover {
color: black;
background-color: white;
}ブラウザでスタイルの変更を確認できるかと思います。
これでメインビジュアルのスタイリングが完了しました。続いてレスポンシブ対応を行います。
レスポンシブ対応
様々な画面幅で適切に表示されるように調整を行います。レスポンシブ対応の際に考えなければならないのは、ブレイクポイントをどこに置くかという点です。
今回は「画面幅768px以上」、「画面幅1440px以上」でブレイクポイントを置きます。
各ブレイクポイントでどのように表示されるかを確認します。
レイアウトの変更は特に必要なさそうですが、テキストのfont-sizeがpx値で指定されているため画面幅が広くなるとテキストが小さく見えます。
また、画面が横に長い場合は.main-visual-titleは改行させない方が見栄えが良くなるでしょう。メディアクエリを使用して、「画面が横長のときのスタイル」を設定することができます。
@media (orientation: landscape) {
.main-visual-title br {
display: none;
}
}.main-visual-titleの改行はbrタグで行っていたので、これを非表示にしました。これで画面が横長のときは改行されないようになります。
続いて文字サイズを変更します。メディアクエリを使用して各ブレイクポイントに対して調整することもできますが、今回はclamp()関数を使用した手法でレスポンシブ対応を行います。
clamp()関数は、要素のプロパティの値に対して最小値、希望値、最大値を同時に設定することができます。レスポンシブ対応で文字サイズを可変にしたい場合に使用できます。
clamp()関数の基本構文の例は以下のとおりです。
.element {
/* プロパティ名: clamp(最小値1, 希望値, 最大値); */
font-size: clamp(14px, 3vw, 24px);
}希望値には、vw, vhのようなブラウザやデバイスの特性の影響を受ける値を指定します。最小値と最大値で制限することができるので、文字サイズのレスポンシブ対応をメディアクエリを使用せずに実装することができます。
モバイルファーストで構築しているので、clamp()に指定する最小値は現在のpx値で良いでしょう。
あとは希望値と最大値を決める必要がありますが、これらは根拠のある値を設定する方が好ましいです。
最大値については、今回のブレイクポイントの最大が1440pxなのでこれを基準にします。分かりやすく、それぞれのテキストの値を最小値の２倍にしてみます。
- main-visual-title：64px
- main-visual-text：40px
- button：36px
画面幅1440pxで表示してみると以下のようになります。
PC用に最適化されていることが確認できました。
続いて、希望値について考えます。希望値は可変する値である必要があるため、ここではvwの単位を使用します。
vwはビューポートの幅を基準にした相対値を指定できる単位なので、画面幅に応じて文字サイズを可変にすることができます。
画面幅1440pxを基準にしているので、1440pxまでは可変にし、画面幅が1440pxを超えた場合はそれ以上文字サイズが大きくならないように実装します。
これを実装するための希望値は、vwを使用する場合、以下のように計算することができます。
文字の最大値 / 最大値の画面幅 × 100 = 希望値
.main-visual-titleを例にすると、
64 / 1440 × 100 = 4.44444 …
となり、「4.44444 …」が希望値となります。
これで、clamp()を使用して文字を可変にする準備が整いました。各テキストのfont-sizeの値をclamp()に書き換えます。
.main-visual-title {
font-size: clamp(32px, 4.44444vw, 40px);
}
.main-visual-text {
font-size: clamp(20px, 2.77777vw, 40px);
}
.button {
font-size: clamp(18px, 2.5vw, 36px);
}ブラウザのウィンドウ幅を動かして確認すると、文字サイズが可変されていることが確認できるかと思います。
しかし、このレスポンシブ対応はまだ少し不十分です。縦長の画面では.main-visual-titleに改行が入るため、文字サイズが小さく見えてしまいます。
以下は、開発ツールのエミュレーターを使用してiPad Mini（画面幅：768 × 1024）で表示した場合です。
画面幅に応じて文字が縮小されているため、PCやスマホでの表示と比べて印象が異なってしまっています。
つまりこのメインビジュアルは、縦長の画面と横長の画面で最適な文字サイズが異なるということになります。この問題を解決しましょう。
まずは.main-visual-titleの改行を制御するために使用した@media (orientation: landscape)ブロック内に各テキストのfont-sizeプロパティの記述を移動します。
/* 横長の画面（画面幅1440pxで最大値） */
@media (orientation: landscape) {
.main-visual-title br {
display: none;
}
.main-visual-title {
font-size: clamp(32px, 4.44444vw, 64px);
}
.main-visual-text {
font-size: clamp(20px, 2.77777vw, 40px);
}
.button {
font-size: clamp(18px, 2.5vw, 36px);
}
}続いて、縦長の場合の最適な文字サイズを設定します。
今回は、最大値を変更せずに希望値のみを変えていきます。また、基準となる画面幅は最小のブレイクポイントとして設定した768pxとします。
各font-size / 768 × 100 = 希望値
font-sizeの記述場所ですが、少し複雑な設定なのでメディアクエリを使用して明示的にしたほうが分かりやすいでしょう。以下のように記述します。
/* =============================
メインビジュアルの文字サイズ
============================= */
/* 横長の画面（画面幅1440pxで最大値） */
@media (orientation: landscape) {
…
}
/* 縦長の画面（画面幅768pxで最大値） */
@media (orientation: portrait) {
.main-visual-title {
font-size: clamp(32px, 8.33333vw, 64px);
}
.main-visual-text {
font-size: clamp(20px, 5.20833vw, 40px);
}
.button {
font-size: clamp(18px, 4.6875vw, 36px);
}
}@media (orientation: portrait)を使用することで明示的になりました。コメントを目立つようにすると分かりやすくて良いです。
iPad Miniでどのように表示されるか確認してみます。
PCやスマホで表示した場合との印象を統一できました。これでメインビジュアルのレスポンシブ対応は完了になります。
このように、clamp()とorientationを使用することで、様々なデバイスで最適な文字サイズになるように実装することができます。
続いて、アニメーションを実装していきます。
アニメーションの実装
このメインビジュアルのアニメーションに関する仕様は以下でした。
- テキストとボタンにフェードインアニメーションを付ける
- 画像にズームインアニメーションを付ける
アニメーションの実装にはJavaScriptを使用することも多いですが、これらの実装はCSSのみでも行うことができます。今回はCSSの@keyframesを用いて実装していきます。
@keyframesは、CSSでアニメーションを表現するために使用されます。このルールを使用することで、要素のスタイルを時間の経過とともに変化させることができます。
CSSのアニメーション実装ではtransitionプロパティを使用することも多いですが、@keyframesを使用することで、より複雑なアニメーションを表現することができます。
テキストとボタンのフェードイン
テキストとボタンをフェードインさせるために、まずは@keyframesでアニメーションの定義を行います。
@keyframesを使用する際には、アニメーションの名前、アニメーション開始時のスタイル、アニメーション終了時のスタイルを定義します。
以下を記述してください。
/* =============================
アニメーション
============================= */
@keyframes fadeIn {
0% {
/* 開始時のスタイル */
opacity: 0;
}
100% {
/* 終了時のスタイル */
opacity: 1;
}
}ここではfadeInという名前のアニメーションを定義しました。
@keyframesは特定の時間点でどのようにプロパティを変化させるかを指定することができます。
上記の例は、「アニメーション開始時はopacity: 0;」、「アニメーション終了時はopacity: 1;」と指定しています。
簡易的ではありますが、これで要素をフェードインさせるためのアニメーションを定義することができました。
続いて、フェードインさせたい要素にfadeInを使用するための指定を行います。
今回フェードインさせる要素はテキストとボタンですが、これらは.main-visual-textwrapという要素の子要素として配置されているので、.main-visual-textwrapに指定します。
animationプロパティを指定することで、@keyframesで定義したアニメーションを要素に適用することができます。以下を記述します。
.main-visual-textwrap {
…
opacity: 0;
animation: fadeIn 3s ease 0.5s forwards;
}この例では、animationプロパティで以下のことを指定しています。
- fadeIn：適用するアニメーションの名前を指定
- 3s：アニメーションの実行時間を指定
- ease：アニメーションの進行速度を制御
- 0.5s：アニメーションを開始するまでの時間を指定
- forwards：アニメーションが終了した後、最終スタイルを保持する指定
アニメーションの実行時間と進行速度は任意で設定して構いませんが、アニメーション名とforwardsは正しく設定する必要があります。
また、フェードイン後に画像が表示されるとアニメーションの効果が分からないので、アニメーションの開始を0.5秒遅らせています。この値は画像の読み込み時間によって調整するほうが望ましいです。
これでフェードインアニメーションの実装が完了しました。続いて、画像をズームインさせるアニメーションを実装します。
画像をズームインさせる
今回のメインビジュアルの画像は、光の粒が放射状に配置されています。
この画像をズームインさせることで、中央に配置されたテキストにユーザーの視点を誘導することができ、より没入感のあるメインビジュアルに仕上げることができます。
まずはアニメーションを定義します。以下を記述しましょう。
/* =============================
アニメーション
============================= */
@keyframes fadeIn {
…
}
@keyframes zoomIn {
0% {
transform: scale(1);
filter: brightness(70%);
}
100% {
transform: scale(1.1);
filter: brightness(90%);
}
}zoomInという名前のアニメーションを定義しました。
transformプロパティの値にscale()関数を使用することで、要素を拡大・縮小させることができます。
transform: scale(1);により、アニメーション開始時は通常の大きさで表示されます。
transform: scale(1.1);により、アニメーション終了時では要素が10%拡大して表示されることになります。
また、少し派手かもしれませんがfilter: brightness()にもアニメーションを設定して要素を徐々に明るくします。
zoomInを適用させる要素は.main-visual-imgです。以下を記述しましょう。
.main-visual-img {
…
animation: zoomIn 10s ease 0.5s forwards;
}上記の例ではzoomInアニメーションを10秒かけて実行しますが、任意の時間を設定して大丈夫です。
また、その他の指定はfadeInアニメーションと同じにしていますが、easeやアニメーションを開始するまでの時間もお好みで変更して問題ありません。
画像をズームインさせるアニメーションの実装はこれで完了です。
しかし、このままだとzoomInアニメーションによって.main-visual-imgが大きくなり、親要素である.main-visualもそれに合わせて広がってしまいます。
これでは、メインビジュアルが画面サイズより大きくなってしまうため、今回のメインビジュアルの仕様とは異なってしまいます。
.main-visualに以下を記述することで解決できます。
.main-visual {
position: relative;
overflow: hidden;
}これでメインビジュアルが完成しました。以下のように表示されます。
サンプルコードの全体
この記事で作成したメインビジュアルの最終的なサンプルコードは以下です。
HTML
<!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="style.css">
</head>
<body>
<main>
<section class="main-visual">
<picture>
<source srcset="img/mainv-sp.jpg" media="(max-width: 430px)">
<img class="main-visual-img" src="img/mainv.jpg" alt="">
</picture>
<div class="main-visual-textwrap">
<h2 class="main-visual-title">メインビジュアルを<br>コーディングする</h2>
<p class="main-visual-text">HTMLとCSSの基礎知識と<br>テクニックを学びましょう</p>
<a href="#" class="button">詳しく見る</a>
</div>
</section>
<div class="test"></div>
</main>
</body>
</html>CSS
@charset "UTF-8";
/* =============================
基本設定
============================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.main-visual * {
margin: 0;
padding: 0;
}
/* =============================
メインビジュアル
============================= */
.main-visual {
position: relative;
overflow: hidden;
}
.main-visual-img {
width: 100%;
height: 100vh;
object-fit: cover;
filter: brightness(70%);
animation: zoomIn 10s ease 0.5s forwards;
}
.main-visual-textwrap {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
opacity: 0;
animation: fadeIn 3s ease 0.5s forwards;
}
.main-visual-title {
line-height: 1.25;
}
.main-visual-text {
font-weight: bold;
margin-top: 0.5em;
}
.button {
font-weight: bold;
display: inline-block;
margin-top: 1.5em;
color: white;
background-color: black;
padding: 0.6em 1.2em;
border-radius: 1.7em;
text-decoration: none;
text-shadow: none;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
transition: background .3s ease-in-out, color .3s ease-in-out;
}
.button:hover {
color: black;
background-color: white;
}
/* =============================
メインビジュアルの文字サイズ
============================= */
/* 横長の画面（画面幅1440pxで最大値） */
@media (orientation: landscape) {
.main-visual-title br {
display: none;
}
.main-visual-title {
font-size: clamp(32px, 4.44444vw, 64px);
}
.main-visual-text {
font-size: clamp(20px, 2.77777vw, 40px);
}
.button {
font-size: clamp(18px, 2.5vw, 36px);
}
}
/* 縦長の画面（画面幅768pxで最大値） */
@media (orientation: portrait) {
.main-visual-title {
font-size: clamp(32px, 8.33333vw, 64px);
}
.main-visual-text {
font-size: clamp(20px, 5.20833vw, 40px);
}
.button {
font-size: clamp(18px, 4.6875vw, 36px);
}
}
/* =============================
アニメーション
============================= */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes zoomIn {
0% {
transform: scale(1);
filter: brightness(70%);
}
100% {
transform: scale(1.1);
filter: brightness(90%);
}
}最後に
メインビジュアルのコーディングを実際に行い、コーディングする際のポイントやテクニックについてご紹介しました。
メインビジュアルはウェブサイトの第一印象を左右するため、アニメーションやテキスト、画像、フォントの種類、ボタンのデザインなどのスタイリングにおいても、他のコンテンツとは区別して扱われることが多いです。
メインビジュアルはユーザー体験やコンバージョンと深い関わりを持つため、どのようなデバイスでも印象が変わらないように実装することは重要なポイントです。clamp()とメディアクエリのorientationは、この問題を解決するためのとても便利な手法です。
この記事では簡単なアニメーションのみの実装でしたが、@keyframesとanimationを使用することで、CSSのみでも複雑なアニメーションを表現することができます。興味のある方は調べてみると良いでしょう。