カード式スクロールのデザイン実例4選｜縦長のページをコンパクトに、印象的に見せる方法
ホームページで伝えたい情報が増えると、ページはどうしても縦に長くなりがちです。
サービスの紹介、会社の強み、商品の特徴。それぞれに写真と説明文を配置すると、「内容は充実しているけれど、似たようなレイアウトが続いてしまう」と感じることもあるのではないでしょうか。
そんなときに参考になるのが、カードを重ねたり、一定の表示領域で内容を切り替えたりするスクロール演出です。情報をまとまりごとに見せることで、視線の移動を抑えながら、次の内容へ自然につなげられます。
この記事では、4つの参考サイトを紹介しながら、カード式のデザインの特徴や動き、取り入れる際のポイントを解説します。
カード式スクロールとは？
カード式スクロールとは、写真・見出し・説明文などを一つのまとまりとして扱い、スクロールに合わせて重なりや表示内容を変える表現です。
- 表示領域を固定し、その中の文章や画像を切り替える
- 次のカードが下から現れ、前のカードに重なる
- カードの見出しを上部に残しながら、内容を順番に見せる
- 現在の位置を番号で示し、複数の特徴を一つずつ紹介する
カードは、必ずしも角丸や影の付いた小さな枠である必要はありません。画面の大部分を使った大きなパネルでも、情報を区切り、順番に見せる考え方は共通しています。
「コンパクトに見える」と「スクロール距離が短い」は別
ここで押さえておきたいのが、カードを重ねても、実際のスクロール距離が短くなるとは限らないという点です。
一定の場所に内容を表示し続ける演出では、切り替えのためにスクロール量を確保することがあります。見た目は一つの画面に収まっていても、読み進めるための操作量は増える場合があります。
見た目をコンパクトにしたい場合は、表示位置をそろえたり、カードを重ねたりする方法が役立ちます。
実際のスクロール距離を短くしたい場合は、文章量・カードの高さ・余白・切り替えに必要な移動量まで調整する必要があります。この違いを踏まえて、参考サイトを見ていきましょう。
1．アイグッズ新卒採用サイト｜表示領域を固定し、メッセージを切り替える
デザインの特徴
参考にしたいのは、導入メッセージを見せるエリアです。画面内に共通の表示領域を設け、複数のメッセージを同じ場所に配置しています。
情報を一つずつ独立したセクションとして縦に並べる構成とは異なり、一つの場面の中で話が進んでいくように見せる設計です。
スクロールに合わせた動き
このエリアでは、表示領域を画面内に留め、スクロール位置に応じて表示するメッセージを変更します。文章は透明度の変化に加え、各行が少しずつ移動しながら現れる仕組みです。
また、背景画像には時間による切り替えも設定されています。文章のスクロール連動と、背景の自動切り替えを組み合わせた構成です。
カードが次々と積み重なるタイプとは異なりますが、限られた表示領域を使って、内容を順番に伝える参考例です。
自社サイトに取り入れるなら
採用メッセージや企業理念など、順番に読んでもらいたい内容と相性のよい考え方です。ひとつの場面に文章を詰め込まず、伝えたいことを短く区切ると、切り替えの意味が明確になります。
2．クロスバリュー｜大きな番号と重なるパネルで、会社の強みを伝える
デザインの特徴
「4つの特徴」のエリアは、大きな番号と、見出し・説明文・ビジュアルを組み合わせた構成です。
番号が視覚的な目印になり、複数の強みを整理して見せています。白い背景と境界線で区切られたパネルは、文字の大きさや余白の違いによって、読む順番をつくっています。
スクロールに合わせた動き
各パネルには、画面上部の一定位置に留まる設定が使われています。スクロールすると後続のパネルが進んできて、前のパネルの上に重なる構成です。
見出しや説明の位置をそろえることで、内容が変わっても、読み手が毎回違う場所を探す必要を減らせます。
自社サイトに取り入れるなら
「選ばれる理由」「サービスの特徴」など、同じ重要度の情報を順番に紹介する場面に応用できます。
大きな番号を使う場合は、それに負けない短く明確な見出しを用意するのがポイントです。項目ごとの文章量もそろえると、一定のリズムで読み進めやすくなります。
3．tetopaint｜見出しを残して積み重ねる、サービス紹介のデザイン
デザインの特徴
「Service」では、外壁塗装・屋根塗装・デザイン塗装などを、番号付きのパネルに分けて紹介しています。
各パネルは細い線で区切られ、サービス名、写真、説明、詳細ページへのリンクをまとめています。装飾を増やすよりも、情報の整理と重なり方で特徴を出した構成です。
スクロールに合わせた動き
サービスのパネルには、それぞれ異なる位置で留まる設定があります。後続のパネルが重なっても、前のパネルの見出し部分が上に残るように配置されています。
書類やファイルを少しずつずらして重ねたような見せ方で、前に登場したサービスの存在も感じられるのが特徴です。
自社サイトに取り入れるなら
複数のサービスや事業を紹介するときに参考になります。
実装では、上部に残す見出しの高さと、本文を表示するスペースの配分が重要です。カードが増えるほど表示領域が狭くなるため、紹介する項目数も含めて調整する必要があります。
4．Vivoo｜画像と説明を大きく見せ、番号で進行を伝える
デザインの特徴
「Vivooについて」では、サービスの特徴を4つのパネルに分けています。パソコン向けの構成では、大きな画像と説明を左右に配置し、背景と白い文字でひとまとまりの情報として見せています。
「1 / 4」のように現在位置を示す表示もあり、全体の中でどこを読んでいるか把握しやすい設計です。
スクロールに合わせた動き
パソコン向けには、見出しエリアや紹介パネルを一定位置に留める構成が使われています。スクロールに合わせて次のパネルが重なり、現在位置の番号も更新されます。
スマートフォン向けでは紹介パネルの固定を解除する設定があり、画面幅に応じて見せ方を変えています。
自社サイトに取り入れるなら
商品の特徴や、サービスを利用するメリットを段階的に紹介するときに参考になります。
画像で伝える内容と文章の役割を分け、番号で全体像を示すのがポイントです。パソコンの演出をそのまま小さくするのではなく、スマートフォンでの読みやすさを別に設計する考え方も参考になります。
カード式の演出を効果的に見せる5つのポイント
1．1枚のカードで伝えることを絞る
カードの中に複数の話題を詰め込むと、内容を読み切る前に次のカードが重なってしまいます。
「このサービスで何ができるか」「この会社が選ばれる理由は何か」など、1枚につき中心となるメッセージを決めましょう。詳しい説明は別ページへつなぐことで、カード内の情報を整理できます。
2．スクロールの長さを、文章量に合わせる
短い文章なのに何度もスクロールしなければ切り替わらないと、待たされているように感じられます。逆に、長い文章がすぐに切り替わると、読む時間が足りません。
演出の速度は、動きの気持ちよさだけでなく、実際に内容を読めるかで調整します。
3．次の情報があることを示す
次のカードの端を少し見せる、番号を付ける、進行状況を表示するなど、先に内容が続くことを伝えましょう。
固定された画面だけでは、読み手が「ここで終わりなのか」「まだスクロールする必要があるのか」を判断しづらくなる場合があります。
4．スマートフォンでは固定を解除する選択肢も持つ
スマートフォンは表示領域が限られ、同じ文章でも行数が増えます。
画面内にカード全体が収まらない場合は、通常の縦並びへ切り替える、固定する範囲を減らすなどの調整が必要です。端末の向きや文字サイズが変わっても、説明やボタンが隠れないようにします。
5．動きがなくても内容が伝わる構成にする
演出を控えたい利用者や、キーボードで操作する利用者への配慮も大切です。
カードの重なりによってリンクが操作できなくならないか、動きを抑えた状態でも順番に読めるかを確認しましょう。
アニメーションは内容を伝えるための補助です。まず情報の順序を整え、そのうえで必要な動きを加えることが大切です。
実装方法は、見せたい内容に合わせて選ぶ
カードを一定位置に留める表現には、CSSの position: sticky がよく使われます。スクロールに合わせた文章の切り替えや細かな動きを加える場合は、JavaScriptなどで表示状態を制御します。
ただし、同じ技術を使えば、どのサイトでも同じ仕上がりになるわけではありません。
カードの高さ、固定する位置、重なる順番、文章量、画面サイズ。それぞれを調整することで、読みやすい演出になります。
特に「スクロール領域を短くしたい」という場合は、まず内容と余白を整理し、そのうえで重ねる表現を検討しましょう。固定する時間を長くしすぎず、次のセクションへ進みやすくすることも重要です。
カード式のスクロール演出は、バケルーンでも実装可能です
バケルーンでも、カードを重ねるデザインや、スクロールに合わせて内容を切り替える演出の実装が可能です。
- サービス紹介が縦に長くなっている
- 会社の強みを一つずつ印象的に伝えたい
- 採用サイトに動きを取り入れたい
このようなご要望に合わせて、掲載内容と使いやすさを踏まえたデザインをご提案します。
参考サイトの表現をそのまま再現するのではなく、自社のサービスやブランドに合う形へ調整することが大切です。パソコンではカードの重なりを活用し、スマートフォンでは読みやすい構成に切り替えるなど、閲覧環境に合わせて設計します。
ご相談の際は、気に入った参考サイトと、取り入れたい箇所をお知らせください。
読みやすさと印象に残る動きを、両立したホームページへ
カード式の演出は、情報を整理し、一つずつ伝えるための選択肢です。バケルーンでは、掲載内容や閲覧環境に合わせたデザイン・実装をご提案します。
無料相談・無料見積もり