UI/UXデザイナーYoko Shiina

要件が曖昧な段階から、体験を構造化し、実装できる形まで整理します。

課題整理 → 情報設計 → UI設計 → 仕様整理まで、実装制約込みで前に進めます。

実装に乗せやすい粒度の仕様に落とし込みます。

強み(実装につながるUX設計)

要件が曖昧な段階から、判断軸を揃え、実装に乗る形まで整理します。

  1. 課題整理 / 要件の構造化

    現状の運用・制約・関係者の前提を整理し、論点と優先順位を揃えます。

  2. 情報設計(IA)/ ユーザーフロー

    主要タスクを軸に、構造・導線・迷いポイントを設計します。

  3. ワイヤー / プロトタイプ

    情報の優先順位と画面の役割を可視化し、早い段階で認識合わせします。

  4. UI設計(コンポーネント前提)

    再利用できるパターンを意識して、状態・例外・エラーも含めてUIを設計します。

  5. デザイン意図の言語化・合意形成

    なぜこの設計かを言葉にし、デザイナー/エンジニア/運用の判断を揃えます。

  6. 仕様整理(実装・検証につなぐ)

    挙動・例外・データ条件を具体化し、実装や検証が進む粒度に落とします。

実装理解を前提に、コンポーネント/状態/例外まで含めて「実装に乗る粒度」で設計を整えます。

プロジェクト

要件が曖昧な状態から、体験を構造化し、実装に乗る形まで整理したプロジェクトです。

代表事例

個人スタジオ・ウェブサイトUX設計:SOLA Studio / SOLA Journal / Global Pack 進行中

UX DesignInformation ArchitectureResponsive UIAccessibility
  • 個人スタジオのウェブサイト(SOLA Studio)とオンラインジャーナル(SOLA Journal)、サービスLP(Global Pack)の情報設計とUX/UIデザインを設計・実装まで一貫して行ったプロジェクト。
  • Hero/サービス紹介/Pricing/お問い合わせなど、ビジネス上重要なセクションに絞り、「誰に・何をしてほしいか」が伝わるコンテンツ構成と導線を設計。
  • Desktop/Mobile の2ブレイクポイントで可読性・スクロール量・CTA配置を調整し、アクセシビリティと多言語対応(EN/JA)を前提に継続的に改善。

エネルギー運用ダッシュボード:CSV更新の安全設計

B2B業務UX安全性・誤操作防止
  • 電力オペレーターの運転計画更新を、CSV運用は維持したまま「確認・アップロード/ダウンロード・削除」をUIで安全に行える形へ整理
  • 100×48コマ規模まで見据え、テンプレCSVの提供・日付一致チェック・48コマ必須など誤登録防止を設計
  • エラーメッセージの人間化と理由付き仕様で、運用ストレスと手戻りを低減(ベンダー実装前提で合意形成も支援)

美容家電ブランド:コーポレートサイト再設計(IA〜計測改善)

B2Cコーポレートサイト計測・改善
  • ブランド方針を言語化し、情報設計・UI・実装・計測まで一貫してリデザイン(10ヶ月)
  • 導線/サポート/商品理解の設計を強化し、自己解決と信頼感を改善
  • セッション+174%、直帰率 82.2%→76.8%、平均滞在 +30秒

ヘアサロン:体験価値の再定義(メッセージ×価格×運用)

体験設計ブランド・メッセージ改善運用
  • ローカルサービスの体験価値を再定義し、メッセージ・価格・運用を一貫設計(28ヶ月)
  • 月次で仮説検証を回し、フィードバックループを構築
  • 来店 20→70+、リピート 10%→30%、客単価 ¥6,800→¥8,800

関連プロジェクト

多言語サイト:情報設計・調査設計・UX改善提案

多言語UXIA調査設計
  • 多言語サイト(最大約5言語規模)の情報設計とユーザビリティ調査設計に関与
  • 予約導線や購入判断情報の不足を整理し、改善提案資料へ落とし込み
  • 成果物:サイトマップ/ワイヤー/調査票/改善提案資料(匿名化)

新規Webサービス:サイト構造・フロー・ワイヤー設計

IA要件整理新規サービス
  • 新規Webサービスのサイトマップ/ユーザーフロー/ワイヤー設計を担当(設計フェーズ中心)
  • Maker検索・投稿・マッチング導線など、複数タスクが交差する構造を整理
  • 成果物:サイトマップ/ワイヤー/フロー設計資料(匿名化)

個人プロジェクト

UX・アクセシビリティ・情報設計と構造化のプロセスがわかるプロジェクトです。実装を伴うものと設計の思考モデル中心のものがあります。

アクセシビリティ重視の面接フラッシュカードアプリ - Promotee

