【Day 3】画面デザインを作ろう

Last updated at 2023-12-02Posted at 2023-12-02

はじめに

2023年アドベントカレンダー3日目です。

昨日はユーザーストーリーを作成しました
今回からは際にストーリーを消費していきます。

デザインのストーリーについてとりかかろうと思います。

デザインの作成にはFigmaを使ってみようと思います。

私はFigmaをきちんと学んだことはないので、私のやり方は敢えて載せません
本格的にFigmaを学びたい場合はUdemyや、技術ブログ、Youtubeなどで学ぶことをお勧めします

ただし、デザインを作りながら、コンポーネントの設計をなんとなくしておくと実装時に楽ですし、コンポーネントを意識したデザインになっていると実装時に楽になります。

要素・グループを再利用可能な「コンポーネント」として定義して、プロジェクト全体で呼び出せるようにする機能のことです。
これにより一貫性が維持され、変更容易性が向上します。

例えばSubmit Buttonコンポーネントを作成し、それをコピーして作っSubmit Buttonインスタンスがあるとします。

プロジェクトで使うボタンをコンポーネントからのインスタンス作成にしておくと、もしもSubmitボタンのデザインが変更されたとき、コンポーネントを変更するだけで、全てのプロジェクト内のインスタンスに変更が反映されます。

また、プロパティを設定してプロパティごとのデザインを設定することもできます。

私のおすすめとしては、使う色や余白は、
使う予定のCSSのフレームワークに合わせておくことです。
今回はTailwindCSSのスタイルに合わせてデザインしました。

左）type=submit
右）type=cancel

まとめて紹介してしまいましたが、これでデザイン系の3ストーリーが消費できました

明日からは開発環境を構築していきます！