![見出し画像](https://assets.st-note.com/production/uploads/images/65190243/rectangle_large_type_2_923607869b1313c6511bd0927412edc6.png?width=800)
サイト分析(2021.11.01-11.07)
↓FVから2セクション目までのスクロールした際の動き
![画像1](https://assets.st-note.com/production/uploads/images/64861798/picture_pc_eb5b83464161ee42abdfbef6d2b5f5d0.png?width=800)
![画像2](https://assets.st-note.com/production/uploads/images/64861820/picture_pc_657a3da71baece0b90ea28c2c9287d88.png?width=800)
![画像3](https://assets.st-note.com/production/uploads/images/64861833/picture_pc_6574b5a91c6ede808bb73d97e60ee32d.png?width=800)
デザイン会社のサイトの構成としてFV→会社説明→実績が多いが、この会社はビジュアルの作成を専門とした制作会社のためFV→実績→会社説明の順番にしている。
より強みであるビジュアルを見てもらうためにスクロールした時に背景の色を反転させる、実績のサムネを画面両端から表示させる、サムネを数秒ごとに切り替えて多くのビジュアルを見せるようにしている。
![画像5](https://assets.st-note.com/production/uploads/images/64861873/picture_pc_f660bf336be2018285bfa83295a603e8.png?width=800)
![画像6](https://assets.st-note.com/production/uploads/images/64862030/picture_pc_6eaff8128dd6d8a8dcc7013120aeb666.png?width=800)
![画像7](https://assets.st-note.com/production/uploads/images/64862051/picture_pc_dc412d47499bdb9e4039641dd965734a.png?width=800)
サイト全体の色はモノトーンとロゴのオレンジを使用。装飾的な部分などはなく、実績を立てるためにシンプルにまとめられている。
背景は大枠のエリアごとで色が切り替わるものの、細かく区切ってはいないため、要素を画面から見切れさせることでメリハリをつけて区切っている。
また、文字も強調したい言葉とそうでないもので色の濃さを変えることでメリハリをつけながら特に伝えたい部分を目立たせている。
![画像8](https://assets.st-note.com/production/uploads/images/64862920/picture_pc_8672032cefc0a05c1522c33ac2da94ff.png?width=800)
見出しのフォントはRecoletaを使用。「a」や「e」が斜めになっており、ロゴの形と統一感を感じる。線の太さにあまりメリハリがなく、線先のくるんとした形などが柔らかい印象を与えている。
![画像9](https://assets.st-note.com/production/uploads/images/64864634/picture_pc_b9999d973a31e892d642b19ba4a74288.png?width=800)
![画像9](https://assets.st-note.com/production/uploads/images/64865522/picture_pc_1dc20e217af6ae67ab48c69613352f35.png?width=800)
![画像10](https://assets.st-note.com/production/uploads/images/64865579/picture_pc_25537563a63d8950f9142eb6cb788a63.png?width=800)
実績をメインに押し出すと実力が高い、敷居が高いような印象になりそうだが写真を上下にずらして配置する、実績のスライダーに「Made with❤️」と記載、サムネをホバーした際に台形の画角になる、人の写真を切り抜くなど遊びを入れることで親しみやすさを出している。
気になったサイト
![画像11](https://assets.st-note.com/production/uploads/images/64866876/picture_pc_101c0798df0f4b588644b6618f7b845a.png?width=800)
![画像12](https://assets.st-note.com/production/uploads/images/64867024/picture_pc_3cc76b7d7d27d7c58be4211a290e89d3.png?width=800)
欧文フォントはangie-sans が使用されているが、GODIVAのフォントに似ているなと感じた。GODIVAのフォントOptimaはアストンマーチン、グッチ、ゴディバなどもベースとして使用されているためエレガント、高級感を狙って選定したのではないか。angie-sansの方が「T」の横線など先が跳ねており、おしゃれな印象を感じる。
![画像13](https://assets.st-note.com/production/uploads/images/64868304/picture_pc_45e6445e85485444e88b35597d12d14d.png?width=800)
スクロールすると左側の文字が動いて下にある立方体が光ったり、真ん中の画像が切り替わる動きがこういう表現もあるのだなと思った。
気になった記事
今までノーコードツールはあったが、一つのソフトでデザインからサイト公開まで完結できる物はなかったので、フリーランスの人などが重宝しそうだなと思った。
この記事が気に入ったらサポートをしてみませんか?