wds

Web Design ScratchWebデザインからガジェットまで、web制作に役立つまとめ情報をお届けします

  • はてブ
  • twitter
  • RSS
2011.11.24 12:57

最近よく見かける縦長でページ遷移が少なめな国内サイト13:Webデザインまとめ

オロナイン公式サイト|大塚製薬
twitterやってます

更新日時:2011.11.24 12:57

カテゴリ:Webデザイン

今回は最近じわじわと増えてる気がする、ページ遷移を極力省いた縦長の国内サイトを集めてみました。偏に縦長サイトと言っても、ナビゲーションを押すことでヌルヌルと動く系の奴だったり、パララックス(視差)効果を使ったものだったりその形も様々です。

ちなみにパララックス(視差)とは

視差(しさ)は、二地点での観測地点の位置の違いにより、対象点が見える方向が異なること、または、その角度差。パララックス (英:parallax)ともいう。
引用元:視差 – Wikipedia

の事であり、Webデザインではレイヤーのように重ねた画像を違った速度でスクロールさせる事により、奥行きや動きを表現したものを指すようです。

なで猫オロニャイン-_-大塚製薬今回のアイキャッチに使用したサイトは大塚製薬株式会社様よりオロナイン公式サイト|大塚製薬
公式ページとして効能・効果や成分を説明したwebサイトです。スクロールにあわせてオロナインの瓶がクルクル回ります。
左の画像はなで猫オロニャイン。ぬいぐるみのプレゼントキャンペーン中です。可愛いなぁ・・・

Bamboo-PopBamboo Pop
デザイナーの個性が光るとても自由なデザイン。デザイナーやイラストレーターに使用者が多いと思われるWacom社のペンタブBambooのブランドサイト。左にある小さいカラフルな点がナビゲーションとなってます。
食幹-Shokkan---渋谷-日本料理店食幹 Shokkan – 渋谷 日本料理店
Less is moreを体現したかのようなシンプルなデザイン。右上に日本語のナビゲーションと左下に英語ナビゲーションを備える。左右で日本語と英語の内容を併記してるアイデアも面白いですね。外国人のお客さんも安心ですね。
鎌倉近視老視クリニック鎌倉近視老視クリニック
スクロールがキビキビと動いて気持ちいいナビゲーション。ページスクロールとナビゲーションが連動しているので、今見ている情報の位置が解りやすいですね。
株式会社博報堂DYインターソリューションズ株式会社博報堂DYインターソリューションズ
博報堂DYインターソリューションズのコーポレートサイト。スクロールに合わせて背景の可愛いイラストが動きます。
世界を変えるプロジェクトチーム---RYNAPSE--株式会社リナプス世界を変えるプロジェクトチーム – RYNAPSE | 株式会社リナプス
以前も別の記事で取り上げた株式会社リナプスのコーポレートサイト。
jittojitto
映像やCGを作っているjittoのwebサイト。今話題のジャン・レノがドラえもん役で出てくるトヨタのCMを作った会社だそうです。ポートフォリオがループする作り。
WELCOME-to-IDEASKETCHWELCOME to IDEASKETCH
制作会社アイデアスケッチのコーポレートサイト。トップページがポートフォリオというシンプルな作りで、スクロールすることで代表的なお仕事を見ることが出来ます。
有限会社-内山建設|UCHIYAMA-Construction-Company有限会社 内山建設|UCHIYAMA Construction Company
建築会社の内山建設のwebサイト。背景に方眼紙を取り入れたデザイン。スルスルーと動いて左のナビゲーションが追従する。
ウラダナ--鎌倉ウラダナ | 鎌倉
オリジナルブランドの洋服やセミオーダーの靴などを販売する鎌倉にあるお店。追従や固定ではなくスクロールした先にナビゲーションがあるタイプ。
<a href="http://www.de-la-fantasia.com/">De La FANTASIA 2012 @ STUDIO COAST, TOKYO 2012.02.04 SATURDAY</a>キヤノン:ティム・レイマン スペシャルサイト「INTO THE NATURE」
以前紹介したキャノンのスペシャルサイト。スクロールすることで背景のイラストが動いているように見えます。ナビゲーションは下に固定。
De-La-FANTASIA-2012-De La FANTASIA 2012 @ STUDIO COAST, TOKYO 2012.02.04 SATURDAY
音楽イベント De La FANTASIA -デ・ラ・ファンタジアのサイト。
music-Chef|走るほどにフィットする音楽ナビゲーションサービス、登場music-Chef|走るほどにフィットする音楽ナビゲーションサービス登場
※音楽が流れますので音量に注意
自動車向け音楽配信サービス「music-Chef」のwebサイト。Flashを利用しています。
Geometry-Of-Light-By-Alyson-Shotz--Espace-Louis-Vuitton-TokyoGeometry Of Light By Alyson Shotz | Espace Louis Vuitton Tokyo
エスパス ルイ・ヴィトン東京のwebサイト。

どれも素晴らしいサイトですね。縦長のサイトにチャレンジするときは是非参考してみてはいかがでしょうか。

更新日時:2011.11.24 12:57

カテゴリ:Webデザイン

この記事へのコメント

この記事へのコメントはありません。

コメントフォーム

CAPTCHA


トラックバックのURL

この記事へのトラックバック

この記事へのトラックバックはありません。

About Me

WDSロゴ

「web制作の新しい情報が知りたいけど、仕事が忙しい!」「RSSは登録したものの消化しきれない」WDSはそんな貴方の為に、web制作に関する最新情報をはじめ、おやすみ前の10分間で今日1日の話題が読み取れるサイトを目指します。