「ポートフォリオサイト、そろそろ更新しないといけない」と思いながら数ヶ月が過ぎていた。Figmaで作り始めると完璧主義が出て止まる、Webフローで作るには学習コストが高い——そんな言い訳を繰り返していた。
そこで「Google Stitch だけで設計してみよう」と決めた。作れるかどうかより、「どこまで使えるか」を確かめたかった。結論から言うと、予想より完成に近いUIが出た。でも、「だけで完結する」というにはまだ足りない部分もあった。全部正直に書く。
結論から言うと
Google Stitch だけを使ってポートフォリオサイトのUI設計はできる。特にトップページ・作品一覧・プロフィールページのビジュアル初稿は、十分使えるクオリティが出た。ただし「自分らしさ」を表現するためには、Stitch で方向性を出した後にFigmaや実装ツールで詳細を作り込む必要がある。「完全にStitchだけで完成する」のではなく「Stitchで8割の方向性を決め、残り2割を詰める」という使い方が現実的だった。
ポートフォリオサイトの要件整理
まず自分のポートフォリオサイトに必要なページと要件を整理した。ここをしっかりやることで、後のプロンプト作成が楽になる。
私のポートフォリオの前提：UIデザイナー・フリーランス、主にBtoBのSaaSと新規サービスのUI設計が専門、ターゲットは採用担当者とクライアント候補、強みは「設計の論理的思考」と「チームとの協力プロセス」。
作成するページは以下の4ページ。①トップページ（ファーストビュー＋自己紹介＋代表作品3点）、②作品一覧ページ（サムネイル＋タグ＋説明）、③プロフィールページ（経歴・スキル・使用ツール）、④お問い合わせページ（フォーム＋連絡手段）。
自分らしさをプロンプトに落とし込む
ポートフォリオサイトは、汎用的なUIより「その人らしさ」が重要だ。Stitch で自分らしいUIを引き出すには、ブランドパーソナリティをプロンプトに具体的に書く必要がある。私は以下の要素をプロンプトの冒頭に置くようにした。
- ターゲット読者：採用担当者・スタートアップのPM・デザイン思考に関心のあるエンジニア
- 印象ワード：論理的・温かみ・誠実・落ち着き
- カラーパレット：オフホワイト・チャコールグレー・アクセントにテラコッタ
- 参考トーン：Medium、Linear のような情報密度が高くスッキリしたデザイン
この前置きをすることで、出てきたUIが「どこかで見たことある汎用デザイン」から「自分のサイトっぽい何か」に近づいた。
各ページの制作記録
トップページは最初のプロンプトから比較的良いUIが出た。ファーストビューにキャッチコピー・作品サムネイル・CTAボタン、下に代表作品3点のカード——という構成は、ほぼ意図通りだった。修正したのは「作品カードのホバーエフェクトの表現」と「フォントの選択（指定したカテゴリのフォントを具体的に追加指示）」の2点。
作品一覧ページは2〜3回の試行で良い結果が出た。グリッドレイアウトで並ぶ作品カード、タグでのフィルター機能、各カードのホバー時にプロジェクト概要が表示されるデザイン——これらを明示的にプロンプトに書いたことで、想定に近いUIになった。
プロフィールページは意外と苦戦した。「その人らしさ」を出すために個人的な情報（経歴・思い・写真の雰囲気）が必要だが、それをプロンプトに書き切れなかったため、Stitch が出したUIが「どこのポートフォリオにもありそう」な汎用的なものになった。ここはFigmaで作り直した。
お問い合わせページは一番シンプルで、最初の生成でほぼ完成した。名前・メール・件名・本文の入力フォーム、送信ボタン、SNSリンクの配置——これは定型構造が決まっているため Stitch が得意な領域だった。
Stitch で「うまくいった」こととその理由
4ページを通じて、Google Stitch が特に効果的だったポイントを整理する。
レイアウト・構造の初稿
「どこに何を置くか」というレイアウト構造は、Stitch が最も得意とする領域だった。ナビゲーション・ヒーローセクション・コンテンツ・フッターという基本構造を適切に整理してくれる。ゼロからFigmaで配置を考えるより、Stitch で3パターン出してから選ぶ方が圧倒的に早かった。
特に良かったのは、スクロールの「流れ」を意識したレイアウトが出てくることだ。ファーストビューで引きつけ→実績で信頼→CTAで行動を促す、というユーザーの目の流れを意識した配置が、自然に組まれていた。
カラーとタイポグラフィの組み合わせ
カラーパレットを指定したとき、Stitch の配色センスは信頼できる水準だった。「オフホワイト＋チャコールグレー＋テラコッタアクセント」という指定に対して、アクセントカラーの使い方が「多すぎず少なすぎず」の適切な比率で配置されていた。これをゼロから決めようとすると、色の比率で悩む時間が必要になる。Stitch がたたき台を出してくれることで、「調整するだけ」の状態から始められた。
「こんな見せ方もあるか」という発見
Stitch を使う最大のメリットの一つは「自分では思いつかなかった表現」と出会えることだ。作品一覧ページで、プロジェクトカードにスクロール時に展開する詳細パネルを提案してきたUIが出た。自分で設計したら普通のグリッドにしていたと思うが、このインタラクションの提案は参考にして採用した。Stitch はアイデアの「発散ツール」としても優秀だ。
Stitch で「うまくいかなかった」こと
正直に言うと、「だけで完結する」ためにはまだ超えられない壁があった。
- 個人的なストーリーの表現：「なぜデザイナーになったか」「どんな思いで仕事しているか」のようなナラティブな要素は、Stitch には入力できない。プロフィールページが汎用的になったのはこれが原因だった
- 実際の作品ビジュアルとの整合：Stitch が出すモックには仮のビジュアルが入るが、自分の実際の作品に差し替えたときにレイアウトが崩れることがあった
- アニメーション・インタラクションの表現：スクロールアニメーションやホバーエフェクトは静的なビジュアルでしか出せないため、実装した際の「動き」の確認は別途必要
Stitch の後に必要だった作業
Stitch で出したUIをそのまま実装に渡せるかというと、今回の場合は渡せなかった。Figmaでのコンポーネント化、実際の作品画像のはめ込みと調整、フォントの確認とライセンス確認、レスポンシブ対応の詳細詰め——これらは結局手作業が必要だった。
ただし、Stitch がなければこれらの作業量はもっと多かっただろうという確信がある。「方向性が決まった状態でFigmaに入る」のと「ゼロからFigmaで考える」のは、精神的なコストが全然違う。Stitch はその「方向性を決めるコスト」を大きく下げてくれた。
「自分らしさ」はどこから来るか
今回の実験を通じて改めて感じたのは、「自分らしいポートフォリオ」は、レイアウトやカラーよりも「言葉と実績」から来るということだ。Stitch がどれだけ良いビジュアルを出しても、そこに自分のテキスト・自分の作品・自分の言葉が入って初めて「自分のサイト」になる。Stitch はフレームを作ってくれるが、中身は自分で埋める必要がある。当たり前のことだが、使ってみて改めて納得した。
よくある質問（FAQ）
Q1. デザイン経験がない人でも Google Stitch でポートフォリオサイトを作れますか？
A. ビジュアルの初稿を作ることはできます。ただし、出てきたUIを評価して選択する眼が必要なため、完全にゼロ経験では難しい部分もあります。「このUIが良い理由」を説明できる基礎知識と組み合わせることで、実用的なポートフォリオを作れます。
Q2. ポートフォリオサイトのプロンプトで特に重要な要素は何ですか？
A. 「誰に見せるか（ターゲット）」と「どんな印象を与えたいか（ブランドパーソナリティ）」を最初に明確にすることが最重要でした。これを書くだけで、出てくるUIの方向性が大きく変わります。カラーや雰囲気の指定よりも、「誰のためのサイトか」の記述が Stitch への一番効くプロンプトです。
Q3. Stitch で作ったUIを実際のWebサイトに実装する方法は？
A. いくつかの方法があります。①コード書き出し機能でHTMLを取得してエンジニアに渡す、②FigmaにエクスポートしてFigma上で詳細設計する、③Webflow・Studio などのノーコードツールで再制作する。今回の私の場合は、Stitch→Figma→エンジニア実装というフローを取りました。
Q4. ポートフォリオサイトでよく見るアニメーションは Stitch で作れますか？
A. 静的なビジュアルとしてのデザインは作れますが、アニメーション自体は Stitch では実装できません。スクロールアニメーション・ホバーエフェクト・ページ遷移エフェクトなどは、実装フェーズでCSSや JSで追加する必要があります。
Q5. Stitch でポートフォリオを作るのに何時間くらいかかりましたか？
A. 今回は4ページの初稿を出すまでに約3〜4時間でした。各ページ3〜5パターン生成して選ぶ時間、プロンプトの試行錯誤、方向性の絞り込みを含めてこの時間です。Figmaでゼロから設計すれば同じ段階まで2〜3日かかっていたと思います。
Q6. 無料で Stitch を使ってポートフォリオサイトのUIを作れますか？
A. Google アカウントがあれば利用できます。無料枠の範囲内でポートフォリオサイトのUIを設計することは可能でした。生成回数の制限がある場合があるため、一度に大量生成するのではなく、各ページを丁寧に作る方針の方が無料枠内に収まりやすいです。【要確認：最新の無料枠制限】
まとめ——Stitch はポートフォリオ制作の「スターター」として使える
Google Stitch だけでポートフォリオサイトを作る実験を通じて、「スターターとして優秀、完成品としてはまだ不十分」という結論に至った。
白紙から始めるときの最初の一歩を踏み出しやすくしてくれること、複数の方向性を素早く比較できること、これらは確かな価値だ。一方で、「自分らしさ」「実際のコンテンツとの整合」「インタラクション設計」には、Stitch だけでは届かない部分がある。
ポートフォリオサイトをずっと作れずにいる人に伝えたいのは、「完璧な設計を考えてから始めようとするから止まる」ということだ。Stitch でとりあえず最初の一画面を作ってみる。それだけで、その後の作業が全然違う速度で進む。完成より「始める」が先だ。
