少し変わったワイヤーフレームスキルを公開しました
最初から全体像が見えている必要はないと思います。目の前の不満をひとつ解消するだけで、想定していなかった使い道が後から見つかることがあります。
Claude Code をはじめとした AI ツールでデザインのアイデアを模索すると、ラフ案が ASCIIアートで返ってきます。テキストベースの対話では自然な出力形式ですし、ぱっと見でレイアウトの構造が分かるのは便利です。ただ、文字量によって縦線がズレて見難くなってしまいます。手動で補正するのも難しいだけでなく、修正を頼んでも思うような順番に変えるだけで時間がかかってしまいます。この「だいたい」が曲者で、ワイヤーフレームとしては使いものになりません。
しかも、この問題は見た目だけに留まりません。ずれたASCIIアートをもとにデザイン生成ツールへ渡すと、出てくるデザインもずれます。入力が曖昧なら、出力も曖昧になる。ASCIIアートは人間にとって多少見やすいですが、レイアウトを正確に伝える手段ではありません。
この不満をきっかけに、ワイヤーフレームをJSONで定義して、ブラウザでプレビューできる Claude Skill を作ってみました。
ワイヤーフレーム向けJSONファイル
JSONは構造化されたテキストフォーマットで、AI との相性が良いだけでなく、ツールやワークフローに縛られることなく自由に扱うことができます。JSON にはレイアウトの方向（縦か横か）、サイズ（固定か可変か）、間隔、階層が定義されています。例えば、サイドバー付きのダッシュボードなら、ヘッダーとメインコンテンツを縦に配置し、 メインコンテンツの中にサイドバーとメインを横に配置する。こうした構造が direction、width、grow といったプロパティで明示されるので、人でも機械でも解釈がズレません。
Skill には JSON 化したワイヤーフレームデータだけでなく、HTMLプレビューもあります。ドラッグ&ドロップで要素の並べ替えができ、変更はサイドパネルのJSONにリアルタイムで反映されます。JSONをコピーしてエディタで直接編集することもできますし、ファイルとして保存して別のツールに渡すこともできます。
つまり、ザックリとワイヤーフレームを作ったあとに、順番の微調整ができるようにしています。
要素の順番を変えると、右パネルに表示されている JSON の構造も変わります
だいぶ優秀になってきたAIデザインツールですが、細かくプロンプトで指示するのは非常に手間ですし、ちょっとした情報構成の指示を始めると延々と会話と続けることになってしまいます。JSON のメリットはプロンプトとしてそのまま使えるという点です。例えば、Figma Make のようなデザイン生成ツールに、ワイヤーフレームのJSONをそのままコピー＆ペーストで渡すと、情報構成を守ったデザインを生成してくれます。自然言語で「左にサイドバー、右にメインコンテンツ、上にヘッダー」と伝えるよりも、JSONで構造を渡したほうが正確です。構造が明示されているので、ツール側が解釈を間違えにくいのだと思います。
シンプルに「カフェサイトのワイヤーフレームを作って」と頼むのも良し。ブレストしたあとに「ワイヤーフレーム生成して」と頼むのも良し。AIにレイアウト設計の判断を Decision DNA として伝えてあるので、ニュアンスも汲み取ってワイヤーフレーム案を出力してくれます。もし少し間違っていたとしても、出力した HTML をドラッグ＆ドロップで微調整するだけです。
Yasuhisa Hasegawa
困ったら作って解決できる時代
テキストフォーマットであることは、特定のAIモデルに依存しないことも意味します。Claudeで作ったワイヤーフレームを、別のモデルやツールにそのまま持っていけます。私は Claude Code でこのスキルを活用していますが、Claude Desktop 版でも使えますし、SKILL.md フォーマットは他のツールでもサポートが進んでいます。 ちょっとした機能をパッケージ化して配布できる点も、Skill の魅力です。
この Skill は週末にふと思いついて数日で作ったものですが、小さな不満から始めたことが、思った以上の広がりにつながります。AIを使っていて、出力の形式やワークフローに違和感があるなら、試しに手を動かしてみてもいいかもしれません。最初から全体像が見えている必要はないと思います。目の前の不満をひとつ解消するだけで、想定していなかった使い道が後から見つかることがあります。
ワイヤーフレームスキルは GitHub で公開しているので、興味ある方はぜひ試してみてください。
yhassy
Yasuhisa Hasegawa
Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。