【LPトレース】人材マッチングサービス「SHE WORKS」 | 課題

制作時間：トレース3時間、スタイルガイド作成2時間

使用ツール：Photoshop

課題の目的

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

制作物

・スタイルガイド

・LPトレース

・PC/SPのレイアウト分析

サイトの「ターゲット・目的」の分析

・ターゲット⋯人材不足に課題を感じている企業、専門性の高い即戦力人材を求めている企業

・目的⋯上記のような企業にSHE WORKSのサービスを利用することで課題が解決できることを訴求し、お問い合わせや資料ダウンロードに繋げ、それを通じてサービスを利用してもらう企業を増やすこと

・上記を踏まえて考えたサイト来訪時のユーザーストーリー

工夫したポイント

・スタイルガイド作成時は、RGBA方式で記載されている色について「どのカラーコードの不透明度を下げたものか」まで明記し、実装時の参考になるよう配慮しました。

・スタイルガイドとレイアウト分析では、デザインの意図や効果を可能な限り言語化し、視覚的な違いの背景にある理由まで考察しました。

・トレース制作では、ホバー時のオーバーレイ効果まで再現し、インタラクションを含めた再現を目指しました。

課題を通して学んだこと

・Webサイトにおける余白設計、文字サイズ設定、タイトルと本文のジャンプ率など、視覚的階層の作り方を体感的に習得できた

・配色、情報設計、コンテンツグルーピングなど、バナーデザインと共通する基本原則があること 

・デバイス幅に応じたレスポンシブ対応では、単なるサイズ調整ではなく、ユーザビリティを考慮した情報の再構成が行われていること 

・PC、SPそれぞれの特性を活かした最適なレイアウト設計の考え方

講師からのコメント

・トレース
ホンモノそっくりのトレースです😀
「SHE人材による実際の制作物」セクションでは、マウスホバー時の状態まで再現されてますね👏👏 

・ スタイルガイド
たくさんの要素を抽出してキレイに並べていただきました👏
SHADOWの追加、各余白の用途（SPACING）など、詳細な情報が追加されていて素晴らしいです🎊

・PC/SPレイアウト分析
こちらも引き出し線の線端や段落位置が揃えられていて見やすいです。
囲み＆引き出し線の配色も見本ページに合っていてキレイですね✨️