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

制作情報

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

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

デザインカンプ

要件定義

情報設計

ペルソナ

ユーザーストーリー

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

スタイルガイド

制作のポイント

工夫した/頑張った点

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

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

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

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

学んだ点

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

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

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

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

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