パーソナルカラー診断サイトを制作しました
2023年09月29日
![パーソナルカラー診断サイトを制作しました](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fjuc7671amwz6%2F24Vr7NCX9RK7sbvEm5hi8J%2F12077640ca5697fc76ed78ba4f8e0a6b%2FPC_______.png&w=3840&q=75)
パーソナルカラー診断サイト
この度株式会社桂裳苑 森本呉服店様よりご依頼いただき、パーソナルカラーの診断サイトを制作しました。
女性向けのお洒落なデザイン
20代の女性をターゲットに、「お洒落」で「抜け感」のある可愛らしいデザインを目指しました。
![パーソナルカラー診断サイト スマホメインビジュアル](https://images.ctfassets.net/juc7671amwz6/5KAfQtZRvim1KXuamuCIMl/c2ff4d11f72f5af91cd63107601e7f48/PC____.png)
メインビジュアルは落ち着いたカラートーンのグラデーションを使用。
文字が動くアニメーションも印象的で、サイトに訪れた際に少しワクワクするようなデザインとなっています。
![パーソナルカラー診断サイト デザイントーン](https://images.ctfassets.net/juc7671amwz6/6NcSukNgE7Rv8d7LunAyVP/2ebdb0d195ae4282f03e9287fdb3926b/PC__________.png)
診断結果までストレスなく辿り着けるUI/UX設計
サイトへアクセスした人が、パーソナルカラーや診断方法について理解し、診断結果を確認するまでの一連の流れをストレスなく行えるUI/UXデザインを目指しました。
診断ページでの質問項目では、質問に答えていく毎にページが軽快なアニメーションで遷移したり、質問番号を残りの質問数が分かるように記載することで、質問結果まで離脱なく辿り着けるように工夫しています。
![パーソナルカラー診断サイト イメージ](https://images.ctfassets.net/juc7671amwz6/4cfwKLZZOfdNjNJxDDhCfL/ab61f496836c7567bc4afdbc2a6e1e2c/PC_______.png)