LoginSignup
2
0

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

Last updated at Posted at 2023-12-02

はじめに

スライド4.PNG


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

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

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

image.png

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

Figmaとは

Figmaの使い方

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

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

コンポーネントとは

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

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

image.png

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

SubmitButton.gif

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

image.png

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

完成品

リンク

コンポーネント

Button

image.png
左)type=submit
右)type=cancel

BlogCard

image.png

BlogForm

image.png

TOPページ

image.png

ブログ詳細画面

image.png

ブログ作成画面

image.png

ブログ編集画面

image.png

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

image.png

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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0