![見出し画像](https://assets.st-note.com/production/uploads/images/76638284/rectangle_large_type_2_5e1ebc214e02227761c9a917aeefbbc0.jpeg?width=1200)
HARUサイト分析
こんにちは、HARUです。昨日の1試合2ホーマー大谷くん、今日も2試合連続の3号ホームラン乗ってきましたねー。本当にメジャーであそこまでするのはすごいの一言。
今日はSHIFTBRAINさんが制作したティアフォーのコーポレートサイトの分析です。ちなみにトレースも行いました〜
![](https://assets.st-note.com/img/1650175558251-MtH6nRKFQ1.png?width=1200)
![](https://assets.st-note.com/img/1650181956576-D15kZyc57K.png?width=1200)
背景は青い境界線にぼかし入れた球形が常に動いているアニメーションを使用している。これは何か企業が行っているサービスのPilot.Auto、Web.Autoの2つのプラットフォームの内容に合わせたものだと考えられる(サービスについての知識がないからよくわからんけど)。
TOPビジュアルは企業のスローガンに背景のアニメーションという構成。
TOPビジュアルからスクロールするとすぐサービスの紹介動画に入り、なんのサービスをしている会社なのかが映像を通して想像しやすいようになっている(元々企業のサービスのことを知ってる人がサイトに来ると思うが)。
![](https://assets.st-note.com/img/1650177472058-XAK6K2YZMF.png?width=1200)
![](https://assets.st-note.com/img/1650183489840-wr7PoclN0A.png?width=1200)
構成は固めて全体的にガイドに沿うことは大きく変えてはいない。人間の見やすさ、味方の原理(本で読んだり基本WEBデザイナーさんは使うことがほとんど)
個人的にはZ?人間視線運動が関わっているのかなと思ったりもした。
題名、本文テキスト、数字内容、画像の順番の目線移りなのではないか。
![](https://assets.st-note.com/img/1650177809428-Z3WLgM9Mpx.png?width=1200)
![](https://assets.st-note.com/img/1650177783677-ZMHKyHKDp5.png?width=1200)
よく見る構成になっている。絵は画像ではなく、グラフィック映像になっており、テキストの意味の想像はしやすい(できれば動画、グラフィック映像にしたいとが予算、スケジュール管理が大変、、泣)。
ボタンはhoverすることで背景色が変化(横からスライドして変化の動き)
![](https://assets.st-note.com/img/1650177545864-07oU7tcYhR.png?width=1200)
構成は左上から右下の動きの目線(なんかカッコよく見える)。
![](https://assets.st-note.com/img/1650177583828-TkXRqHAT63.png?width=1200)
画像を一枚物にせず、2枚の画像を上手く配置することによって空間のバランス、画像が複数なので複数印象もしている。
画像配置もガイドに沿って配置しているため、綺麗に見える。
![](https://assets.st-note.com/img/1650177894261-sczooejBBK.png?width=1200)
![](https://assets.st-note.com/img/1650177954933-WCy73lzXOI.png?width=1200)
次のページにいくようになっている。自然と行きやすい。
![](https://assets.st-note.com/img/1650180971684-BV7QQk49DF.png?width=1200)
フォント 英語: futura-pt、日本語: noto-sans-cjk-jp
色彩は灰色ベース
気になったサイト
この記事が気に入ったらサポートをしてみませんか?