マーケティングサイトのワイヤーフレームデザイン

Acmeマーケティングランディング

この作例は「Acme · Marketing Landing」を、赤入れレイヤー付きの低忠実度デスクトップ版ワイヤーフレームとして示しています。最大の価値は追跡しやすさです。左のキャンバスが提案するページ構成を示し、右のパネルが番号付きの各領域に期待される役割を説明します。ブランドアセット、最終コピー、本番の挙動が固まる前に、構造を議論するのに役立ちます。

ヘッダーには「WIREFRAME · REDLINE」「DEVICE DESKTOP 1280」「FIDELITY LOW」「REV A」と表示され、作業の前提がわかります。これらのラベルにより、このキャプチャは完成したマーケティングページではなく、設計仕様として位置付けられます。ブラウザ風のアドレス欄には「acme.example / home」とあり、ページに具体的なルートを与えていますが、背後のサービスは確認されていません。

01

キャンバス

左の大きな領域に、ナビゲーション、ヒーロー、実績帯、フィーチャーグリッド、フッターというページの順序が示されています。

02

仕様

右のパネルが、これらの領域を寸法、ブレークポイント、配置などの具体的なメモに落とし込みます。

このワイヤーフレームが役立つ場面

このデザインは、マーケティングページの初期の設計、レビュー、引き継ぎに向いています。どのセクションをページに置くか、どのレスポンシブ変更に明確な合意が必要かを、チームが共通の対象物で判断できます。内容の大半はニュートラルなブロックなので、レビュー担当者は、仮のコピーや画像を検証済みのメッセージと取り違えることなく、構図とルールに集中できます。

ランディングページを設計する

5つのピンが、ナビゲーション、ヒーロー、ロゴ帯、フィーチャーグリッド、フッターの領域を確保します。フッターはプレースホルダーのバーによる4カラムで、実際に動作するリンクや法務表記の行はありません。この抽象化によりセクションの順序と相対的な比重は明確になりますが、最終的なコピー、パートナーの身元、コンバージョン成果までは検証できません。

レスポンシブの意図を見直す

サイドバーは、モバイルでのロゴ非表示、960pxのフィーチャーグリッドのルール、1000px未満での2カラムのフッターを提案しています。一方、実際のCSSのブレークポイントは1000px以下の1つだけです。ここでシェル、ヒーロー、フィーチャーを縦に積み、注釈パネルを静的にし、フッターを2カラムに変えます。ロゴ帯は表示されたままです。こうした差異から、このページはすべてのメモが実装済みであることの証明ではなく、仕様レビューの例といえます。

トップナビゲーションからフッターまで

仕様は1対1の番号付けを採用しています。ピン①はニュートラルなナビゲーション行を示し、64pxで固定されスクロールで縮む挙動はメモであって、実装されたナビゲーションではありません。ピン②はテキストと、×印付きのメディアプレースホルダーを示します。実際のヒーローグリッドは1fr/0.85frでテキストにやや広い幅を与えますが、プレースホルダーは16:9の比率が強制されているのではなく、最小高さが188pxです。

ヒーローの構成

メモでは、H1は48/56、サブヘッドは18/28、アクションはプライマリCTAとゴーストCTAのペアと指定されています。スクリーンショットでは、これに対応する左寄せのテキストバーと2つのアクションブロックが、大きな×印付き画像プレースホルダーの横に配置されています。この配置は意図した強調を読み取りやすくしますが、低忠実度の画像では、最終的なビジュアル素材、トリミング、インタラクションがどうなるかは確定できません。

実績、フィーチャー、締めくくり

ピン③は、名前や実在が確認されたパートナーではなく、同じ幅のニュートラルなロゴ枠を5つ確保します。ピン④は3枚のフィーチャーカードをデスクトップで1行に並べ、38pxのアイコンブロックを置きます。実際のflexの間隔は、注釈の8pxに反して10pxです。ピン⑤はフッターの4カラムを確保しますが、法務表記の行はありません。繰り返されるブロックにより各領域を比較しやすくなりますが、最終的なコンテンツと挙動は未解決のままです。

見えているデザインと機能の境界

グレーボックスのナビゲーション、ボタン、リンク風の形状はdivであり、クリックや送信の動作はありません。実際に固定される要素は右側の仕様パネルで、1000px以下では静的になります。ナビゲーションは固定も縮小もされません。acme.exampleというアドレスはブラウザクロームのテキストであり、遷移先ではありません。注釈の寸法は実装と突き合わせて調整すべき設計要件であり、本番での保証ではありません。

サンプル名、ルート、仕様の数値は例示です。同梱のマニフェストはOpenDesignによる制作とMITを宣言していますが、図中の各アセットに個別のライセンスを与えるものではありません。このキャプチャが示すのはワイヤーフレームとそのメモであり、パートナーの推薦、連携サービス、コンバージョン成果ではありません。