【デザインを見る】株式会社 伊藤農園 |採用サイト
mimi | webデザイン勉強中(https://note.com/webdesign_mi0026)さんの投稿を見て、私もwebデザインを見る勉強をしてみる
本日私が見るサイトはこちら株式会社 伊藤農園 |採用サイト
( https://recruit.ito-noen.co.jp/ )

これをmimiさんの見ていたものになぞらえて私も見ていこうと思う。
1 最初の印象→どこからその印象を受けたのか
2 いいなと思ったポイント→レイアウト、余白、配色、文字組み(フォントサイズ、行間、文字間)、あしらい
3 レイアウト・余白を分析する→機能面(配置や視線誘導)
4 フォントの分析→サイズ、行間、文字間
5 色味の分析→フォント、全体
6 あしらい→印象を左右したり、視線誘導を行う、ブランドの刷り込み
7 アニメーション→動きの向き、スピード
1
爽やかで優しげ
→みかんやみかんのような水玉のあしらいと質感のある背景、手書きのような線。
リクルートサイトということで自然で楽しそうな雰囲気が伝わり、楽しく働いてそうな雰囲気が伝わってくる。
2
・みかんとみかんのようなオレンジの水玉のあしらいがしずる感があって爽やかさを出している。
・ファーストビューの写真の置き方。

・オリジナルキャラクターでゆるさも出している。

・トップのファーストビューの下の風景をスクロールで大きく見せることで、ここで育てているんだというふうにイメージできる。
3
・ファーストビューの写真が斜めに配置されていて、目線が自然に誘導されている。
・トップのファーストビューの下の風景をスクロールで大きく見せ、そこで作る思いなどをメッセージにのせて、目を引かせつつここで育てているんだというふうにイメージできる。
4
・行間をゆったりと持たせていることで、読みやすさとゆったりとしたイメージが感じられる。
font-size:min(15px, calc(15rem / 16));
line-height:2.15;
letter-spacing:.04em;
5
・みかんやみかんを彷彿とさせるオレンジや黄色の丸いものが爽やかさを出している。
・各タイトルに使われている細い線も、手書きで書かれていて親しみやすさを感じる。
・マスコットキャラクターがリラックスしていて可愛い。
・みかんの木の影のようなあしらいもあり、雰囲気が出ている。

6
・一番下に来た時の「page top」のアニメーションが一文字ずつ跳ね上がるように出ていて、チャーミングさ・可愛らしさがある。


