Web開発のモックアップを効率化するツール活用術

Webサイトやアプリケーションの画面を作るとき、最初に必要になるのが「仮のコンテンツ」です。画像のプレースホルダー、テキストのダミーデータ、テーブルのモック…。本物のデータを用意する前に、まずレイアウトを確認したい場面は開発者なら日常的に経験するでしょう。

この記事では、ZERONOVA LAB の無料ツール群のうち、モックアップ作成に特化した4ツールを紹介します。それぞれの設計判断と、組み合わせて使うワークフローを解説します。

きっかけ：プレースホルダーのために外部サービスに依存したくない

ZERONOVA LAB の無料ツール群は、もともとSEO流入を増やす戦略として立ち上げました。最初はOGP画像ジェネレーターやQRコードジェネレーターなど、フリーランス向けのツールが中心でした。

開発日記にはこう書いています：

25ツールの一気実装: SEOのロングテールキーワード獲得はページ数が鍵。Phase 5-7を1セッションで完了し、10→25ツールに。1ツール1ページ構造でそれぞれ独立したキーワードを狙える

この方針で開発者向けツールを増やしていく中で、自分自身が開発中によく使うモックアップ用ツールを作ることにしました。

外部のダミー画像サービス（例: placeholder.com）は便利ですが、サービスが停止するとモックアップが壊れるリスクがあります。自前のツールであれば、開発中に使うだけでなく、APIとして画像URLを直接 <img> タグに指定することもできます。

ダミー画像生成からテーブル出力まで — 4つのモックアップツール

1. ダミー画像ジェネレーター

ダミー画像ジェネレーターは、サイズ・背景色・テキスト・フォント色を指定してプレースホルダー画像を生成します。

開発日記にはこう記録されています：

ダミー画像ジェネレーター — Canvas API + API route（ImageResponse）/ サイズ・色・テキスト指定

このツールには2つの動作モードがあります。

ブラウザモード: フォームで設定してPNGをダウンロードする通常の使い方です。Canvas APIでブラウザ内で画像を描画するため、サーバーにデータを送信しません。

API モード: URLパラメータで幅・高さ・色・テキストを指定して、<img> タグのsrcに直接指定できます。この方式はNext.jsの ImageResponse をEdge Runtimeで実行しており、開発中のプロトタイプに組み込めます。

画像「加工」はクライアントサイド（Canvas API）、画像「生成」はサーバーサイド（ImageResponse）が適切。画像リサイズは既存画像の変換なのでクライアントサイド、料金表等は新規画像の生成なのでサーバーサイド

この「加工 vs 生成」の使い分けは、ダミー画像だけでなく、OGP画像ジェネレーターや料金表画像ジェネレーターなど、すべての画像系ツールで統一している設計判断です。

セキュリティ面では、ピクセル数の上限（400万px）を設定してメモリ枯渇を防いでいます。

ダミー画像API: ピクセル数上限（400万px）を追加してメモリ枯渇を防止

高解像度のリクエスト（例: 4000x4000 = 16Mピクセル）はEdge Runtimeのメモリを大量に消費するため、閾値を超える場合はアスペクト比を維持したまま縮小する処理を入れています。

2. ダミーテキストジェネレーター

ダミーテキストジェネレーターは、段落数を指定してダミーテキストを生成します。英語の Lorem Ipsum だけでなく、日本語のダミーテキストにも対応しています。

開発日記から：

ダミーテキストジェネレーター — 日本語3バリエーション + 英語 Lorem Ipsum

日本語テキストには「ビジネス」「テック」「カジュアル」の3つのバリエーションを用意しています。

日本語と英語ではテキストの見え方が大きく異なります。英語のLorem Ipsumでレイアウトを確認しても、実際に日本語テキストを流し込むと行間や文字幅の違いで印象が変わることがあります。日本語サイトの開発では、最初から日本語のダミーテキストを使う方がレイアウトの精度が上がります。

実装はクライアントサイドのみで完結しており、文字数のカウントも表示されるため、必要な分量を正確に調整できます。

3. Markdownプレビューアー

Markdownプレビューアーは、Markdownを入力するとリアルタイムにHTMLプレビューを表示するツールです。

このツールには大きな設計上の判断がありました。

Markdownプレビューアーの自前パーサー: 外部ライブラリ（react-markdown等）に依存せず、正規表現ベースのシンプルなパーサーを実装。GFMテーブルも対応。依存を減らしてバンドルサイズを抑える

一般的には react-markdown + remark-gfm を使いますが、これらのパッケージはバンドルサイズが大きいという問題があります。ツールページは1ページ1ツールの構成なので、そのためだけにヘビーな依存を追加するのは避けたかったのです。

結果として、Claude Code で正規表現ベースの自前パーサーを実装し、GFM（GitHub Flavored Markdown）のテーブルやタスクリスト、取り消し線にも対応できました。

