今回は最近じわじわと増えてる気がする、ページ遷移を極力省いた縦長の国内サイトを集めてみました。偏に縦長サイトと言っても、ナビゲーションを押すことでヌルヌルと動く系の奴だったり、パララックス(視差)効果を使ったものだったりその形も様々です。
ちなみにパララックス(視差)とは
視差（しさ）は、二地点での観測地点の位置の違いにより、対象点が見える方向が異なること、または、その角度差。パララックス (英:parallax)ともいう。
引用元:視差 – Wikipedia
の事であり、Webデザインではレイヤーのように重ねた画像を違った速度でスクロールさせる事により、奥行きや動きを表現したものを指すようです。
今回のアイキャッチに使用したサイトは大塚製薬株式会社様よりオロナイン公式サイト｜大塚製薬。
公式ページとして効能・効果や成分を説明したwebサイトです。スクロールにあわせてオロナインの瓶がクルクル回ります。
左の画像はなで猫オロニャイン。ぬいぐるみのプレゼントキャンペーン中です。可愛いなぁ･･･
デザイナーの個性が光るとても自由なデザイン。デザイナーやイラストレーターに使用者が多いと思われるWacom社のペンタブBambooのブランドサイト。左にある小さいカラフルな点がナビゲーションとなってます。
Less is moreを体現したかのようなシンプルなデザイン。右上に日本語のナビゲーションと左下に英語ナビゲーションを備える。左右で日本語と英語の内容を併記してるアイデアも面白いですね。外国人のお客さんも安心ですね。
スクロールがキビキビと動いて気持ちいいナビゲーション。ページスクロールとナビゲーションが連動しているので、今見ている情報の位置が解りやすいですね。
博報堂DYインターソリューションズのコーポレートサイト。スクロールに合わせて背景の可愛いイラストが動きます。
以前も別の記事で取り上げた株式会社リナプスのコーポレートサイト。
制作会社アイデアスケッチのコーポレートサイト。トップページがポートフォリオというシンプルな作りで、スクロールすることで代表的なお仕事を見ることが出来ます。
建築会社の内山建設のwebサイト。背景に方眼紙を取り入れたデザイン。スルスルーと動いて左のナビゲーションが追従する。
オリジナルブランドの洋服やセミオーダーの靴などを販売する鎌倉にあるお店。追従や固定ではなくスクロールした先にナビゲーションがあるタイプ。
以前紹介したキャノンのスペシャルサイト。スクロールすることで背景のイラストが動いているように見えます。ナビゲーションは下に固定。
音楽イベント De La FANTASIA -デ・ラ・ファンタジアのサイト。
※音楽が流れますので音量に注意
自動車向け音楽配信サービス「music-Chef」のwebサイト。Flashを利用しています。
エスパス ルイ･ヴィトン東京のwebサイト。
どれも素晴らしいサイトですね。縦長のサイトにチャレンジするときは是非参考してみてはいかがでしょうか。
この記事へのコメント
コメントフォーム
トラックバックのURL
この記事へのトラックバック
About Me
「web制作の新しい情報が知りたいけど、仕事が忙しい！」「RSSは登録したものの消化しきれない」WDSはそんな貴方の為に、web制作に関する最新情報をはじめ、おやすみ前の10分間で今日1日の話題が読み取れるサイトを目指します。
新しい記事
-
2011.12.292011年の流行を振り返ろう!!今年を代表するようなクリエイティブでデザイン性の高い国内サイト ベスト10
-
2011.12.28クリエイティブでデザイン性の高い国内サイト ベスト18 – 2011年12月版
-
2011.11.25クリエイティブでデザイン性の高い国内サイト ベスト18 – 2011年11月版
-
2011.11.24最近よく見かける縦長でページ遷移が少なめな国内サイト13：Webデザインまとめ
-
2011.10.27合計1200枚以上!?海外サイトでまとめられたカッコイイ壁紙のまとめ
今日のまとめ
-
2011.12.28色彩豊かなカラフルWebデザインの例やphotoshopで作るwebデザインチュートリアルなど今日のまとめ
-
2011.12.212011年から選ぶ感動するほど美しいwebサイトやミニマルなwebデザイン集など今日のまとめ
-
2011.12.20Webデザイナー必見!!インスピレーションの沸くwebサイト集や白をキーカラーにしたWebデザインなど今日のまとめ
-
2011.12.19パーフェクトなランディングサイトのデザイン例やパララックス(視差)効果を使った新しいwebサイトなど今日のまとめ
-
2011.12.16あなたのビジネスに使えるフリーで素晴らしいWordPressのテーマなど今日のまとめ
海外サイト紹介
-
2011.12.15色の使い方が難しいカラフルなロゴデザインの美しい例40
-
2011.11.29クリエイティブな手書きのイラストやタイポグラフィを使ったwebデザイン
-
2011.11.222011年から選ぶクリエイティブでカッコいい名刺デザイン
-
2011.11.18美しいダークをテーマにしたWebデザイン集