UIをブラッシュアップする方法：詳細ページの完成UIを紹介

最終的に固めた”詳細ページ”のデザインを共有します

動画内だと完全アドリブで製作していたのですが、話しながらかつ時間の問題で詰めきれなかった部分をシェアします。だいぶ変更点があります。これが正解だ、ではなく、”こういう考え方もできるのか”、”アイデアを出す考え方”、”細部のアイデアの出し方”などを学んで、要件を満たすUIのパターン出しが自分でできるように参考にしてみてください。

■ 目次

1. 概要系の情報 - アイコンを使う
2. アクションUI - 定番パターンに
3. 認証者の情報 - 意味でブロック
4. 表/テーブルUI

‍

UIデータ

完成系のUIデータはこちら

https://www.figma.com/design/LVkZw68g5yIabsYGmDEvf0/%F0%9F%9B%AB%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%83%85%E5%A0%B1%E8%A8%AD%E8%A8%88-I%E5%87%BA%E5%BC%B5%E7%94%B3%E8%AB%8B?node-id=397-2113&t=DUBGf49LeW1oCbJd-1

‍

※コピペしてお手元で確認してください。編集権限は付与できないです
‍

最終的に固めた”詳細ページ”のデザインを共有します

動画内だと完全アドリブで製作していたのですが、話しながらかつ時間の問題で詰めきれなかった部分をシェアします。だいぶ変更点があります。これが正解だ、ではなく、”こういう考え方もできるのか”、”アイデアを出す考え方”、”細部のアイデアの出し方”などを学んで、要件を満たすUIのパターン出しが自分でできるように参考にしてみてください。

‍

■ 目次

1. 概要系の情報 - アイコンを使う
2. アクションUI - 定番パターンに
3. 認証者の情報 - 意味でブロック
4. 表/テーブルUI

‍