この記事はMEKIKI X AIハッカソンもぐもぐ勉強会 Advent Calendar 2025の18日目の記事です。
NTTグループ社員で技術に興味がある方ならどなたでもご参加できます
とのことだったので、NTTデータ所属ではないのですがお邪魔させていただきます。
はじめに
タラモアナ！（挨拶）
NTTテクノクロスの山下です。普段は社内向けにGitHub Copilotのトライアルサービスや研修を立ち上げて運用・レクチャしたり、Claude Coodeに使われながら、社内に生成AI活用ノウハウを提供したりしています。今年を振り返ると、余暇時間はほとんどレイクラストを放浪していました...が、それは置いておくとして。
皆さんは自分のアイデアをアプリにしたことはありますか？
最近は生成AIですぐにアプリを出力できるので、試したことがある人・実践している人は多いと思います。
ですが、自分のアイデアをアプリにしようと思った時、 最初のデザインに困りませんか？
あるいは、 生成AIに出力させたデザインが微妙と思うものの、どうデザインを変えるディレクションをすればいいか分からないので、ついそのまま開発を続けてしまっていたりしませんか？
自分もしばらくそれに悩まされていましたが、最近になってGoogle Gemini 3(以下、Gemini)がリリースされ、最初からしっくり来るデザインでアプリが出力されるようになったと感じています。おかげで、最近は個人的に作るプロトタイプのUIデザインクオリティが上がって満足しています。
そこで、ふと思いました。
- これだけのデザイン力があるGeminiなら、色んなデザインアイデアで同じアプリを出力させることで、UIデザインの探索に使えるんじゃないの？
- デザインのアイデアもGeminiに出させたらいいんじゃないの？
というわけで、今回それを試してみたところ良い手応えが得られたので、やり方を紹介していきます。
Google Gemini
今回利用するGoogle Geminiは、Googleが提供する生成AIサービスの総称・生成AIモデルです。
2025/11/18にGemini 3が発表・リリースされ、モデルの性能向上やNano Banana Proによる画像生成のすごさが話題になったのは、記憶に新しいところと思います。
しかも、ほとんどの機能がフルに使えるGoogle AI Proプランは、最初の1ヶ月間無料で使えます。 実質無料！...いや、本当に無料だった。 試したことがない方は、ぜひ試すことをオススメしたいです。時期が悪いおじさんも、今なら満面の笑みでオススメしてくれることでしょう。
やり方
今回試した方法を紹介します。
今回の方法はGeminiのチャット画面で何度も思考モードへのリクエストを依頼します。そのため、無料版を利用されている場合は、同じことを試すに何日か必要になります。（思考モードへのリクエストは1日3回までなため）
同じ方法を試したい方はPro版の利用をオススメします。
1. Geminiに作りたいアプリのデザインアイデアを複数出力させる
まずは、自分の作りたいアプリのアイデアを文字起こししましょう。1行とか2行ぐらいのシンプルなものでも良いです。画面イメージやデータのイメージがあれば、それも書き出した方が良いでしょう。
その後でGeminiにそのアプリのデザイン案を複数考えてもらいます。
プロンプトにするとこんな感じです。
さて、以下のようなWebアプリケーションを作ろうと思っています。
デザインの方向性としてどのようなものが考えられると思いますか？10種類考えてください。
"""
[ここに作りたいアプリのアイデアを書く]
"""
今回の記事では「自分が今までアドカレで書いてきた記事をタイムライン表示できるアプリ」を例に挙げて試してみます。
プロンプトの例（クリックで見れます）
今回はこのようなプロンプトを使っています。
さて、以下のようなWebアプリケーションを作ろうと思っています。
デザインの方向性としてどのようなものが考えられると思いますか？10種類考えてください。
"""
「自分が今までアドカレで書いてきた記事」を年ごとに登録して、“アドカレ自分史”をタイムライン表示してくれるアプリを作りたいです。
このアプリの目的は「利用者がこれまで書いてきたアドカレ記事を振り返ることで、懐かしさや成長を感じられるようにし、今後のアドカレの執筆のモチベーションにしてもらうこと」です。
## 入力
- 年
- カレンダー名
- プラットフォーム
- 記事タイトル
- URL
- ざっくりカテゴリタグ（例：フロント / インフラ / 組み込み / マネジメント 等）
## 表示：
- タイムライン表示
- 年ごとのアドカレ記事をカード形式で見られる（2019, 2020, …）
- カテゴリ別の件数グラフ
- 自分がこれまでどんなカテゴリの記事を書いてきたか俯瞰してチェックできる
## データ
- テストデータは何も登録せず、アプリ上で利用者自身が登録できるようにしてください
- アカウントなどの作成は不要で利用できます
- データはサーバー上に永続化せずブラウザのlocalStorageに保存してください
- どんな表示になるか簡単に確認できるように、「本アプリ作成者のアドカレ自分史を見てみる」ボタンを追加し、クリックしたら以下のデータが登録されるようにしてください（適用するときは、上書きして良いか注意するダイアログを出してください）
| 年 | カレンダー名 | プラットフォーム | 記事タイトル | URL | ざっくりカテゴリタグ |
|------|-----------------------------------------------|-----------------------------|--------------------------------------------------------------------------------------------------------------|--------------------------------------------------------|-----------------------------------------|
| 2018 | NTTテクノクロス Advent Calendar 2018 | Qiita | Logstashのhttp_poller inputプラグインでWEB上のあらゆるデータを取得する（ついでにKibanaで可視化する） | https://qiita.com/j-yama/items/e155f848f93e01c28d1d | インフラ |
| 2018 | Elastic stack (Elasticsearch) Advent Calendar 2018 | Qiita | Reactivesearch v2でいい感じの検索SPAを30分ぐらいで作る | https://qiita.com/j-yama/items/546f6b7605c9e71d0454 | フロントエンド |
| 2019 | Elastic Stack (Elasticsearch)その2 Advent Calendar 2019 | Qiita | Kibana JSON inputを使って秒単位で格納されたデータを分単位に変換してグラフ表示する | https://qiita.com/j-yama/items/256eeb601d6cd3a07035 | データサイエンス |
| 2019 | Elastic Stack (Elasticsearch)その2 Advent Calendar 2019 | Qiita | Reactivesearch v3でいい感じの検索SPAを30分ぐらいで作る | https://qiita.com/j-yama/items/06a45ffe97282b9a9941 | フロントエンド |
| 2019 | Elastic Stack (Elasticsearch) Advent Calendar 2019 | Qiita | Kibana Vega Visualizationでウォーターフォールチャートを表示する | https://qiita.com/j-yama/items/cef20c0bdb7ba034fbbd | データサイエンス |
| 2020 | NTTテクノクロス Advent Calendar 2020 | Qiita | Elastic Agentを使ってみた ～Beatsを統合するこれからのElastic Stackのエージェント～ | https://qiita.com/j-yama/items/98542cbb458ca723c766 | インフラ |
| 2021 | NTTテクノクロス Advent Calendar 2021 | Qiita | Elasticsearch 7.16からの新機能！障害時のログ傾向を迅速に掴めるか？Categorize Text Aggregationを試してみた | https://qiita.com/j-yama/items/e7d2495b65d4e8dad7c7 | データサイエンス |
| 2022 | Elastic Stack (Elasticsearch) Advent Calendar 2022 | Qiita | Kibanaでドキュメントに格納されたURLを元に画像を表示する | https://qiita.com/j-yama/items/4f6d66a450fa2138fa65 | データサイエンス |
| 2024 | Elastic Stack (Elasticsearch) Advent Calendar 2024 | Qiita | Kibana 8.13以降でグラフの色をカスタマイズする方法 | https://qiita.com/j-yama/items/cd19474e42617f917e8d | データサイエンス |
"""
上のプロンプトでGeminiに依頼したところ、作ろうと思っていたアプリのテーマに合わせて、方向性ごとにデザインアイデアを出してくれました。
「アドカレ自分史」というコンセプト、とても素敵ですね！
エンジニアにとって技術記事は自分の成長の証であり、それを「懐かしむ」「モチベーションに変える」という目的は非常に共感できます。
いただいた要件（年単位のカード表示、カテゴリグラフ、localStorage利用）を踏まえつつ、**「振り返ったときにどう感じるか」**という体験（UX）の切り口を変えた10種類のデザイン方向性を提案します。
---
### A. エンジニア心をくすぐる「Tech / Geek」系
**1. ターミナル・コマンドライン風 (The CLI)**
* **コンセプト:** 開発者にとって最も落ち着く「黒画面」で振り返る。
* **デザイン:** 背景は黒、文字は緑やネオンカラーの等幅フォント。
* **表示:** カードはJSON形式やログ出力のように表示。カテゴリグラフは `htop` や `git stats` のようなテキストベースの棒グラフで表現。
* **感情:** 「俺のログ（歴史）がここにある」という硬派なカッコよさ。
...(省略)...
### B. 成長と旅路を感じる「Story / Game」系
**4. RPGスキルツリー / ステータス画面風 (The Hero)**
* **コンセプト:** 記事を書くこと＝経験値獲得・レベルアップ。
* **デザイン:** ゲームのステータス画面。
* **表示:** カテゴリ（フロント、インフラ等）を「STR」「INT」「AGI」などのパラメータに見立て、レーダーチャートで表示。記事カードは「クエストクリア履歴」の巻物のように表現。
* **感情:** 「自分のスキル構成はこうなっているのか」「次はここを伸ばそう」という育成意欲。
...(省略)...
### C. 感情と記憶に訴える「Emotional / Art」系
**6. ホリデー・ウィンター風 (The Holiday)**
* **コンセプト:** アドカレ本来の「クリスマス」の雰囲気を重視。
* **デザイン:** 雪の結晶、暖炉、赤いリボン、暖かい暖色系のライト。
* **表示:** タイムラインは、物理的なアドベントカレンダー（扉を開けるタイプ）を模したカード。カテゴリごとのプレゼントボックスが積み上がるグラフ。
* **感情:** 年末のワクワク感と、一年の締めくくりとしての温かい気持ち。
...(省略)...
### D. 機能美と可読性重視「Modern / Clean」系
**9. Notion / Trello風 (The Workspace)**
* **コンセプト:** 現代のエンジニアが使い慣れた、思考を整理するUI。
* **デザイン:** 白背景、角丸のカード、パステルカラーのタグ、ドラッグ＆ドロップできそうな質感。
* **表示:** カンバン方式（横軸が年）または、Notionのタイムラインビュー。情報は極限まで整理し、タグの色分けで見やすく。
* **感情:** 「整理整頓されている」という心地よさと、頭のスッキリ感。
...(省略)...
2. 「出力されたアプリデザイン案のうち1つ」と「アプリアイデア」をコピペして、Canvasでアプリを生成する
出力されたアプリデザイン案のうち1つを、自分が作ろうと思っていたアプリアイデアの中にコピペします。
「自分が今までアドカレで書いてきた記事」を年ごとに登録して、“アドカレ自分史”をタイムライン表示してくれるアプリを作りたいです。
このアプリの目的は「利用者がこれまで書いてきたアドカレ記事を振り返ることで、懐かしさや成長を感じられるようにし、今後のアドカレの執筆のモチベーションにしてもらうこと」です。
++ ## デザイン
++ 10. インフォグラフィック・ダッシュボード風 (The Analyst)
++
++ - コンセプト: 自分のデータを客観的に分析する。
++ - デザイン: フラットデザイン、鮮やかな配色、大きな数字の表示。
++ - 表示: 画面上部に巨大な「総執筆数」「活動年数」を表示。タイムラインはPinterestのようなグリッドレイアウトで効率よく表示。
++ - 感情: 自分の活動をデータとして俯瞰し、次の戦略（来年は何を書くか）を立てるプロ意識。
## 入力
(...以後当初アイデア通り...)
この内容で、Geminiにアプリの作成を依頼しましょう。
この時、以下を忘れないように有効化します。
- Canvasを有効化し、作ったアプリをブラウザ上でプレビューできるようにする
- 思考モードにすることで、Gemini 3 Proが動くようにする
実行してみると...
クリーンでモダンなデザインの、アドカレ自分史アプリが出力できました！
そのまま画面の右側でアプリの動作確認もできますし、アプリ部分のみを他の人にも共有できます。以下のURLから、このアプリにアクセスできます。
本記事に貼ってあるGeminiのリンク先に飛ぶと、出力したアプリに触れられます。共有方法やアクセスする際の注意点をAppendixに記載しましたので、そちらもご確認ください。
3. 別のアプリデザイン案で同様のことを繰り返す
あとは他のデザイン案についても、新しいチャットを立ち上げてコレを繰り返すだけで、いろんなデザインで自分のアイデアを形にできます。
今回は最初のプロンプト例に書いた通り、10種類のデザインを試してみました。
今回試してみた他の生成例は記事末尾のAppendixに置いておくので気になる人は見てみてください。
その中でも一番印象的だったデザインは...
6. ホリデー・ウィンター風 (The Holiday)
- コンセプト: アドカレ本来の「クリスマス」の雰囲気を重視。
- デザイン: 雪の結晶、暖炉、赤いリボン、暖かい暖色系のライト。
- 表示: タイムラインは、物理的なアドベントカレンダー（扉を開けるタイプ）を模したカード。カテゴリごとのプレゼントボックスが積み上がるグラフ。
- 感情: 年末のワクワク感と、一年の締めくくりとしての温かい気持ち。
これです！
本家クリスマスのアドベントカレンダーのように、自分の記事がプレゼントのようになっていて、クリックすると記事が見られる…という、粋な演出が魅力のアプリです。手触り感も良いので、ぜひ一回デモを触ってみてほしいです。
おわりに
想像以上に良い結果が得られて驚きました。汎用LLMチャットサービスですよ、これ。
しばらくはこの方法でアプリのベースデザインを作り、そのjsxをベースにClaude Codeなどで開発を進めるのが、自分のやり方として定番になりそうです。
もちろん、単にデザインアイデアを依頼すると業務には使えないようなカジュアルなデザインアイデアもたくさん出してきます。そこは「エンタープライズ向けに限定し」などのキーワードをプロンプトに含めることで、出力アイデアの方向性を制御すると良いかと思います。
ところで、久々に全く生成AIを使わないオーガニック執筆をやってみたのですが、非常に穏やかな気持ちで楽しく執筆できました。これが人間に残された最後の贅沢なのかもしれない。
それでは皆さん、また第2部終章のレイドでお会いしましょう。
MEKIKI X AIハッカソンもぐもぐ勉強会 Advent Calendar 2025、明日はKota Onoderaさんによる「Cloud Runを使ったn8n環境の構築について」の記事です。お楽しみに！
Appendix
アプリ部分を他の人に共有してアクセスするまでのやり方
画面右上から共有をクリックすると、
しばらくたって共有用の公開リンクがクリップボードにコピーされます。
以下のようなURLにブラウザでアクセスすると、
Googleアカウントにログインしている場合はアプリを表示して動かせます。
簡単なデモを見せるだけなら、これで十分でしょう。楽ですね！
このとき、Googleアカウントにログインしていない場合は、以下のダイアログが表示されます。
スクリーンショットにかかれている通り、アプリ作成者を信頼できる場合のみ続行してください。
執筆者である私を信頼できない場合はこの記事内のリンクは開かず、スクリーンショットのみを見て楽しんでいただければと思います。
続けるをクリックし、ログインからGoogleアカウントにログインすると、同じくアプリを動かせるようになります。
ちなみに、アプリ動作画面の右下にあるGemini Canvasを試すをクリックすると、
動かしたアプリをコピーして、自分のGeminiでチャット対話を続けられます。他の人のCanvasをベースに、自分なりのアレンジを加えたいときに使いましょう。
他のデザインでの出力例
Geminiから提案された他のデザイン案でアプリを生成したときの出力例を、私の感想 + 動作リンクとともに載せておきます。
どんな傾向で出力されるかの参考にしてください。
1. ターミナル・コマンドライン風 (The CLI)
- コンセプト: 開発者にとって最も落ち着く「黒画面」で振り返る。
- デザイン: 背景は黒、文字は緑やネオンカラーの等幅フォント。
- 表示: カードはJSON形式やログ出力のように表示。カテゴリグラフは `htop` や `git stats` のようなテキストベースの棒グラフで表現。
- 感情: 「俺のログ（歴史）がここにある」という硬派なカッコよさ。
ハッキングシミュレーターとかサイバーサイコスリラーなゲームのUIでありそう。
2. GitHubコントリビューション風 (The Committer)
- コンセプト: 開発者の努力の象徴である「草（芝）」をモチーフにする。
- デザイン: 白ベースに、活動量に応じた緑色の濃淡。
- 表示: タイムラインはプルリクエストのタイムラインのようにシンプルに。カテゴリグラフは、GitHubの「Languages」バー（リポジトリの言語比率）のようなデザインで表示。
- 感情: 「今年もちゃんと活動したな」という継続の達成感。
芝やLanguagesバーの表現など、GitHubオマージュで面白い。アイコンも含めてまんま過ぎるのでこのままで一般公開するのはダメな気がするけど。
3. レトロOS / Windows 95風 (Vaporwave)
- コンセプト: インターネットの歴史を感じさせるレトロフューチャー。
- デザイン: グレーのウィンドウ、青いタイトルバー、ドット絵のアイコン。
- 表示: 各年の記事が「フォルダ」や「ファイル」として並ぶ。カテゴリグラフは「ディスクデフラグ」や「メモリ使用量」のようなビジュアルで表現。
- 感情: 昔のアドカレ記事を見たときに感じる「懐かしさ」を最大化する。
これだけだとただ懐かしのWindows 95風でしかないけど、全体的にオレンジと紫の色合いにしつつ、夕陽・ヤシの木・石像・謎のポリゴンなどを配置して全力でVaporwave風にしても良さそう。しかしVaporwave自体が既に懐かしいという二重のノスタルジー。
4. RPGスキルツリー / ステータス画面風 (The Hero)
- コンセプト: 記事を書くこと＝経験値獲得・レベルアップ。
- デザイン: ゲームのステータス画面。
- 表示: カテゴリ（フロント、インフラ等）を「STR」「INT」「AGI」などのパラメータに見立て、レーダーチャートで表示。記事カードは「クエストクリア履歴」の巻物のように表現。
- 感情: 「自分のスキル構成はこうなっているのか」「次はここを伸ばそう」という育成意欲。
それぞれのカテゴリをSTR/AGI/INT/VITに振り分けるアイデアはユニークで面白いと思います。一方で、肝心の振り分け方が物議を醸しそうな感じとなっており、色んな意味で痺れました。
5. 冒険の地図・すごろく風 (The Journey)
- コンセプト: 時間の流れを「道」として表現する。
- デザイン: 下から上へ、あるいは左から右へ続く曲がりくねった道。
- 表示: 各年の記事が道の途中の「マイルストーン（標石）」や「街」として配置される。背景は年が進むにつれて風景が変わる（例：荒野→街→未来都市）。
- 感情: 遠くまで歩いてきたという感慨深さと、旅の楽しさ。
細かい指定をうまく守れているかというと微妙なところですが、コンセプトは守ってくれてます。
むしろ、最初からアドカレ記事マスが並んだすごろくアプリにしてしまって、止まったマスのアドカレ記事が開かれたら面白いかも。面白い...か？
7. 雑誌・スクラップブック風 (The Editor)
- コンセプト: 自分の記事が特集された雑誌のバックナンバー。
- デザイン: 紙の質感、コラージュ、手書き風フォント、マスキングテープのあしらい。
- 表示: 記事のOGP画像（あれば）をポラロイド写真のように配置。カテゴリグラフは手書きの円グラフ風。
- 感情: 自分の軌跡を「作品集」として大切に保存している感覚。
写真の部分に記事内の画像を入れられたらかなり良さそう。
8. 星空・星座風 (The Constellation)
- コンセプト: 知識の宇宙に輝く星々。
- デザイン: 深い紺色の背景に輝く点と線。
- 表示: 1つの記事が1つの星。同じカテゴリの記事（星）同士が線で結ばれ、年ごとに「2019年の星座」が形成される。
- 感情: 散らばっていた知識が繋がり、体系化されていく美しさ。
年ごとの星座で表示するのはユニークなアイデアと思いましたが、1年に多くて2、3記事しかアドカレを書かない人なので寂しい表示になったのでした。一人でアドカレ完走した年がある人なら、綺麗な星座が描けそう。
9. Notion / Trello風 (The Workspace)
- コンセプト: 現代のエンジニアが使い慣れた、思考を整理するUI。
- デザイン: 白背景、角丸のカード、パステルカラーのタグ、ドラッグ＆ドロップできそうな質感。
- 表示: カンバン方式（横軸が年）または、Notionのタイムラインビュー。情報は極限まで整理し、タグの色分けで見やすく。
- 感情: 「整理整頓されている」という心地よさと、頭のスッキリ感。
パステルカラーで薄めの感じですが、カンバン方式に影響を受けたと思しき横並びのカレンダーは他のデザインと異なっていて良いですね。
ちなみに一番最後までスクロールするとNext...となっていて、これからもアドカレ記事を書こう！という気にさせる作りとなっていました。来年も頑張りたいですね。