[課題]TSUTSUMU 採用サイト LP制作

OVERVIEW

SHElikes MULTI CREATOR COURSEの制作課題として採用サイトのLP制作をしました。ベビー用品事業などを取り扱う企業の採用サイトのワイヤーフレーム作成からデザインカンプ制作、コーディングまで行いました。

制作期間・・・5週間(デザイン2.5週間)(コーディング2.5週間)使用ツール・・・(デザインカンプ)Photoshop(コーディング)HTML、CSS

●制作物

 実際のサイトはこちらから 


(デザインカンプ)

●課題要件

●情報設計で工夫したところ

 ①ペルソナの設定

②ユーザーストーリーとそれを元にコンテンツを再考する

デザインで工夫したところ

①ビジュアルデザイン
・「世界をやさしさでつつむ」という企業理念であるため、角丸四角や丸のシェイプを使           い、柔らかく優しい雰囲気にしました。


・ボタンはグラデーションにし、柔らかい雰囲気の中でも目立つようにしました。


②ホバー時のデザイン


③レスポンシブ対応
・ヘッダーにハンバーガーメニューを設置し、タップしてナビゲーションメニューが出る        ようにしました。


④配色

TSUTSUMUの企業概要からの包むような温かいイメージが連想されたため、オレンジとをピンクをコーポレートカラー(以後CC)と設定しました。そして、コーポレートサ  イトでは、CCをベースカラーやメインカラーに使われていると仮定し、採用サイトで     は白をベースカラーにし、柔らかい雰囲気の中にも、求職者に向けて企業のクリーンな   イメージをアピールできるようにしました。


⑤フォント

サイト全体の柔らかい温かい雰囲気の中でも、必要な情報が目立つように、和文・英文 共にはっきりとしたフォントを選びました。

●学んだこと

初めてワイヤーフレーム作成からデザインカンプ制作、実装まで行いました。コーディ     ングする際、その前に行うマークアップ設計図で整理することが非常に大切であると        学びました。コーディングを始めてから、マークアップ設計図の不備に気づくことも   多かったため、今後はデザインカンプ作成時から、おおよそのマークアップ設計図をイメージできるように意識してまいります。