UI Designer
デザインシステムや UI デザインを中心に、使う人が迷わず操作できるデザインを大切にしながら制作に携わってきました。
Figma
3年
Adobe Illustrator
2年
Design System
2年
UI Design
2年
Component Design
2年
Prototype
1.5年
すべての人にわかりやすい設計を。
ユーザーへ
迷わず
次の操作を選べる
制作メンバーへ
必要な情報を
正確に次の工程へ渡す
普段使うものだからこそ、見やすく、迷わず、できるだけストレスなく使えることを大切にしています。ユーザーだけでなく、制作や運用に関わる人まで含めて
「どうすれば使いやすく、扱いやすくなるか」を考えられることを強みとしています。
Contents
01
About Me
02
History
03
Case Studies
01
Product Design
2025-2026
02
Design System
2025-2026
03
Flyer & Icon Design
2025-2026
04
Banner Design
2025-2026
01
About Me
こんな人です！
⾃⼰紹介
デザインシステムやコンポーネント設計、UIデザイン、アイコン制作を中心に、使う人が迷わず操作できる画面づくりに携わってきました。
画面や部品の統一感を保ちながら、運用・操作しやすい形に整える ことを大切にしています。
強み
私の強みは、コンポーネントの構造やプロパティの持たせ方まで考え、運用しやすい形へ整理できることです。
また、線幅や余白、サイズ感などの細かな違いやばらつきに注意し、統一感のある表現 を大切にしています。
今後の意欲
これからはUIを制作するだけでなく、“なぜ使いにくいのか” を整理し、改善方法まで提案できるデザイナーを目指しています。
情報設計やUX、実装についても理解を深めていきたいです。
02
History
2026
自走できる UI デザイナーへ
打ち合わせへの同席を含め、本格的に実案件へ携わるようになりました。
制作の背景や要望を聞きながら、コンポーネント・バリアブル・プロパティの知識を実制作に取り入れ、デザインシステムの構築や情報設計、UIデザインを主体的に進められるようになりました。
2025
実案件に携わり、画面構造と UX を理解する
実案件のサポートを始め、制作物の完成度を高めていきました。
制作物がユーザーの目に触れ、実際に操作・利用されるまでの流れを想像しながら、画面構造やUXへの理解を深めていきました。
2024
デザインとは？を学ぶ
まずはデザインの基礎を学び、少しずつ実務に触れていきました。
Figmaの基本操作を学び、少しずつ UI デザインに触れていきました。
まずはツールの使い方を身につけながら、画面がどのような要素で構成されているのかを学びました。
03
Case Studies
これまで携わってきた案件について、制作背景や担当したことを工夫したポイントとあわせて紹介します。
完成した画面だけでなく、どのように考えて改善したのかもまとめています。
01
Product Design
Figma
Mood Board
Conceptual Design
Wireframe
UI Design
Prototype
Conceptual Design
Mood Board
2026/04
はじめに、デザインの方向性を明確にするため「 デジタルの無機質さと、人がもつ感情や温かさ・エネルギーをうまく共存させること」を意識しながら ムードボードの制作に取り組みました。
バックグラウンドのベースには濃い紺を使用し、デジタル機器らしい落ち着きと視認性を持たせました。
一方で、ピンクやオレンジなどの色をアクセントに使用し、人がもつ温かさやエネルギーを表現しています。
UI Design
Wireframe
2026/05
つぎに、ムードボードをもとにワイヤーフレームを制作しました。
ムードボードの世界観を取り入れながら、画面構成、操作の流れ をワイヤーフレームに落とし込み、具体的なUIデザインへつなげることができました。
UI Design
Prototype
2026/07
ワイヤーフレームで構築した画面構成、操作の流れ、画面遷移をデザインに落とし込みました。
画面内の情報量が多い中、何をする画面なのかが明確に伝わる画面を目指して制作しました。
iPhone・Androidの両方に対応する共通UIのアプリ画面と、Web版のPC向け画面の制作に携わりました。
UI Design
Prototype
2025/07
スマホアプリのUIデザインに携わりました。
老若男女が利用するサービスであることを踏まえて、見た目の新しさだけでなく、文字の読みやすさ・ボタンの押しやすさ・情報の見つけやすさを重視 して制作しました。
公式サイトのトーン＆マナーにならい、ブランドカラーや写真の扱い、見出し・余白のバランスを整えることで、Webサイトとアプリで一貫した印象になるように調整しました。
また、会員にとってメリットのある情報が埋もれないよう、重要な案内や特典情報が自然に目に入るレイアウトを意識しました。
UI Design
Wireframe
2025/07
タッチパネル型券売機をタブレットで管理するための 管理画面のワイヤーフレーム制作に携わりました。
売上確認や商品管理、メニュー設定、稼働状況の確認など、店舗運営者が日常的に使用する機能を整理し、一覧・詳細・編集・確認といった基本的な操作導線を設計しました。
タブレットでの利用を前提に、必要な情報にすぐたどり着けること、操作内容が分かりやすいこと、確認ミスが起きにくいこと を重視しました。
特に、確認頻度の高い情報は見つけやすくし、編集や保存などの操作では次に何をすればよいかが分かる画面構成を意識しました。
ワイヤーフレームを通して、開発前に必要な機能や画面構成を整理し、完成イメージを共有しやすい状態にしました。
02
Design System
Figma
Design System
Color System
Component
Component Design
2026/03
複数の画面で同じルールを共有することで、端末や画面が変わっても統一感を保ち、制作時に迷いにくいデザインシステムを目指しました。
増え続けるコンポーネントを、「スロット」 で管理しやすい構造へ
制作を進めるなかで、表示する内容に合わせてコンポーネントを分けていた（都度新しいデザインを追加していた）ため、管理するコンポーネントとプロパティが増え、複雑になっていました。
そこで、コンポーネントの「 共通している構造 と 内容に応じて変わる部分 」を整理し、差し替えの自由度が必要な箇所にスロットを使用したデザインを試作しました。
状態や選択肢が決まっているものはプロパティとして残し、内容の種類が増えやすい箇所だけをスロットにすることで、構造を簡略化しました。
その結果、管理が必要なコンポーネントを12個から6個に削減 することができ、プロパティの増加も抑えられ、コンポーネントの選択・修正・追加・運用しやすいデザインシステムへ改善することができました。
Color Palette
2026/03
カラーパレットに一定数需要があり、素材として販売されていることを知り、実案件で使われていたカラーパレットにも影響を受け、自主制作したものです。
色を並べるだけでなく、カラーは Figma のスタイルとして登録しているため、別のファイルでもそのまま再利用できます。
毎回同じものを作り直さなくてよいため、制作を効率化できる点にも気づき、学びになりました。
当時はまだコンポーネントやプロパティへの理解が浅い時期でしたが、この制作を通して「再利用しやすい構造を作る」という考え方が身につきました。
後にネストを使ったコンポーネント設計やデザインシステムを整理する際にも、この経験が土台になっています。
制作当時はコンポーネントやプロパティへの理解がまだ浅い段階でしたが、実際に手を動かしながら構造を整理することで、Figmaの設計に対する理解を深めるきっかけになりました。この経験は、後のコンポーネント設計やネスト構造を理解する際にもつながっています。
03
Flyer & Icon Design
Figma
Adobe Illustrator
Flyer Design
2025/12
タッチパネル型券売機のイベントブースで配布するフライヤー制作に携わりました。
来場者が短時間で商品の特徴を理解できるように、券売機本体のビジュアル、導入メリット、対応決済、仕様情報を1枚に収まるよう整理しました。
表面では、売上アップやレイアウト自由度、月額費用などの訴求を大きく見せ、まず興味を持ってもらえる構成にしました。
裏面では、スリム設計、キャッシュレス対応、現金決済対応、対応ブランド、製品仕様など、商談時に確認されやすい情報を整理して掲載しました。
イベントブースで手に取られるフライヤーのため、遠目や一瞬でも内容が伝わるように、訴求ポイントの強弱を明確にしました。
特に、「最新型券売機」「月額13,000円」「キャッシュレス・現金対応」など、導入検討者が反応しやすい情報が先に目に入るように設計 しました。
また、飲食店や店舗運営者が対象になるため、見た目の派手さだけでなく、導入後のイメージが湧きやすいように、メニュー表示例や設置イメージ、対応決済ブランドを具体的に見せることを意識しました。
商品の特徴や導入メリットを視覚的に整理することで、イベントブースでの声かけや商談につながりやすい資料作成を意識しました。
価格、機能、対応決済、サイズ感など、検討時に必要な情報をまとめたことで、来場者がサービス内容を理解しやすくなり、営業担当が説明しやすいフライヤーにしました。
商品の特徴や導入メリットを視覚的に整理することで、イベントブースでの声かけや商談につながりやすい資料作成を意識しました。
価格、機能、対応決済、サイズ感など、検討時に必要な情報をまとめたことで、来場者がサービス内容を理解しやすくなり、営業担当が説明しやすいフライヤーにしました。
Icon Design
2026/01
飲食店のタブレット型券売機のメニュー画面に表示するアイコン制作に携わりました。
もともと画面内には、低解像度の画像をそのまま使用したアイコンと、それらを参考にベクター化されたアイコンが混在していました。
既存のベクターアイコンにも、線がアウトライン化されていないものや パーツ同士が結合されていないものなどがあり、データの作り方にもばらつきがある状態でした。
そこで、既存アイコン全体を確認し、線幅やサイズ感、余白、角丸などを揃えながらすべてのデータを整えました。
また、ベクター化されていなかった6種類のアイコンについては、既存デザインをもとに一から描き起こしました。
情報量を抑えたシンプルな表現を意識しながら、他のアイコンと統一感が出るように調整しました。
04
Banner Design
Figma
Adobe Illustrator
Banner Design
2026/02
PR TIMES掲載用の記事キービジュアル制作に携わりました。
ポケモンカードの査定アプリのリリースに向けて、サービス内容がひと目で伝わるように、カード・スマホ画面・訴求コピーを組み合わせたビジュアルを作成しました。
PR TIMES上では多くの記事が並ぶため、サムネイルサイズでも内容が伝わることを意識しました。
特に、ポケモンカードの査定アプリであることが瞬時に分かるように、カード要素とアプリ画面を目立たせる構成 にしました。
また、情報量が多くなりすぎないよう、訴求ポイント・アプリ画面・カード画像の優先順位を整理し、記事を開く前の段階でも興味を持ってもらえる見え方を意識しました。
リリース記事の入口となるキービジュアルを制作することで、サービスの内容や魅力が伝わりやすい見せ方に貢献しました。
アプリの特徴が視覚的に伝わる構成にすることで、PR TIMES上での視認性を高め、記事への興味喚起につながるビジュアル作成を行いました。