A11yKeyboard-first UXReact/Frontend
  • 非ネイティブ話者の面接練習を支える、キーボード完結のフラッシュカードアプリを企画・設計・実装
  • スクリーンリーダー対応、モーション制御、セマンティックなマークアップなど、インクルーシブUXを前提に設計
  • Lighthouse Accessibility 90+ を目標に改善し、実運用を想定したアクセシビリティ品質を担保

Contrastly – Tailwind Colors Contrast Checker

A11yWCAG ContrastTailwind
  • フロントエンド開発・デザインの現場で、コントラスト確認を素早く直感的に行える軽量ツールを設計・実装
  • Tailwindのカラーパレットやセマンティックトークンを前提に、WCAGコントラスト比をまとめて検証できる形に整理
  • キーボードファーストの操作設計で、実際のデザイン/開発パイプラインに馴染むワークフローを重視

Tipshelf – Internal Knowledge Sharing Tool(企画・設計・Figmaモックアップ)

UX Case StudyIA/FlowsFigma
  • 文化的インサイトをプロダクト構造に翻訳する、ナレッジ共有プラットフォームのケーススタディとして企画・設計
  • 分散チームを想定し、ユーザーフロー/投稿テンプレート/役割別ジャーニーを設計して情報の流れを構造化
  • Figmaでモックアップまで作成し、運用される前提で画面と導線を具体化

Cultivating a Knowledge Sharing Habit

UX ThinkingTeam RitualsMiro
  • 知識共有の行動がどう生まれるかを観察し、チームが続けやすい“儀式”と構造をどう設計するかを整理
  • スケールする情報フローのために、インターフェースと運用ルールをセットで考える視点を言語化
  • 図解(Miro)としてまとめ、以後のコラボレーションツール設計に再利用できる形にした

Behavioral Modes in Team Contexts

Concept ModelTeam DynamicsMiro
  • チームにおける反応を「状況に適応したモード」として捉え、構造と文化が行動に与える影響をモデル化
  • エネルギー/安全性/明確さなどの条件が、人の振る舞いをどう変えるかを整理して可視化
  • Miroで図解し、プロダクト設計や合意形成で“人間の反応”を扱うための思考ツールとしてまとめた

執筆(UX / アクセシビリティ)

UX設計や判断の背景を、記事として言語化しています。日本語要約とあわせて、この記事で示しているUXスキルも整理しました。

  • The UX Lesson I Learned in a Quiet Tokyo Salon

    UX Collective (Bootcamp)PublicationMedium Boost
    概要をみる

    「UX」という言葉を知る前に、私はすでに“UXの核”を実務で扱っていた。リクルートで担当したのは、恵比寿の小さなサロン。数字上の課題(来店の波、客単価、リピート)を整理しつつ、オーナーが言語化しきれない“理想の店の感覚”を丁寧に拾い上げた。私は「理想/現状/ギャップ」を1枚のシートに落とし込み、地域・競合・メディア・広告データ・街の観察を組み合わせて、狙うべき顧客像と伝えるべきトーンを具体化した。その結果、値下げではなく価格を上げ、言葉とビジュアルの方向性を揃え、静かな一貫性のある体験として“伝わる広告”に設計し直した。数ヶ月後、リピート率は約3倍、客単価は約20%向上し、2店舗目の相談に繋がった。この経験は、現在のプロダクト設計でも「意味・感情・実装可能性を揃える」という判断軸の土台になっている。

    この記事に関連するUXスキル
    • 課題の構造化(Ideal / Current / Gap)
    • “言語化されていないニーズ”の抽出
    • データ×観察の統合(定量+定性)
    • ターゲットの再定義とメッセージ設計
    • 制約下での設計(限られた枠・情報量・形式)
    • 改善設計→検証(継続運用での成果)
  • 概要をみる

    アクセシビリティの文脈で語られがちな「ユニバーサルデザイン」は、いつも十分とは限らない。“すべての人に同じ体験”を用意する発想だけでは、ユーザーの多様な状況やニーズを取りこぼすことがある。そこで、状況や好みに応じて体験を調整できる「より適応的(パーソナライズされた)なインターフェース」という視点を提案する。重要なのはチェックリストの達成ではなく、ユーザーが自分のやり方で前に進める余地を設計すること。アクセシビリティを“固定の正解”として扱うのではなく、選択肢と調整可能性を持つ設計として捉え直す。

    この記事に関連するUXスキル
    • アクセシビリティ要件の再定義(チェックリスト→体験設計)
    • ユーザーの多様性を前提にした設計(状況・好み・能力の差分)
    • パーソナライズ/アダプティブUIの設計思考
    • 「同一体験」ではなく「選べる体験」を作る情報設計
    • プロダクト方針としてのA11y(設計原則化)
  • What Building My First A11y-Focused App Taught Me

    JavaScript in Plain EnglishPublication
    概要をみる

    完全キーボード操作を前提にしたアプリを、設計から実装まで作り切った経験から得た学びをまとめた記事。アクセシビリティ対応は“最後に付け足す作業”ではなく、UI設計や状態管理、フロントエンドの構造そのものに影響する。作っていく過程で、想定していなかったエッジケースや、操作の一貫性の重要さが浮き彫りになった。結果として、A11yを「制約」ではなく、設計と実装の品質を上げるドライバーとして扱えるようになった。アクセシブルにすることで、ユーザー体験だけでなく実装の見通しや保守性も改善できる、という視点を提示している。

    この記事に関連するUXスキル
    • キーボード操作の体験設計(フォーカス順・状態・戻りやすさ)
    • アクセシビリティを前提にしたUI設計(状態設計・一貫性)
    • エッジケース発見と改善(実装から学ぶUX)
    • A11yを起点にしたフロントエンド設計(構造・再利用性)
    • 実装とUXの往復(設計→実装→検証→改善)

