CSS

CSSのスクロールバーを表示、非表示にする方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSのスクロールバーを表示、非表示にする方法について解説しています。overflowプロパティを使うことでスクロールバーの表示・非表示を指定することができます。書き方と画面上での見え方をサンプルで確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

CSSのスクロールバーを表示、非表示にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

今回は、CSSに関する内容だね！

どういう内容でしょうか？

スクロールバーを表示、非表示にする方法について詳しく説明していくね！

お願いします！

overflowプロパティとは

overflowプロパティは、ボックスの中に収まらない要素をどのように表示するかを設定します。

overflowプロパティの値一覧

visible / ボックスからはみ出ている要素を表示する(初期値)
hidden / ボックスからはみ出ている要素は表示しない
scroll / ボックスに収まらない内容はスクロールして表示できるようにする

スクロールバーを表示する方法

スクロールバーを表示するには、overflow: scroll; を適用します。

X軸方向のスクロールバーを表示したい場合は overflow-x: scroll;
Y軸方向のスクロールバーだけを表示する場合は overflow-y: scroll;

とします。

[PR] Webデザインで副業する学習方法を動画で公開中

スクロールバーを非表示にする方法

スクロールバーを非表示にするには、はみ出ている要素を表示しない overflow: hidden; を適用します。

実際に書いてみよう

X軸方向、Y軸方向ともにスクロールバーを表示する場合、X軸方向のスクロールバーを表示する場合、Y軸方向のスクロールバーを表示する場合の3つのボックスを作ってみます。

HTML：

<div class="box scroll">
  <p>overflowプロパティでスクロールバーを表示してみる</p>
  <p>overflowプロパティでスクロールバーを表示してみる</p>
  <p>overflowプロパティでスクロールバーを表示してみる</p>
  <p>overflowプロパティでスクロールバーを表示してみる</p>
  <p>overflowプロパティでスクロールバーを表示してみる</p>
  <p>overflowプロパティでスクロールバーを表示してみる</p>
</div>
<div class="box scrollx">
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
</div>
<div class="box scrolly">
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
</div>

CSS：

.box{
  width:150px;
  height:100px;
  padding:30px;
  margin:10px;
  background:#ddd;
}
.scroll{
  overflow:scroll;
}
.scrollx{
  overflow:hidden;
  overflow-x:scroll;
}
.scrolly{
  overflow:hidden;
  overflow-y:scroll;
}
p{
 white-space:nowrap; 
}

See the Pen
yLyvNXL by marihashimoto (@mari877)
on CodePen.

監修してくれたメンター

橋本真理

web/グラフィックデザイナー。

webサイトのデザインからコーディング等一式、ロゴや各種広告などのデザインやイラストを描いたりしています。

TechAcademyではWebデザインコース・WordPressコースを担当。

趣味は、ラジオと音楽と踊ること。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

CSSのborder-spacingの使い方【初心者向け】

CSSのborder-spacingの使い方について解説します。border-spacingプロパティは、隣接するセルのボーダーとボーダーの間隔を指定する際に使...

CSS

背景に画像などを入れたい！CSSで背景を指定する方法【初心者向け】

本記事ではHTML要素に対し、CSSで背景を指定する方法を現役エンジニアが解説します。目次 CSSで背景を編集する書き方実際にCSSで背景...

CSS

CSSのwebkit-line-clampを使って指定した行数に制限する方法を現役エンジニアが解説【初心者向け

CSSのwebkit-line-clampを使って指定した行数に制限する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して...

CSS

転職・在宅ワークにも繋がる！Web制作の副業の仕事内容と収入を徹底解説

皆さんは本業の収入やお仕事に満足していますか？「転職するほど不満があるわけではないけど将来を考えた時にこのままで良いか、なんとなく不安」という方が多いのでは...

ピックアップ

CSSの読み込み速度が遅い原因と対処法を現役エンジニアが解説【初心者向け】

CSSの読み込み速度が遅い原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...

CSS

CSSでline-hightを使って行間を指定する方法【初心者向け】

CSS初心者向けに、line-hightを使って行間を指定する方法を解説する記事です。 CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みく...

CSS

あわせてよく読まれている記事

