更新日: 2017年3月15日
公開日: 2015年8月27日

Webデザインで参考にしたいシングルページで使えるテクニック7選

2013年ごろから沸々と増えてきたシングルページ・デザイン。1ページの HTML ファイルの中に伝えたい情報をまとめて、サイト閲覧者をページ最下部へと導く技術はなかなかのものです。そんなすごい「シングルページ」で使える機能について、事例を元に見ていきたいと思います。

Webデザイン初心者必見！シングルページで使えるテクニック
スクロールすると「ナビゲーション」が出現
忙しい人用の「コンテンツ案内バー」
サイトの読み込み速度を軽くしてくれる「無限スクロール」
”2列”のシングルページ
インパクトのある「アニメーション」
”軽い”ページサイズのシングルページ
”横”にスクロールするシングルページ
まとめ

Webデザイン初心者必見！シングルページで使えるテクニック

スクロールすると「ナビゲーション」が出現

三井住友VISAカードデビットプラス

デビットプラスを持っているとこんなに便利な生活ができるよ、というプロモーションサイトになります。

トップデザインにはナビゲーションが無く、非常にスッキリしたデザインとなっていますが、スクロールを始めるとページをナビゲーションしてくれるメニューバーがトップに現れます。このサイトのように、コンテンツ内容が豊富なシングルページには欠かせないテクニックといえるでしょう。またこちらのサイトには、忙しい人用のスクロール・ターボ・ボタン（右下の∧∨ボタン）が設置されています。

㈱東急エージェンシー2013年版採用ページ

少し前の Web サイトになりますが、大手広告代理店　東急エージェンシーの新卒採用PRサイトになります。

デザインに特徴があるサイトですが、スクロールすると左サイドにメニューアイコンが表示されて、長いページも目的に合わせて閲覧することができます。Gif ファイルをうまく活用して、動きのあるシングルページにまとめています。

忙しい人用の「コンテンツ案内バー」

マリオ博物館

日本でもお馴染みの「スーパーマリオ」について学べる Web サイトになります。

スクロールする前から左サイドにシングルページのコンテンツ案内バーを表示し、このページに何の情報が含まれていのか一目で確認することができます。後でページを見直す時にも便利に使えますね。

制作は HTML5 Hub というアメリカのグループが制作していて、スクロールによる背景エフェクトやグラフィック・エフェクトは感動的です。特に終盤の SUPER MARIO 3D LAND あたりの演出はステキです。尚、このサイトのソースコードは GitHub 上で公開されています。

サイトの読み込み速度を軽くしてくれる「無限スクロール」

ホソ井

オシャレな創作カバンを開発する「ホソ井」。芸術性の高い作品をコレクション形式でシングルページに掲載しています。

ページの読み込み速度に影響を与えない様に、ページ下部まで行くと次のコンテンツを読み込むような「無限スクロール・テクニック」が活用されています。またページ下部までスクロールした時に出現する Like やツイートボタンのテクニックもさりげない演出でステキです。

Mercedes-Benz GLA

一度は乗ってみたい自動車の代表格「ベンツ」。こちらはベンツのGLAという車種の英語版プロモーションサイトになりますが、非常にユニークなシングルページとなっています。まるで映画を見ているかのような臨場感のある演出で、最近トレンドとなっているストーリー性や対話感（閲覧者が画面を操作するなど）などがうまく盛り込まれています。これだけぎっしりコンテンツが盛り込まれたシングルページでも、無限スクロールでサイトの読み込み速度が遅くなる現象を回避しています。

”2列”のシングルページ

Studio Meta

フランスのWebデザイン会社のホームページになります。シングルページなのにページ中央で左右分断されて、スクロールするたびに左右の情報が切り替わる演出は見惚れてしまいます。ステキなカラム・テクニックです。

インパクトのある「アニメーション」

vimeo - Cameo

YouTubeでお馴染みのvimeo。こちらはビデオ・アプリを紹介するサイトになりますが、ページ冒頭のスマホ演出は、スクロール効果と背景画像の設定を巧みに使った参考になるテクニックです。

NISSAN NOTE

日産のNOTE（車種）を紹介するWebサイトになります。小間切れした画像演出はチャーミングで、まるで自分がドライブしているかのような臨場感を味わうことができます。ページ自体は結構長いですが、上部のナビゲーションバーがサポートしてくれます。

LIXUS

物流カンパニーLIXUSの会社紹介サイトになります。カンパニー系では珍しいシングルページ構成ですが、要点を押さえてうまく情報をまとめている事例と思います。スクロールに合わせてトラックが走る姿は、企業イメージをユーザーにうまく伝えられる表現方法と考えられます。

”軽い”ページサイズのシングルページ

Flash VS HTML5

FlashVSHTML5

Flash と HTML5 どっちがスゴイ？という比較サイトになります。スクローリングによるキレイなアニメーションや左右最下部のアニメーションもステキですが、こちらのサイトの驚くべき点はHTMLファイルの軽さにあります。ヤフージャパンHTMLファイルが53Kbなのに対して、こちらのサイトは18.25Kbとなっており、推奨されるHTMLファイル33Kbを大幅に下回っています。（SEOSiteCheckup調べ）

ページのソースコードを読み込むとハイテクニックなJavaScriptで制御されていることが伺えます。シングルページの障害となり易い「読み込みの遅さ」をプログラミング・テクニックで回避しているイイ事例と思います。

”横”にスクロールするシングルページ

キックスターター 2014 まとめ

アメリカを中心に個人開発者への資金援助を仲介する「Kickstarter」。2014年のまとめを水平方向のシングルページにまとめています。まるで雑誌をめくるように各開発者の挑戦や仕上がりを拝見することができます。PCモニターの横移動には目が慣れていない方が多いですが、このようなサイトであれば雑誌感覚で楽しむことができます。

見ているとドンドン横方向に移動している感じになりますが、実は画像や映像をスライドで差し込みながら前の画像と取り変えて、横スライドのシングルページを演出しています。こちらはjQueryのプラグインを使わずにソースを書き込んでいますが、とりあえず横クロールを試してみたい方はHorizonScroll.jsなど便利な jQuery プラグインがリリースされています。

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら