Profile

設計して、つくる人。

UIデザインを中心に、業務システムやWebサービスの画面設計、Web制作、AIを活用した制作プロセスの改善に取り組んでいます。

プロダクトデザイナーとして約5年、業務システムやWebサービスの体験設計・UIデザインに携わっています。

初期の要件整理段階から画面案を作成し、関係者と対話しながら仕様や体験を具体化していくことを得意としています。

現職ではデザインチームのリーダーとして、メンバーの育成やデザインレビュー、チーム内の勉強会など、チームづくりにも取り組んできました。

また、Figmaを用いたUI設計に加え、AIツールを活用した制作プロセスの改善を日々実践しています。

cotozuでは、UIデザイン・Web制作・AI活用を通して、まだ言葉になっていない価値を、伝わりやすく使いやすいかたちへ整えていくことを目指しています。

Career

Web制作の受託からキャリアをはじめ、いまはBtoB業務システムの受託開発会社で、UIデザイナー兼デザインチームリーダーとして、要件が固まる前の段階から関わっています。個人開発では、iOSアプリを設計からApp Storeでの公開まで一人で通しました。

  1. 2022.09 — 現在 UIデザイナー / デザインチームリーダーBtoB業務システムの受託開発会社(正社員)/ システム部。グループ会社向け業務システムの開発・受託開発上流工程からのUI設計、デザインシステムの構築、メンバーの育成・レビュー、AI活用の推進。業務システムと並行して受託案件のLP・サービスサイトも担当。
  2. 2021.12 — 2022.08 フリーランスWebサイト制作・デザイン制作要望・課題の整理から情報設計・デザイン・制作まで一貫して担当。
  3. 2018.09 — 2021.12 Web・グラフィック制作(業務委託)経営スクールの運営会社受講生対応・データ管理・資料作成と並行し、コーポレート/サービスサイトの制作、ワイヤーフレーム・UI設計を担当。
Design
UI Design Web Design Information Architecture Wireframe Prototyping Design System Brand Concept
Tools
Figma Photoshop Illustrator Cursor Claude Code Claude ChatGPT Notion Slack
実装について

手でコードを書くことはしません。設計したものを AI に書かせ、動きを確かめて直す。そこまでを自分の担当にしています。Works に出てくる「実装(AI活用)」は、すべてこの意味です。

そのうえで、実装の制約を前提に設計することと、エンジニアと仕様のレベルで会話することは自分の職能に含めています。コンポーネントの粒度、状態の持ち方、既存の実装への影響。設計の段階で見ておくべきことです。下のスキル評価で「テクニカルデザイン(実装と運用を前提に構造を設計し、橋渡しする力)」として測っているのが、この範囲です。

Interest
AI Creative Workflow Small Business Design Product Design Design Process Personal Development
Can & Will

これまでと、これから。

何を任せてもらえるか、これから何をつくりたいか。この2つを先に。

Can — できること

要件が固まる前から、画面で仕様を前に進める。

答えを先に埋めず、分からないところは残したまま、つくって・見せて・ずれを直す。デザインが要件定義そのものを進める役割を担ってきました。

食品工場:要件整理から試験運用まで / 貿易:参照UIなしで要件定義と並行

情報量の多いものを、探せる構造に整える。

量に圧倒させないための骨格をつくる。章立て、共通のカード、地図、共通レイアウトへの集約。「見せ方」の前に「構造」を決めます。

帳票7種・90画面超 / 全長14,000pxのLP

渡したあとまで、仕組みで支える。

一貫性はトークンで、運用はCMSで、育成は評価フレームワークで。属人的な頑張りに頼らず、続く状態を設計します。

デザイントークン / CMS構築 / スキル評価フレームワーク
Will — これからやりたいこと

見た目より、その手前の設計に力を入れたい。

AIの発達で、綺麗な見た目のUIは誰でもつくれるようになってきました。だからこそ、何を解くのか・どう組み立てるのかという上流の設計に、これから力を入れていきたいと考えています。

AIを前提にした制作プロセスを、チームの仕組みに。

個人開発でアプリ1本をAIと通し、現職でも活用を推進してきました。次は、個人の工夫でなくチームが再現できるプロセスとして設計したい。

デザインの判断を、事業の言葉で説明したい。

画面の良し悪しだけでなく、それが事業のどの数字に効くのか。UIの判断を事業側と同じ言葉で話せるようになりたいと考えています。

任せてもらえる範囲
任せてほしい中核。一人で判断し、進められる
業務システムのUI設計要件整理・情報設計情報量の多いページの構成設計デザインシステム・トークン設計デザインレビュー
できる実務で担当してきた範囲
Web・LPのビジュアルデザインノーコード実装(STUDIO)プロトタイプ制作(AI活用)iOSアプリ制作(AI活用)Figmaプラグイン開発チームの育成・仕組みづくり
伸ばしたいこれから深めたい領域
定量でのUX検証ユーザーリサーチ事業指標とデザインの接続AI活用プロセスの標準化
Team & Culture

学び合うチームを、仕組みでつくる。