HTMLでスクロールバーを表示・非表示する方法を現役エンジニアが解説【初心者向け】

HTMLでスクロールバーを表示・非表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次スクロールバーの表示／非表示を制御する「overflow」とはスクロールバーの表示／非表示を切り替える方法実際に試してみようまとめ田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介スクロールバーを表示・非表示する方法について詳しく説明していくね！大石ゆかりお願いします！スクロールバーの表示／非表示を制御する「overflow」とは overflowとは、HTMLタグの領域(ボックス)の範囲内に収まりきらない文字や画像などの情報がある場合の、表示方法を決めるプロパティです。収まりきらず、ほかのタグと互いに影響し合う領域を「ブロック整形コンテキスト」と呼び、 div タグなどがそれに該当します。ブロック整形コンテキストの詳細については、以下を参考にしてください。 MDN ブロック整形コンテキスト textareaタグの表示領域よりも入力文字数が多く、表示領域に収まらなくて、見切れてしまうときはありませんか？その際にoverflowを利用すると、縦スクロールバーを表示することが可能です。 overflowには横方向を指定する「overflow-x」、縦方向を指定する「overflow-y」、両方を一括指定する「overflow」があります。設定値の種類は以下のとおりです。 visible：領域からはみ出ても、内容を表示する(既定値) hidden：領域に収まらない内容は表示しない。スクロールバーは表示されないが、プロパティの操作などによるスクロールは可能 clip：領域に収まらない内容は表示しない。スクロールバーは表示されず、スクロールも不可能 scroll：領域に内容が収まらない場合にはスクロールバーを表示する auto：ユーザーエージェント(ブラウザ)に依存する overflowについて、詳しくは以下も参考にしてください。 MDN overflow [PR] Webデザインで副業する学習方法を動画で公開中スクロールバーの表示／非表示を切り替える方法 overflowプロパティは以下のように使用します。 2つキーワードが指定された場合、下記のように設定されます。最初の値が overflow-x 2つ目の値が overflow-y キーワードが1つ指定された場合は、overflow-x と overflow-y に同じ値が設定可能です。レイアウトとして、横方向と縦方向に同じ値を設定しても問題ないかはその都度確認しましょう。 overflow: scroll; overflow: hidden visible; overflow-x と overflow-y を使って個別に指定することも可能です。 overflow-x: hidden; overflow-y: visible; 実際に試してみよう今回のサンプルプログラムでは、overflowプロパティの指定による表示を確認します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample</title> <style> #wrapper { height: 200px; width: 300px; overflow-y: scroll;

HTML

CSSのoverflowを使ってはみ出た表示の指定をする方法【初心者向け】現役Webデザイナーが解説

