ワイヤーフレーム、きちんと理解していますか?

1人で制作をする場合は自分の思い描いた通りにWebサイトを作ることができますが、チームで制作をする場合は他のメンバーに出来上がりのデザインをイメージしてもらう必要があります。

ワイヤーフレームは、そのようなWebサイトのコンセプトを共有する場面で欠かせないツールです。

これからwebサイトを作りたい、アプリを開発したいという人のために、「ワイヤーフレーム 」について一緒に復習していきましょう。

01 ワイヤーフレームとは?

ワイヤーフレームとは「ホームページのレイアウトやコンテンツの配置を決めるための設計図」のようなものです。ワイヤーフレームの目的は

  • 情報整理のため
  • ホームページのレイアウトを決めるため
  • プロジェクトメンバーと認識を合わせるため
  • アイデア出しや議論の「たたき台」にするため

といった情報の優先順位や構成を決めるもので、基本は制作するテンプレートとなるページ、もしくは全ページのワイヤーフレームを制作します。以下が実際に制作されるワイヤーフレームの一例です。

image

手書きや、IllustratorやPhotoshopを使って制作したり、ワイヤーフレームの制作ツールはさまざまです。現在はAdobeXDを利用して制作されることが増えてきています。

ヘッダー・グローバルナビゲーション

サイトの一番上に表示される部分です。ヘッダーやグローバルナビゲーションと言われ、全ページで共通して使用されます。

メインビュー

メインビューは、ユーザーがTOPに入ってきたときに、真っ先に目に入る重要な部分です。インパクトのあるキャッチコピーや画像を入れて、サイトを印象付けることが重要です

コンテンツエリア

最も重要なのが、この部分です。サイト全体の「目次」的な役割を果たすため下層のコンテンツページをわかりやすく並べてあげるのがコツ。そのときに重要なのは下記のポイントです。

  • 全てのコンテンツを並べてはいけない
  • 見せたいコンテンツから順番に並べる

掲載する情報は「特にユーザーに見て欲しい情報」に絞ると強弱がついて非常に良いページになります。
ポイントは「どの情報を優先してユーザーに見せたいか?」です。
それによってコンテンツの配置や順番が、決まってきます。

フッター

ページの一番下に表示される要素です。ここもヘッダーと同じく、全てのページに共通して表示される部分です。

02 ワイヤーフレームの読み方

どの要素がどのような位置ではいるか。下記を参考に確認してみましょう。

image
image

テキストの内容や、写真なのかアイコン・イラストなのかは、クライアントやディレクターなどに、確認しながら進めていきます。

03 レイアウトの手順

テキスト要素のあたり文を配置→画像要素を配置していきます。

image

テキスト要素を配置

  • テキスト要素を配置していきます。この段階では、大まかなデザインをモノクロで進めます。

画像要素を配置

  • 写真や、イラストを配置します。写真を配置した後、「ベースカラー」を中心に配色を進めるとスムーズで、まとまりのあるデザインに仕上げることができます。

オンライン相談に対応します。

Google Meetで相談(60分)では、
オンラインで画面共有を、デザインの添削やツールの使い方をアドバイスしていきます。

初心者向けの指導から現場での実践的な知識を活かした指導まで、
丁寧にいたしますので、一度プロフィール欄に遊びに来てくださいね。