デザインと検証(調査設計・データからの改善)

リサーチ専門ではありませんが、必要な場面では 調査の設計と、得られた情報の整理まで行います。定性調査の企画・設計(WIP)や、GAなど既存データを踏まえた改善にも関わってきました。

1

定性調査

  • 定性調査の企画・設計に関与(シナリオ/質問設計、観点整理、レポートの型づくり)
2

既存データを踏まえた課題抽出(GA等)

  • GA を見て、導線・離脱・滞在などの傾向を整理し、サイト改善に落とし込み(美容家電ブランド案件)
  • 広告分析ツールで A/B テストを設計・分析し、改善判断に反映(Facebook広告分析ツール)
  • 月次の広告分析レポートを読み、施策の意図と改善の繋げ方を学び、実務に取り入れた
3

品質検証(A11y / SEO)

  • Lighthouse を使い、A11y / SEO スコア改善を反復(個人プロジェクト)
  • 必要に応じて、改善ポイントを整理して実装に落とす
4

ユーザー理解(ヒアリング)

  • 機能追加や運用改善のために、関係者・ユーザーへのヒアリングから論点を整理

ツール / スキル

実務で使っているツールと、設計を「実装に乗る形」に整えるためのスキルをまとめています。

デザインツール

  • Figma / Sketch
  • Adobe Illustrator / Photoshop

アクセシビリティ(計測・改善)

  • Lighthouse を使った A11y / SEO の計測と改善(必要に応じて AI も活用)
  • Promotee:Lighthouse Accessibility 90+ / Contrastly:全項目100
  • Vercel の A11y 関連ツールも活用

実装を見据えた設計(差別化ポイント)

  • コンポーネント/状態/例外/データ条件まで含めて、仕様を詰められる
  • 現役の実装経験を前提に、設計意図→仕様→実装までのつなぎを詰められる
  • デザインの意図・判断の背景を言語化し、PdM/エンジニアとの合意形成を進める
  • PM / エンジニア / ビジネス側と連携し、判断軸を言語化して前に進める
  • (前提として)React / Next.js / TypeScript / MUI / Tailwind / shadcn/ui

コンポーネント前提のUI設計

  • コンポーネントとして実装される前提で、状態・例外・再利用を考えてUIを設計できる
  • デザイン意図を「実装に乗る粒度」に整え、仕様として共有できる

協働スタイル

曖昧な状況でも、論点と判断軸を揃え、関係者と合意しながら前に進めます。

言語化(論点と判断軸を揃える)

  • 目的・前提・制約・未決定事項を整理し、チームが同じ前提で判断できる状態にします。
  • 「何を決めれば進むか」を見える化して、議論が散らないようにします。

合意形成(デザイナー/エンジニア/運用の橋渡し)

  • デザイン意図を、仕様・挙動・例外まで含めて共有し、認識ズレを減らします。
  • 役割や立場が違っても、意思決定の理由が残る形で合意を作ります。

曖昧仕様からの提案(たたき台で前に進める)

  • 0→1の段階では、複数案と判断ポイントをセットで出し、選べる状態を作ります。
  • “決めるための材料”を揃えて、実装に乗る粒度まで落とします。

必要に応じて、文章・図・簡易プロトタイプで認識合わせします。

お問い合わせ

UI/UXデザインで、要件整理から情報設計・UI設計、実装に乗る粒度の仕様整理まで一緒に進められる人材をお探しでしたら、ぜひ一度お話しできれば幸いです。

yokoworks.dev@gmail.com へメールにてご連絡ください。