ワイヤーフレーム作成の際に意識していること

こんにちは。ディレクターの仕事のひとつが、Webデザインの原型となる「ワイヤーフレーム」をつくることです。ということで日々勉強中の身ではありますが、今日は、私がワイヤーフレームの作成の際に意識していることを紹介したいと思います。
※あくまでも個人的な見解であり、所属先とは関係ありません。

はじめに：情報設計とデザインは密接にかかわっている

キャッチコピー、見出し、説明文の量、素材…
とくにバナーやチラシデザインを作成されたことある方ならお分かりかと思うのですが、文字数が1文字変わるだけで、デザインの見せ方も変わりますよね。
情報整理や情報設計が不十分だと、情報の優先度も付けづらくなり、結果としてデザインに落とし込むのが難しくなります。

最終完成形のデザインを意識しながらワイヤーフレームを作ることで、
①    ユーザーにより情報を届けやすくなる
②    デザイン性に優れたWebサイトがつくれる
といったメリットがあると、私は考えます。

ワイヤーフレーム作成

１． 情報設計

サイトの目的に照らして、どのような情報を入れるか、箇条書きで洗い出します。各セクションの見出し（H2）を書きだすイメージです。
そのうえで
①    どのような情報を
②    どのような順番で見せて、
③    どのように強弱をつけるか
を具体的に考え、コンテンツとして落とし込んでいきます。

２． デザインを想定してレイアウトを作る

1. HTML構造を意識する（H2、H3など）

2. 文字サイズ、行間、画像の縦横比を大まかにルール化する
   ①文字サイズ…基準を16pxにして、見出しは8の倍数で設定しています。
   ②行間…通常（160％）、やや広め、広めの3パターンくらいです。
   ③画像…基準となる比率を決めて、基本的はその比率を使います。

3.    情報の重さや画面の重さを意識する
   文字の大きさやセクションの大きさはもちろん、明度の異なるグレーを複数色使いながら、画面の重さを表現します。

4.     余白の取り方
   広めか、狭くするか…。

5.  どのように視線誘導をするか
   視線誘導を意識しながらレイアウトを組みます。

３．機能や実現したいデザインはわかるように

＜WFでも視覚的に表現する＞
・ボタンなら疑似要素を付ける
・外部サイトへの場合は外部リンクアイコンを付ける
・お知らせ記事に「長いカテゴリ名」がつくことを想定する
＜指示出し＞
・どんな画像を入れたいか説明書きを入れる
・MVは複数画像が切り替わる想定なので、複数枚選ぶ指示を入れる
・このセクションはカルーセルにする旨を追記する

４．ダミーテキストはできる限り避ける

綺麗な文章でなくてもよいので、どんな内容を入れるかをざっくり書きます。おおよその文章量を想定しておくことで、デザインへの影響を受けにくくなります。

５．修正に強いデータを作る

1.  コンポーネントの作成
   ヘッダー、フッター、CTAはコンポーネント必須です。

2.  Figmaのオートレイアウト
   文字数が変わっても、レイアウトが崩れないので便利です。

3. レイヤーの整理整頓
   レイヤー名はできる限り付けます。　
   私はセクションごとにレイヤーを分けています。

６．パーツストック

ワイヤーフレームの作成に使うパーツをストックしています。
ヘッダー、フッター、CTA、Box、お問い合わせフォームなど…
Webサイトのデザイン自体、ある程度の型があるので、何パターンかつくっておくとかなりの時短になります…！

おまけ：ワイヤーフレーム模写
スピーディーかつ正確なワイヤーフレームをつくるために、ワイヤーフレーム模写を行っていました。情報の見せ方、流れや強弱など理解するのに役立ちましたし、Figmaの操作にも慣れることができました…！

いいWebサイトを作るためには、良いワイヤーフレームが必要だと思うので日々精進していきたいところです。それでは失礼いたします。