サイト分析(2021.06.21-06.25)
ヘッダー、ボタン、ブログのタイトルには線が引いてあり、クリックできることを伝えている。
トップのFVは女性4人と男性の写真だが女性を多く載せることで女性が活躍している、女性でも働きやすい会社というイメージをつけている。
![画像6](https://assets.st-note.com/production/uploads/images/55573084/picture_pc_1f42a9a497d8fd7ed69446ffa32b7055.png?width=1200)
代表メッセージは見出しと本文が横並びになっている。読みやすい文章の長さが1行あたり30文字程度のため、本文のエリアを狭くすることで読みやすくしている。
![画像2](https://assets.st-note.com/production/uploads/images/55572156/picture_pc_55a87073c2f5a66beafeb7e3a15076e2.png?width=1200)
数字をつけることでリズムをつけて内容を入りやすくしている。色を使ったり、丸を突然使うことで目を引くようにしている。
![画像1](https://assets.st-note.com/production/uploads/images/55571974/picture_pc_e9419882bf100f15723c1eb81187993a.png?width=1200)
「女性活躍推進宣言」のバナーは画像が2枚くっついて1つになっているが、そのままだと1枚の画像に見えないため右側にボタンを設置している。
![画像3](https://assets.st-note.com/production/uploads/images/55572566/picture_pc_70d1edd3208c1840ac743b406c137b41.png?width=1200)
![画像4](https://assets.st-note.com/production/uploads/images/55572578/picture_pc_2f49531c0054ba1d82690871ca50ae98.png?width=1200)
FV直下にテキストが来る場合と画像が来る場合があるため、間にページの説明文を入れることでどちらの場合でも見栄えが担保されるようにしている。
![画像5](https://assets.st-note.com/production/uploads/images/55572681/picture_pc_65575ed3af4ab2fd61a8484d183b2935.png?width=1200)
FVの画像の上にパンくずが設置されており、黒い座布団を敷くことで目立たせている。このサイトはページ数が多いためパンくずをすぐ目に止まるようにすることで、常に何のページを見ているか分かるようにしている。
基本、日本語フォントはヒラギノ角ゴシックだが、代表メッセージや企業理念など読ませたいところ、強調したいところはヒラギノ明朝を使っている。
欧文フォントはDINを使用。DINは横幅が狭いため、同じ面積の中でも大きく表示できる。また視認性が高い。限られた面積の中で伝えたい情報を強調させつつ、余白も作れるフォント。
![画像7](https://assets.st-note.com/production/uploads/images/55573512/picture_pc_fc607b58eed4a5b47ac8d42c3c05718f.png?width=1200)
求める人物像はページの中でも特に学生に向けたコンテンツのため他のページに比べて装飾的なデザインにしている。
(アルファベットを乗算で載せたり、背景を曇りガラスのようにぼかすなど)
気になったサイト
![画像8](https://assets.st-note.com/production/uploads/images/55576278/picture_pc_714fdc7e405634f318a1355ee66992e5.png?width=1200)
スクロールした時に画像がビュンビュン動いたり、マウスを載せた時のグニョンとした動きが思わず、色々動かしたくなってしまうサイト。
![画像9](https://assets.st-note.com/production/uploads/images/55576397/picture_pc_8084defb8066d8ec78376c6e31900b2a.png?width=1200)
商品画像のホバーした時のアルファベットの動きが呼吸の動きみたいでサイトにあっているなと思った。また、特に装飾などはしてないがこういう動きを取り入れるだけで目を引くなと思った。
この記事が気に入ったらサポートをしてみませんか?