![見出し画像](https://assets.st-note.com/production/uploads/images/67634602/rectangle_large_type_2_c65c8134a7fa2f6836cc5ddbeaf2b93f.png?width=800)
サイト分析(2021.12.06-12.12)
![画像2](https://assets.st-note.com/production/uploads/images/67633091/picture_pc_8264fd112caa03871a1072d0a6bda15a.png?width=800)
![画像3](https://assets.st-note.com/production/uploads/images/67633139/picture_pc_38a4b4b8913cc998e9c522888365a90c.png?width=800)
![画像4](https://assets.st-note.com/production/uploads/images/67633220/picture_pc_b50efac75ccff909ca3c046ec1af973f.png?width=800)
画面右側にはコピーライトが配置されている。普通のサイトはMVで装飾的な意味合いで配置したりするが、このサイトではMVだけでなくスクロールすると追従するのでめずらしいと思った。
MVにはフルスクリーンで制作実績の動画が設置。その下のコンテンツも実績の画像を多く載せている。
またメニューは一番左が「works」、その次が「services」になっており、「about us」は3番目に配置されている。
→実績の豊富さや実力の高さを訴求することで高いレベルの作品を求めている顧客に興味を持ってもらいたい。またこんな映像も作れるんだと期待感を抱かせ、求職者の応募を増やしたい。
![画像5](https://assets.st-note.com/production/uploads/images/67633563/picture_pc_de2cb111e6d201d9bd2bf5a4705a428d.png?width=800)
フッターには資料ダウンロードの導線が設置されている。いきなりお問い合わせする人は少ないためこういったハードルを下げたコンテンツを設置するのはいいなと思った。
またお問合せへの導線が「contact」よりも社名が強調されている。これもいきなり問い合わせないのと、問い合わせする場合はサイトに訪れてすぐフォームに直行することがほとんどのため社名を覚えてもらうことの方を重視したのではないか。
![画像6](https://assets.st-note.com/production/uploads/images/67634301/picture_pc_d3ed0d9d20effbf95ad3bb14fab0f2e9.png?width=800)
![画像7](https://assets.st-note.com/production/uploads/images/67634312/picture_pc_2f75b6797c96ef02ef6063f4f8899270.png?width=800)
![画像8](https://assets.st-note.com/production/uploads/images/67634327/picture_pc_8f7014f2a8e21cfa0d098ea2c8f7a981.png?width=800)
制作実績はメンバーから検索できたり、メンバーページには各々のSNSアカウントが掲載されている。顔写真が掲載されているサイトはよくあるがここまでメンバーのことを調べられるようにしているものはあまりないように感じた。親近感を抱かせたり個人に仕事の依頼が来たりするかもしれないが、逆に他の会社に引き抜かれたりする可能性もあるのでは?と思った。
![画像11](https://assets.st-note.com/production/uploads/images/67635090/picture_pc_ada353ae336e437bf4784bb7353979bb.png?width=800)
ジャーナルでは記事を書いた人が掲載されているが記事の下部にその人が書いた他の記事が出るわけでもなく、書いた人の紹介もFVのみにあるだけだった。せっかくメンバーページのコンテンツも用意しているのだからジャーナルもその人のことが知れるような導線を入れればいいのにとおもった。
![画像1](https://assets.st-note.com/production/uploads/images/67633023/picture_pc_8095eb591e1150c206a29fcb080cc6c3.png?width=800)
お問いあわせフォームの必須項目には「Required」と記載されている。サイト全体が日本語だけでなく英語の文章もセットで記載されているため外国人に向けた表記であると思われる。ただ日本人からすると「Required」が何なのかすぐに分かりにくいため、※印をつけたり色を赤くしたらいいと思った。
このサイトはモノトーンを基調にしつつアクセントカラーにグラデーションを用いている。色を特定の色にしなかったのは案件に合わせて様々な作品を制作しているため、どんなものでも作ることができるということを表現しているのではないか。
![画像9](https://assets.st-note.com/production/uploads/images/67634674/picture_pc_4257d90835b01649402aa08831c5acf6.png?width=800)
サイトは実績を引き立たせるためにシンプルな構成になっているが視差や、画像が表示される時のズームするような動き、ページ遷移の時の幕が上がるような動きなど、パッと切り替わるのではなくぬるっとした?動きを取り入れることでリッチな印象が感じられる。
欧文フォントはDIN2014。DINは1元々工業製品などに使われた書体のためなぜこのサイトでDINを選定したのかいまいち分からなかった。
ただ、DINは道路標識やマンホールに使用されるなど視認性が高いことが特徴のため様々な実績やグラデーションに埋もれないように情報が伝わりやすいDINを選んだのではないか。
気になったサイト
![画像11](https://assets.st-note.com/production/uploads/images/67635620/picture_pc_aced3c914f83252ce7aafb37281de3e1.png?width=800)
![画像12](https://assets.st-note.com/production/uploads/images/67635632/picture_pc_3e1e968d362411069fcaaa2a74757f24.png?width=800)
商品の詳細ページではスクロールすると商品の画像が上に固定でつくのがいちいち上に戻らなくていいため使いやすいなと感じた。
![画像13](https://assets.st-note.com/production/uploads/images/67635707/picture_pc_4b2536bd4dcd44aaf20df4ffd10c0483.png?width=800)
![画像14](https://assets.st-note.com/production/uploads/images/67635741/picture_pc_deee84f690b5b9c6872436ec63072a61.png?width=800)
ページによって縦スクロール、横スクロールなど画面の動かし方が異なるがマウスストーカーの矢印の部分をか変えるだけで直感的に理解できるし、真ん中に丸があることでどのページでも統一感のあるマウスストーカーになっている。
気になった記事
自分も前に似たような記事を書いたが、プロのデザイナーさんの見ているポイントが知れたり、その手法を利用する際の注意点も書かれていて勉強になった。
この記事が気に入ったらサポートをしてみませんか?