01結果サマリ
差分を数値で判定します。指標は4つ——
- 構造差分
- 文字のにじみ(描画エンジン差)を除いた、見た目の差の総量
- レイアウト・配置のズレ
- 写真の縮小処理差など既知の許容差も除いた、本当のズレ。合格基準 0.1%未満
- 位置ズレ検出数
- 全要素を1つずつ照合した自動監査。基準は 0件
- 総合判定
- 基準をすべて満たしたときだけ「合格」
0.00%
レイアウトのズレ、0.00%。
測って、証明して、納品します。
直近案件の実測値(PC 1440px・許容差を除いたレイアウト/配置のズレ)。SP 0.01%、位置ズレ検出 0件、総合判定 合格。
Figmaデザインをピクセル単位で自動検証しながら実装する、コーディングサービスです。
「なんか違う」の確認作業、
だれの仕事でもないのに、いちばん時間を食う。
コーディングを外注すると、納品物をデザインと見比べる検収作業が発生します。1ピクセルのズレを目視で探し、スクリーンショットに赤丸をつけて差し戻す——そのやりとりが数往復。デザイナーもディレクターも、本来の仕事ではないはずです。
Azenoは、その見比べ作業を機械にやらせます。納品時にはFigmaと実装をピクセル単位で自動比較した差分実測レポートが必ず付くので、検収は「レポートを眺める」だけになります。ズレていないことを、感想ではなく数値で確認できます。
差分実測レポートとは
Figmaデザインの原寸画像と、実装をブラウザで実写したスクリーンショットをピクセル単位で重ね合わせ、その差を数値化した検査成績書です。あわせて、公開後の表示速度も同じレポートで計測します。納品物に必ず添付します。レポートは次の5部で構成されます。
02デザインと実装の並置比較
Figmaデザイン(左)と実装の実写(右)をPC・スマホの両方で並べ、目でも確認できるようにします。
構成イメージ。実物は案件のスクリーンショットを含むため、無料試作でご確認いただけます。
03差分ヒートマップ
どこがどれだけ違うかを、光る箇所=差分ピクセルとして全ページ分可視化します。「どこかは分からないが0.4%違う」ではなく、違う場所そのものが見えます。
構成イメージ。赤点=検出された差分ピクセル。
04合格基準
レポートは「作りました」の報告書ではなく検査成績書です。基準を満たさない限り、納品しません。
- レイアウト・配置のズレ
- 0.1%未満
- 位置ズレ検出数
- 0件
- 総合判定
- 合格のみ納品
05速度計測
公開後のページを、モバイル相当の回線と端末で計測します。見た目の再現度だけでなく、速さも同じ一枚で数値にしてお渡しします。
- LCP
- 最大要素が表示されるまで（参考値 2.5秒以内）
- CLS
- 読み込み中に画面がずれる量（参考値 0.1未満）
- TBT
- 操作を受け付けない時間の合計
- FCP / Speed Index
- 最初の描画と、画面が埋まるまでの速さ
速度は計測結果の提示です。合格基準ではありません。画像素材やフォントの指定によって変わるため、参考値を超えた項目には改善の方向を添えてお渡しします。
人力のコーディング代行との違い
表は横にスクロールできます。
| Azeno | 一般的なコーディング代行 | |
|---|---|---|
| 納期(TOP 1ページ) | 最短48時間 | 5〜10営業日 |
| 品質の確認方法 | 実測レポート添付 | 目視チェック |
| デザイン一致の保証 | 差分◯%を数値で明記 | 「忠実に再現します」 |
| 価格(TOP 1ページ) | 15,000円(モニター価格) | 10,000〜48,000円 |
※ 代行各社の納期・価格は2026年8月時点の公開情報より。
進め方
-
1.0
Figmaを共有
FigmaファイルのURL(閲覧権限)を送っていただくだけ。入稿の面倒な準備は不要です。
-
2.0
事前診断のご連絡
データを自動解析し、確認点(フォント・SPデザイン・動きの定義など)と正式なお見積もりをお送りします。
-
3.0
実装と自動検証
実装 → 差分実測 → 修正のループを、差分が収束するまで自動で回します。
-
4.0
レポート付きで納品
差分実測レポートと一式を納品。検収前の修正は2回まで無償です。
料金
単発(モニター価格)
15,000円
TOPページ1枚(PC+SPデザインあり)・実測レポート付き・最短48時間
- 下層ページ追加 +5,000円/枚
- WordPressテーマ化 +20,000円〜
- SPデザイン設計込み +5,000円/枚
- スクロールアニメーション +5,000円
モニター価格は実績づくりのための期間限定です。受付枠に達した時点で通常価格に戻ります。
制作会社さま向け 月額ページ枠
お見積もり
月◯ページまでの継続枠。単価・優先納期・入稿規約を個別に設計します。繁忙期のオーバーフロー分だけの利用も歓迎です。
- 全納品に実測レポート添付
- Figmaデータ入稿専門
- 請負契約・数値検収基準
よくある質問
- どんなデザインデータに対応していますか?
- Figma専門です。Figmaに絞ることで、事前診断から差分実測までの精度を最大化しています。Photoshop・XDはご相談ください。
- 修正はどこまで対応してもらえますか?
- 実装の不具合(デザインとの差分)は検収前2回まで無償です。デザイン自体の変更は追加お見積もりとなります。差分が数値で見えるので、どちらに当たるかで揉めることがありません。
- デザインどおりにならないケースはありますか?
- ライセンス上Web配信できないフォントが使われている場合など、事前診断の段階でお伝えします。着手後に発覚してもめる、という事態を仕組みで防いでいます。
- 「差分0.1%未満」の保証はどこまで有効ですか?
- 数値保証は、契約時に確定したデザイン指定幅(例: PC 1440px / SP 390px)のChrome表示に対して行います。Safari・Edgeは表示崩れがないことを確認し、デザインが存在しない中間幅(タブレット等)もレイアウト破綻なしを保証します。文字のにじみ(描画エンジン差)や写真の再圧縮差は指標から分離して計測しており、レポート上で内訳をご確認いただけます。
- 本当に無料で試せますか?
- はい。品質を確認いただくため、初回1ページ(実測レポート付き)を無償で制作します。合わなければそれきりで構いません。
まず、1ページ。無料で。
FigmaのURLを送っていただければ、実測レポート付きで1ページ試作します。
品質はレポートの数字で判断してください。
記入欄を入れた状態でメーラーが開きます。うまく開かない場合は hoshihiro0216@gmail.com 宛にFigmaのURLをお送りください。
システムの開発・月額保守については トップページ をご覧ください。
運営者情報
- 屋号
- Azeno(アゼノ)
- 代表
- 星野 紘輝
- 所在地
- 愛知県名古屋市(詳細はお取引時に開示いたします)
- 事業内容
- Figmaデザインのコーディング(HTML/CSS・WordPress)・実装検証
- 適格請求書
- インボイス登録事業者