自分を含めて3人のデザインチームで、リーダーとして取り組んできたこと。

日々の業務に追われると、個人の学びはその場で消えていきます。誰が何を教えられて、誰が何を伸ばすべきかも曖昧なままでした。そこで、気合いではなく仕組みで続く状態をつくることにしました。

曜日ごとに目的の違う定例(月:もくもく制作/水:学びの共有/金:Figmaの実験)を「Daily Design Dive」と名づけて習慣にし、そこで出た学びはナレッジのデータベースへ蓄積。タスク・1on1・スキルの記録をリレーションでつなぎ、個人ダッシュボードから一望できるようにしました。

いちばん時間をかけたのが、スキル評価フレームワークです。「センスがある/ない」で終わらせないために、UIデザイナーに必要な力を7つの軸に分け、それぞれをLv.1〜5で言語化しました。Lv.3は「任せられる」、Lv.4は「チームに良い影響を与えられる」、Lv.5は「基準をつくれる」。数字ではなく役割で意味を持たせました。1on1では、この軸を指しながら次に伸ばすテーマを一緒に決めています。

設計にあたっては、コンセント社が公開しているデザイナーのスキルマトリクスを参考にしました。そのまま借りるのではなく、自分たちのチームの実態に合わせて軸と観点を組み直し、各レベルの文章もすべて書き下ろしています。

デザインシンキング スタンス ディレクション UXデザイン UIデザイン テクニカルデザイン クオリティコントロール Lv.5
1on1で上長・メンバーとすり合わせた現在地
PDF スキル評価フレームワーク(A3・1ページ)7軸 × Lv.1〜5 の全文。小さい画面から読むときは、こちらをどうぞ。

横にスクロールできます(軸の列は固定)

