プロダクトデザインと UI/UX

Figma & ビジュアルデザイン

Figma でデザインされた、ウェブとモバイル向けの明快で一貫したインターフェース。すべての主要画面、状態、ブレークポイントを網羅し、開発者がそこからビルドできるファイルで提供します。

プロジェクトについて相談するUI デザインについて相談する

最終UIデザインが必要な方

フローは合意済みですが、画面が未完成だったり不揃いに見えたりし、開発者ごとに異なる方法でビジュアルの隙間を埋めてしまいます。ビジュアルデザインは、すべての主要画面に最終的でブランドに沿った見た目を与え、御社のチームがそこから構築できるようにします。

  • 承認済みのワイヤーフレームやプロトタイプを持ち、開発前に最終画面を必要とする創業者
  • フローを再構築せずに、古くなったSaaS製品やダッシュボードを再ローンチするチーム
  • 構築のために完全なFigmaファイルを必要とする、社内またはエージェンシーの開発者チーム

ユーザビリティとブランドに資するビジュアルデザイン

魅力的な画面も、ユーザーが読めず、次のステップを見つけられず、エラーから回復できなければ不十分です。当社のデザイナーは、ウェブサイト、SaaS 製品、ダッシュボード、モバイルアプリ向けに Figma で高精細なインターフェースを作成し、一貫したタイポグラフィ、カラー、スペーシング、コンポーネントでお客様のブランドを適用します。すべての主要画面には、その状態、ブレークポイント、開発者が必要とするメモが付属します。ビジュアルデザインのみを単独で当社に依頼することも可能です。開発とホスティングは別途スコープを設定します。

AI 支援による探索、デザイナーが所有するビジュアル

AIがどのように支援するか

  • お客様のブランド内でビジュアルの方向性やレイアウトの選択肢を探索し、より多くのアイデアを早い段階で比較できるようにします。
  • ダッシュボード、テーブル、フォームなどの情報密度の高い画面向けにバリエーションを生成し、デザイナーが磨き上げます。
  • リアルなサンプルコンテンツのドラフトを作成し、もっともらしいテキストとデータで画面をレビューできるようにします。
  • パレット外のカラー、切り離されたコンポーネント、欠落した状態など、Figma ファイルの不整合にフラグを立てます。

当社の専門家が担うこと

  • デザイナーがビジュアルの方向性、階層、ブランドとの適合性を設定し、すべての画面を承認します。
  • デザイナーがアクセシビリティを確認します。カラーコントラスト、文字サイズ、フォーカス状態、タッチターゲット、ラベルです。
  • ビジュアルの一貫性は、共有コンポーネント、変数、文書化された使用ルールを通じて徹底されます。
  • 主要画面は、ハンドオフ前に、お客様のチームと、必要に応じて実際のユーザーとともに検証されます。

各主要画面が受け取る状態

SaaSウェブアプリの状態カバレッジの一例です。御社のものは画面ごとに合意します。

デフォルト読み込み中空エラー成功
サインアップとサインインこの画面専用にデザイン共有パターン、ノート付きで調整この画面では不要この画面専用にデザインこの画面専用にデザイン
ダッシュボード概要この画面専用にデザインこの画面専用にデザインこの画面専用にデザイン共有パターン、ノート付きで調整この画面では不要
フィルター付きデータテーブルこの画面専用にデザイン共有パターン、ノート付きで調整この画面専用にデザイン共有パターン、ノート付きで調整共有パターン、ノート付きで調整
請求とプラン変更この画面専用にデザインこの画面専用にデザイン共有パターン、ノート付きで調整この画面専用にデザインこの画面専用にデザイン
通知パネルこの画面専用にデザイン共有パターン、ノート付きで調整この画面専用にデザイン共有パターン、ノート付きで調整この画面では不要
  • この画面専用にデザイン
  • 共有パターン、ノート付きで調整
  • この画面では不要

インターフェースのデザイン方法

  1. 01

    方向性

    御社のブランド、製品、ユーザーを確認し、AI支援によるバリエーションでビジュアルの方向性を探り、御社と一つに合意します。

  2. 02

    基盤

    カラー、タイポグラフィ、余白、コアコンポーネントをFigmaの変数およびコンポーネントとして設定し、すべての画面の基盤とします。

  3. 03

    画面と状態

    デザイナーが各主要画面を状態とブレークポイントとともに作成し、進めながらコントラスト、階層、一貫性を確認します。

  4. 04

    引き渡しとデザインQA

    開発者向けの仕様、アセット、ノート、御社チームとのウォークスルー、そしてデザインに対するビルドのレビュー。

AIツールを使う2つの方法

AIは許可されたリサーチの統合とデザインの探索を支援します。リサーチとファイルを処理してよい場所を選択してください。

お決まりでないですか？スコープ設定の際に一つをおすすめします。 AIデリバリーのオプションを比較する

お客様が受け取るもの

