Image may be NSFW.
Clik here to view.
ひとつのページにすべての情報、コンテンツを集約したシングルページ完結型レイアウト、通称ペライチ。クライアントの考えやコンテンツアイデアを、圧倒的なWebスキルで実現する、Webデザイナーの腕の試しどころでもあります。ユーザーが何度もクリックし、目的の情報にたどり着けないなどの問題点を改善し、ユーサビリティの向上にもつながります。
海外デザインブログSplashnology.comで、クリエイティブな発想力を発揮した、シングルページ完結型Webデザイン35個をまとめたエントリー「Showcase of Creative Single Page Webistes」が公開されていたので、今回はご紹介します。
詳細は以下から。
想像力をかき立てる、ユニークでクリエイティブなペライチWebデザインまとめ
スクロールするたびにさまざまな、動きをモデル本人に加えていく、斬新すぎるデザインコンセプトが素敵なWebサイト。
Image may be NSFW.
Clik here to view.
007シリーズの歴代ボンドカーを、パララックスエフェクトでイラスト付き解説する面白サイト。カラーリングとタイポグラフィーの組み合わせもナイス。
Image may be NSFW.
Clik here to view.
大きなカンバスに手書きでさまざまな情報をまとめ、キーボード操作、スワイプでコントロールする新感覚サイト。
Image may be NSFW.
Clik here to view.
何度かご紹介し、登場している気もしますが、それくらいいつも驚かされるデザインには脱帽。音楽とWebデザインを見事にミックスした新しいカタチを提案しています。
Image may be NSFW.
Clik here to view.
1932年から作られているギターの歴史を、スライド式に解説する、コンテンツ内容にマッチしたスクロールも魅力的。
Image may be NSFW.
Clik here to view.
個性的なデザイン高級時計を販売しているWebサイトで、まず最初に表示される、筆記体とオーナメントデザインを活用した、レトロスタイルは参考まで。
Image may be NSFW.
Clik here to view.
迫力たっぷりなイメージ写真をヘッダーでスライドさせ、余白スペースをたっぷり使ったサイトデザイン。
Image may be NSFW.
Clik here to view.
通常のパララックスエフェクトとは異なり、さらに奥行き立体感を演出した、ハイレベルなデザインセンスを感じるAdidasのサイト。
Image may be NSFW.
Clik here to view.
目を惹く黄色をアクセントカラーに、サムネイルホバーなど滑らかなアニメーションが素敵なグリッドデザインを採用。
Image may be NSFW.
Clik here to view.
日本が誇るパナソニック50年の歴史で完成した、電気シェーバーを詳しく解説したサイトで、パララックスエフェクトを多彩に利用したデザインが◎。
Image may be NSFW.
Clik here to view.
各コンテンツごとに、水平方向に切り替わることで、イメージ画像とテキストを変更しているサイト。配色は参考になりそうですよ。
Image may be NSFW.
Clik here to view.
facebookアカウントでログインすると、これから20年後先までに起こる出来事が予言されています。信じるか信じないかは、、。
Image may be NSFW.
Clik here to view.
会社紹介、ポートフォリオ、お問い合わせなどコンテンツの切り替える際、スクロールで背景イメージも変更されます。
Image may be NSFW.
Clik here to view.
モノクロ写真に、細字フォントを組み合わせた、黒を基調としたダーク系Webサイトデザインで、エレガントな印象を与えてくれます。
Image may be NSFW.
Clik here to view.
スクロールすることで、コンテンツが水平方向に切り替わる、不思議なフリック操作感を味わえるブラジルのサイト。
Image may be NSFW.
Clik here to view.
You Waste A Lot Of Time At Work
カラフルカラーをモチーフに、パララックスを中心としたアニメーションエフェクトは、見ているだけでワクワクします。
Image may be NSFW.
Clik here to view.
左サイドに配置されているナビゲーションメニューをクリックすると、縦横無尽にアニメーション付きで移動する、ダイナミックな仕掛けとイラストが素敵なサイト。
Image may be NSFW.
Clik here to view.
淡いパステル系むらさき色をアクセントカラーに、クールなタイポグラフィーを組み合わせたデザインが印象的なWebサイト。
Image may be NSFW.
Clik here to view.
寂しがり屋のペンギンをテーマに、プロジェクトコンセプトを紙芝居風に伝える、ユニークなアイデアサイト。
Image may be NSFW.
Clik here to view.
子ども達の憧れの職業、宇宙飛行士についての今後やトレビアを、セクションごとにアニメーションで移動させる、見ているだけでも楽しいサイトのひとつ。
Image may be NSFW.
Clik here to view.
奥行き感をスムーズなアニメーションと、シャドウで再現したイラストは、インフォグラフィクスを意識したレイアウトにもばっちり合います。
Image may be NSFW.
Clik here to view.
工具の使い方などをクイズ形式で出題する面白コンセプトに、ブランドレイアウトを意識したデザインもオリジナル性たっぷり。
Image may be NSFW.
Clik here to view.
日常生活のあらゆる行動をモニタリングするデバイス製品紹介ページで、原寸大サイズでiPhoneと商品をレイアウトした大胆デザイン。
Image may be NSFW.
Clik here to view.
動画とスライドショーを合体させた、映像に特化した魅せ方で商品紹介しています。(音が出ますので、ご注意ください。)
Image may be NSFW.
Clik here to view.
ハート型モチーフデザインがたくさん散りばめられており、後半出てくるリアルな地球の形ももちろん、。
Image may be NSFW.
Clik here to view.
高級シングルページ作成、WordPressプレミアムテンプレート素材24個まとめ
プロジェクトに応じて、シングルページ完結型レイアウトを実現する、テンプレート素材の購入、利用もいかがでしょう。
Image may be NSFW.
Clik here to view.
サムネイル@ : Beatbox Academy
参照元リンク : Showcase of Creative Single Page Websites – Splashnology.com