3.ワイヤーフレームを作る

こんにちは!karen.k デザイナーのカレンです。
初めてのWordpressシリーズ、第4弾の今日は、3.ワイヤーフレームを作るです。

ワイヤーフレームは、サイトの設計図です。ワイヤーフレームを作ることにより、サイト制作を最短距離で無駄なく進めることができるようになるので、少し面倒でも、必ずワイヤーフレームを作りましょう。

ワイヤーフレームは、サイトの設計図です。と言われてもピンと来ないと思いますので、このサイトのTOPページのワイヤーフレームを実際に見ていきましょう。

ワイヤーフレーム

一目見ただけで、とこにどの要素が掲載されるのかがわかりますよね。こういった設計図を作ることで、これから制作するサイトを”見える化”し、掲載内容の選定や、作業の進め方の段取りなどを整え、サイト制作を最短距離で進めることができます。ご自身でサイトを作る時はもちろん、外注でサイトを作る際にも、ワイヤーフレームをしっかり作り込んでから制作に入ることがとても大切です。

ワイヤーフレームの作成手順

では、実際にワイヤーフレームを作っていきましょう。ワイヤーフレームを作る手順は以下の2STEPです。

情報を整理する
情報をレイアウトする

 情報を整理する

まずは、WEBサイトに載せたい情報を整理しましょう。ピックアップ→グルーピング→ランキングの順で行いますが、書き込んだ内容を消したり、移動させたりしますので、紙ではなく、パソコンのメモ帳などで行ってください。

ピックアップ

サイトに載せたい情報を乱雑で結構ですので書き出してください。何を書けばいいのか全く見当がつかない場合は、同じような業種のサイトを探して、そのサイトに書いてあることを参考にするといいです。その時注意して頂きたいのが、ただ同じ業種のサイトを探すのではなく、ご自身が好きだなと思うサイトを探して下さい。サイト=情報=ブランドです。どんな情報を載せるかがとても大切になってきますので、参考にするサイトはいつも丁寧に選びましょう。

グルーピング

グルーピングとは、性質の似ている情報をグループ分けしていくことです。例えば、自己紹介や商品紹介に関することは「ABOUT」その事業に対する思いやこだわりなどは「MESSAGE」営業時間などの店舗情報は「CONTACT」といったように分けてください。このようにグループ分けをすることで、サイト上で情報が分散してわかりにくくなるのを防ぎます。

ランキング

サイトの目的を考え、サイトに載せる情報の優先順位を決めます。私のサイトの場合は、デザイナーを探している人に向けているので ①デザイナー紹介(ABOUT) ②実績紹介(PORTFOLIO) ③お問い合わせ ④アート作品(ART WORK) ⑤SNSリンク(INSTAGRAM) といった順になっています。お問い合わせフォームは、情報を見たい人にとっては邪魔になりますので、別ページに設置し、PORTFOLIOのセクションの下に「CONTACTボタン」を設置しています。別ページに移動するのが面倒だ、という方は同じページにお問い合わせフォームを設置することをオススメします。

 情報をレイアウトする

情報の整理ができたら、レイアウトを考えていきましょう。
部屋の間取り(キッチン、リビング、ダイニング、洗面所、トイレ etc…)のように、サイトの設計図にもある程度の間取りがあります。代表的なものは、HEADER / NAVI / BODY / FOOTERです。

レイアウト

キッチンは料理をする場所、リビングはくつろぐ場所と、間取りに役割があるのと同じように、HEADER / NAVI / BODY / FOOTERにも役割があります。

HEADER

HEADER(ヘッダー)は、サイトの看板の役割があり、タイトルやロゴが置かれます。また、メインビジュアルを置くことで、サイト全体の印象を作る役割もあります。雑誌や本の「表紙」、百貨店の「外観」のようなイメージです。この部分でサイトの第一印象が決まるので、とても重要な部分です。

NAVI

NAVI(ナビ)は、HEADERの要素の一部と考えられることが多いですが、とても大切なパーツなので今回は、HEADERと分けて考えます。NAVIは名前の通り、ナビゲーション、案内の役割があります。雑誌や本で言うところの「目次」、百貨店のフロアガイドのようなイメージです。ほとんどのサイトが複数のページで成り立っています。ユーザーを目的のページに誘導するための重要な役割があります。ここは、常にユーザーの目に触れておきたい場所なので、固定デザイン(常に画面に表示されていること)にするのがオススメです。

BODY

BODY(ボディ)は、サイトのコンテンツ部分です。これ以上説明はないです!笑 ほとんどの情報をこのBODYに配置することになります。BODYのレイアウトは、重要度が高い順に上から配置していきましょう。

FOOTER

FOOTER(フッター)は、サイトの一番下に表示される”補足”のような箇所です。FOOTERはサイトによって役割がかなり違ってきますので、いくつか例をあげながら説明をしていきます。

 ナビゲーションとして

阪急阪神フッター

阪急阪神ホールディングス

サイトのページが多いサイトの場合、ナビゲーションとして使われることが多いです。カテゴリーごとに整理されておおり、ユーザーが求めている情報にたどり着きやすくなります。

 重要ページへのリンクとして

LUCUAフッター

LUKUA大阪

会社概要や、プライバシーポリシーなど、サイトのコンテンツとしての重要度は低いが、一部のユーザーにとって重要なページのリンク集として使われることもあります。LUCUA大阪は、ショッピングセンターなので主なコンテンツは店舗情報やイベント情報です。プライバシーポリシーやサイトポリシーなど、ほとんどのユーザーにとって興味がない情報をフッターに設置することで、必要のない人にとっては煩わしくない方法で、必要な人が迷わずたどり着くための導線が作られます。また、サイト運営者側がユーザーに訪問してほしいページのリンクを載せておくこともあります。

 お問い合わせ情報など

歯医者フッター

新大阪ミナミ歯科クリニック

個人ビジネスの方のサイトで一番多いのが、お問い合わせや店舗情報への導線として使われることです。サロンなど、店舗を持っている方はBODY部分だけでなく、FOOTERにも店舗情報をまとめておき、ユーザーがどのページにいても店舗情報にたどり着ける導線を作っておくといいですね。

以上のことを踏まえて、どの情報をどこに配置するのかを考えてみましょう。ある程度決まったら、紙とペンでワイヤーフレームを書いていきます。書き方は、自己流でOKです。ご自身でどこに何があるのかわかるように書ければ大丈夫です!

コメントを残す