Peek Up = 次要素のチラ見せ配置。Previewとの違いは?

動詞句: Peek Up

過去・過去分詞: Peeked Up

IPA表記: /ˈpiːk ʌp/

読み表記: ピーク・アップ / PEEK-uhp

意味:

Webサイトの画面下端（ビューポートの境界線）で次のコンテンツの一部を意図的に覗かせ、スクロール行動を自然に促す視覚的配置手法。

一般的な訳語:

チラ見せ配置、端部の覗き見せ、スクロール誘導レイアウト。UI/UX設計の現場では「コンテンツピーキング（Content Peeking）」や「チラ見せ」と呼ばれる。

詳細:

WebデザインやUI設計において混同されやすい表現に「Preview（プレビュー）」がある。Previewはモーダルや縮小サムネイルなどを用い、コンテンツの全容や概要を「事前に確認・把握させること」を主目的とした情報提示の仕組みである。

これに対してPeek Upは、ビューポートの最下端という物理的な境界線を利用し、要素の上端だけを「あえて中途半端に露出させる幾何学的・視覚的ギミック」を指す。画面下部に要素が綺麗に収まりすぎると、ユーザーが「ここでページが終わった」と錯覚して離脱するフォールス・ボトム（False Bottom / 完了の錯覚）が発生する。Peek Upは人間の「欠落した視覚情報を補完したくなる心理」と視覚的アフォーダンスを利用し、スクロールを意識させずに指を動かさせるための技術的トリガーとして機能する。Previewが「中身を見せる機能」であるのに対し、Peek Upは「スクロール率と滞在深度を最大化するためのレイアウト配置手法」である点で明確に異なる。

ネイティブな組み合わせ:

Peek Up Above The Fold (ファーストビュー下端から少し覗かせる)

"Design the next card to peek up above the fold so users immediately know there is more content below."

ユーザーが下に続きのコンテンツがあると直感できるよう、次のカードをファーストビュー下端から少し覗かせるように設計しなさい。

Peek Up At The Bottom Of The Viewport (画面表示領域の最下端からチラ見せする)

"Having an interactive demo peek up at the bottom of the viewport significantly increased the scroll rate on our landing page."

画面表示領域の最下端からインタラクティブなデモをチラ見せさせたことで、ランディングページのスクロール率は大幅に向上した。

Allow The Next Section To Peek Up (次のセクションを覗かせる)

"Adjust the vertical padding to allow the next section to peek up rather than creating an accidental false bottom."

誤ってページの終了と錯覚させないよう、垂直方向の余白を調整して次のセクションが少し覗くようにしなさい。

動画から切り取った生の文:

"(2:50) And we also added a video demo that peaks up at the very bottom of the viewport which encourages people to scroll, press play, and watch what the software does."

また、表示領域の最下端から少しだけ覗かせるビデオデモを追加したことで、訪問者がスクロールして再生ボタンを押し、ソフトウェアの挙動を確認するよう促しています。

"(2:58) It's also great to add images and animations to showcase whatever it is your site is offering."

サイトが何を提供しているのかを明確に示すために、画像やアニメーションを追加することも非常に効果的です。