無料で使えるワイヤーフレーム作成ツール「wireframe.cc」

プログラマーやクライアントに、Webサイトやアプリのイメージを共有する際、「ワイヤーフレーム」があると便利です。

「全体はこんなデザインにしたい」
「要素はここに配置（レイアウト）したい」

というものを視覚的に伝えられるからです。AIにプロンプトでイメージを伝えるときにも役立ちます。

そこで今回は、誰でもかんたんにブラウザ上でワイヤーフレームを作成できるツール「wireframe.cc」をご紹介します。

WordPressテーマ「GLUE」

無料で高機能なWordPressテーマが手に入る。

wireframe.ccとは

wireframe.cc

wireframe.ccは、ブラウザだけで使えるシンプルなワイヤーフレーム作成ツールです。
アカウント登録、インストール不要で、URLにアクセスすればすぐに使い始められます。

ワイヤーフレームとは、テキストやボタン、画像などの配置を決めるための設計図のことです。

UI要素の数を最低限に絞った設計で、簡易的にアイデアを形にする用途に最適です。

有料プラン（月額12ドル〜）では、PNGやPDFへの書き出しにも対応していますが、無料版でも十分使えます。公式料金プラン

エレメント一覧
Text	テキストブロックを設置できます。フォントサイズや太さも変更可能です。
Block Text	複数行テキストの配置を示すダミーブロックです。
Block Headline	見出しの配置を示すダミーブロックです。
Block List	リスト形式の配置を示すダミーブロックです。
Button	ボタンを設置できます。ボタンの文字も変更可能です。
Image	画像のプレースホルダーを設置できます。
Icon	アイコンを設置できます。豊富な種類から選べます。
Box	ボックス（枠）を設置できます。線の太さや背景色も変更可能です。
Ellipse	楕円・円形の図形を設置できます。
Line	縦横の区切り線を設置できます。
Text Input	テキスト入力フィールドを設置できます。
Dropdown	ドロップダウンメニューを設置できます。
Slider	スライダーUIを設置できます。
Progress Bar	進捗バーを設置できます。
Scroll Bar	縦横スクロールバーを設置できます。

複数の要素を組み合わせたセクションも用意されています。

セクション一覧
Navbar	ページ上部に置くナビゲーションバー。ロゴやダミーメニューが配置されます。
Hero	ファーストビュー。画像やキャッチコピー、ボタンのダミーが配置されます。
Features	アイコンや画像と組み合わせて、機能・強みを紹介するセクションです。
Content	テキストと画像を組み合わせたレイアウト。ブログ一覧によく使われます。
Social Proof	ユーザーの口コミや実績を並べるセクションです。
Pricing	料金表やプラン比較に使えるセクションです。
FAQ	よくある質問をまとめるセクションです。
Footer	ページ下部のフッター用のセクションです。
Form	シンプルなお問い合わせフォームのセクションです。
Gallery	画像を複数並べたギャラリーセクションです。