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