Advertisement

uniquesingle_top

 

ひとつのページにすべての情報、コンテンツを集約したシングルページ完結型レイアウト、通称ペライチ。クライアントの考えやコンテンツアイデアを、圧倒的なWebスキルで実現する、Webデザイナーの腕の試しどころでもあります。ユーザーが何度もクリックし、目的の情報にたどり着けないなどの問題点を改善し、ユーサビリティの向上にもつながります。

 

 

海外デザインブログSplashnology.comで、クリエイティブな発想力を発揮した、シングルページ完結型Webデザイン35個をまとめたエントリー「Showcase of Creative Single Page Webistes」が公開されていたので、今回はご紹介します。

 

 

 

詳細は以下から。

 

 

 

 

想像力をかき立てる、ユニークでクリエイティブなペライチWebデザインまとめ

 

Jamahdys

スクロールするたびにさまざまな、動きをモデル本人に加えていく、斬新すぎるデザインコンセプトが素敵なWebサイト。

Otavamedia

 

 

 

James Bond 007 Cars Evolution

007シリーズの歴代ボンドカーを、パララックスエフェクトでイラスト付き解説する面白サイト。カラーリングとタイポグラフィーの組み合わせもナイス。

James_Bond_007_Cars_Evolution

 

 

 

The Production Kitchen

大きなカンバスに手書きでさまざまな情報をまとめ、キーボード操作、スワイプでコントロールする新感覚サイト。

Jacquico

 

 

 

Beatbox Academy

何度かご紹介し、登場している気もしますが、それくらいいつも驚かされるデザインには脱帽。音楽とWebデザインを見事にミックスした新しいカタチを提案しています。

Beatbox_Academy

 

 

 

D’Angelico Guitars

1932年から作られているギターの歴史を、スライド式に解説する、コンテンツ内容にマッチしたスクロールも魅力的。

DAngelico_Guitars

 

 

 

Metiers D’art

個性的なデザイン高級時計を販売しているWebサイトで、まず最初に表示される、筆記体とオーナメントデザインを活用した、レトロスタイルは参考まで。

Metiers_D_art_Florilege

 

 

 

84.Paris

迫力たっぷりなイメージ写真をヘッダーでスライドさせ、余白スペースをたっぷり使ったサイトデザイン。

84_Paris

 

 

 

Adidas Snowboarding

通常のパララックスエフェクトとは異なり、さらに奥行き立体感を演出した、ハイレベルなデザインセンスを感じるAdidasのサイト。

adidas_Snowboarding

 

 

 

Road Stories

目を惹く黄色をアクセントカラーに、サムネイルホバーなど滑らかなアニメーションが素敵なグリッドデザインを採用。

Road_Stories_by_Micheli

 

 

 

Lamdash DNA

日本が誇るパナソニック50年の歴史で完成した、電気シェーバーを詳しく解説したサイトで、パララックスエフェクトを多彩に利用したデザインが◎。

LAMDASH_DNA

 

 

 

Magic Leap

各コンテンツごとに、水平方向に切り替わることで、イメージ画像とテキストを変更しているサイト。配色は参考になりそうですよ。

Magic_Leap

 

 

 

My Life in 20 Years

facebookアカウントでログインすると、これから20年後先までに起こる出来事が予言されています。信じるか信じないかは、、。

My_Life_in_20_Years

 

 

 

The MAC Services Group

会社紹介、ポートフォリオ、お問い合わせなどコンテンツの切り替える際、スクロールで背景イメージも変更されます。

The_MAC_Services_Group

 

 

 

DGA

モノクロ写真に、細字フォントを組み合わせた、黒を基調としたダーク系Webサイトデザインで、エレガントな印象を与えてくれます。

DGA

 

 

 

Verdi

スクロールすることで、コンテンツが水平方向に切り替わる、不思議なフリック操作感を味わえるブラジルのサイト。

Verdi

 

 

 

You Waste A  Lot Of Time At Work

カラフルカラーをモチーフに、パララックスを中心としたアニメーションエフェクトは、見ているだけでワクワクします。

You_Waste_a_Lot_of_Time_at_Work

 

 

 

Zervice

左サイドに配置されているナビゲーションメニューをクリックすると、縦横無尽にアニメーション付きで移動する、ダイナミックな仕掛けとイラストが素敵なサイト。

Zervice

 

 

 

Skybox

淡いパステル系むらさき色をアクセントカラーに、クールなタイポグラフィーを組み合わせたデザインが印象的なWebサイト。

SkyBox(2)

 

 

 

Impress A Penguin

寂しがり屋のペンギンをテーマに、プロジェクトコンセプトを紙芝居風に伝える、ユニークなアイデアサイト。

Impress_a_Penguin

 

 

 

Nasa Prospect

子ども達の憧れの職業、宇宙飛行士についての今後やトレビアを、セクションごとにアニメーションで移動させる、見ているだけでも楽しいサイトのひとつ。

Prospect

 

 

 

FK-Agency

奥行き感をスムーズなアニメーションと、シャドウで再現したイラストは、インフォグラフィクスを意識したレイアウトにもばっちり合います。

FK_Agency

 

 

 

Handy Tests

工具の使い方などをクイズ形式で出題する面白コンセプトに、ブランドレイアウトを意識したデザインもオリジナル性たっぷり。

Handy_test

 

 

 

Lapka

日常生活のあらゆる行動をモニタリングするデバイス製品紹介ページで、原寸大サイズでiPhoneと商品をレイアウトした大胆デザイン。

Lapka

 

 

 

Eastpak

動画とスライドショーを合体させた、映像に特化した魅せ方で商品紹介しています。(音が出ますので、ご注意ください。)

Eastpak

 

 

 

Urbotip

ハート型モチーフデザインがたくさん散りばめられており、後半出てくるリアルな地球の形ももちろん、。

urbotip

 

 

 

高級シングルページ作成、WordPressプレミアムテンプレート素材24個まとめ

プロジェクトに応じて、シングルページ完結型レイアウトを実現する、テンプレート素材の購入、利用もいかがでしょう。

singlewptheme_top2

 

 

サムネイル@ : Beatbox Academy

参照元リンク : Showcase of Creative Single Page Websites – Splashnology.com