UI Designer
デザインシステムや UI デザインを中心に、使う人が迷わず操作できるデザインを大切にしながら制作に携わってきました。
Figma
3年
Design System
1年
2年
UI Design
3年
Component Design
Prototype
Contents
01
About Me
02
Case Studies
01
Conceptual Design
UI Design
Design System
02
Design System
03
チラシ・アイコン・ワイヤーフレーム
04
バナーデザイン
01
About Me
こんな人です！
⾃⼰紹介
デザインシステムやコンポーネント設計、UIデザイン、アイコン制作を中心に、使う人が迷わず操作できる画面づくりに携わってきました。
画面や部品の統一感を保ちながら、運用・操作しやすい形に整えることを大切にしています。
強み
私の強みは、コンポーネントの構造やプロパティの持たせ方まで考え、運用しやすい形へ整理できることです。
また、線幅や余白、サイズ感などの細かな違いやばらつきに注意し、統一感のある表現 を大切にしています。
今後の意欲
これからはUIを制作するだけでなく、“なぜ使いにくいのか” を整理し、改善方法まで提案できるデザイナーを目指しています。
02
Case Studies
これまで携わってきた案件について、制作背景や担当したこと、工夫したポイントとあわせて紹介します。
01
Conceptual Design
UI Design
Design System
Figma
Mood Board
Wireframe
Conceptual Design
UI Design
Design System
Component
Prototype
Mood Board
はじめに、デザインの方向性を明確にするため “デジタルの無機質さ” と、人がもつ ”感情や温かさ・エネルギー” をうまく共存させること を意識しながら ムードボードの制作に取り組みました。
一方で、ピンクやオレンジなどの色をアクセントに使用し、音楽がもつ温かさやエネルギーを表現しています。
Wireframe / UI Design
つぎに、ムードボードをもとにワイヤーフレームを制作しました。
iPhone・Androidの両方に対応する共通UIのアプリ画面と、Web版のPC向け画面の制作にも携わりました。
ムードボードの世界観を取り入れながら、画面構成、操作の流れ をワイヤーフレームに落とし込み、具体的なUIデザインへつなげることができました。
iPhone・Androidの両方に対応する共通UIのアプリ画面と、Web版のPC向け画面の制作にも携わりました。
Design System
複数の画面で同じルールを共有することで、端末や画面が変わっても統一感を保ち、制作時に迷いにくいデザインシステムを目指しました。
増え続けるコンポーネントを、スロットで管理しやすい構造へ
制作を進めるなかで、表示する内容に合わせてコンポーネントを分けていたため、管理するコンポーネントとプロパティが増え、選択や修正が複雑になっていました。
そこで、コンポーネントの “共通している構造” と “内容に応じて変わる部分” を整理し、差し替えの自由度が必要な箇所にスロットを使用したデザインを試作しました。
状態や選択肢が決まっているものはプロパティとして残し、内容の種類が増えやすい箇所だけをスロットにすることで、構造を簡略化しました。
その結果、管理が必要なコンポーネントを 12個から 6個に削減 することができ、プロパティの増加も抑えられ、コンポーネントの選択・修正・追加・運用しやすいデザインシステムへ改善することができました。