第1章: はじめに
はじめに
この章では、本書の目的と読み方を丁寧に説明します。Webサイトで横スクロール表現を使う場面は増えていますが、見せ方や実装方法を誤るとユーザーに負担をかけます。本書は実装とデザインの両面をバランス良く学べる構成です。
本書の目的
本書は、CSSとJavaScriptを用いた基本的な横スクロールの作り方から、ノーコードツール「STUDIO」での実装手順、スマホ対応の工夫、UXに関する設計指針までを丁寧に解説します。実例と手順を多く載せるので、実際に作りながら学べます。
対象読者
・フロントエンドを学び始めた方
・デザインに関わる方で横スクロール表現を試したい方
・STUDIOなどノーコードで実装したい方
この章の進め方
以降の章では、まず基本を押さし、次に演出や実践的な対応を順に説明します。困ったときに参照しやすい構成にしましたので、目的に合わせて読み進めてください。
Webサイトの横スクロールとは？どんなときに使うべきか
1. 横スクロールの定義とイメージ
Webサイトの横スクロールは、ページを上下ではなく左右に動かして閲覧する表現です。スマホで左右にスワイプする画像ギャラリーや、横に並べたカードを横方向に見せるレイアウトを想像すると分かりやすいです。
2. 具体的に使うべきケース
- 画像やプロダクトのギャラリー：大きなビジュアルを切らずに見せたいときに有効です。
- カード型コンテンツの一覧：カードを横並びにしてスクロールで続けると視線がつながります。
- モバイルでのテーブル表示：横幅に収まらない表を横スクロールで閲覧させると見やすくなります。
3. 利点
- 横幅が足りない場面で情報を圧縮せず提示できます。
- ストーリーや時間軸を横に並べると直感的に伝わります。
4. 注意点とUXの工夫
- ユーザーが横スクロールと分かる導線を用意します（矢印、スクロールヒント、部分的な切れ目など）。
- キーボード／スクリーンリーダー対応やフォーカス順を確認し、操作性を損なわないようにします。
- 無理に横スクロールを採用すると混乱を招くので、情報構造や目的に合わせて選んでください。
5. 実例のヒント
横スクロールは視覚的に目立つ演出になります。閲覧のしやすさを優先しつつ、必要な場面で使うと効果的です。
CSSで横スクロールコンテンツを作る基本手法
概要
CSSだけで横スクロールを作る基本は、横幅の大きな要素を横並びにし、親要素に横スクロールを許可することです。ここでは主要な方法と注意点を具体例と共に説明します。
親要素の設定
親要素には次の指定を使います。
.scroll-x{overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;}
white-space:nowrapはinline-block方式で有効です。overflow-x:autoで必要時にスクロールバーが出ます。
子要素を横並びにする
2つの代表的な方法：
– inline-block方式: 子要素にdisplay:inline-blockを指定
– flex方式: 親にdisplay:flex; 子にflex:0 0 autoを指定
例:
.scroll-flex{display:flex; gap:16px; overflow-x:auto}
.scroll-flex .item{flex:0 0 80vw}
幅はpx固定よりvwや%など相対単位を使うとレスポンシブに強くなります。
テーブルの横スクロール
テーブルは親でラップします。
<div class="table-wrap"> <table>...</table> </div>
.table-wrap{overflow-x:auto}
table{width:max-content}
これで小さな画面でも横スクロールで表を確認できます。
スクロールバーのカスタマイズ
ブラウザ差はありますが、簡単な設定は可能です。
.scroll-x::-webkit-scrollbar{height:8px}
.scroll-x::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}
クロスブラウザ対応は限られるため、デザインの要件に注意してください。
実践のコツ
- タッチ端末では- -webkit-overflow-scrolling:touchを使うと滑らかになります。
- focusやアクセシビリティのために、キーボード操作でのスクロールも確認してください。
- コンテンツ幅はmax-widthやmin-widthで上限を決めると崩れにくくなります。
JavaScriptで「演出のある横スクロール」を実装する方法
概要
JavaScriptを使うと、スクロールに合わせて横方向に動く演出を細かく制御できます。スクロール量を取得してx座標（またはxPercent）に変換し、要素の移動量を調整します。トリガーを使えば要素が画面に入ったときだけアニメーションを開始できます。
準備（HTMLの例）
<div class="wrapper">
<section class="panel">...</section>
<section class="panel">...</section>
</div>
横幅を計算しやすくするため、パネルを横並びにします。
基本実装の流れ
- 全体の横幅とウィンドウ高さを計算する
- window.scrollYやIntersectionObserverで開始位置を検出
- translateXにスクロール量を代入して移動
簡単な例（スクロール量をそのまま横移動）:
window.addEventListener('scroll', ()=>{
const x = -window.scrollY;
document.querySelector('.wrapper').style.transform = `translateX(${x}px)`;
});
ライブラリを使う（GSAP + ScrollTrigger）
GSAPは滑らかなアニメーションと同期が簡単です。ScrollTriggerを使えば縦スクロールに連動した横移動が短いコードで作れます。
パフォーマンスとアクセシビリティ
- transformを使うと描画が軽くなります。top/leftは避ける
- requestAnimationFrameで最適化する
- キーボードやスクリーンリーダーでも操作できる設計にする
これらを組み合わせると、見た目の良い横スクロール演出が作れます。
STUDIOで横スクロールを実装する手順（ノーコード）
はじめに
STUDIOではコードを書かずに横スクロールを作れます。視覚的に操作できるため初心者にも扱いやすいです。ここでは基本の手順と実例的な注意点を分かりやすく説明します。
手順（短いステップ）
- 左のボックスアイコンからボックスを追加します。
- ボックスの横幅を100%に設定します。
- 縦幅はまず500〜700px程度に設定して、内部に見やすく要素を配置します。
- 横に並べたい要素（画像やカード）をボックス内に並べます。並べ方はドラッグで調整します。
- 配置が済んだら、ボックスの縦幅を100%に変更して、はみ出しを防ぎます。
ポイントと注意点
- 要素は横並びにするとき幅を揃えると見た目が整います（例：画像を幅300pxに統一）。
- スマホでの見え方はプレビューで必ず確認してください。必要なら高さをvh単位にすると調整しやすいです。
よくあるトラブルと対処
- 横スクロールが出ない：要素が縦に折り返している可能性があるので、横並びを維持してください。
- 縦スクロールが出る：縦幅を100%に戻してはみ出しを抑えてください。
視覚的に操作して微調整するだけで、短時間で横スクロールを実装できます。
横スクロールデザインの総合ガイド（設計・UXの観点）
はじめに
横スクロールは視覚的に魅力的な表現を可能にしますが、使いどころと配慮が重要です。ここでは設計とUXの観点から実践的な指針を紹介します。
使うべき場面
- 連続したストーリーや時間軸の提示（事例やタイムライン）
- ギャラリーや商品カードの水平一覧
- 広い画像やインフォグラフィックの表示
用途は「横に並べることで意味が分かる」場合に限定してください。
認知と誘導
- 最初のカードを半分見せる、またはフェードで端を示すと直感的です。
- 矢印やスクロールインジケーターを付け、操作方法を明示してください。
- スナップ（項目ごとに止める）を使うと操作が分かりやすくなります。
モバイル対応
- スワイプ操作を優先し、タップ領域を大きめにしてください。
- 垂直スクロールとの競合を避ける工夫（十分なマージンや直感的なジェスチャー）をします。
アクセシビリティ
- キーボードで移動できるようにし、フォーカス順を自然に保ちます。
- スクリーンリーダー向けに読み上げ順を整え、動きの多い演出は減らしてください。
パフォーマンスとテスト
- 画像は遅延読み込みにして初期負荷を下げます。
- 実機での操作感を必ず確認してください。遅延やカクつきは離脱に直結します。
デザインの心得
- ストーリー性を意識し、不要な演出は控えてください。視線を逸らさないことが大切です。
- CTAは常に見える位置に置き、ユーザーの次の行動を明確にします。
実装前チェックリスト
- 直感的な導線（矢印／部分表示）を用意したか
- モバイルで自然に操作できるか
- キーボード／スクリーンリーダーに対応しているか
- パフォーマンス対策（遅延読み込み等）を行ったか
これらを総合的に設計すると、横スクロールはユーザー体験を高める有効な表現になります。