自前 Markdown パーサーの実用性: GFMテーブル含む基本構文なら正規表現ベースのパーサーで十分実用的。react-markdown + remark-gfm のバンドルコストを避けられる

ただし、dangerouslySetInnerHTML を使っているため、XSS対策が必須です。Claude Code によるセキュリティレビューで javascript:, data:, vbscript: プロトコルをブロックする isSafeUrl() 関数を追加しました。

Markdownプレビューアー XSS: javascript:, data:, vbscript: プロトコルをブロックする isSafeUrl() を追加

テーマは3種類（ライト、ダーク、GitHub風）から選べます。HTMLエクスポート機能も備えているため、ブログやCMSへの貼り付けにも活用できます。

4. HTMLテーブルジェネレーター

HTMLテーブルジェネレーターは、GUIでテーブルを編集し、HTML / Markdown / CSV の3形式で出力します。

テーブルの作成は地味ですが頻繁に必要になる作業です。特にMarkdownでテーブルを書く際、列の揃え方やヘッダー行の構文を毎回調べるのは非効率です。

このツールは行・列の追加・削除をボタン操作で行え、1行目をヘッダー（<thead> / <th>）として出力するかを切り替えられます。セマンティックなHTMLテーブルの生成にも対応しているため、アクセシビリティを意識した実装にも使えます。

CSVインポート機能も備えており、既存のスプレッドシートデータをHTMLテーブルに変換する用途にも対応しています。

モックアップツールを組み合わせるワークフロー

個々のツールも便利ですが、組み合わせて使うとモックアップ作成の効率がさらに上がります。

ステップ1: ダミー画像でプレースホルダーを配置

ページの画像枠に ダミー画像ジェネレーター で生成した画像を配置します。API モードを使えば、HTMLに直接URLを埋め込めるため、画像ファイルのダウンロード・配置すら不要です。

ステップ2: ダミーテキストでコンテンツを埋める

見出し下の本文やカード内の説明文に ダミーテキストジェネレーター で生成した日本語テキストを流し込みます。段落数を指定して必要な分量を確保します。

ステップ3: テーブルデータを用意する

料金表や仕様表のモックには HTMLテーブルジェネレーター を使い、Markdown形式で出力すればREADMEやドキュメントにも転用できます。

ステップ4: Markdownでコンテンツ全体を確認する

ブログ記事やドキュメントの場合は Markdownプレビューアー でプレビューしながら構成を調整します。テーブルのMarkdownもここで確認できます。

技術的な学び

4ツールの実装を通じて得られた知見をまとめます。

Canvas API と ImageResponse の使い分け

ブラウザ内で完結する画像加工には Canvas API、サーバーサイドでの画像生成には Next.js の ImageResponse が適しています。ダミー画像ジェネレーターは両方の経路を持つことで、ユーザーの用途に応じた使い方を提供できました。

SSR環境でのブラウザAPI対応

Markdownプレビューアーでは DOMParser を使ったHTML解析がありますが、Next.js のSSR時にはブラウザAPIが使えません。

SVGエディターのSSR対応: DOMParser はブラウザ専用APIのため、Next.js のSSR時にエラー。typeof window === "undefined" ガードで対応

"use client" ディレクティブだけではSSRを防げないため、typeof window によるガードが必要です。これはモックアップツールに限らず、ブラウザAPIを使うすべてのClient Componentに当てはまる教訓です。

XSS対策の重要性

MarkdownプレビューアーはHTMLを動的に生成するため、XSSの攻撃ベクターになり得ます。

dangerouslySetInnerHTML のリスク管理: 使う場合は必ずサニタイズ関数を通す

javascript: URLのブロックだけでなく、将来的にはCSP（Content Security Policy）の導入も検討すべきでしょう。ユーザー入力をHTMLとして描画するツールを作る場合、セキュリティは設計段階から考慮する必要があります。

まとめ

モックアップ用ツールを自作して学んだのは、「開発者ツールは開発者自身が使いたいものを作るのが一番良い」ということです。

• ダミー画像: Canvas API + ImageResponse のハイブリッドで、ブラウザ完結とAPI利用の両方に対応
• ダミーテキスト: 日本語バリエーションの充実が、日本語サイト開発でのレイアウト精度を向上
• Markdownプレビューアー: 自前パーサーでバンドルサイズを抑えつつ、GFM対応を実現
• HTMLテーブルジェネレーター: 3形式出力で、HTML・Markdown・CSVの用途に対応

4つのツールはすべて ZERONOVA LAB の無料ツール一覧 から利用できます。

関連記事として、開発中に毎日使う無料ツール — データ変換・コード支援編 もあわせてご覧ください。開発者向けツール全体の設計方針や、React 19 への対応パターンを紹介しています。