今回は、CSSのoverflowではみ出た表示の指定をする方法を説明します。文章が長くなり、外枠からはみ出てしまう時、手動で改行などしなくてもCSSで調整することができるので覚えておくと良いでしょう。目次 overflowを使う時の値の種類実際に書いてみようそもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり田島メンター！CSSで枠からはみ出た文章の折り返しをしたいんですけど・・・田島悠介そういう時はoverflowっていうプロパティを使うと便利だよ！大石ゆかり例えば、枠内でスクロールして見ることもできますか？田島悠介全然できるよ！種類もいくつかあるから1個ずつ見ていこうか！大石ゆかりわかりました〜！ overflowを使う時の値の種類テキストを囲むボックスに、「overflowプロパティ」を設定すると、テキストがボックスからはみ出す場合、どういう風に表示するか、あらかじめ設定する事ができます。「overflowプロパティ」は4種類の値を持ちます。 visible：初期値。はみ出して表示されます。 scroll：スクロール表示されます。 hidden：表示されません。 auto：ブラウザに依存します。（一般的にはスクロールと同じ状態になる）それぞれ詳しく見ていきましょう。「visible」テキストがボックス内に収まらない場合、テキストはボックスからはみ出して表示されます。これが初期値になっています。初期値というのはoverflowを設定しない場合、「overflow: visible;」が設定されていると見なされます。「Internet Explorer」では内容がはみ出すのではなく、ボックスが内容に合わせて拡張されます。「chrome」や「Firefox」や「Edge]では領域をはみ出して表示します。「scroll」テキストがボックス内に収まらない場合、ボックスにスクロールが表示され、ボックスからはみ出したテキストはスクロールすることで見られます。スクロールバーは自動的に表示されるので、スクロールバーを実装してテキストを見せたい時にも使えます。ただし、「Internet Explorer」では常時スクロールバーが表示されるため、デザインの際注意が必要です。「hidden」テキストがボックス内に収まらない場合、はみ出たテキストは表示されず、HTMLにないものとして処理されます。「auto」ブラウザに依存して自動で決まります。一般的にはスクロールして見られるようになり、どのブラウザでもだいたい同じものになると思います。 [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう実際にコードを書いてみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS overflow</title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <div class="hid"> <p> The European languages are members of the same

CSS

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次overflowプロパティとはスクロールバーを表示する方法スクロールバーを非表示にする方法実際に書いてみよう監修してくれたメンターそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？田島悠介いろいろ方法があるけどcalcファンクションを使えば簡単だよ。大石ゆかり calc？CSSで計算ができるんですか？田島悠介その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。大石ゆかりへぇー。わかりやすいですね。田島悠介そうなんだ。まずはどういった記述の仕方をするか見てみよう。大石ゆかりはい！ calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。 calcファンクションを使うメリット異なる単位で計算することができる計算が明白になる calc()は結果の値ではない異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。 [PR] Webデザインで副業する学習方法を動画で公開中calcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。構文プロパティ（widthなど）: calc(式) 四則演算が使用できる指定する式では四則演算の演算子（+、-、*、/）が使えます。前後に空白が必要加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。入れ子が可能 calcファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。 calcファンクションの実装例実際にcalcファンクションを使った実装例を見てみましょう。ルートに基づいたサイズ指定要素を3等分の幅にする左右のセンタリング上下の中央配置ヒーローヘッダーの高さ調整ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。ソースコード「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

CSS

HTMLの要素にスクロールバーを設置する方法を現役デザイナーが解説【初心者向け】

HTMLの要素にスクロールバーを設置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次overflowプロパティとはスクロールバーを表示する方法スクロールバーを非表示にする方法実際に書いてみよう監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介要素にスクロールバーを設置する方法について詳しく説明していくね！大石ゆかりお願いします！スクロールバーとはスクロールバーとは、ボックスの中に文字や画像などのコンテンツが収まりきらない場合、横方向や縦方向にスクロールすることでコンテンツの閲覧を可能にする操作バーです。規約の表示など、文章全体を表示してしまうと長くなってしまう場合などに、画面の縦幅を節約する目的でよく利用されています。スクロールバーを設置するには、ボックスにCSSのoverflowプロパティを指定します。 overflowプロパティの指定方法 overflowプロパティにはいくつかの指定方法があります。以下にoverflowプロパティの代表的な値を紹介します。 overflow: visible; ボックスからはみ出たコンテンツを、そのままはみ出した状態で表示させます。 overflowプロパティの初期値です。 overflow: scroll; スクロールバーを表示させることができます。ボックスからはみ出たコンテンツは隠れてしまい、スクロールをすることで見ることができるようになります。 overflow: hidden; スクロールバーを表示しないようにし、ボックスからはみ出たコンテンツも表示されません。 overflow: auto; ボックスからはみ出たコンテンツの有無により、スクロールバーの表示・非表示を自動で判断できます。 [PR] Webデザインで副業する学習方法を動画で公開中HTMLの要素にCSSでスクロールバーを設置する方法 HTMLのスクロールをさせたい文字などを囲む親要素にクラス名を付け、CSSでoverflow: scroll;を記述するだけでスクロールバーが表示されます。さらに、縦幅と横幅を指定することで、隠す部分と表示する部分を調整します。実際に書いてみよう HTML <div class="test"> <p>123456</p> <p>123456</p> <p>123456</p> <p>123456</p> </div> CSS .test { width: 100px; height: 50px; overflow: scroll; border: blue 5px solid; } 以下のように右側にスクロールバーが表示され、縦方向にスクロールすることで隠れたコンテンツが表示されたら成功です。まとめ今回はHTMLの要素にスクロールバーを設置する方法について解説しました。スクロールバーを設置するには、コンテンツを囲むボックスにCSSのoverflowプロパティを指定します。簡単に設定できるので、限られた画面の表示領域を節約したい時などに便利です。しかしながら、多用するとユーザーにストレスを与えてしまいかねませんので、ピンポイントで使用するようにしてみてください。大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ HTMLを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTML

JavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでscrollTopプロパティを使うと、スクロール量をピクセル単位で設定や取得できます。実務でもscrollTopプロパティによって画面スクロール処理を行うので、ぜひ学習してみてください。目次overflowプロパティとはスクロールバーを表示する方法スクロールバーを非表示にする方法実際に書いてみよう監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法について詳しく説明していくね！大石ゆかりお願いします！ scrollTopプロパティとは scrollTopは、要素のプロパティです。要素とはHTMLを構成する部品の塊を意味します。 JavaScriptでscrollTopプロパティを利用することで、要素の一番上からのスクロール量をピクセル単位で設定や取得できます。 scrollTopプロパティの使い方あらかじめ、HTMLのスクロールが発生している要素を取得しておきます。取得したタグの要素に.scrollTopと続けて記述することで、scrollTopプロパティを使うことができます。要素.scrollTop; [PR] Webデザインで副業する学習方法を動画で公開中要素のスクロールされるピクセル数を取得する方法 HTMLのソースでスクロールが発生しているタグを取得し、.scrollTopとすることでその時のスクロールしている量を取得できます。サンプルコード function count(){ var main = document.getElementById('main'); var scrollTop = main.scrollTop; console.log(scrollTop); } 実行結果 See the Pen getscrollTop by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 function count(){では、スクロール数を計測するcount()関数を宣言しています。 var main = document.getElementById(‘要素’);では、HTML内で「main」というidを持つ要素が存在しているという仮定で、要素を取得して、変数mainに代入しています。 var scrollTop = main.scrollTop;では、mainという要素に対して、scrollTopメソッドを適用して、スクロール数を取得して、変数scrollTopに代入しています。 console.log(scrollTop);では、変数scrollTopをコンソールに表示しています。 }では、function count(){を終了しています。要素に指定したidを正しく指定することで、スクロール数を取得することが可能です。要素のスクロールされるピクセル数を設定する方法 HTMLのソースでスクロールが発生しているタグを取得し、そのプロパティである.scrollTopに値を代入することで設定ができます。サンプルコード function set(){ var main = document.getElementById('main'); main.scrollTop = 50; } 実行結果 See the Pen setscrollTop by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 function set(){では、スクロール数を指定するset()関数を宣言しています。 var main = document.getElementById(‘要素’);では、HTML内で「main」というidを持つ要素が存在しているという仮定で、要素を取得して、変数mainに代入しています。 main.scrollTop = 50;では、50pxの位置にスクロールする処理をしています。 }では、function set(){を終了しています。要素に指定したidを正しく指定することで、指定した50pxスクロールした位置に移動します。実際に書いてみようここでは、scrollTopを実際に書いてみましょう。 HTMLサンプルコード <div class="outer"

JavaScript

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、UXデザイナーのNick Babich氏によって投稿されました。縦長で無限にスクロールするWebサイトが最近一般的になってきています。ロングスクロールを使うと、ユーザーはページをスクロールするだけで大量のコンテンツを閲覧することができるようになります。無限スクロールはFacebook・Twitterなどのフィードで見られる、エンドレスなスクロールの手法です。ロングスクロールには次のような利点があります。ユーザーをより引き込むことができます。スクロールを利用することで、目的のために必要な操作を最小限に抑えることができます。「次へ」をクリックする必要がないというメリットによって、ユーザーは次のページに移動する変化を気にすることなくコンテンツに没頭することができます。モバイルデバイスにうまく変換されます。ロングスクロール技術の普及の背景には、モバイル画面がよく使われるようになったということが大きく関わっています。画面が小さいほどスクロールの頻度は増えます。モバイルデバイスのジェスチャーコントロールによって、スクロールは直感的で楽しいものになります。しかし、このやり方には欠点がないわけではありません。デザイナーはコンテンツとナビゲーションにしっかりと注意を払う必要があります。この記事ではロングスクロールにおいてのいくつかの利点、考慮すべき点、それと簡単なヒントについて解説します。どのようなときにロングスクロールを利用するかロングスクロールはすべてのWebサイトに使われるわけではありません。次のような場合にふさわしいでしょう。ストーリーテリング(ストーリーテラーのために線型構造を作り出す) 長い記事や複数のステップによるチュートリアルなど、連続した長いコンテンツ(複数のページに分割するよりもユーザーエクスペリエンスが向上する) コンテンツを別々のパーツに分割できず、全体として提示する必要がある場合(インフォグラフィックなど) 製品の機能・品質・特質を物語形式で見せたいときどのようにロングスクロールを実装するか次の10のルールが、ロングスクロールによいユーザーエクスペリエンスをもたらすのに役立ちます。 1. ユーザーにスクロールを促すページが表示されるとすぐにユーザーはスクロールを開始しますが、サイト上部のコンテンツは依然として重要です。訪問者の最初の印象と品質に関する予想は、ページ上部の内容で決まります。ユーザーがページをスクロールするのは、サイトの上部に表示されているのが期待できるものである場合だけです。なので、最も魅力的なコンテンツを置きましょう。良い導入部・前書きを提示しましょう。(コンテンツの状況をはっきりさせて、ユーザーに「このページがどういうものであるか」ということを分かってもらうことができます) 魅力的な画像を使いましょう。(そのサイトに関連する情報を含む画像は、ユーザーの注意を引きつけます) 2. ナビゲーションオプションを常に保持するロングスクロールのWebサイトを作成する場合、ユーザーは現在の位置とナビゲーションを把握したいと思っていることを忘れないでください。ロングスクロールではナビゲーションに関する問題が起こることがあります。ページをスクロールしたときにナビゲーションバーが表示されなくなった場合、下の方までスクロールしていたのに一番上まで戻らなければいけなくなったりします。こういう問題に対しての解決策として、常に一貫した場所に表示され続けるメニューがあります。モバイルデバイスの場合：モバイル画面は他のデバイスよりも小さいため、ナビゲーションバーが画面の大部分を占めることがあります。ユーザーがコンテンツを見るためにスクロールしているときはナビゲーションバーを隠して、トップに戻るために画面を引き下げたときに表示させるとよいでしょう。ヒント：追加のナビゲーションを使用して、ページ内の各セクションの間をジャンプさせることもできます。以下のアニメーションの場合、ユーザーは自分の進行状況を確認することができると同時に特定のセクションへのショートカットとしてこれを利用することができます。 3.「戻る」ボタンが適切に動作することを確認するロングスクロールのサイトでは、ユーザーが自分のページ上の位置を見失うことがよくあります。ロングスクロールのリストからクリックして該当のページに行ったあと「戻る」ボタンを押したとき、元いた場所でなくページの一番上に戻ってしまうというような形です。そうすると、一度見たコンテンツをまたスクロールしなければいけなくなります。適切な場所に戻れないことで、当然ユーザーは不満を感じるでしょう。フィード内の要素をアクティブにしたあと、元いたところにきちんと戻れるようにしておく必要があります。Flickrの「戻る」ボタンはこのような機能についての良い例です。スクロール位置が記憶されており、「戻る」ボタンを押すと元の場所に戻ることができます。 4. スクロール位置に基づいてURLを変更するロングスクロールの一般的な問題のひとつとして、ページ上の特定の場所へのURLによる共有ができないという点があります。スクロール位置はURLに反映されず、そのページの先頭に繋がります。 URLが現在の位置を捉えないので、ユーザーは画面を簡単に切り替えることができなくなり苛立つことになります。 HTML5からは、history.pushState()関数を使うことで、ページをリロードすることなくブラウザに表示されるURLを変更することが可能になっています。 5. ページ内ジャンプ機能を使用するロングスクロールのもうひとつの共通の問題は、方向感覚がなくなることです。ユーザーは前に見たものを探すときに苦労します。長いチュートリアルなど、コンテンツが複数の重要なセクションに分かれている場合に特に深刻な問題になります。「セクションへジャンプ」オプションをつけることでこの現象を解決することができます。例えばTumblrでは、ページ内で迷子になったときのためにページの下や上にジャンプすることができるようになっています。ページ上のコンテンツはいくつかのはっきりしたブロックに分けられており、大きなインジケーターのドットが画面の左に固定されています。ヒント：「セクションへジャンプ」機能では、インジケーターのドットを使いやすくする必要があります。ドットがクリックやタップがしにくい状態だとユーザーを苛立たせることになります。そのため、ドットの大きさが適切であるかどうか確認してください。 6. コンテンツを読み込むときに、視覚的なフィードバックを表示するヤコブ・ニールセンのユーザビリティ10原則のひとつによると、システム状態の視認性はUIデザインにおいて重要な原理です。ユーザーはシステム上の現在の状態をいつでも知りたいと思っており、Webサイトは閲覧者を不安にさせてはいけません。適切な視覚的フィードバックを通して、ユーザーに今何が起きているのかを伝える必要があります。Webサイトがコンテンツを動的に読み込む場合は、ローディングが行われていることをはっきりと示さなければいけません。進行状況を示すインジケーターを使用して、新しいコンテンツが読み込まれていることを表現しましょう。読み込み時間は2秒～10秒の短い時間であるはずですので、システムが動作していることをループアニメーションで表すことができます。 7. スクロールハイジャックを行わないスクロールハイジャックのWebサイトでは、スクロールが制御され基本的なWebブラウザの機能を無効にされてしまいます。ユーザーがページをコントロールできない上に動作の予測ができなくなってしまうため、スクロールハイジャックは好ましくありません。この問題はAppleのMac Proのページで見ることができます。ユーザーがどれだけ早くスクロールしても、レイアウトはあらかじめ決められた速度で移動します。このページの全てのコンテンツはスクロールに関連付けられているため、訪問者はページを遅い速度でブラウズすることを強いられてしまいます。 8. ページの読み込み時間を最適化するロングスクロールのページでは、読み込みの長さの問題も発生します。これはWebサイトにおいて致命的な問題です。実際に、ユーザーの47％が2秒以内のWebページの読み込みを求めています。ページが3秒以内に読み込まれない場合、57％のユーザーが去ってしまいます。ロングスクロールの読み込み時間の問題は解決することができます。レイジーローディングなどの読み込み技術を利用し、ページの読み込み時間を最適化することで基本的なコンテンツにすぐにアクセスできるようにします。 9. リソース消費を考慮するロングスクロールを使用する場合は、ページが消費するリソース(CPUとメモリ)を常に考慮に入れてください。ページをリロードせずに複数のページの写真・アニメーションGIF・動画をスクロールすると、システムリソースが大幅に浪費される可能性があります。リソースが限られているデバイス(iPhoneなど)では大量のアセットの読み込みによる遅延が起きる可能性があります。そのため、さまざまなデバイスでWebサイトをテストし、該当の場所を通り過ぎたときにはアニメーションや動画を一時停止するなどの手法を利用します。 10. ユーザーの行動を考えるロングスクロールがどう効果的であるかを判断するために、ユーザーがどのように操作しているかを調査してください。アナリティクスデータが有効です。例えば、Googleアナリティクスではページ解析によって何人のユーザーが折りたたまれた部分の下をクリックしているか確認することができます。そのデータに応じてデザインを調整することが可能です。 [PR] Webデザインで副業する学習方法を動画で公開中ECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。ナビゲーションとフィルタをスティッキーにフィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。それぞれのアイテムをブックマークできるようにする後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。条件に一致したアイテムの数を表示する利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。フッターにアクセスできるようにするユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。ロングスクロールと視差効果インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。パララックススクロールをどんなときに使うか視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。パララックススクロールは、ガイド付きの物語形式で効果を発揮します。ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。パララックススクロールを使うべきではないケース多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。パララックスとページパフォーマンス視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。一度にたくさんのものをアニメートしないようにしましょう。パララックスとアクセシビリティ前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。最後にロングスクロールによって、没入感のあるブラウジングを生み出すことができます。ユーザーが直感的なUIが好きであれば、スクロールの長さは気にならないでしょう。閲覧者の目的が達成され、かつ便利だと感じさせるものにしてください。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

CSSのスクロールバーを表示、非表示にする方法を現役デザイナーが解説【初心者向け】