【#勝手にサイト分析 vol.17】株式会社LARGO様のコーポレートサイトを分析させていただきました。 | Curious inc.

はじめに

おはようございます！
株式会社Curious代表の吉沢でございます。

本日も【世の中の"クリエイティブ"を勝手に分析！】をテーマに、記事を書かせていただきます。

今週もお疲れ様でした！！
週の終わりに最後ちょっとしたインプットの一つにしてもらえたら嬉しいです！

あくまで"勝手に"分析をさせていただいており個人的見解になります。
ご理解のほど、宜しくお願いいたします！

基本情報まとめ

企業名
株式会社LARGO

URL
https://largo.studio/

デザイン分析

今回のサイトは、アニメーションをゴリゴリに駆使して、”魅せる”に特化しているサイトです。

アニメーションを使ったデザインに挑戦したい方は、ぜひ参考になる部分多いと思うので、見てみてください！

ページローディングのアニメーションでいきなり魅せてくる。

グリッドを用いたロゴ表現をすることでグリッドに沿ったデザインをしていることもわかるし、デザイン会社ということもビジュアルで伝わる。

フォントのジャンプ率をかなり大きく設定することで、メリハリが付き、伝えたいことがきちんと伝わるサイトになっている。

テキストのみのコンテンツと、考えられた余白を使った設計をすることで、シンプルさを演出しながらも、きちんと情報を目立たせられている。

メニューを左固定、ロゴを左下に配置するという珍しいデザイン。

そのデザインによって、縦の領域が増えコンテンツをより多く見せることができている。

かつ、メニューを開閉する必要がないので、すぐに探しているコンテンツにいける設計になっている。

右上にメインコピーを置くことで、重心を整えバランスの良いFVになっている。

また今回のFVのような配置のサイトには、FVのみのTOPページにしてスクロールしない設計のデザインが多い。

そのため、そういった勘違いを防ぐためにカーソルが下矢印になるようにデザインされていて、細部への気遣いを感じる。

英語フォントはシンプルなゴシックながら、角丸になっているので、優しく、親しみやすい印象を与えている。

また、文字間を狭くすることで、密集させそこまでフォントを太くしなくても太く見え目立つ、そして文字間からも親しみやすい印象を感じることができる。

背景をグレーに、写真を暗めにそしてコントラストを強くすることで、タイトルのテキストカラーを白にしても視認性が落ちないデザインになっている。

リンク箇所にカーソルを持っていくと、FVで使用されていたものと同様の、右矢印が出てくる。

リンクということが簡単に認識でき体験として心地よい。

トップページでの事例の見せ方がとにかく、洗練されている。

余白、大きさ、アニメーション全てにおいてワクワクしながら見られる設計になっている。

下層ページ「About」の、LARGO Style箇所のデザインが新しい体験を生んでいる。

このコンテンツはスライダー設計なのだが、「01 know」「02 deepen」「03 spread」の箇所に注目してほしい。

アニメーションでスライダーの進捗具合を見せている。これが単純におしゃれだし、体験として気持ちがいい。

下層ページ「About」のメンバー紹介では、背景は若干違うものの全員グレーで統一されていて、むしろ若干違うことで味が出ている。

全体のデザインとしても、ばっちり統一されている。

下層ページ「Workflow」では、各工程の見せ方がシンプルで分かりやすい。

あえて写真等を用いず、数字を大きくすることで、メリハリをつけ、単純に工程が分かりやすいデザインになっている。

写真を用いないと、べたっとしたメリハリのないイメージになりがちだが、それをさせない精密なデザイン設計がされている。

最後に

何回も言っていますが、やっぱりこのテイストめちゃ好きです！！！
本当にかっこいい！おしゃれ！
余白、フォント、写真の見せ方、アニメーション、、、全て参考になります！

世の中にある全てのWebサイトがイケてる世界を！
では、また来週！！