はじめに
2023年アドベントカレンダー3日目です。
昨日はユーザーストーリーを作成しました
今回からは際にストーリーを消費していきます。
デザインのストーリーについてとりかかろうと思います。
デザインの作成にはFigmaを使ってみようと思います。
Figmaとは
Figmaの使い方
私はFigmaをきちんと学んだことはないので、私のやり方は敢えて載せません
本格的にFigmaを学びたい場合はUdemyや、技術ブログ、Youtubeなどで学ぶことをお勧めします
ただし、デザインを作りながら、コンポーネントの設計をなんとなくしておくと実装時に楽ですし、コンポーネントを意識したデザインになっていると実装時に楽になります。
コンポーネントとは
要素・グループを再利用可能な「コンポーネント」として定義して、プロジェクト全体で呼び出せるようにする機能のことです。
これにより一貫性が維持され、変更容易性が向上します。
例えばSubmit Buttonコンポーネントを作成し、それをコピーして作っSubmit Buttonインスタンスがあるとします。
プロジェクトで使うボタンをコンポーネントからのインスタンス作成にしておくと、もしもSubmitボタンのデザインが変更されたとき、コンポーネントを変更するだけで、全てのプロジェクト内のインスタンスに変更が反映されます。
また、プロパティを設定してプロパティごとのデザインを設定することもできます。
私のおすすめとしては、使う色や余白は、
使う予定のCSSのフレームワークに合わせておくことです。
今回はTailwindCSSのスタイルに合わせてデザインしました。
完成品
リンク
コンポーネント
Button
左）type=submit
右）type=cancel
BlogCard
BlogForm
TOPページ
ブログ詳細画面
ブログ作成画面
ブログ編集画面
まとめて紹介してしまいましたが、これでデザイン系の3ストーリーが消費できました
明日からは開発環境を構築していきます！