要約

このAIワイヤーフレームジェネレーターを使用すると、WordPressブロックエディタを開く前にページレイアウトをブロックアウトできます。ランディングページ、ブログ投稿、ダッシュボード、商品ページ、ポートフォリオ、お問い合わせフォームなどのページタイプを選択し、レイアウトスタイル（スタックされたバンド、カードのグリッド、またはサイドバープラスメイン）を選択して、2から8のセクション数を設定します。ツールはF-patternやZ-pattern読み取り順などの確立されたUXコンベンションに従って、リアルタイムで比例するボックスを再描画するため、作成するドラフトは推測ではなく既にページのように読めます。

AI ワイヤーフレーム 作成 ツール：数秒でページレイアウトをブロックアウト

ページタイプ、レイアウトスタイル、セクション数を選択してください。実際の低忠実度ボックスレイアウトは、単一のGutenbergブロックが配置される前にライブで再描画されます。

パターンをドラフト

ページレイアウトをスケッチ

構築しているページタイプ、コンテンツエリアのレイアウトスタイル、必要なセクション数を選択してください。ボックスは変更するたびに更新されます。

ワイヤーフレームプレビューのみ。ボックスは最終的なコピーやイメージではなく、レイアウト領域を表します。

このワイヤーフレームが信頼できる理由

推測ではなくレイアウトコンベンション上に構築

F-patternとZ-pattern読み取り順

スタックされたコンテンツバンドは、テキストが多いページで視線追跡研究が常に発見するF-patternに従います。ヘッドライン、サブヘッドライン、行のCTAを中央揃えにしたヒーローは、代わりにZ-patternに従います。これは、スパース（疎）で決定を優先するスクリーンで読者の視線がトレースする形です。

実際のコンベンションの上に構築されたページタイププリセット

ダッシュボードは、管理パネルが実際にどのように構築されているかと同じように、他に何が変わっても永続的な左ナビゲーションカラムを保持します。ブログ投稿は、メイン記事カラムをサイドバーと組み合わせます。商品ページは、ギャラリーと購入ボックスに分割された折り目より上、その後の詳細セクションをスタックします。

実際に応答するグリッド数学

グリッドレイアウトはCSS auto-fillを使用するため、セクション数が変わると、カードは独自にリフロー適応し、およそ480px幅未満のグリッド、スタック、またはサイドバーのすべての配置は1列に折りたたまれます。電話で確認するためにマニュアルブレークポイントチューニングは不要です。

3つの設定、1つのドラフト

  1. 1

    1. ページタイプを選択

    ランディングページ、ブログ投稿、ダッシュボード、商品ページ、ポートフォリオ、またはお問い合わせフォーム。これにより、ヘッダー、ヒーロー形状、そしてそのページタイプが実際に必要とするフッターが設定されます。

  2. 2

    2. レイアウトスタイルを選択

    スタックされたバンド、カードのグリッド、またはメインカラムの横のサイドバー。各ページタイプは、ほとんどのビルダーが見つけるスタイルで開き、オーバーライドできます。

  3. 3

    3. セクション数を設定

    2から8のコンテンツセクションをスライダーで選択します。下のワイヤーフレームはライブでボックスを追加または削除し、同じヘッダー、ヒーロー、フッターを所定の位置に保ちます。

Site Editorに触れる前にクライアントの前に置けるドラフト

このくらい粗いワイヤーフレームは、実際のコピーとの接触に耐える意図はありません。ページの骨組みを素早く合意するための意図です。セクション数、折り目より上に何があるか、ブログがサイドバーを必要とするかどうか。その骨組みが決まったら、Site EditorでマッチするGroup、Cover、Query Loopブロックを構築することは、より短い会話になります。なぜなら、誰もが構造について議論しなくなり、それの中に入る言葉と画像についてのみだからです。

  • Site Editorを開く前にセクション数に同意する
  • 同じ通話でクライアントに2つのレイアウトスタイルを表示する
  • デスクトップドラフトと同じスクリーンでモバイルバージョンを確認する
万年筆と定規を使用してワイヤーフレームボックスを手描きしているクローズアップ

ワイヤーフレームジェネレーターに関する一般的な質問

このAIワイヤーフレームジェネレーターは無料ですか？
はい。ブラウザで完全に実行され、サインアップ制限もなく使用制限もありません。サーバーコールはありません。レイアウト数学は、コントロールを動かした瞬間にデバイス上で発生します。
入力情報はどこかに保存または送信されますか？
いいえ。ページタイプ、レイアウトスタイル、セクション数は、ページのメモリーにのみ留まります。何もデータベースに書き込まれず、サーバーに送信されません。ツール実行を測定するために使用される匿名ツール実行ビーコン以外を除いて。
これらのレイアウトパターンはどこから来ていますか？
推測ではなく、文書化されて広く引用されたUX研究から：F-patternとZ-pattern視線追跡研究（Nielsen Norman Group）、管理ダッシュボード全体で使用される永続サイドバーナビゲーションコンベンション、商品ページで一般的に見られるスプリットギャラリープラス購入ボックスパターン（Baymard Institute発見）、短いフォームで一貫性を持つ単列レイアウトコンバージョン研究が見つけた。
このワイヤーフレームを実際のGutenbergパターンとしてエクスポートできますか？
直接ではありません。これは計画ステップで、コード生成ではありません。Site Editorを開く前にクライアントまたはチームメイトと構造に同意するのに役立ちます。マッチするGroup、Cover、Query Loopブロックを手で構築します。
ダッシュボードページタイプが、どのレイアウトを選択しても常に左サイドバーを保つのはなぜですか？
永続ナビゲーションカラムは、スタイリッシュな選択ではなく、管理ダッシュボードの構造的コンベンションだからです。レイアウトセレクターは依然として、それ内のウィジェットがどのように配置されるか（カードのグリッドまたはスタックされたリスト）を変えますが、navカラムを削除することは、実際のダッシュボードがどのように構築されているかを誤って説明するでしょう。
ランディングページにはどのレイアウトスタイルを使用する必要がありますか？
グリッドカードがランディングページとポートフォリオのデフォルトです。機能とプロジェクトセクションは通常、並べて走査できるためです。商品ページまたはフォームではスタックされたバンドが適しています。訪問者が一度に1つのことを読むようにしたいからです。
ワイヤーフレームは小さい電話スクリーンで動作しますか？
はい。すべてのレイアウトは、グリッドとサイドバープラスメイン配置を含む、おおよそ480px幅未満の単列に折りたたまれるため、デスクトップドラフトと同じスクリーンでモバイルドラフトを確認できます。
後で更なるページタイプが追加されますか？
ランディングページ、ブログ投稿、ダッシュボード、商品ページ、ポートフォリオ、お問い合わせフォームは、フリーランスWordPressビルダーがドラフトする最も一般的なページタイプをカバーしています。実践で明確なギャップが現れたら、プリセットリストに追加されます。

タブに保つ価値があるほかのWordPressツール

noonwpは、Gutenberg、フルサイト編集、およびRTL Wordpressを、クライアントサイトを公開する人々のために、それについて読むだけでなく、対象としています。

スクリプトリウムを開く
Noon