実際にStitchを使ってポートフォリオを作ってみた
試しに自分のポートフォリオサイトをStitchで生成してみました。以下のプロンプトを日本語で入力。
「UIUXデザイナーTomoki Shintaniのバックが白ベースのミニマルなポートフォリオサイトを作成。レスポンシブ対応で、ヘッダーを上部に固定。カード形式に作品を表示して、ヒーロー部分のフォーカスする作品はトップに大きく表示。その他カード画像はランダムに配置」
数分後、レスポンシブ対応したポートフォリオのデザインが完成しました。
少し凡庸ではありますが、おおむね指示どおりのデザインが生成されました。ここからさらに指示を追加し、微調整することで精度を高められます。目的の「ブランドらしさ」を生成するには、初期段階から上位レイヤーの全体構成を丁寧なプロンプトで書く必要があります。
続けて要素を追加してみました。レスポンシブ対応やライト/ダークモードはデフォルトで生成されます。
BETA版かつ簡易的なプロンプトのみでは、どうしてもテンプレート感のある仕上がりになることは否めません。そのため、意図どおりのデザインを引き出すには、プロンプトの工夫や試行錯誤が不可欠です。言ってしまえば、Stitchは「50〜70点の叩き台を一瞬で提示してくれるツール」。残りの部分をどのように磨き、文脈にフィットさせていくか。その部分は、やはり私たちデザイナーの腕の見せどころです。
実務における利点と課題
Stitchの最大の価値は、単なるスピードアップだけではなく、デザインとコード生成を同じプロセスに統合できること。デザイナーとエンジニアが初期段階から共通のアウトプットを前に議論でき、仕様の伝達ロスや実装待ちのタイムラグを減らすことが可能です。
- 初稿の高速化：UIの初期ドラフトが数分で出せるため、即座にレビューや議論に移れる。
- アイデアの多様化：複数パターンを短時間で提示できるので、A/Bテストや検証プロセスの効率化につながる。
- デザインと実装の橋渡し：コード出力によって、デザインから実装にかかる時間を短縮できる。
- 小規模チームでの即戦力：デザイナー不在のチームでも、最低限のUIを生成してMVP開発を回せる。
これは単なる効率化ではなく、コミュニケーション構造のアップデートと言えるかもしれません。結果として、細部のやりとりに時間を費やすのではなく、「ユーザー体験として何を優先するか」といった本質的な議論に集中できる。Stitchはワークフローそのものを刷新し、プロダクト開発の質とスピードを同時に高めてくれるポテンシャルを秘めています。
とはいえ実務での利用を考えると、もちろん課題も見えてきます。Stitchに触れて感じた懸念点を、大きく4つに整理しました。
- 品質のばらつき：生成コードはクリーン寄りであるが、冗長なネストや不要なスタイルが混ざることも。CIでLintや型チェックを必須化しないと危険。
- アクセシビリティ不足：ARIA属性やキーボード操作への配慮が抜けるケースが多い。プロンプトに「WCAG AA準拠」と書き添えるなど意識的に工夫が必要。
- 独自性の希薄化：AIが提案するUIは独自性よりも安全で普遍的な解を出す傾向にあり、“テンプレ”感が強い。ブランド固有のデザイントークンを事前に渡す運用が大切で軌道修正も必要。
- セキュリティ・ライセンス問題：生成物における著作権の扱いはまだグレー。とくに企業利用では法務確認が不可欠。
WCAG AAやARIA対応といったアクセシビリティ要件をプロンプトに明記することで、生成されるコードの品質がある程度向上するケースは確認されていますし、レビューの中でも「工夫次第で基準に近づける」傾向は見られます。
ただし、これはあくまで「補助」に過ぎず、プロンプトで指示したからと言って自動的に担保されるわけではありません。最終的には必ずレビューやテストをする必要があります。言い換えれば、Stitchは「すぐ本番投入できる万能な存在」ではなく、「より良いスタートのための頼れる助手」と捉えるのが妥当でしょう。
