Overview
iOSアプリのUIを参考に、Figmaで模写・設計したUI作品です。画面構造や導線を意識し、実際のアプリを想定したレイアウトと画面遷移を重視して制作しました。
Project Title
iOS App UI – Layout Copy
Live Site
Figma Preview（Figmaで制作したUI/プロトタイプを確認できます）
Source Code（GitHub）
–
Tech Stack
- Figma（Auto Layout/コンポーネント/バリアント/制約/マスク/プロトタイピング）
- Figmotion/Figmotion系プラグイン（キーフレームアニメーション）
- iOS UI Kit/Unsplashプラグイン
My Role & Process
iOSアプリのUIを題材に、見本を参考にしながら画面構造や導線を分析し、FigmaでのUI設計から画面遷移プロトタイプ制作までを一貫して担当しました。Auto Layoutやコンポーネント管理を用いて可変レイアウトを整え、アニメーションも調整しながら約3週間で完成させています。
Highlights
可変性を意識したUIレイアウト設計
Auto Layoutと制約を活用し、テキスト量や要素数が変わっても、見た目が崩れにくいUIを設計しました。実際の端末サイズや画面の状態変化を想定しながら、柔軟に対応できる構造を意識しています。
コンポーネント・バリアントを活用した設計効率化
ボタンやカード、状態違いのUIをコンポーネント化し、バリアントで管理することで、画面全体の一貫性と修正しやすさを高めました。
プロトタイピングによる操作感の検証
Smart Animate、Overlay、After Delay、Keyframeを用途に応じて使い分け、過剰演出にならない自然な画面遷移を設計しました。
Insights
制作を通じて確立した設計のポイント：
- Auto Layoutと制約を活用することで、要素の増減や端末サイズの違いがあっても、UIが崩れにくい、可変性の高いレイアウト設計が可能になることを理解した
- コンポーネントとバリアントを用いてボタンやカードを部品化することで、デザインの統一と修正作業の効率化に大きくつながることがわかった
- Smart AnimateやOverlayなどのプロトタイプ機能を適切に使うことで、実際のアプリに近い操作感を検証でき、ユーザー視点でのUI調整がしやすくなることを理解した
- iOS UI KitやUnsplashなどの外部リソースを活用することで、制作時間を短縮しつつ実践的なレイアウト設計に集中できることがわかった