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

グルーピングでカッコいいサイトを探す「黒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レイアウトの組み合わせはオシャンティスですね。
また、このようなグルーピングでサイトを探すと、デザインや実装の意図をより感じられるのではないでしょうか。
今後もそういう探し方でいろんなサイトを見つけていきたいですね。
それでは。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

フロントエンドエンジニアのまろCです。 コンセプト設計中心でものづくりしています。

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL