モバイルとPC表示のWebサイトモックアップ作成
Webサイトモックアップ作成ツール
無料Webサイトモックアップ作成：ワイヤーフレーム + 端末枠 | We.Inc
PCとモバイルのワイヤーフレームでページを設計するか、スクリーンショットをブラウザーや端末枠に配置。PNG出力またはPDF印刷が無料、ブラウザー内で使えます。
2つのツールを1つにまとめました。ワイヤーフレームモードではページのセクションを選び、順番を並べ、PCとモバイルのレイアウトを比較します。端末枠モードでは完成デザインのスクリーンショットをアップロードし、提案資料やSNS投稿用にブラウザー枠やスマートフォン枠へ配置します。どちらもPNGで出力でき、ブラウザー内で動作します。スクリーンショットはアップロードされません。
- ワイヤーフレームモード：必要なセクションを選び、上下に並べ替え、PCとモバイルを切り替えます。モバイルでは多くのレスポンシブサイトと同じようにカラムが縦に並びます。
- ワイヤーフレームをPNGで出力するか、印刷画面でPDF保存を選びます。
- 端末枠モード：PNG、JPG、WebPのスクリーンショット（最大15 MB、一辺8000ピクセルまで）をアップロードします。ブラウザー枠またはスマートフォン枠、背景色、任意のアドレスバー表示を選びます。
- 画像はブラウザー内のcanvasに描画され、画面解像度の2倍でPNG出力されます。
- 構成が決まったら、セクション計画をWe.Incの作成ツールへ制作依頼書として渡せます。
- メイン画像から始めましょう。何を誰に提供するかを一行で伝えます。
- 信頼してもらえるか判断する最初のボタンの近くに、口コミ、ロゴ、事例などの実績を置きましょう。
- まずモバイルのワイヤーフレームを確認しましょう。小規模事業のサイトでは訪問者の多くがスマートフォンを使います。
- 端末枠には想定幅でスクリーンショットを用意します。ブラウザー用は約1440ピクセル、スマートフォン用は390ピクセルです。
- 共有時にはモックアップだと明記し、公開中のサイトと誤解されないようにしましょう。
よくある質問
ワイヤーフレームとモックアップの違いは？
ワイヤーフレームは各要素の配置を示すグレーの設計図です。モックアップは端末枠などに入れた完成イメージです。このツールは別々のモードで両方を作り、出力にも種類を明記します。
スクリーンショットはアップロードされますか？
いいえ。ブラウザー内で読み込んで描画します。We.Incや他の誰かに送信されません。
公開中のサイトをここでスクリーンショットにできますか？
いいえ。他サイトの撮影にはブラウザーを動かすサーバーが必要ですが、この無料ツールにはありません。自分でスクリーンショットを撮影してアップロードしてください。ブラウザーの開発者ツールでページ全体を撮影できる場合があります。
PDFに出力できますか？
はい。印刷を選び、プリンターとしてPDF保存を指定します。PNG出力では画像ファイルを取得できます。
Webサイトモックアップ作成ツールは無料ですか？
はい。登録不要、透かしなし、利用制限もありません。
モバイルで設計し、PCで見せる
- 大画面でバランスのよいレイアウトでも、スマートフォンでは長いスクロールになることがあります。3列の特徴が3つの縦積みブロックになり、料金表で問い合わせフォームがずっと下に押されるなどです。ワイヤーフレームをモバイルに切り替えると、セクションの移動がクリックだけで済む早い段階で問題が分かります。
- 端末枠は制作の後半で使います。顧客やSNSの読者に完成ページを見せる用途です。シンプルなスクリーンショットを整った枠に入れるだけで十分な場合がほとんどです。
無料で始める · クレジットカード不要
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る