手描きメモが秒でUIになるStitch、デザイン工数を90%削減する方法

Googleの新ツールStitchは、紙ナプキンの落書きを本番レベルのUIに自動変換。デザインカンプ制作が1時間→5分に。初心者でも即戦力のデザイン案件が可能になる仕組みと実践手順を解説します。

紙に書いた四角と矢印が、5秒後にはクリック可能なプロトタイプになる。そんなツールがGoogleから登場した。名前は「Stitch」。デザイナーではない人がデザイン案件を受けられる時代が来た。

従来、デザインカンプの制作には専門スキルと時間が必要だった。Figmaで1画面作るのに慣れた人でも1時間、初心者なら半日かかる。それが手描きのラフを撮影するだけで自動生成されるなら、工数は1/10以下になる。

この記事では、Stitchの仕組みと、デザイン案件の受注から納品までの効率化手順を具体的に示す。あなたが今日からデザイン案件に手を出せる理由がわかる。

Stitchが「デザインできない人」を即戦力に変える理由

Stitchの本質は、アイデアをコードにする速度を100倍にすることだ。従来の制作フローでは、手描きのラフ→デザインツールでの清書→コード実装という3段階が必要だった。Stitchはこれを1段階に圧縮する。

具体的には以下の処理を自動化する：

つまり、デザインツールの操作スキルがゼロでも、アイデアを紙に描ける人なら誰でもUIを生成できる。クライアントとの打ち合わせ中に描いたメモが、その場でプロトタイプになる。

Stitchは現在Google Labs発のプロジェクトで、早期アクセスの申請が可能です。完全無料で利用でき、生成されたコードは商用利用も自由です。

実際の案件でどう時間が削減されるか、LP制作を例に比較する。

クライアントからの要望ヒアリング（1時間）→ワイヤーフレーム作成（2時間）→Figmaでデザインカンプ制作（3時間）→クライアント確認・修正（2時間）。このフローでは、デザインツールの操作に時間の大半が消える。

打ち合わせ中に紙にラフを描く（10分）→Stitchで撮影・生成（1分）→その場でクライアント確認（10分）→修正を紙に描いて再生成（5分×3回）。生成されたHTMLをそのままブラウザで確認できるため、イメージのズレが起きない。

ポイント

修正のたびにデザインツールを開く必要がないため、クライアントとのやり取りが圧倒的に速くなります。打ち合わせの場で完成形を見せられるのが最大の強みです。

デザイン未経験でもStitchを使えば即戦力になる。以下の手順で最初の案件を取れる。

step
1早期アクセスを申請する
Google Labsの公式サイトから「Stitch」で検索し、ウェイトリストに登録。通常1〜2週間で利用可能になる。現在は無料で全機能が使える。

step
2サンプルを3つ作って実績にする
LP、問い合わせフォーム、ダッシュボードの3種類を手描きで作り、Stitchで生成。これをポートフォリオとしてクラウドソーシングに掲載する。制作時間は3つ合わせて30分程度。

step
3「ラフからUI制作します」で案件を受注
クラウドワークスやランサーズで「LP制作」「UI設計」の案件を探し、「お客様のアイデアをその場でプロトタイプにします」と提案。従来より短納期・低価格で差別化できる。

初回案件は5,000円〜1万円の小さな規模から始めるとよい。実績ができれば、3万円〜5万円の案件に移行できる。

すべてのデザイン案件がStitch向きではない。以下の4ジャンルが特に効率がよい。

新規サービスの初期プロトタイプは、スピード重視で細部の作り込みが不要。手描きのアイデアをすぐに動くUIにできるStitchは最適だ。単価は5万円〜15万円。

企業の業務効率化ツールは、見た目より使いやすさが優先される。Stitchで生成したシンプルなUIが好まれる。継続案件になりやすく、月3万円〜の保守契約も見込める。

デザイナーに渡す前のワイヤーフレームだけを納品する案件。Stitchなら10分で完成するため、時給換算で3万円〜5万円になる。

クライアントの既存サイトを見て、改善案を手描きで示し、Stitchで生成して提案。提案の段階で動くプロトタイプを見せられるため、受注率が上がる。提案料として1万円〜3万円を設定できる。

注意

細かいデザインの作り込みが必要な案件（ブランドサイト、ECサイトのトップページなど）は、Stitchだけでは完結しません。その場合は「初期プロトタイプのみStitchで作成」と明記して受注しましょう。

Stitchが出力するHTMLとCSSは、そのまま本番環境で使えるレベルではない。ただし、以下の用途なら修正なしで納品可能だ。

本番環境に実装する場合は、エンジニアに渡してコードを整える必要がある。あなたがやるのは「アイデアをUIにする」部分だけ。コーディングは外注すればよい。

実際、Stitchの生成コードを整形する案件も発生している。「Stitch出力のコード最適化」で検索すると、1件3,000円〜5,000円の案件が見つかる。つまり、Stitchでプロトタイプを作る人と、それを実装する人の分業が成立している。

Stitchを使ってデザイン案件で利益を出すまでの最短ルートを示す。

今日やること：Google LabsでStitchのウェイトリストに登録する。スマホのメモ帳に「LP・フォーム・ダッシュボード」と書いておく。

利用開始後すぐ：紙に3種類のUIを描いてStitchで生成。スクリーンショットを撮り、ポートフォリオページを作る（noteやはてなブログで十分）。

1週間以内：クラウドワークスで「ワイヤーフレーム制作」「プロトタイプ作成」の案件を10件提案する。提案文に「手描きのアイデアを即座にUIにできます」と書く。

初回受注後：納品時に「次回も同じ速度で対応可能です」と伝え、リピート率を上げる。3件実績ができたら単価を1.5倍に引き上げる。

デザインスキルがなくても、アイデアを形にする速度があれば案件は取れる。Stitchはその速度を誰にでも与える。あとは手を動かすかどうかだけだ。