ワイヤーフレームを作る時に考えておきたい事

2022年5月18日 09:37

ワイヤーフレームはデザインのベース以外にも、どのようなフォーマットでデザインをしていくかを考えていくためのたたき台になる物です。
例として、ものすごくざっくりページの構成を作ってみました。

ざっくりしすぎてますが、まず最初にヘッダーがあって、記事のメイン部分があって、バナーなどを置く場所があって、最後一番下がフッターになる構成を書いています。
書いているときには、ある程度HTMLで作ったらどうなるのかを考えていきます。実際には以下のようなHTMLになるようにワイヤーフレームを制作しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <header>
    <h1>ヘッダー</h1>
    <nav>
      <ul>
        <li>メニュー１</li>
        <li>メニュー２</li>
        <li>メニュー３</li>
        <li>メニュー４</li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <header>
        <h1>記事のヘッダータイトル</h1>
      </header>
      <section>
        <h2>セクションの大見出し</h2>
        <div>
          <h3>セクションの小見出し</h3>
          <p>このような感じで記事が書かれています。</p>
          <p>このような感じで記事が書かれています。</p>
          <p>このような感じで記事が書かれています。</p>
        </div>
      </section>
      <section>
        <h2>セクションの大見出し</h2>
        <div>
          <h3>セクションの小見出し</h3>
          <p>このような感じで記事が書かれています。</p>
          <p>このような感じで記事が書かれています。</p>
          <p>このような感じで記事が書かれています。</p>
        </div>
      </section>
      <footer>
        <p>ここは記事のフッター</p>
      </footer>
    </article>
    <aside>
      <p>記事とは関係ないけど何か置いておくバナーなどがあればここに置く</p>
    </aside>
  </main>
  <footer>
    <h1>フッター</h1>
    <nav>
      <ul>
        <li>メニュー１</li>
        <li>メニュー２</li>
        <li>メニュー３</li>
        <li>メニュー４</li>
      </ul>
    </nav>
    <p>コピーライトなどを記載する</p>
  </footer>
</body>
</html>

見比べてみると、HTMLのタグがワイヤーフレームのどの部分に対応しているのかが分かると思います。
この例は見比べて分かりやすくなるように特に単純に作られていますが、ワイヤーフレームを作るときはなるべくシンプルに作っておきます。
シンプルに作っておくことで、制作するHTMLの構造が分かりやすくなり、その後のコーディングがやりやすくなります。

色々な物をどの様に配置するのかを考えるためにワイヤーフレームを作るのですが、同時にHTMLでの表示を見据えたデザインを行うために必要なものになります。
ワイヤーフレームがしっかり作られていれば、この後でどんなにデザインを作り込んでもそのデザインはHTMLとして再現できるようになります。

どのようなデザインを作るにしても、ワイヤーフレームの土台の上に組み上げていけば、その後の対応が便利になっていきます。

この記事が気に入ったらサポートをしてみませんか？