デザイン解剖#03

Webデザイン勉強のため、サイトの解剖をしています！

今回は株式会社トリドールさんの採用サイトです。

「かっこいい！」「かわいい！」「素敵！」「新しい！」など、そう感じた理由を紐解くために、自分なりにWebサイトを分析します。

ーーーーーー

トリドール正社員採用サイト | 株式会社トリドール

テーマカラー：#E5E7ED灰色
差し色：#FBE035黄色 #E62112赤
（#0F81CF青 #51D6F9水色 #FB9AA5ピンク）
フォント：游ゴシック,Raleway,Bilbo

灰色をベースに、カラフルな色使いでワクワクするようなデザインになっている。様々な色を使っていてもごちゃごちゃした印象にならないのは、
・トーンが揃っている
・目立たせたい場所には黄色と赤、と決まったルールで配置している
からか。

・画像、背景を長方形ではなく角をつくることで単調になっていない
・ENTRYボタンに影のように斜線パターンが敷かれており、立体感がある
＝押せるボタンだと認識させる
・目立たせたい部分（文字や画像）は下地を敷いていたり、太字になっていたりするが、スライドのための矢印や目次は細字で最低限のあしらいになっている。
メリハリのついたデザインの秘訣かも！

・文字サイズ：42pxと16pxと、ジャンプ率が高い。
　どこに注目して欲しいかがひと目で分かる。
・背景に粒状フィルターをかけることで柔らかい印象になっている
・背景に矢印があることで「進む」というイメージを直感的に受け取れる
・マージン190pxと広めにとっていることで余裕のある印象に。

・こちらのフォントも大小のジャンプ率が高い
・背景にあしらいとして大きく社名を入れている
・見出し部に薄くドットを敷いており全体のトーンが堅くなりすぎていない
・右側に筆記体の英文をピンクで斜めにおくことで、スクロール中の流し見でも目に止まらせる効果がある
・伝えたいことをアイコン化（水色）していることで、堅い内容もすんなりと受け入れられる

あしらいの宝庫！
・四方が凹んだ枠で囲うことで招待状のような特別感のある印象に
・枠の線を繋げないことで抜け感のある印象に
・万年筆や矢印のモチーフで高級感を出している
・スタートボタンを白くすることで背景の黄色とのコントラストがハッキリ
・また、ドロップシャドウで斜線パターンを敷くことでボタンの押したくなる立体感を演出
・背景に資料を持った人物を不透明度低く重ねていることで信頼感を演出
・背景に散りばめられた英字がお洒落さを演出
・タイトル部分に薄く集中線を置くことでそこに目が行きやすくなっている

フッター部分
・長方形の背景をずらして配置することでリズミカルな印象に
・新卒は黄色、キャリアは赤、という棲み分けがされている
・黄色と赤、白、青のコントラストがきいており、整っている印象に

SP版MV

思わず可愛い！と言ってしまうようなデザイン。
・縦長画面いっぱいに画像が配置され、雑誌の表紙のように見える
・PC版とは違い、背景の角と写真の角が合っていることで、ごちゃっとした印象にならない
・エントリーボタンとハンバーガーメニューが同じ高さの正方形で右上に配置され、整った印象

所感

いつか挑戦してみたいと思っている、地の背景とコンテンツ部分の背景をずらして見せるデザインで、とても勉強になった！
長方形が続くとどうしても単調になりがち、、、角でリズムを演出したい。
背景に粒状フィルターをかけていたり、よく見ないと気付かないような細かいあしらいが見た目以上に散りばめられていたりと、分解しがいのあるサイトでした。

ーーーーーー

こういう見方もあるかも！などあればコメントいただけると踊って喜びます。また、掲載に問題がある場合もコメントいただければ取り下げます。

連休中、いろんなアウトプットをしまくるぞ〜〜！