プロダクトローンチページ
公開日前に見出し、オファー、登録フォームをテストしてください。
AI ウェブサイトモックアップジェネレーター
サイトの説明をするか、スケッチを添付してください。Manus がそれをクリック可能な高精細 Web サイトのモックアップに変換し、デスクトップとモバイルの両方に対応させます。
ウェブサイトモックアップの例：1 件の指示、2 つの画面
良いブリーフには、ブランド名、セクション、スタイル、画面が記載されています。以下はこの 4 つをすべて含む例です。
架空のブランドのイラストデザインです。モックアップはあなた自身の要件に沿って作成されます。
ウェブサイトモックアップジェネレーターの入力方法：文章、スケッチ、またはスクリーンショット
すでに持っているものを使ってください。上のボックスにある + ボタンで画像を追加できます。
Figma でデザインがすでにある場合は、Figma to code を使ってフレームを動作する Web アプリに変換できます。
サイト、ストア、アプリ向けのモックアップのアイデア
例を選ぶとそのリクエストが上のボックスに入力されるので、その後詳細を変更してください。
オンラインストア
プラットフォームを選ぶ前に、ホームページ、商品ページ、カートを確認しましょう。
Web アプリ画面
投資家やエンジニアに主要画面の見た目を示します。
ポートフォリオ
ケーススタディを書く前に、作品の見せ方をいくつか試してみましょう。
レストランと地元のビジネス
メニュー、営業時間、予約ボタンをゲストが最初に見る場所に配置しましょう。
クライアント向けピッチ
最初のクライアント会議に 2 つのデザイン方向性を持っていきましょう。
ワイヤーフレーム vs モックアップ vs プロトタイプ
ワイヤーフレームは構造を示し、モックアップは完成した見た目を示し、プロトタイプは動作のしかたを示します。
ノート PC とスマートフォンでサイトを表示
スクリーンショットをスライドやポートフォリオ、発表用の投稿向けデバイスモックアップに変換します。
スクリーンショットを添付し、希望するデバイスとシーンを伝えてください。ピッチデック、ポートフォリオ、ローンチ投稿に使える画像ファイルが得られます。
- デバイスを選択してください：ノートパソコン、デスクトップモニター、タブレットまたはスマートフォン
- シーンを説明してください：デスク、無地のスタジオ背景、または手など
- サイズを指定してください。例えばスライドなら 16:9、ソーシャル投稿なら 4:5 です
ロゴやバナー、ソーシャル用グラフィックも必要ですか？AI デザインをお試しください。
承認済みのモックアップを本番サイトに変換
モックアップはすでに Web ページなので、デザインが承認されたらそのまま作り続けられます。
Manus ウェブサイトビルダーがログイン、データベース、決済機能をどのように追加するかを確認するか、AI ウェブサイトジェネレーターでフルサイトを作成するか、ランディングページビルダーで 1 ページのサイトを作成しましょう。
よくある質問
ウェブサイトモックアップとは？
ウェブサイトモックアップとは、実装前のページをリアルに表現したものです。実際のレイアウト、色、フォント、画像、コピーが含まれます。構造だけを示すワイヤーフレームと、完成したサイトの間に位置するものです。
AI でウェブサイトのモックアップを作成する方法は？
このページ上部のボックスにページの説明を入力してください：対象者、必要なセクション、好みのスタイルなど。Manus がデスクトップとモバイルで開けるウェブページとしてモックアップを作成し、同じタスク内で変更を依頼できます。
このウェブサイトモックアップ生成ツールは無料ですか？
各リクエストは Manus タスクとして実行され、タスクはクレジットを消費します。クレジットのオプションは料金ページで確認できます。
スケッチやスクリーンショットをモックアップに変換できますか？
はい。手描きのスケッチ、ホワイトボード、または現在のサイトのスクリーンショットの写真を添付し、何を残して何を変更するかを伝えてください。Manus はその画像を初期レイアウトとして使用します。
モックアップはモバイルで機能しますか？
レスポンシブなページをリクエストすると、Manus がデスクトップとスマートフォンの両方の画面用にレイアウトします。スマートフォンでプレビューを開くか、両方を比較したい場合は別のモバイルモックアップをリクエストしてください。
ワイヤーフレームとモックアップの違いは何ですか？
ワイヤーフレームは、ボックスとグレーのプレースホルダーを使って構造を決めるものです。モックアップはそこに視覚的なデザインを加え、ページが実際にどのように見えるかを判断できるようにします。プロトタイプはさらに一歩進んで、実際にクリックしながら一連の流れを体験できるようにします。
モックアップを編集してコードも保持できますか？
はい。タスク内で変更を依頼するか、デザイン編集モードを使ってコードなしでレイアウト、色、タイポグラフィ、間隔を調整できます。いつでも完全なコードをダウンロードしたり、そのままページを本番サイトとして構築し続けたりできます。
自分のウェブサイトのデバイスモックアップを作成できますか？
はい。あなたのサイトのスクリーンショットを添付し、ノートパソコン、スマートフォン、タブレットのどのシーンで見せたいか伝えてください。Manus が画像を生成し、ダウンロードできます。
次のウェブサイトのモックアップを作成
ページを説明するか、スケッチを添付して、デスクトップとモバイルで確認してください。