Advertisement

onenicepage_top

 

海外デザインブログInstantShift.comで、見ているだけでもたのしくなる、仕掛けをふんだんに盛りこんだ、面白シングルページWebサイトをまとめたエントリー「55 Fresh Examples of creative Single Page Webiste Designs」が公開されていたので、今回はご紹介します。

 

CSS3アニメーションやHTML5カンバス機能、パララックスエフェクトなどさまざまな新技術を採用し、ビジュアル面を重視したオリジナルコンテンツの数々は、今後のデザイン制作の参考になるかもしれません。

 

 

 

詳細は以下から。

 

 

 

クリエイティブに遊ぶ、面白シングルページWebサイトまとめ

 

Kocha

オーストラリアを拠点に活動するデザイナーのポートフォリオで、配色のお手本になりそうな色使いに、フラットデザインが採用されています。

creative-single-page-design-11

 

 

 

Social Snack

南米3カ国を拠点に活動するデザイン事務所で、美しいイメージ写真と、多彩なアニメーションで、ユーザーの注目をコンテンツに集めます。

creative-single-page-design-09

 

 

 

FlatGuitars

プレゼンテーション形式で展開されるコンテンツは、さまざまなギターの名前、由来などを、カラフルにまとめています。

creative-single-page-design-28

 

 

 

Lobo Agencia

スクロールすることで、スライド式にコンテンツが移動するアニメーションを使ったポートフォリオサイト。

creative-single-page-design-48

 

 

 

Ali Pordeli Officail Website

スクロールすることで、ヘッダー部分が水平状にひろがっていく、パララックスエフェクトが採用されています。

creative-single-page-design-32

 

 

 

KitKat

チョコレート菓子をアニメーション付きで図解しており、見ているだけでもワクワクさせてくれます。

creative-single-page-design-02

 

 

 

Garland Jack’s Secret Six BBQ Sauce

BBQソースの秘密を、多彩なGIFアニメーションと共に実現し、ユニークな動きがユーザーの興味を惹きます。

creative-single-page-design-35

 

 

 

Marty: Hello. I’m @smarty

コンテンツの展開を十字キー操作でおこない、愛犬や特技などをひとつずつ表示する、遊びの効いたサイト。

creative-single-page-design-04

 

 

 

RISD

配色の参考になりそうな、キュート系カラーパレットが印象的で、トレンドのフラットデザインを取り入れたサイト。

creative-single-page-design-05

 

 

 

Anuncios no Facebook

Facebookインターフェースをフラットデザイン化し、スライドパネル式にコンテンツが展開します。

creative-single-page-design-08

 

 

 

Adam Woodhouse

スクロールしながら一本の導線をたどって、コンテンツが展開していくという、仕掛けを使ったポートフォリオサイト。

creative-single-page-design-13

 

 

 

Digitized 2013

ギリシャで行われるカンファレンス用公式ページで、概要やタイムスケジュールなどを、アニメーションを使って見事に反映しています。

creative-single-page-design-15

 

 

 

Kick My Habits

知らないうちに行っている習慣を、ひとつずつ見直しながら、お金の節約をシュミレーションしてくれます。

creative-single-page-design-17

 

 

 

Sam Markiewicz

着せ替え人形をモデルに、着ている洋服や背景を変えることで、うまく自己紹介しています。

creative-single-page-design-19

 

 

 

Arun Shourie

個人デザイナー用ポートフォリオで、画面真ん中から割れるようなコンテンツ展開など、アニメーションとグラフィックにこだわり抜いたサイト。

creative-single-page-design-20

 

 

 

Mr.Visual

淡いパステルカラーをベースに、かわいいイラストを使って、コンテンツごとに自己紹介をしています。

creative-single-page-design-23

 

 

 

What is A/B Testing?

「A/Bテストとは何なのか」、分かりやすいイラストで解説している、プレゼンテーション形式のコンテンツ。

creative-single-page-design-25

 

 

 

Exnovo

ウェブサイトを下にスクロールしていくと、スルスルとコンテンツが中心に集まってくる仕掛けが素敵。

creative-single-page-design-26

 

 

 

De Vriend (Friend)

マウスをスクロールすることで、音声付きでストーリーが展開され、最後には、、。音量ボリュームにご注意ください。

creative-single-page-design-33

 

 

 

Cody Sielawa

スクロールすることでコンテンツが切り替わる、パララックスエフェクトを適用したポートフォリオサイトで、スラブセリフフォントを採用していますね。

creative-single-page-design-40

 

 

 

FUD Bottega Sicula Catania

イタリアにあるレストランで、人気メニューの極厚バーガーを使った、迫力のあるデザインに仕上がっています。

creative-single-page-design-47

 

 

参照元リンク : 55 Fresh Examples of Creative Single Page Website Designs – InstantShift.com