Figma での UI デザイン成果物

  • 高精細な画面

    空、読み込み中、エラー、成功の各状態を含む、すべての主要画面の最終 UI。開発者が推測に頼らずに済みます。

  • レスポンシブレイアウト

    デスクトップ、タブレット、モバイルのブレークポイントを一緒にデザインし、その間でレイアウトがどのように適応するかのルールも含みます。

  • ライトテーマとダークテーマ

    ダークモードはそれ自体を一つのテーマとしてデザインし、カラーを反転して作るのではなく、両方のテーマでコントラストを確認します。

  • 製品に適用されたブランド

    お客様のブランドガイドラインをデジタル用途向けに拡張します。カラーの役割、タイプスケール、アイコノグラフィ、イメージ、チャートスタイルです。

  • 整理された Figma ファイル

    オートレイアウト、コンポーネント、バリアント、変数が適切に設定され、お客様のチームがファイルを保守できるよう明確な命名が付いています。

  • 開発者へのハンドオフ

    仕様、エクスポートされたアセット、アクセシビリティのメモ、実装ガイダンスを、お客様の開発者とともに一通り確認します。

一般的なビジュアルデザインの依頼

クライアントのケーススタディではなく、当社がスコープを定める典型的なシナリオです。

  • 承認済みのワイヤーフレーム、最終インターフェースなし

    ローファイのワイヤーフレームが承認され、開発者は着手前に最終画面を求めています。ビジュアルの方向性を合意し、彼らが最初に構築する画面をデザインし、同じ見た目を製品全体に広げていきます。

  • スキャンしづらいダッシュボード

    SaaSダッシュボードがすべての画面にテーブル、チャート、ステータスバッジを詰め込み、ユーザーは重要なものを見つけるのに苦労します。明確なビジュアル階層、色覚異常に対応してチェックされたチャートパレット、そしてスキャンしやすいテーブルスタイルを設定します。

  • ウェブサイトで止まったリブランド

    ウェブサイトは新しいブランドになっていますが、製品は依然として初期バージョンのように見えるため、サインアップが別の会社に乗り換えるように感じられます。新しいカラー、タイポグラフィ、画像をアプリに取り入れ、密度の高い画面でより多くのコントラストが必要な箇所では調整します。

ビジュアルデザインが対象としないもの

  • フローとワイヤーフレームが先です。ご自身のものをお持ちいただくか、ジャーニーと画面構造がまだ合意されていない場合はワイヤーフレーミング＆プロトタイピングから始めてください。
  • モーション、トランジション、ジェスチャーの挙動はインタラクションデザインで規定されます。ここでは、各状態をノート付きの静的な画面としてデザインします。
  • 複数のチームや製品で共有されるトークンシステム、コード化されたコンポーネント、コントリビューションルールはデザインシステムの作業です。ここでは、Figmaのコンポーネントと変数がこの製品の画面に対応します。
  • ロゴデザイン、ネーミング、ブランド戦略は含まれません。ブランドガイドラインがない場合、完全なブランドアイデンティティではなく、製品のビジュアルスタイルを合意します。

ビジュアルデザインがビルド、QA、ローンチへどのように引き継がれるか

  • エンジニアが早期から関与する

    デザイナーは引き渡し前にエンジニアと実現可能性を検討し、実装中の質問に答えます。構築するのが当社の開発者であれ、御社の開発者であれ同様です。

  • 実際のビルドに対するデザインQA

    構築された製品とデザインを比較し、余白、タイポグラフィ、状態、ブレークポイントを確認することで、リリース前に差異を修正します。

  • アクセシビリティを二度チェック

    コントラスト、フォーカス状態、文字サイズをFigmaで確認し、その後QAでキーボードとスクリーンリーダーを使ってブラウザで再度確認します。

  • ローンチ後に成長する余地

    新しい画面は同じコンポーネントとルールを再利用し、実際の使用から得たフィードバックが次回のビジュアル改良を導きます。

FAQ

よくあるご質問

デザインはAIによって生成されますか？

いいえ。AIは方向性の探求、バリエーションの作成、サンプルコンテンツの準備をより速く行うのを助けますが、ビジュアルの決定を下し、アクセシビリティと一貫性を確認し、すべての画面を承認するのはデザイナーです。AI生成の画像は、御社のブランド向けに承認された場合にのみ使用されます。

当社自身の開発者が構築する製品のデザインをお願いできますか？

はい。ビジュアルデザインは単独のエンゲージメントとして提供できます。開発とホスティングは、追加しない限り含まれません。御社の開発者には整理されたFigmaファイル、仕様、実装ノートをお渡しし、デザインQAを含めていただければ、そのビルドをデザインに対してレビューすることもできます。

既存の製品を再デザインしますか？

はい。ビジュアル層を段階的に刷新したり、主要なジャーニーを再デザインしたりでき、現在のユーザーにとって十分な馴染みやすさを保ちます。御社が共有してくださる分析とサポートのフィードバックは、何を最初に変更すべきかを判断するのに役立ち、既存のブランドガイドラインの範囲内で作業します。

引き渡しには何が含まれますか？

Figmaファイル、コンポーネント、変数へのアクセス、仕様と計測値、エクスポートされたアセット、インタラクション状態とアクセシビリティのノート、そして御社の開発者とのウォークスルー。実装中のサポートはスコープ内で合意します。

御社のチームが構築できるインターフェースを手に入れましょう

御社の製品とブランドについてお聞かせください。誰が構築するにせよ、必要な画面と状態のスコープをご提案します。

プロジェクトについて相談するデザインについて相談する