Webやゲーム開発で、UI設計時に使えるダミー画像を手軽に作成できる「Sample Image Generator」を開発しました。
背景色やテキスト、サイズを自由にカスタマイズできるので、デザインカンプやプロトタイプ作成時に役立ちます。
UIのワイヤーフレームやアプリのモックアップを制作する際、仮置きの画像が必要な場面でぜひお試しください。下記から誰でも使用することができま す。
Sample Image Generator とは
「Sample Image Generator」は、カスタマイズ可能なダミー画像を生成するWebツールです。
UIデザインやアプリ開発のワイヤーフレーム、プレースホルダー画像が必要なときに役立ちます。
任意のサイズ、背景色、テキストを設定して、手軽にPNG画像を作り出せるのが特長です。
例えば下記のような画像を即座に作成できます。
特徴・主な機能
- サイズ・背景色・テキスト色・文言を細かく指定可能
- テキスト非表示オプション
- 自動でテキストサイズ を調整し、中央に配置
- 生成画像は即座にプレビュー・ダウンロード
- プリセットサイズやプリセットカラーを多数収録
使用方法
- サイズ設定
プリセットから選ぶか、幅・高さを数値で直接入力します。 - 背景色設定
プリセットから選ぶか、カラーパレットから自由な色を指定します。 - テキスト設定
表示のオン/オフ、文字列を指定できます。必要に応じてテキスト色を変更しましょう。 - プレビュー & ダウンロード
設定を変えるとプレビューが自動更新されます。
ダウンロードボタンを押すとPNGファイルを取得できます。
対応フォーマット
現在はPNG形式の書き出しに対応しています。
ブラウザがcanvas機能をサポートしていれば動作するため、デスクトップ/モバイルを問わず利用できます。
まとめ
以上が、Webブラウザ上で動く「Sample Image Generator」の概要です。
ちょっとしたUI案やワイヤーフレームを素早く作りたいとき、ダミー画像の指定が面倒だと感じたときに、ぜひご活用ください。