Lv.1受け取るLv.2部分的にできるLv.3任せられるLv.4チームに良い影響を与えるLv.5基準をつくり、支援できる
01デザインシンキング判断や意図を言語化し、対話を前に進める力デザイン意図の説明/判断理由の言語化/レビュー対応/フィードバック整理/仮説思考受け取る段階説明や指摘を理解することはできますが、自分の考えを整理して伝えることはまだ難しい段階です。思考は内在していても、言葉として外に出し切れていません。部分的に説明できる段階自分の判断や意図を簡単に説明できる段階です。ただし、一貫性や背景説明が弱く、相手によって伝わり方に差が出ることがあります。考えを言語化できる段階判断理由や設計意図を整理し、相手に伝わる形で説明できる段階です。レビューや議論の場で、建設的なやり取りができる状態です。対話を前に進められる段階議論やレビューの中で、相手の意見を踏まえながら思考を整理し、合意形成を前に進められる段階です。言語化を通じて、チームの理解を深める役割を担います。思考を支援できる段階他者の考えや迷いを言語化の面から支援し、チーム全体の思考レベルを引き上げられる段階です。共通言語づくりや育成にも貢献できます。
02スタンス主体性・学習姿勢など、成長の土台となる向き合い方主体性/オーナーシップ/学習姿勢/相談・共有/振り返り受動的な段階業務や学習に対して、与えられたことをこなす意識が中心の段階です。必要最低限の対応は行いますが、自分から問いを立てたり改善を考える場面はまだ少なく、迷いや不安を一人で抱え込みがちです。意識し始めている段階主体性や成長の必要性を理解し、少しずつ意識的に行動し始めている段階です。相談や振り返りを行う場面も出てきますが、行動が安定せず、状況によって揺れが見られます。安定して向き合えている段階仕事や学習に対して、一定の主体性と責任感を持って向き合えている段階です。困ったときに相談でき、振り返りを通して次の行動につなげることができます。UIデザイナーとして健全なスタンスが身についている状態です。周囲に良い影響を与えている段階自分自身の向き合い方が安定しているだけでなく、その姿勢が周囲にも良い影響を与えている段階です。前向きな行動や共有を通じて、チームの雰囲気や学習文化づくりに貢献しています。スタンスを言語化・支援できる段階自分が大切にしているスタンスを言語化し、他者の迷いや成長を支援できる段階です。個人の姿勢に留まらず、チーム全体の健全な向き合い方を育てる役割を担います。
03ディレクションUIの質を守りながら、仕事を前に進める推進力タスク分解/スケジュール意識/進行共有/要件すり合わせ/関係者連携指示待ちの段階与えられたタスクをこなすことはできますが、進行や調整については指示を待つ場面が多い段階です。UI制作はできても、仕事全体を前に進める視点はまだ限定的です。自分の範囲を管理できる段階自分が担当するタスクやスケジュールを意識し、最低限の進行管理ができる段階です。ただし、周囲を巻き込んだ調整や共有はまだ限定的です。UI視点で進行できる段階UIデザイナーとして必要な範囲で、進行・調整・共有を自立して行える段階です。UIの質を守りながら、仕事を前に進める役割を任せられる状態です。周囲を巻き込める段階関係者と連携しながら、UI制作を主体的に前に進められる段階です。課題やリスクを早期に共有し、調整しながら進行できます。小さな単位でディレクションできる段階UI視点でプロジェクトや機能単位のディレクションを担える段階です。UIデザイナーとして、チームの推進力となり、成果に責任を持てる状態です。
04UXデザイン画面単体でなく、体験を構造として捉え設計する力情報設計/画面遷移/体験フロー/ユーザー視点/プロトタイピング/UI検証/仕様確認要素理解の段階UXや体験設計に関する基本的な考え方を理解しており、指示をもとに画面や遷移を考えられる段階です。体験全体を自分で組み立てることはまだ難しく、部分的な対応に留まります。部分的に体験を捉えられる段階画面遷移や一部の体験フローを意識して設計できる段階です。ただし、全体最適やユーザー視点での判断についてはサポートが必要な場面が多くあります。体験を自立して設計できる段階情報構造や体験の流れを整理し、UXとして成立するUI設計ができる段階です。プロトタイピングや検証を通じて、判断の理由を説明できます。UX設計を任せられる基準となる状態です。改善・検証を主導できる段階体験上の課題に気づき、仮説を立てて改善提案や検証を行える段階です。UX視点でUI全体の質を引き上げる行動が取れます。体験設計を言語化・共有できる段階UX設計の考え方や判断軸を体系的に整理し、他者に共有・支援できる段階です。チーム全体のUX思考を底上げする役割を担います。
05UIデザイン目的と文脈を踏まえ、意図を持って要素を選ぶ力コンポジション/レイアウト/タイポグラフィ/カラー/コンポーネント/トーン&マナー/一貫性理解・模倣の段階UI設計に関する基本的な考え方や用語を理解しており、既存のUIや指示を参考にしながら画面を作成できる段階です。判断は感覚や模倣に寄りやすく、自分の設計意図を言語化することはまだ難しい状態です。部分的に判断できる段階要件や指示を踏まえてUIを組み立てることができる段階です。レイアウトや文字、色などの要素単位では判断できますが、画面全体の一貫性や優先度設計についてはサポートが必要なことが多くあります。自立して設計できる段階目的や情報構造を理解した上で、UIを一人で設計できる段階です。レイアウト・タイポグラフィ・カラー・コンポーネントを意図的に選択し、「なぜそうしたか」を説明できます。UIデザイナーとして任せられる基準となる状態です。改善・応用ができる段階既存UIの課題に気づき、より良い表現や構造を提案できる段階です。画面単位ではなくプロダクト全体を見渡し、トーン&マナーや一貫性を保ちながらUI改善を行えます。体系化・共有ができる段階UI設計の考え方やルールを言語化し、他者に共有・指導できる段階です。属人的なデザインに留まらず、再現性のあるUI設計としてチームに展開できます。
06テクニカルデザイン実装と運用を前提に構造を設計し、橋渡しする力Figma/Auto Layout/コンポーネント管理/デザインシステム/実装を意識した設計/フロントエンド基礎用語理解の段階ツールや実装に関する基本的な用語を理解している段階です。指示があれば作業できますが、構造や実装を踏まえた判断はまだ難しい状態です。再現できる段階既存のUIやルールを再現しながらデザインできる段階です。実装上の制約は理解し始めていますが、最適化や調整にはサポートが必要な場面があります。実装前提で設計できる段階実装を想定したUI構造を考え、エンジニアと認識を合わせながら設計できる段階です。実装理解を踏まえた設計を任せられる基準となります。運用・改善を意識できる段階デザインシステムやコンポーネント運用を踏まえ、UIの改善提案や調整ができる段階です。実装後の運用まで見据えた判断が行えます。仕組みとして設計できる段階実装理解を前提に、チーム全体の設計効率や再現性を高める仕組みを考えられる段階です。UIと実装をつなぐ役割として、チームに貢献できます。
07クオリティコントロール安心して使える状態まで仕上げ、品質を担保する力アクセシビリティ/UI品質チェック/UXレビュー/表記・挙動確認指摘されて気づく段階UIの不備や違和感を自分では見つけにくく、指摘されて初めて気づく段階です。修正内容は理解できますが、確認観点がまだ定まっていません。自分でチェックできる段階基本的な確認観点を使い、自分で品質チェックができる段階です。ただし、体験全体を見た判断や細かな違和感にはまだ見落としが生じることがあります。品質を担保できる段階設計段階から品質を意識し、安定したUIを作れる段階です。大きな不備や致命的な抜け漏れが少なく、UIデザイナーとして品質を任せられる状態です。改善提案ができる段階体験全体を見渡し、品質向上のための改善提案ができる段階です。UIの完成度を一段引き上げる視点を持っています。基準を作り共有できる段階品質に関する観点やチェック基準を整理し、チームで共有できる段階です。UI品質の再現性を高め、チーム全体の信頼性向上に貢献します。
つくった仕組み
週次の定例設計 ナレッジDB スキル評価フレームワーク 1on1の記録・運用 タスク/プロジェクト管理 個人ダッシュボード
Contact

感想やご連絡は、気軽にどうぞ。

Contact