DAINASHI YESTERDAY

ワイヤーフレーム(ウェブサイトの設計図)を作ろう

guide07

これまでこの講座では、以下のことについてお話ししてきました。

  • ウェブサイトの構成や階層構造について
  • 各ページコンテンツの作り方
  • ウェブデザインの基本的なこと
  • ウェブサイトのレイアウトについて
  • ウェブデザインをする上でのコツ
  • スマホ対応のためのレスポンシブデザイン
  • マークアップのための3つの言語
  • マークアップでつまづきやすいポイント

これで、ウェブサイトを制作する上での最低限の知識はご紹介できたかと思います。とはいえ、このままいきなりデザインに入ってしまうと、高確率でコケてしまいます。

ウェブサイトに限らず、何かを作るにはまず設計図を作ることが重要です。設計図もなくいきなり組み上げようとしても、きっと途中で訳が分からなくなってしまいますよね?

そのため、実際の制作に入る前に、これまでに仕入れた知識や作ってきたコンテンツをフル活用できるようにウェブサイトの設計図である「ワイヤーフレーム」を作りましょう。

業者に頼らず自分で作る!初心者のためのウェブサイト制作ガイド【全10回】


ウェブサイトの構成・コンテンツの内容を再確認しよう

ワイヤーフレームを作成するにあたって、まずはウェブサイトの構成やコンテンツの内容について再確認しましょう。

ウェブサイトは各ページが階層構造(ツリー構造)になるように構成するんでしたよね? またコンテンツの内容は、あなたがユーザーに伝えたいことがしっかり伝わるものになっているか、不足している情報はないかなど、もう一度吟味してみましょう。

こうやってウェブサイトの基本となる構造やコンテンツの構成を何度も検討していくことで、ウェブサイトはパワーアップしていきます。

まとめられるコンテンツは1ページにまとめたり、また分割した方が分かりやすければ分割したりしつつ、階層構造を意識してコンテンツの配置図を作っていきましょう。

あなたのウェブサイトに最適なレイアウトを考えよう

ウェブサイトの構造・コンテンツの内容を確認したところで、次はあなたのウェブサイトに最適なレイアウトはどんなものか考えていきます。

コンテンツの役割や、そのページでユーザーに取ってもらいたい行動(購入なのか他ページへの回遊なのかなど)を考えながら、場合によってはページごとにレイアウトを変えることも検討しましょう。

なお、多くのウェブサイトにはヘッダー、サイドバー、フッターなどのエリアを配置します。ここでは、それらの各エリアに入れておきたい要素について考えていきたいと思います。

ヘッダーに入れておきたい要素

ヘッダーは、ウェブサイトの中でもっとも目につきやすいエリアの1つです。そのため、ここにウェブサイトのタイトルやロゴマークなどを表示しておくことで、「そのウェブサイトが何のウェブサイトであるか」を効果的に伝えることができます。

また、どんなレイアウトを選択するにしても、ほとんどの場合はすべてのページにヘッダーエリアを配置します。そのため、電話番号を表示したりお問い合わせボタンなどを設置しておくことで、ユーザーからのスムーズなコンタクトを促すことができます。

その他にも、サイト内の主要なページへの行き来をしやすくするためのグローバルナビゲーションや、SNSアカウントへのリンクなども設置しておくとよいでしょう。

サイドバーに入れておきたい要素

サイドバーには主に、回遊率を高めるためのコンテンツを配置します。

具体的には、ブログのカテゴリーページや人気記事・最新記事などの一覧、商品紹介ページや特集コンテンツなどへのバナー、サイト内検索やプロフィール(またはプロフィールページへのリンク)などです。

フッターに入れておきたい要素

フッターはもっとも自由度が高い反面、もっとも目につきにくいエリアです。

そのため、必然的にあまり重要度が高くないコンテンツを入れることが多くなります。たとえば、関連サイトや外部サイトへのリンク、コピーライト表記、SNSアカウントへのリンクなどです。

また、サイトマップやタグクラウドなどの回遊性を高めるためのサイト内リンク、簡易的なお問い合わせフォームを設置する場合もあります。

コンテンツ下部に入れておきたい要素

ヘッダーやサイドバー、フッターなどは全ページ共通の場合がほとんどですが、コンテンツ部分には、各ページ特有の情報が配置されます。そのため、もっともユーザーに読まれやすいエリアです。

その中でも、コンテンツ下部はもっともクリックされやすいエリアと言われていますので、ここは是非有効に活用しましょう。

たとえばブログページであれば、その記事の内容に関連する記事の一覧を表示することで回遊性を高めることができます。

またFacebookのページプラグインやTwitterのタイムラインなどを埋め込んでおくことで、フォローしてもらいやすくなりますし、「いいね」や「ツイート」ボタンを設置することでシェアしてもらいやすくなります。

その他にも、メルマガ登録フォームや商品(または無料レポートなど)のダウンロードページへのリンクなどを設置しておくのにもおすすめです。

ワイヤーフレーム作成は、まずは手描きから

ウェブデザインというと、どうしてもPhotoshopやIllustratorなどの画像編集ソフトで制作するイメージがあるかもしれません。しかし、ワイヤーフレームはまず手描きで作りましょう。

理由はいくつかありますが、やはりソフトで描画するのに比べて手描きの方がアレコレ自由に描けること、ワイヤーフレームの段階ではヘッダーやサイドバーなどの各要素のサイズを正確に画く必要がないことなどが挙げられます。

手描きの段階では、はじめから完璧なワイヤーフレームを作ろうと考えないでください。

作っていくうちに新しいアイディアが出てきたり、「このコンテンツはやっぱりこっちに…」なんてことは絶対にあります。描いては直してを繰り返して納得ができるまで煮詰めていきましょう。

なお、レスポンシブデザインで構築する場合は、PC表示・スマホ表示など各パターンでのワイヤーフレームをそれぞれ作っておきましょう。

PhotoshopやIllustratorなどのソフトで仕上げる

手描きでワイヤーフレームを作ることができたら、いよいよPhotoshopやIllustratorなどの画像描画ソフトで清書していきます。

可能ならこの段階でサイドバーやコンテンツなど各要素のサイズを決めてしまってもよいですが、必要ではありません。

実際ウェブ制作の現場でも、Webディレクターが作成したワイヤーフレームを参考に、デザイナーがデザインしながら各要素のサイズを決めていくことの方が多いです。

ワイヤーフレームはウェブサイトの設計図ですが、自動車や家、電化製品などのように設計図の段階で各部品のサイズを決めてしまう必要はありません。

またこのような理由からCacooなどの作図ソフトで作成したり、エクセルでササッと仕上げてしまう人もいますので、あなたのやりやすい方法で進めていけばいいでしょう。

≫ 第8回:ワイヤーフレームが完成したら、いよいよデザインへ!

投稿者: