Web事業部実績紹介
Web事業部実績紹介
2018.04.18
#143
それいけ!フロントエンド

グルーピングでカッコいいサイトを探す「黒xfitレイアウト」

まろ

こんにちは。フロントエンドエンジニアのまろCです。
今回は黒くて、画面いっぱいのfitレイアウトのサイトでオシャンティスを感じたサイトを紹介したいと思います。

Ankoku Toshi Jutsu

スクリーンショット 2018-02-07 12.22.41

https://www.ankoku-toshi-jutsu.com/

アディダスのプロダクトサイトです。
動画の世界観をうまく気持ちのいいアニメーションとマッチさせていてかっこいいです!

セクション遷移時のアニメーションもかっこいいですね。
ソースを見ると、コンテンツは後で読み込んでるみたいです。spa的設計でしょうか。

Active Theory

スクリーンショット 2018-02-07 12.36.19

https://activetheory.net/home

クリエイティブエージェンシーのサイトです。
背景がすごいですね。もうびっくりです。
こちらもソースを見ると、コンテンツは後で読み込んでるみたいです。

スクリーンショット 2018-02-07 12.37.58

下層ページに行って上にスクロールしてみてください。戻るエフェクトに驚かされます!

Bullying and Behavior

スクリーンショット 2018-02-07 12.40.50

https://bullyingandbehavior.com/

セクション遷移時の動画がじんわり消えていくアニメーション、そして文字の出方がかっこいいです。
オシャンティスです。
言葉に詰まります。

Okkapi – creativity and modern website development

スクリーンショット 2018-02-09 10.26.27

http://okkapi.agency/en

TOPのオシャンティス選手権で個人的に優勝なサイトです。
なんですか、どうやってるか全然わかりません!

まとめ

いかがでしたか。黒で与えられるクールで締まった感じと、迫力をあたえるレイアウトになるfitレイアウトの組み合わせはオシャンティスですね。
また、このようなグルーピングでサイトを探すと、デザインや実装の意図をより感じられるのではないでしょうか。
今後もそういう探し方でいろんなサイトを見つけていきたいですね。
それでは。