WEB DESIGN
Synergym — フィットネスジム Webサイト
黒×イエローの躍動感あるビジュアルで、ジムブランドの力強さとユーザビリティを両立したコーポレートサイト。
Web & UI Designer
Design is not how it looks. It's how it works.
見る人の感情に届く、意味のあるデザインを。
Webデザイン / UIデザイン
Fujita Miyuki — Portfolio 2024
INFO
Web Design / UI Design / Vibe Coding / UX Research / Branding
SCROLL
01 — ABOUT
プロフィール
Designer / Creator
Fujita Miyuki
藤田 美幸
WebデザインおよびUIデザインを専門とするデザイナーです。 ユーザー体験の設計から視覚的な表現まで、一貫したデザインプロセスで課題解決に取り組んでいます。
情報設計・インタラクション設計・ビジュアルデザインを横断し、 「意味が届くデザイン」を追求しています。 クライアントのビジネス目標とエンドユーザーのニーズの両方を理解した上で、 戦略的かつ美しい体験を生み出すことを得意としています。
02 — WORKS
制作実績
実際に手がけたプロジェクトの一部をご紹介します。
WEB DESIGN
Monozkey — 建築・インテリア企業サイト
余白と明朝系タイポグラフィを活かしたミニマルな設計。上質感と信頼性を視覚で伝えるエディトリアルレイアウト。
WEB DESIGN
LinkCore — コンサルティング企業サイト
ティール×ホワイトの誠実な配色と、カード型コンテンツモジュールで採用・サービス訴求を両立。
WEB DESIGN
Spotomo — ダンスレッスン ランディングページ
鮮やかなペイントスプラッシュビジュアルと数値バッジで第一印象を掴む、コンバージョン特化型LP設計。
WEB DESIGN
inn.LLC
淡い色調と大判フォトで花のある暮らしを体験させるブランドサイト。柔らかい余白と手仕事感のあるUXで購買意欲を高める。
UI / APP
ダンス学習アプリ — UI設計
ネイビー×ティールのダークUIで没入感を演出。カリキュラム・ライブ・チャットを整理したモバイルアプリの全画面設計。
WEB DESIGN
dank1 — スポーツレッスン Webサイト
赤×黒の躍動的なアスレチックデザイン。対角オーバーレイと大判タイポグラフィでブランドの熱量を表現。
WEB DESIGN
DAIKEN KOSAN — 不動産コーポレートサイト
黒×ゴールドの高級感ある配色と「THE IDEAL FUTURE」のビジョンメッセージで、信頼と上質感を訴求するコーポレートデザイン。
WEB DESIGN
Ueda Architects Glamping — リゾート予約サイト
白×ナチュラルの上質なリゾートブランドサイト。ライフスタイル写真と余白を活かし、自然体験への期待感を高める設計。
WEB APP / TOOL
LLMエンジニア 実践ラボ
Stitch・Figma・Cursor・Supabaseなどのモダンツールを活用した、LLMエンジニア向け学習サポートアプリ。ダッシュボード型UIで学習ロードマップを体験的に提示。
WEB APP / TOOL
Valance — 気分の記録
双極スペクトラムを意識した気分トラッキングアプリ。躁・安定・鬱の気分スペクトラム入力、睡眠・服薬ログ、Chart.js によるトレンドグラフ・PDF レポート出力まで備えたセルフケアツール。
WEB APP / TOOL
RequiBot — 要件定義チャット
チャット形式で要件定義を整理し、設計書まで自動生成するWebアプリ。Webサイト用・アプリ用の2モード、進捗トラッカー付きサイドバー、PDF出力に対応。
WEB APP / TOOL
ワークエリア — PMサポート
プロジェクト運営向けダッシュボードUI。3カラムのワークエリア（概要・WBS・マイルストーン・リスク／課題ほか）でRAG・完了率・識別情報・ベースライン／財務・憲章メモを操作できます。「体験する」で操作デモ、「IAを見る」で情報設計（サイトマップ・階層）を参照できます。
WEB APP / TOOL
マインドフル・パス — CBTウェルネスアプリ
認知行動療法を意識したセルフケア向けモバイルレイアウト。ネオモーフィズム（ソフトUI）で統一し、下部ナビで「ホーム」（気分チェック・チャット誘導）、「チャット」（AIセラピストとのテキスト／音声対話）、「メモリー」（セラピー記録の振り返り）、「進捗状況」（週間の成長・セルフケア導線）、「設定」（プロフィール・アプリロック）を切り替え。サムネは5画面をスマホモックに収め、横一列に並べた構成です。
WEB APP / EXPERIENCE
La beauté sans concept — ヴァーチャル美術館
18点の抽象絵画を一人称視点で歩いて鑑賞できる3D美術館。Three.js（WebGL）で4つの展示室を構築し、WASD／ドラッグ操作・作品クリック解説・作品一覧HUDを備えた没入型Web体験。エントランスはセリフ体と金のアクセントで画廊の格調を演出。
UI / APP
RECOVERY TRACKER — トレーニング管理
部位別の回復時間（48時間目安）を可視化するフィットネス記録アプリ。脚・胸・背中など6部位＋ウォーキングの記録、お休み推奨表示、カレンダー連動の日付入力、ログイン／新規登録までをダーク×ミントグリーンのモバイルUIで設計。
WEB APP / EXPERIENCE
FLOWER JOURNEY — スクロール体験サイト
スクロールに連動して夕暮れの花畑の中を前へ進んでいく没入型インタラクティブサイト。背景写真から切り抜いた本物の花が手前を流れ、リキッドグラス（すりガラス）のカードが風景の上に静かに浮かびます。WORK / VISION / CONTACT を巡る、写真表現とモーションを組み合わせたブランド体験のサンプル。
03 — SKILLS & STRENGTHS
スキル・強み
UX思考設計
ユーザーリサーチからペルソナ設定、情報アーキテクチャの構築まで。ユーザーの目線で課題を発見し、体験設計に落とし込みます。
ビジュアル表現力
タイポグラフィ・配色・余白の美学を熟知。ブランドの本質を視覚言語に翻訳し、一目で伝わるデザインを追求します。
実装への橋渡し
HTML/CSS/JSの基礎知識を持ち、エンジニアとの円滑なコミュニケーションが可能。デザインデータの実装精度を高めます。
戦略的デザイン
ビジネス目標とクリエイティブを結びつける思考力。KPIを意識しながら、コンバージョン向上につながるデザイン提案が得意です。
バイブコーディング
AIとの対話を通じてコードを生成・編集する「バイブコーディング」を実践。デザイナー視点でUIを直接形にし、プロトタイプから実装まで自走できます。
TOOLS & TECHNOLOGIES
04 — PROCESS
制作プロセス
すべてのプロジェクトで変わらない、私のデザインアプローチです。
01
DISCOVER
課題・目的の発見
クライアントへのヒアリングとユーザーリサーチを通じて、プロジェクトの本質的な課題と目標を明確にします。何のためにデザインするかを定義する最重要フェーズです。
02
DEFINE
要件定義・情報設計
収集した情報をもとに、ペルソナ・カスタマージャーニー・情報アーキテクチャを構築。デザインの方向性と成功基準を関係者と共有します。
03
DESIGN
ビジュアル設計・プロトタイプ
ワイヤーフレームからビジュアルデザインへ。Figmaを用いた高品質なUIデザインと、実機レベルのプロトタイプ制作でステークホルダーへのプレゼンを行います。
04
DELIVER
実装連携・品質確認
エンジニアへの明確なデザインスペック共有、実装後のデザインQA。リリース後もデータをもとに継続的な改善提案を行います。
05 — CONTACT
お問い合わせ
制作依頼・採用に関するお問い合わせは、下記フォームよりお気軽にご連絡ください。
2営業日以内にご返信いたします。