![見出し画像](https://assets.st-note.com/production/uploads/images/67156099/rectangle_large_type_2_6551f5b1332a80aaa30551cc0557eb04.png?width=1200)
サイト分析(2021.11.29-12.05)
![画像1](https://assets.st-note.com/production/uploads/images/67143845/picture_pc_810d7dadac42fcde3f8ca8b2ad301b74.png?width=1200)
アパレルのデザインを行なっている会社のサイト。
FVは何の会社か分かるようにコピーとファッションモデルが撮影している動画を設置している。動画ではより服にフォーカスを当てるためにモデルの顔を見切れさせて上半身に目が行くようにしている。
![画像2](https://assets.st-note.com/production/uploads/images/67144480/picture_pc_41366727e7ed6275b691c6d55c362d6c.png?width=1200)
FV直下はロゴの「R」と手がけたアパレルの写真を大きく配置することでブランドの認知を高めようとしている。
![画像3](https://assets.st-note.com/production/uploads/images/67145069/picture_pc_1f7bc2a3528a30446ac212ddfb3659bd.png?width=1200)
サービスの説明の中に「角度やスタイルは関係ない」あることから制限や縛りがない会社であることが分かるが、デザインでもそうした姿勢が表現されている。
![画像5](https://assets.st-note.com/production/uploads/images/67151485/picture_pc_6f020de933c917da86bcee4bdfaf6810.png?width=1200)
画像の形が正方形など整った形ではなく歪な形になっている。
![画像4](https://assets.st-note.com/production/uploads/images/67151312/picture_pc_8e8e6110f14a5502da6746dca2d248b8.png?width=1200)
フォントがセリフ体とサンセリフ体が混ざっている。
![画像6](https://assets.st-note.com/production/uploads/images/67151623/picture_pc_46c31eaa28d8bb3969e0bacbb764282d.png?width=1200)
文章が途中から改行されている。
などあえて綺麗に整えないデザインにすることで枠に囚われない社風を表現している。
![画像7](https://assets.st-note.com/production/uploads/images/67151906/picture_pc_20e3cfc33567a3633d46c2614f2122a8.png?width=1200)
![画像8](https://assets.st-note.com/production/uploads/images/67153432/picture_pc_0c19b871d4557071ae25e1edaffba22c.png?width=1200)
このサイトはチャットを使ってブランド体験を向上するサービスのサイトさが、FVのイラストはそうした体験によって生じる感情などを表現している。
![画像9](https://assets.st-note.com/production/uploads/images/67153687/picture_pc_41c4a3c782daa3682dbcf0ae3ccb0e1f.png?width=1200)
またサービス紹介では、様々なサービスがあるが全てチャットのサービスのためビジュアルが同じになってしまう。そのため2カラムにしてスクロールするごとに左側が変化するようにすることで一つ一つのサービスが目立つようにしている。
サービスの内容的に似通ったビジュアルばかりになってしまうところをイラストを用いたりUIを工夫することで回避しているのが上手いなあと感じた。
![画像10](https://assets.st-note.com/production/uploads/images/67154517/picture_pc_3ddc71c574c5a12ffc8d48b598bbb163.png?width=1200)
最初に「こんなお悩みはありませんか」と自分事化させるコンテンツを奥子とでその後のサービスの訴求がより納得感を持って読めるなと感じた。
![画像11](https://assets.st-note.com/production/uploads/images/67154548/picture_pc_3091ffd1d71bfcad4e9b54e4acf4b52c.png?width=1200)
また各サービスの詳細ページの下部にそのサービスに関連した導入事例が設置されている。普通はトップページや導入事例のページだけにあるが、サービスの詳細ページに置くのはそのサービスに興味がある人が見ているためより回遊率が上がりそうでいいなと思った。
気になったサイト
![画像12](https://assets.st-note.com/production/uploads/images/67154709/picture_pc_3a1298942089d390783e06e9c2ce9fb9.png?width=1200)
ボタンをセンターに置いて追従させるのはコンテンツごとにボタンをおかなくていいし、見た目が新しくて斬新だなと思った。
![画像13](https://assets.st-note.com/production/uploads/images/67154941/picture_pc_f062930c4036042bdcf32f73a7d62bf9.png?width=1200)
FVをただ写真を一枚置くのではなく3分割して切り替わるようにするだけで見栄えが立つなと思った。グリッドに沿ったデザインにすることで中身の写真が雑多でもごちゃごちゃして見えないなと感じた。
気になった記事
「FiraCode」というプログラマー向けに開発された等幅フォントがある事を初めて知った。確かに「i」「l」など形が似ている文字があるためそういうのが識別しやすい文字だと作業効率が上がったりミスが減りそうだなと思った。
この記事が気に入ったらサポートをしてみませんか?