【課題LPデザイン制作・実装】株式会社TSUTSUMU リクルートサイト

制作情報

【所要時間】約5週間（情報設計・ワイヤーフレーム5日/デザイン10日/コーディング2週間/サーバーアップ2日）

【使用ツール】Photoshop / VS Code ( HTML / CSS / Java Squript ）

【サイトURL】https://ay123s.flier.jp

制作物

・LP

・SP

・サイト（コード実装・サーバーアップ）

デザインカンプ

要件定義

情報設計

ペルソナ

ユーザーストーリー

HPを見た方が企業に興味を示し、最後まで見てもらえるよう情報設計にこだわりました。どのような導線を作ることで、お客様のユーザーの心を動かすことができるかを大切に、デザインに落とし込みました。

スタイルガイド

制作のポイント

工夫した/頑張った点

・インタビュー動画だけの中から、要件定義をし、情報設計を緻密に行いました。

どんな想いを持った方に届けたいのか、どんなアクションをとって欲しいのかを考えながら制作をしていきました。

・デザインを作成の段階で余白を細かくに測りながら正確性のあるデザインカンプを作成をしました。

・キーワード（コンセプト）の印象に近づけるため、写真はcamera RAWフィルターを通して色味の統一をしています。

・コードを書く際に、まずは大枠を捉えるよう紙に書き出し頭の中を整理するなどの工夫で、次第に理解して書けるようになっていきました。

・まっさらな状態からコードを書いたことや、決められた期間内に制作することを意識して逆算し、タイムマネジメントをしながらの制作に全力を尽くしました。

その一方で、初めて素書きでのコーディングだったこと、期限に確実に間に合わせることを加味して少し優しめのデザインになった点は次回に活かすべき反省点であると感じています。

学んだ点

・デザインカンプを制作する際、各項目を背景色で仕切っているイメージがあったのですが、数々のサイトをリサーチしていると、文字の大きさで仕切りを作っていたり、アイコンを使って仕切る方法など様々な仕切り方を学びました。

・HPといっても、コーポレートサイトなのか、採用サイトなのかで目的が異なるため（今回は会社を知ってもらうコーポレートサイトに対し、応募を集め、採用に繋げるための採用サイト）、それによりトンマナも変わってくるということを学べました。

・HPはただ項目が並べてあるだけではなく、しっかり要件にそって、ユーザーの心が動くよう設計がされているということを学ぶことができました。

・デザインカンプと実際のコーディング後のサイトでは、余白のサイズ感が異なり、デザインカンプの余白を狭める必要があることに気がつきました。今回は情報設計〜サーバーアップまで自分で行いましたが、デザイナーとコーダーなど役割を分けて仕事をする時のために、数々のサイトをディベロッパーツールで確認することや、余白の感覚を身につけることを大切にしていきたいと思います。

・コードを書いても、少し指示が違うと全く違う動きをしたり、サーバーにアップした後に予想もしていなかった変化が起きたりと、小さな失敗の積み重ねが今後も生かせる学びとなりました。