サービス一覧へ

04Design Engineering

コンポーネント構造、命名、デザイントークン、状態、レスポンシブ規則をそろえ、デザイナーとエンジニアの共通言語を作ります。実装レビューやデザインQAまで関与します。

標準的な期間
1〜4か月
料金の目安
60万円〜

Figma上では成立していたデザインが、実装されると崩れる。これはどちらかの不注意ではなく、両者が別々の言葉で作っていることが原因です。

コンポーネント構造、命名、デザイントークン、状態、レスポンシブ規則をそろえ、デザインと実装が同じ単位で話せる状態を作ります。実装レビューやデザインQAまで関与し、公開時点の品質に責任を持ちます。

こういう状況の方に向いています

  • デザイン通りに実装されず、毎回手戻りが発生している
  • コンポーネントが増えすぎて、どれを使うべきか分からない
  • デザインシステムを作りたいが、運用まで持たせられるか不安
  • プロトタイプを早く動かして検証したい

対応範囲

  • フロントエンド実装
  • プロトタイプ開発
  • デザインシステム構築
  • コンポーネント設計
  • デザインとコードの連携
  • 品質・パフォーマンス改善

お渡しするもの

  • 実装済みのフロントエンドコード
  • コンポーネントライブラリとデザイントークン
  • 命名規則・状態・レスポンシブ規則のドキュメント
  • デザインQAの結果と修正記録
  • パフォーマンス・アクセシビリティの計測結果

進め方

  1. STEP 01

    現状の突き合わせ

    Figmaと実装コードの差分を洗い出します。どこがずれているかではなく、なぜずれるのかを特定します。

  2. STEP 02

    共通言語の定義

    デザイントークン、コンポーネントの粒度、命名、状態の持ち方を決めます。両者が同じ単位で会話できるようにします。

  3. STEP 03

    実装

    定義した規則に沿って実装します。デザイナーが実装物をレビューできる状態を保ちながら進めます。

  4. STEP 04

    デザインQAと計測

    公開前にデザインQAを行い、表示崩れ、状態の抜け、アクセシビリティ、パフォーマンスを確認します。

期間と体制

標準的な期間
1〜4か月(実装範囲と既存コードの状態によって前後します)
体制
デザインエンジニア 1〜2 名。デザインを含む場合はUI/UXデザイナーが並走します。

料金の目安

  • プロトタイプ開発想定する規模3〜6週間。検証用に動くものを作る範囲
    60万円〜
  • フロントエンド実装想定する規模1〜4か月。画面実装とデザインQAまで
    120万円〜
  • デザインシステム構築想定する規模2〜4か月。トークン設計からコンポーネント整備・運用ルールまで
    150万円〜

上記は目安であり、確定金額は実装範囲・既存コードの状態・体制を確認したうえでお見積もりします。

サーバーサイド開発、インフラ構築は範囲外です。連携先として整理します。

このサービスについてよくある質問

よくある質問をすべて見る

関連するサービス