【課題】Webサイトトレース「SHE WORKS」

目次

1．制作情報
2．目的
3．Webサイトトレース画像
4．スタイルガイド
5．PCとスマホのレイアウト分析
6．トレースしたサイトの考察（ターゲット、目的）
7．学んだこと

1．制作情報

制作時間 │トレース（8時間）、スタイルガイド（8時間）、レイアウト分析（3時間）
使用ツール │ Photoshop

2．目的

・Webデザインにおける基本的なビジュアルデザインの感覚を掴む
・Webデザインをする際に一定のルールに則ってデザインするということを学ぶ
・Webデザイン特有のデバイスによるレイアウトの変化を学ぶ

3．Webサイトトレース画像

4．スタイルガイド

5．PCとスマホのレイアウト分析

6．トレースしたサイトの考察

・ターゲット
　SHE WORKSのターゲットは、IT人材不足に悩む企業の採用人事の方だと考えました。

　理由として、企業の採用人事の方は会社が求める人材を見つけるために採用サイトなどにコストをかけて掲載して求人を募っていることがほとんどだと思います。しかし、サイトを見た人からの自由応募になるため、求めている人材が来るとは限らず、加えて書類選考～面接などさらに工数も発生する他、内定を出しても辞退をされてしまう場合もあります。

　その中で、SHE WORKSはマルチスキルを持った人材が多くいるだけではなく、求めている人材を提案してくれるので、マッチする可能性も高く、採用コストの低下にもなると思いターゲットであると考えました。

・サイトの目的
　SHE WORKSについて知ってもらい、お問い合わせをしていただくことだと考えました。

　IT人材不足に悩む企業の採用人事の方がターゲットだと考えたので、SHE WORKSの魅力について知ってもらえたらお問い合わせをいただく可能性が増えると思います。

また、すぐに契約が締結しなくても認知していただいたら、後に契約をしてくださる可能性もあるので、一度お問い合わせをいただくことが狙いなのではと感じました。

7．学んだこと

Webサイトのコードからどのようなデザインになっているのか考えることを学びました。ただトレースをするのではなく、色、タイポグラフィー、余白がどうなっているのかなどトレース時にはあまり意識してこなかった視点でデザインに落とし込む練習ができました。見出しやタイトルなどは同じフォント、カラー、余白サイズになっていたので、規則性をつくることで要素の反復にもなり、まとまりを感じるデザインを実装できるのだと思いました。