Overview -案件概要

業務委託先企業のコーポレートサイトを新規制作。

Target -ターゲット

Purpose -目的

会社の信頼性を高め、案件獲得の説得力を持たせること。
また、デザイン力や技術力の証明。

Info Planning -情報設計

画面がロードされるとユーザーにスクロールのアクションを促し、スクロールすると画面の奥に入り込んでいくような演出にすることで、Lilyの世界観に引き込ませることを狙いました。KVはメッセージが強く印象に残るように、敢えて表示する情報を絞っています。
不要なコンテンツやページは削ぎ落としシンプルさを追求しており、プライバシーポリシーを除き1ページで完結するように設計しました。実績はモーダル実装により、ページを行き来することなくすぐに閲覧できるため、ユーザーにストレスを感じさせないつくりとなっています。

Design -デザイン

jsアニメーションを駆使した技術力も魅せたかったため、デザインはモノクロ×シンプルをテーマに制作しました。ただし無機質で単調になることは避け、セクションごとに背景色が変わるようにしたり、名刺風のメンバー紹介で遊び心を加えたり、実績は左右いっぱいにモックを置いたりなどメリハリをつける工夫をしています。
またフォントにゴシック体を使うことで、誠実なイメージを維持しながら接しやすさも感じさせる、ニュートラルなデザインを意識しました。

Member -制作メンバー

全制作工程 : 1名

Role -担当範囲

企画/プロジェクト推進
要件定義
デザイン
コーディング

Role, Period -担当範囲,期間

企画 / ワイヤーフレーム : 2日間
デザイン : 2日間
コーディング : 10日間

Tool -使用ツール

Figma / Visual Studio Code

Related Links -関連リンク

コンセプト設計・デザイン方針まとめ（制作前作成）