ワイヤーフレームを使ってホームページのデザインを設計する方法
ワイヤーフレームを使ってホームページのデザインを設計する方法
この記事を読むための時間：2分
ホームページを作成する人にとっては当たり前のワイヤーフレームですが、初めてホームページを作成する人には、このワイヤーフレームの大切さはなかなか分からず、こんなものを作成する意味があるのかと思う方もいると思います。今回は、ワイヤーフレームの重要性と作成方法について解説していきます。
ワイヤーフレームとは？どうして必要なのか？
ワイヤーフレームとは、web上に作成するページのコンテンツの配置や大きさをおおまかに決めて、完成したらこんな感じのページになると見ただけで分かるように書き出した設計図のことです。この設計図をあらかじめ作成しておくことで、スムーズに作業が進みますし、本番のページを作成してしっくりこないところは設計図に縛られることなく修正することができます。また、複数人でデザインを考えるときにも、方向性を一致させるためにワイヤーフレームは重要になります。言葉だけで考えを伝えるのは難しいですが、設計図にして見える化することでより伝わりやすくなり、考え方の不一致を減らすことができます。
ラフデザインとの違い
ワイヤーフレームは厳密な意味で言うとラフデザインとは違い、枠組みだけの設計図になります。読んで字のごとく、「ワイヤーで線が引かれたフレーム」ということになります。しかし、実際のデザインの現場では枠だけのワイヤーフレームではイメージが湧かないことから、デザインを入れ込んだワイヤーフレームを作成することがよくあります。その場合は、ラフデザインとワイヤーフレームの境界はなくなります。中には本デザインに近い形のワイヤーフレームも存在します。
ワイヤーフレームを作成しよう
まずは、配置したい情報をまとめます。どんなものを載せたいか考えて出るだけ出して、その中から、本当に必要なものを抜き出し、さらにそれをグループに分け、まとめます。そして、その中でどのグループが重要なのかを判断し、並べる順番を決めるのがいいでしょう。次に、ページのレイアウトを決めていきます。先ほどグループに分けた情報量を基準にどう分割するか決定します。初めに取り組むのは基本のレイアウトから選ぶとよいでしょう。レイアウトが決まったら紙と鉛筆、またはphotoshopなどのソフトを使用して作成していきましょう。読者の気持ちになってどういう順番で並べるとスムーズに読み進められるか考えながら、しっくりくるまで何度でも書き直しましょう。ここで、しっかりアイデアを出すことでいざ本番で組み立てている時に、バランスが変だったり、情報を増やしたり減らしたりしたい場合は、他のアイデアに変更でき、組み合わせて新しいデザインにしたりと、修正が楽にできるようになります。
コンテンツマーケティングに特化したサイト制作なら
JetB株式会社（ジェットビー）
コンテンツマーケティングやコンテンツSEOに最適化されたWEBサイトの制作を行なっています。商品や会社のブランディングイメージを強化するためのデザイン制作から、CMSの独自カスタマイズまでを一貫して提供します。HPの無料診断も行なっていますので、お気軽にお問い合わせください。
