ALL-IN GAS
「これ何だっけ？」から始まった、小さなものづくり
「こういうデザインにしたいんだけど、これって何ていうんだっけ？」
Webサイトやアプリを作っていると、そんな場面に出会うことがあります。
見たことはある。使いたいイメージもある。
でも、そのデザインや表現の「名前」が分からない。
2026年8月19日に開催した、第1回 Console Log Night。
今回のゲストは、佐賀でDX支援などに取り組む池田有樹さん。
池田さんが紹介してくれたのは、そんな日常の小さな「困った」から生まれた、Webデザイン表現図鑑でした。
ただ、この日の話で面白かったのは、完成したツールそのものだけではありません。
「めんどくさい」と思ったことを拾い上げ、AIと対話しながらまず形にしてみる。
形になったものを自分で触り、また考える。
そして誰かに見せることで、さらに新しいアイデアが生まれていく。
今回は、そんな制作の裏側を紹介します。
Console Log Nightとは？
ALL-IN GASでは、日頃からコミュニティの中で、
- 作ったもの
- 試してみたこと
- うまくいったこと
- まだ途中のもの
などを気軽に共有しています。
Console Log Nightは、そうしたメンバーのアウトプットについて、
「何を作ったの？」
「なんで作ろうと思った？」
「どんなところを工夫した？」
「作ってみて何が分かった？」
と、制作の裏側をみんなで覗いてみる時間です。
完成された成果だけを見るのではなく、そこに至るまでの試行錯誤にも目を向ける。
第1回は、池田さんがコミュニティに投稿してくれた「Webデザイン表現図鑑」をきっかけに開催しました。
始まりは「パララックスって何だっけ？」
池田さんはWebデザイナーではありません。
製造業で約20年間働いた後、現在は個人事業主としてDX支援などに取り組みながら、Webアプリやホームページを作ることもあります。
そんな中、何度も遭遇していたのが、
使いたいデザインは頭の中にあるけれど、その名前が分からない
という問題でした。
たとえば、スクロールに合わせて背景や画像が異なる速度で動く「パララックス」。
以前一度調べて使ったことがあったものの、数週間後にもう一度使おうとしたときには、その名前を忘れてしまっていたそうです。
検索してもなかなか見つからず、最終的にはChromeの履歴をさかのぼって、
「そうそう、パララックスだった」
と思い出した。
そこで、池田さんは考えました。
「これ、まとめておいた方がいいな」
Webデザイン表現図鑑のスタートは、それだけでした。
最初は「自分のための図鑑」だった
最初から多機能なWebサービスを作ろうと考えていたわけではありません。
まずは、
「こういう見た目は、こういう名前」
と確認できる、自分用の辞書のようなもの。
AIと壁打ちしながらWebデザインの表現を洗い出し、
「どういう分類ができる？」
「レイアウトや質感、表現方法で分けられない？」
と相談しながら整理していきました。
最初にできたものは、100種類以上の表現が並んだシンプルな一覧。
ただ、実際に見てみると、次の課題が出てきます。
「数が多すぎて探しにくい」
そこでカテゴリーやタブを追加。
さらにUIパターンとデザイン表現を分け、別ページとして整理していきました。
ここで面白いのは、完成形を最初に決めていないことです。
一度作ってみて、
「これは見づらい」
「こうなった方が便利」
という気づきを拾いながら、少しずつ形を変えていきました。
動きのあるデザインなら、動いて見えた方がいい
一覧ができた後、また一つ気になることが出てきました。
パララックスなどの表現は、静止画だけでは分かりづらい。
だったら、
実際に動かした方がいい。
そこで再生ボタンやマウスオーバーによって、動きのある表現をその場で確認できる仕組みを追加。
すべてを常時動かすと画面の負荷が大きくなるため、必要なときだけ再生できる形にしていきました。
これも最初の構想にはなかった機能です。
「名前を知る」から「そのままAIに渡す」へ
さらに使っているうちに、もう一つアイデアが生まれました。
せっかくデザインの名前が分かるなら、
そのままAIへの指示として使えた方が便利なのでは？
たとえば、使いたいデザインをクリックすると、
「このレイアウトはこう呼びます」
「AIに作ってもらうなら、こう指示します」
というプロンプトまで表示される。
さらに、
「この表現と、この表現と、この表現を組み合わせたい」
という場合には、それぞれを選択すると、一つのプロンプトとしてまとめてくれる。
ECサイトのカートに商品を入れるような感覚で、デザインを組み合わせられる仕組みです。
そこからさらに、
「よくある組み合わせを最初から用意しておけばいいのでは？」
と、プリセット機能まで追加されました。
最初は「名前を忘れないための自分用メモ」。
そこから、
見るための図鑑
になり、
試すためのツール
になり、
AIに指示するためのツール
へと育っていきました。
AIとの会話で、仕様そのものを考えていく
制作にはClaudeを使用。
最初はClaudeのデスクトップアプリ上で、
「こういうものを作りたい」
という相談から始めています。
ある程度方向性が見えてきたところでClaude Codeへ移行し、実際の制作を進めていきました。
興味深かったのが、池田さんのこんな考え方です。
「人がレビューするなら、まずHTMLで見えるようにした方がいい」
AIからJSONやMarkdownで情報を受け取るのではなく、まずブラウザで見える形にしてしまう。
そうすると、
「幅が狭い」
「動きが見えにくい」
「ここは分けた方がいい」
と、人間側も判断しやすくなります。
そして、その画面を見ながら、
「ここをもう少し大きく」
「これをクリックしたら詳細を表示して」
とAIに伝えていく。
つまり、
AIに完璧な仕様書を渡して作ってもらったのではなく、作ったものを見ながらAIと一緒に仕様を考えていった
という制作スタイルです。
最初の叩き台は7分。でも、そこからが面白い
当日の話の中で驚きの声が上がったのが、制作時間でした。
最初の約60件を並べたHTMLの叩き台は、約7分。
そこから改良を重ね、現在の形になるまでの実作業時間は、およそ5時間程度だったそうです。
AIを使うことで、最初の形を作るスピードは圧倒的に速くなっています。
一方で、イベントの中ではこんな話も出ました。
「AIって最初の8割はすぐできるけど、そこからに時間がかかりますね」
最初の叩き台を作る。
触ってみる。
違和感を見つける。
修正する。
さらに欲しい機能を思いつく。
その繰り返しによって、ツールは少しずつ「自分が本当に使いたいもの」に近づいていきます。
AIが7分で作ったものが、そのまま完成品になったわけではありません。
むしろ、その後の数時間にこそ、人間側の判断や工夫が詰まっています。
一番の気づきは「困っていることをちゃんと出す」
この制作を通じて、池田さんが一番感じたこと。
それはAIの性能でも、プログラミング技術でもありませんでした。
自分が困っていることっていうのは、ちゃんと出すことによってアイデアになる。
これまでも、Webサイトを作るたびに、
「この表現、何て言うんだろう」
と調べていました。
そのたびに「めんどくさい」と感じていた。
でも、それまでは調べて終わっていました。
今回は、その「めんどくさい」を一度立ち止まって拾ってみた。
「じゃあ、これをどうにかできないかな？」
とAIに投げてみた。
そこから、一つのツールが生まれました。
AIを活用するために、大きなアイデアを考える必要はないのかもしれません。
日常の中にある、
「毎回これ調べてるな」
「これ面倒だな」
「ここ、もう少し楽にならないかな」
そんな小さな違和感が、ものづくりの入り口になる。
今回のConsole Log Nightで、特に印象に残った話でした。
誰かに見せると、自分では思いつかなかった使い方が生まれる
このツールはもともと、自分用としてローカルで使っていたものでした。
ところが、
「毎回ローカルのファイルを開くのも面倒だな」
と思い、自分のWebサイトに公開。
それをALL-IN GASのコミュニティに投稿したことから、今回のConsole Log Nightにつながりました。
そしてイベント中、さらに面白いことが起こります。
参加者が実際にサイトを触りながら、
「AIに作らせるとき、名前で指示できるのはいいですね」
「デザイナーでも知らない表現がたくさんありました」
「知識やアイデアを細分化して保管して、後から組み合わせる仕組みにも応用できそう」
といった感想やアイデアが次々に出てきました。
その場でGASのWebアプリ制作にプロンプトを使ってみた参加者からは、
「そのまま入れただけで、UIがかなりきれいになった」
という声も。
池田さん自身も、Webデザイン以外での利用はそこまで想定していなかったそうです。
作った本人が想定していなかった使い方が、誰かに触ってもらうことで見つかっていく。
これも、アウトプットを共有する面白さです。
「色も選べたらもっと便利」——その場の声が、次のアップデートへ
イベント中には、こんな意見も出ました。
たとえばメッシュグラデーションなどのデザインを使う際、
「デザイン表現はこれがいいけど、この色ではないんだよな」
ということがあります。
そこで、
カラーセットも選べたら、もっと使いやすいのでは？
というアイデアが参加者から出ました。
池田さんも、
「確かに。それはできそうですね」
とその場で反応。
そしてConsole Log Nightの後。
このフィードバックを受けて、実際にカラーセットを変更できる機能が追加されました。
イベントで話して終わりではなく、
見せる → 意見をもらう → また作る
というサイクルが、そのまま次のアップデートにつながっています。
これは今回のConsole Log Nightを象徴する出来事だったように思います。
AIとの作業も「見える化」したくなる
後半では、池田さんが最近作っている別のツールも紹介してくれました。
複数のAIエージェントを動かしていると、
「今どのエージェントが何をしているのか」
「どのプロジェクトで何が動いているのか」
「以前どんな指示を出したのか」
が、だんだん分からなくなっていきます。
そこで池田さんは、AIエージェントの動作状況や過去の履歴を確認できるダッシュボードを作り始めていました。
Webデザイン表現図鑑と一見違うテーマですが、話を聞いていると共通点があります。
それは、
AIとの作業を、人間が理解しやすい形にする
ということ。
AIができることが増えれば増えるほど、人間側が状況を把握するための工夫も必要になります。
AIにすべて任せるのではなく、
人間が見て、判断し、次の指示を出しやすい環境を作る。
これからのAI活用を考える上でも、興味深い視点でした。
今回のConsole Log
今回の制作プロセスを短く並べると、こんな流れになります。
困る
↓
「めんどくさい」と気づく
↓
AIに相談する
↓
まず見える形にする
↓
自分で触る
↓
違和感を見つける
↓
AIと相談しながら改善する
↓
誰かに見せる
↓
自分では思いつかなかったアイデアをもらう
↓
またアップデートする
完成品を最初から目指したわけではありません。
小さな困りごとを拾い、まず形にしてみた。
その結果として、Webデザイン表現図鑑は少しずつ育っていきました。
作ったものだけではなく、その途中も共有する
Console Log Nightでは、すごい成果を発表する必要はありません。
まだ途中でもいい。
自分のために作ったものでもいい。
「こんなの試してみた」
「こうしたら便利になった」
そんな小さなアウトプットでも、その裏側を聞いてみると、他の誰かの学びになります。
そして今回のように、共有したことで新しいアイデアが返ってきて、作ったもの自体がさらに育つこともあります。
ALL-IN GASでは、これからもそんな試行錯誤のログを残していきたいと思います。
誰かのConsole Logが、また誰かの「ちょっと作ってみよう」のきっかけになればうれしいです。
Console Log Night #1
Guest：池田有樹さん
開催日：2026年8月19日
Webデザイン表現図鑑
https://yyy365lab.com/dict/index.html
