今月のハイクオリティなシングルページまとめ 【2016年2月】

今月も、海外のシングルページのまとめサイト One Page Love で、
2016年2月のMost Lovedに選ばれたハイクオリティなサイトを紹介します。

横スクロールが美しい – Condé Nast – End Of Year 2015

Condé Nast – End Of Year 20

Condé Nastというアメリカの多国籍雑誌出版企業の、
2015年に話題になった記事を集めたスペシャルサイト。

Condé Nast – End Of Year 20

横方向にスクロールする横長のサイトで、大きく配置された動画やダイナミックなタイポグラフィが印象的。
やはり英語のタイポグラフィは、オシャレでかっこいいですね。

アニメーションにも精鋭さがあって、雰囲気抜群のサイトに仕上がっています。

Condé Nast – End Of Year 20

効果的なパララックスが印象的 – Valio Con 2016

Valio Con 2016

今年アメリカ・カルフォルニア州サンディエゴで開催される、
Valio Con 2016というデザイナー向けカンファレンスの特設サイトが、パララックスを上手く使っていてとてもイイ感じです。

Valio Con 2016

カンファレンスの特設サイトなので、ページはスピーカーやスケジュールの紹介がメインなのですが、
カード型のレイアウトデザインとスクロールでのパララックス効果が、
ものすごく気持ちのいい操作感を感じられます。

Valio Con 2016

スピーカーの写真と落ち着いたカラーも見やすく、文章に引きこまれます。

Valio Con 2016

レスポンシブ対応もきっちりされていて、画面が狭いデバイスでもスクロールの気持ちよさは損なわれていません。

あまり難しいことをしなくても、ちゃんと効果を出せるパララックスの好例ですね。

ぶっ飛び系ゲームコンテンツ – Leo’s Red Carpet Rampage

Leo’s Red Carpet Rampage

レオナルド・ディカプリオのオスカー受賞のパロディコンテンツ。日本でもオスカー受賞はニュースになっていましたね。
その名も「レオのレッドカーペットで大暴れ」。タイトルからして面白いですねー。

Leo’s Red Carpet Rampage

アーケードゲームを再現した、ゲームコンテンツです。
キー入力でレオナルド・ディカプリオがレッドカーペットの上を駆け抜けます。

ドット絵、サウンド、エフェクト、ものすごくちゃんと作られてます。

Leo’s Red Carpet Rampage

キーボードの G キーと H キーの連打でレオが走ります。 SPACE キーでジャンプすることもできます。

Leo’s Red Carpet Rampage

シーンの間に、ちょいちょいミニゲームがあります。こちらはクマと闘っているレオ。
しかし、とんでもない顔してますね。

Leo’s Red Carpet Rampage

オープニング画面でやさぐれたレオをクリックするとFROSTBITE MODEに変わります…!!
なんというか、もうヤバさしかない。

ぼくはこうゆう破天荒コンテンツが大好きです。

ポップなアニメーションが秀逸 – How much is your spare time worth?

How much is your spare time worth?

仕事や睡眠時間以外の、暇な時間の価値を算出してくれるサイトです。

かわいいイラストが目を引きますが、それに加えて演出効果でよりかわいいです。
かわいいもの好きのぼくとしては、見ているだけで幸せなサイトですね!

How much is your spare time worth?

このサイトのポイントは、アニメーションが秀逸なところです。
各オブジェクトの動きはもちろん、ボタンのホバー効果など、細かいところまでこだわった演出は一見の価値ありです。

How much is your spare time worth?

100$の贈り物のために行列でどのくらい待てますか?

質問の内容もユニークですよね。

How much is your spare time worth?

ぼくが実際に試した結果は、86$ でした。日本円に換算すると、1万円弱ですね。
あなたのプライベートタイムの価値はおいくら? ぜひ試してみてください!

WordPressで構築されている – Uber Brand Experience

Uber Brand Experience

スマホアプリを使ったタクシー配車サービスのUberのブランド紹介コンテンツです。

縦に長いパララックスのページで、タイポグラフィに目が行くようデザインされています。
サイト全体の雰囲気を統一させるアニメーションが、重要なポイントだと感じさせられます。

Uber Brand Experience

Uber Brand Experience

WordPressを使ってコンテンツ管理をしていて、
詳細ページを表示時はJavaScriptでコンテンツを取得して、モーダルに表示する実装になっています。

CMSであれば、コンテンツのデータとシングルページの構成をはっきり分けることができるので、
更新性を考慮したとても良い組み合わせですね。

Uber Brand Experience

最初は気づかなかったのですが、リロードするとサイトカラーが変わる仕様でした。
ちょっとした遊び心のあるサイトになっています。

まとめ

今月は、ぼく好みのサイトが多い印象でした。
全体的に、動画やパララックスといった表現手法が増えてきていますね。

また来月お楽しみに!

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.