コンセプト

• 親しみやすさ
• シンプル
• 遊び心

白をベースに、淡いピンクとオレンジをアクセントにすることで、やさしくなめらかな印象に。 余白をしっかり取り、情報がすっきりと伝わるデザインを目指しました。

実装・工夫

• clamp() を使用して文字サイズを可変化。端末ごとに文字サイズが急にかわらないよ画面幅に応じて滑らかに変化するようにしました。
• セクションの境界に波形を使用し優しさや動きを感じられるようにしました。
• ボタンやカードにホバーの動きをつけ、どこをクリックできるか直感的に分かるようにしました。
• PC・タブレット・スマホで見やすくなるようレイアウト・文字サイズ・余白を細かく調整しました。

振り返り

初めてFigmaから自分で設計し、レスポンシブまで実装した作品です。 装備の位置やスマートフォンでの余白調整に苦戦しましたが、面面幅ごとに原因を切り分けて修正する経験ができました。 今後は、作品の背景や創作意図をより短く分かりやすく伝えられる構成へ改善したいと考えています。