こんにちは、WebデザイナーのDaniです。
これは、ひとつひとつの
インターフェースの裏にある物語。
実績 2019–2026
デザインもコーディングも、最初から最後まで自分で手がけた3つのプロダクトです。AIseigen、Kuri x Kuri、MOTOR-SCOPE。
写真をタップすると、プロジェクトの詳細が開きます。
サービス 全９枚
最初のリサーチから、アプリの公開まで。ブランドのためにできることを、全部ここに並べました。
スワイプでめくるか、テーブルに広げて一度に見てみてください。
- 01
戦略・UXリサーチ
ヒューリスティック評価、ユーザーフロー、情報設計。画面を1枚描く前に、まずユーザーがどう考えるのかを理解します。
サービスの詳細を見る - 02
UIデザイン
Webもアプリも、PCもスマホも。細部まで作り込んだ画面と、実際に触れるプロトタイプを、どこにも似ていない見た目で仕上げます。
サービスの詳細を見る - 03
デザインシステム
トークン、コンポーネント、更新され続けるドキュメント。プロダクトが大きくなっても、一貫性を失わないための仕組みです。私のプロジェクトは、どれも専用のデザインシステムと一緒にスタートします。
サービスの詳細を見る - 04
ブランドアイデンティティ
ロゴ、カラー、書体、そして使い方のガイド。名刺の上でも6インチの画面の中でも、ひと目で同じブランドだとわかるように。
サービスの詳細を見る - 05
ゲーミフィケーションとプロダクト
ゲームの仕組み、成長の段階、ごほうび。くり返しの作業を、ゲームのように楽しめるものに変えます。Kuri x Kuriも、こうして生まれました。
サービスの詳細を見る - 06
フロントエンド実装・納品
デザインしたものは、自分で形にします。HTML、CSS、JavaScript、React。デザインからコードに移すときに、細部が抜け落ちることはありません。
サービスの詳細を見る - 07
管理画面・社内ツール
管理画面、分析ダッシュボード、コンテンツ管理。AIseigenやMotor-Scopeのように、チームが初見で迷わず使える画面をつくります。
サービスの詳細を見る - 08
2言語対応とアクセシビリティ
最初のラフの段階から、2つの言語で使うことを前提に設計。コントラスト、フォーカス、キーボード操作まで、どの画面でも丁寧に整えます。
サービスの詳細を見る - 09
インストールできるアプリ
Webサイトを、スマホにインストールできてオフラインでも動くアプリに。PWAにもAndroidにも対応し、デザインから公開まで担当します。
サービスの詳細を見る
制作の流れ ４つの駅
最初のアイデアから公開まで。ひとつの駅も飛ばさずに進みます。
駅をタップすると、そこで受け取れるものが見られます。
1駅目／全4駅
リサーチ
話を聞いて、調べて、課題をはっきりさせます。
この駅で受け取れるもの
- サイト診断レポートうまくいっていること、なくていいもの、どこから手をつけるか。
- フロー図とワイヤーフレーム見た目をつける前に、構成を固めて検証します。
使っているツール
- Figma
- FigJam
- Lighthouse
- Google Analytics
2駅目／全4駅
デザイン
ラフスケッチから、完成形に近いプロトタイプまで。
この駅で受け取れるもの
- 実際に触れるプロトタイプ作りはじめる前に、アイデアを試せます。
- デザインシステムとブランドガイドコンポーネント、色、書体をまとめて文書化します。
使っているツール
- Figma
- Photoshop
- Illustrator
- Stable Diffusion
3駅目／全4駅
開発
コードに落とし込んで、実際の環境で試します。
この駅で受け取れるもの
- 完成度の高いデザインすべての画面を、PCとスマホの両方で。
- そのまま使えるフロントエンドのコードきれいで速く、本番にそのまま出せる状態で。
- 多言語対応公開初日から、複数の言語に対応できるサイトに。
使っているツール
- HTML
- CSS
- JavaScript
- TypeScript
- React
- Next.js
- Tailwind CSS
- Firebase
- Supabase
- PWA
- Claude Code
4駅目／全4駅
公開
公開して、数字を見て、その後も改善を続けます。
この駅で受け取れるもの
- 引き継ぎとドキュメントチームが自分たちで運用できるよう、わかりやすいガイドを用意します。困ったときは私もサポートします。
使っているツール
- Firebase
- Supabase
- Vercel
- Lighthouse
- Google Analytics
- Search Console
- AdSense
- Google Ads
5駅目・あなたの駅
温めているプロジェクト、ありませんか？
やりたいことを聞かせてください。ルートは一緒に描きましょう。
お問い合わせ まずは話しましょう
ブランドに「F5」が必要だと感じたら。いまの状況と、これからどうしたいかを聞かせてください。
1営業日以内にお返事します。hola@danif5.com に直接メールしていただいてもかまいません。
よくある質問 仕事の進め方について
できること、進め方、チームでの関わり方をまとめました。
ほかに気になることがあれば、気軽にメッセージを。
01できること
デザイナーですか？それともエンジニアですか？
どちらもです。Figmaでインターフェースをデザインし、React、Next.js、TypeScriptで自分でコードにします。だから、承認されたデザインがそのまま公開されます。
これまでどんなプロダクトを作ってきましたか？
Webサイト、インストールできるアプリ、管理画面などを、いつも最初から最後まで手がけています。たとえば、管理画面つきの壁紙ギャラリーAIseigen、単語を覚えるゲームKuri x Kuri、バイクを持つ本当のコストを比べるMOTOR-SCOPEです。
02進め方
プロジェクトはどう始めますか？
描く前に、まず調べます。利用データ、いまあるものの診断、主なユーザーフロー。構成を検証してからでないと、最終デザインには進みません。
仕事でAIをどう使っていますか？
判断の代わりではなく、道具として使っています。開発のスピードを上げるためにClaude Code、ビジュアルのアイデアを広げるためにStable Diffusionを使います。
アクセシビリティやパフォーマンスにも気を配っていますか？
最初から意識しています。コントラスト、キーボード操作、スクリーンリーダー、多言語対応。公開前にはLighthouseの数値も確認します。
03チームでの関わり方
開発チームとはどう連携しますか？
デザインの言葉もコードの言葉も話せます。デザインシステムにまとめたコンポーネントを渡し、実装もチームと一緒に確認します。
プロジェクトが終わったら、何が残りますか？
ドキュメントとガイドです。私がいなくても、チームが自分たちで進められるように。