「Google Stitch でカレンダーUIを作れますか？」
このツールを使い始めた人から、たまにこう聞かれる。答えは「作れる。ただし想定より難しい」だ。
カレンダーやスケジュール表示のUIは、一見シンプルに見えて実は設計の難所がいくつも潜んでいる。日付のグリッド、曜日ラベル、月の切り替え、今日のハイライト、イベントの表示位置、重なるイベントの処理——これらすべてを「プロンプトで伝える」ことの難しさを、作ってみて初めて実感した。
この記事では、Google Stitch でカレンダー・スケジュールUIを設計した記録を書く。できること、詰まった点、そして突破口になったプロンプトの書き方まで、正直に紹介する。
結論から言うと
Google Stitch は2026年4月時点で、カレンダー・スケジュールUIの静的デザインを生成できる。ただし、「日付データが実際に入った状態」のリアルなカレンダーを一発で生成するのは難しく、プロンプトを細かく分けて段階的に作るアプローチが有効だ。
一言で言えば、「全体像を一気に出そうとせず、月グリッド → イベント表示 → ナビゲーションの順で積み上げる」。
カレンダーUIの主な表示パターン
月表示（Month View）
月表示とは、1ヶ月のカレンダーグリッドを表示するUIのことです。7列（日〜土）×4〜6行のグリッドに日付が並び、各セルにイベントを表示する形式だ。Google カレンダーの「月」表示が典型例だ。
Google Stitch で月表示を生成するとき、「2026年4月のカレンダー。月表示。7列6行のグリッド。日曜始まり。今日（4月14日）をハイライト。各日付セルに最大2件のイベント名が表示されている」と具体的に指定することで、それらしいデザインが生成できた。
ただし実際の日付（1日が何曜日か）を正確に反映させるのは難しい。Stitch は「それっぽい日付の並び」を生成するが、実際の曜日配置と一致しないことが多い。「2026年4月のカレンダー」と指定しても、1日が水曜日であることを正確に再現してくれる保証はない。プロトタイプ目的なら問題ないが、実際の日付を使った確認には手動で修正が必要だ。
週表示（Week View）
週表示とは、7日分の時間軸（縦軸：0時〜23時、横軸：月〜日）を表示するUIのことです。会議や予約など、時間単位でのスケジュール管理に使われる。Google カレンダーの「週」表示やスケジューラーアプリで広く見られる。
週表示は月表示より複雑だ。縦軸に時間、横軸に曜日という2次元グリッドになり、イベントが時間帯に応じたブロックで表示される。Stitch でプロンプトを書くとき、「週表示のカレンダー。縦軸が時間（8時〜20時）、横軸が月〜日。月曜と水曜にそれぞれイベントブロックが2件表示されている」と書くと、おおよそのデザインが生成できた。
ただしイベントの「重なり表示」（同じ時間帯に複数イベントがある場合の横並び表示）は、プロンプトで表現するのが難しく、何度か試行錯誤が必要だった。
タイムライン型・リスト型
イベントを時系列で縦に並べるリスト表示や、横軸を時間にしたガントチャート風のタイムライン表示も、スケジュールUIの選択肢だ。
リスト型は最もシンプルで、「今後の予定一覧」「イベント履歴」などに使われる。Stitch での生成も比較的容易で、「今後のイベント一覧。日付・時間・タイトル・参加者数が表示されたリストUI」と書けば、クリーンなリスト表示が生成される。
ガントチャート風のタイムライン型は、プロジェクト管理ツール（Asana、Jira等）で見られる横軸時間・縦軸タスクの表示形式だ。Stitch でも「プロジェクトのガントチャート。横軸が日付（2週間分）、縦軸がタスク名。各タスクに開始日・終了日を示すバーが表示されている」と書くと生成できるが、バーの位置精度は完璧ではない。参考デザインとして活用し、細部は手直しが前提だ。
詰まった点1：「今日」のハイライトが機能しない
静止画であることの限界
カレンダーUIで重要なのが「今日」の視覚的なハイライトだ。ユーザーが開いたとき、まず今日の日付がどこにあるかを一瞬でわかるようにする。
Stitch でプロンプトに「今日（4月14日）を丸囲みでハイライト」と書けば、その日付をハイライトした静的なデザインは生成できる。ただしこれはあくまで「4月14日がハイライトされたデザイン」であり、実装では「実行時の日付を動的に取得してハイライトする」ロジックが必要になる。
設計段階では「今日のセルはアクセントカラーの丸背景」という仕様をデザインに注釈として書き添え、開発者に動的処理が必要であることを明示しておく。この工程を怠ると、実装後に「今日がハイライトされない」というバグが起きやすい。
「先月・来月」の日付表示の扱い
月表示カレンダーの最初の行と最後の行には、前月・翌月の日付が入ることがある（例：4月のカレンダーで、最初の行に3月の30・31日が表示される）。この「グレーアウトされた隣月の日付」の扱いをプロンプトに含めると、より実際に近いデザインが生成できた。
「グリッドの空きセルは前月・翌月の日付をグレーテキストで表示」と書き足すことで、実際のカレンダーアプリに近い見た目になった。
詰まった点2：イベントの「重なり」と「溢れ」の表現
月表示で1日に複数イベントがある場合
月表示の各日付セルには表示できるイベント数に限界がある。3件以上のイベントがある日は「他2件」のような省略表示（+Nリンク）を使うのが一般的だ。
Stitch でこのパターンを生成するとき、「4月20日のセルに3件のイベントがあり、2件が表示されて『他1件』のリンクで残りが省略されている」と具体的に指定すると意図どおりのデザインが生成できた。この省略パターンを含めたデザインを作るかどうかで、プロトタイプのリアル感が大きく変わる。
週表示での同時間帯イベントの重なり
週表示で同じ時間帯に複数イベントがある場合、イベントブロックを横並びに縮めて表示する処理が必要だ。Stitch でこのパターンを生成するのは、月表示の「他N件」より難しかった。
最終的に「月曜13時〜14時の時間帯に2件のイベントが重なり、横2列で表示されている」というプロンプトで、おおよそのレイアウトが生成できた。ただし列の幅比率や境界線の処理は手修正が必要だった。プロトタイプとして「重なるケースがあること」を示す用途なら十分だが、ピクセルパーフェクトな出力は期待しない方が良い。
突破口になったプロンプトの書き方
「既存のカレンダーサービスを参照として指定する」
カレンダーUIのプロンプト精度を上げるのに最も効果的だったのが、「参照するUIを明示する」方法だ。
「Google カレンダーの月表示に似たスタイルで」「Notion カレンダービューのようなシンプルなデザインで」と書き足すと、Stitch は参照先のUIスタイルを反映したデザインを生成する傾向があった。
参照指定なしで「カレンダーUI」と書くと、ツールによって様々なスタイルのカレンダーが生成されて毎回違う見た目になる。参照元を指定することで、チーム内でのデザイン方向性の共有もしやすくなった。
「空の状態」と「データが入った状態」を両方生成する
カレンダーUIの設計では、「イベントが何もない月」と「イベントが多い月」の両方のデザインを確認することが重要だ。
まず「空のカレンダーグリッド（イベントなし）」を生成してレイアウトを確認し、次に「イベントが複数入った状態」を生成してデータが入ったときの見え方を検証する。この2段階のアプローチをとることで、実際の使用シーンに近いデザイン確認ができる。
カレンダーUIを実装に繋げるときの注意点
Stitch のデザインはあくまで「見た目の参照」
Stitch が生成するカレンダーUIのHTMLは、実際に動作するカレンダーコンポーネントではない。動作するカレンダーを実装するには、FullCalendar（JavaScriptライブラリ）やReact Big Calendar、Flatpickrといった既存のカレンダーライブラリを活用する方が現実的だ。
Stitch のデザインはこれらライブラリのカスタマイズ方針（色・フォント・サイズ・ボーダーなど）の参照として使うのが最も効率的な活用方法だ。
FAQ
Q1. Google Stitch でカレンダーUIを生成するとき、実際の日付（2026年4月のカレンダー）を正確に反映できますか？
厳密には難しいです。Stitch は「カレンダーらしい見た目」を生成しますが、特定の月の正確な曜日配置（2026年4月1日が水曜日である、など）を100%正確に反映するとは限りません。プロトタイプ確認用途なら十分ですが、実際の日付を使ったデモが必要な場合は手修正が必要です。
Q2. カレンダーUIの国際化（日本語表示や週の始まりを月曜日にする）は指定できますか？
はい、プロンプトで指定できます。「曜日ラベルを日本語で表示（日・月・火・水・木・金・土）」「月曜日始まり」と書くことで、それに沿ったデザインが生成されます。ただし生成精度に若干のばらつきがあるため、確認後に修正プロンプトで微調整する工程が必要な場合があります。
Q3. カレンダーUIとリスト表示UIはどう使い分けるべきですか？
「いつ」を視覚的に把握したい場合（空き時間の確認・月全体の密度確認）はカレンダーグリッドが向いています。「何が」を順番に確認したい場合（次の予定を探す・過去の履歴を見る）はリスト表示が適切です。多くのスケジュールアプリが「月表示・週表示・リスト表示」を切り替えられる設計にしているのは、利用目的によって最適な表示形式が異なるためです。Stitch で3種類の表示パターンをそれぞれ生成して並べて比較するアプローチが設計の検討に有効です。
Q4. Google Stitch でドラッグ＆ドロップによるイベント移動UIは作れますか？
静的なデザインとして「ドラッグ中のイベントが半透明になっている状態」や「ドロップ先のセルがハイライトされている状態」を生成することは可能です。ただし実際のドラッグ＆ドロップ動作はJavaScriptで実装する必要があります。デザイン上でインタラクションの各状態を個別に生成し、仕様書として開発者に渡すアプローチが現実的です。
Q5. 予約管理システム（美容院・クリニックなど）向けのスケジュールUIも Stitch で設計できますか？
はい。「美容院の予約管理画面。縦軸がスタッフ名（5名）、横軸が時間（10時〜20時）。各スタッフの担当時間帯にお客様名が表示されたブロックUI」というプロンプトで、業務システム向けのスケジュールUIも生成できます。ただし細部の精度はプロトタイプ水準で、ピクセルパーフェクトな出力には手修正が必要です。
Q6. カレンダーUIを Figma にエクスポートして編集することはできますか？
Google Stitch は Figma への直接エクスポート機能を持っています（2025年リリース時点から対応）。Stitch で生成したカレンダーデザインを Figma に取り込み、詳細の調整・コンポーネント化・チームでの共同編集が可能です。ただし Figma 側での再整理（レイヤー構造の整頓・コンポーネント化）は手作業で行う必要があります。
注意点・失敗しやすいポイント
1. カレンダーUIを一発で完成させようとして詰まる
「完全なカレンダーUI」を1プロンプトで生成しようとすると、指定が多すぎて意図が伝わらなくなる。グリッドだけ、イベントだけ、ナビゲーションだけ、と段階的に生成して組み合わせるアプローチが効率的だ。
2. 「今日のハイライト」が実装時に動的処理が必要なことを忘れない
Stitch で生成したデザインは特定の日付がハイライトされた静止画だ。実際の実装では「今日の日付を動的に取得する」処理が必要であることを、デザインに注釈として書き添えておくこと。
3. モバイルでの月表示はセルが小さくなりすぎる
月表示カレンダーをスマートフォン（375px幅）で表示すると、各日付セルが非常に小さくなりイベント名が読めなくなる。モバイルでは月表示を「月+リスト」のハイブリッド表示にするか、週表示に切り替える設計が一般的だ。Stitch でモバイル版のカレンダーUIを別途設計する工程を必ず入れることをお勧めする。
まとめ
Google Stitch でカレンダー・スケジュールUIを作れるか？——答えは「作れる。ただし段階的に」だ。
月表示・週表示・リスト型のいずれも、プロンプトを具体的に書けば静的なデザインとして生成できる。ただし「実際の日付データが入ったリアルなカレンダー」を一発で生成する精度は現時点では高くない。
「参照するサービスを明示する」「空の状態とデータが入った状態を両方生成する」「段階的に積み上げる」この3つの工夫で、カレンダーUIの設計効率は確実に上がった。
カレンダーUIは難しい。でもその「難しさと向き合うプロセス」を Stitch が加速してくれるのは本当だと思っている。
