Webディレクターになるには?調べるなら【ディレタマ】 » 「Webディレクターとは?」なんでも事典 奥深きWebディレクターの世界 » WebディレクターとWeb制作工程 » 構成案・ワイヤーフレーム作成

構成案・ワイヤーフレーム作成

Webサイト制作の設計書となる構成案、いわゆるサイトマップ・ディレクトリ設計はどのように行われるのでしょうか。
Webディレクターの基礎知識として押さえておきたい情報をまとめました。

目次

構成案・ワイヤーフレーム
作成とは?

Webサイトをどのように制作するのか、その設計書となる構成案がサイトマップとディレクトリマップと呼ばれるものです。
これは、Webサイトにどのようなページがあるのかをまとめた見取り図のような資料です。

Web制作に入る前に必ず作るもので、その作成を任されるのは多くの場合がWebディレクターです。企画で決定したコンテンツをどのように配置していくか、どのようにリンクさせるかを考慮しながら決定していきます。

ホームページの構造を決める

企画の内容が固まったら、制作するホームページの構造を具体的に決めていきます。構造を決める際には、以下のようなポイントに気をつけて作業を進めていきましょう。

ディレクトリマップでサイトの構成を整理する

ホームページは階層構造となっているのが特徴。一番上がトップページ、その下に大カテゴリがあり、さらに小さなカテゴリや下層ページへとつながっていきます。この構造を一覧にしたものが「ディレクトリマップ」です。ディレクトリマップは、ページ名・階層・HTMLファイル名などで構成されています。

ディレクトリマップを作成しておけば、ページ数の多いサイトでも「どのカテゴリにどのページが格納されているのか」が一目瞭然。確認や修正などの作業もしやすくなります。

ユーザーの導線を考える

ホームページの構造を考える際には、ユーザーの導線(人の流れ)を意識することが大事。
導線がしっかり考えられていないとユーザーにとって「使いにくい」サイトとなり、Webサイト本来の目的を達成できなくなってしまいます。
サイトを訪問したユーザーにどの順番でページを見てもらったら効果がアップするか、どうしたら使いやすいかを仮説検証しながら構成を考えましょう。

各ページの構造を決める

Webサイト全体の構造が決定したら、それぞれのページのどこに何を配置するかを決めていきます。

サイトの使いやすさを意識する

ホームページを構成する要素には、ヘッダー・フッター・ファーストビュー・グローバルメニュー・サイドメニューなどがありますが、これらの配置はユーザーの見やすさ・使いやすさを第一に考えるべき。

Webサイトのメインとなるページに関しては、トップからすべてのページに移動できるように配置すると良いでしょう。この「ページの構成を書き記したもの」が、サイト構成や記事構成、またはワイヤーフレームと呼ばれます。

エンドユーザーの立場で構造を考える

サイト構成(ワイヤーフレーム)を考える際、ついデザイン優先になってしまうことがありますが、ホームページで大切なのはユーザーにとって「分かりやすく、使いやすい」こと
サイト構成を考える際は、どうやったらユーザーが使いやすいかを常に念頭に置き、情報をうまく配置していくようにしましょう。

ちなみに、ユーザーがパソコンでホームページを閲覧するときの目線は「Z」の形をなぞると言われています。そういった点も考慮しながら、情報の優先順位を考えてみてください。

構成案・ワイヤーフレーム作成のポイント・注意点

繰り返しになりますが、Webサイトの構成案を考えるときは「ユーザーの目線に立つ」ことを忘れないようにしましょう。
ユーザーは何らかの課題を持ってホームページを訪問しているわけですから、必要な情報にいつまでもたどり着けないような構造はNGです。

ユーザーが目的の情報をすぐに見つけられるか、制作側が意図する目標にコンバージョン(※)してくれるかを考えながら構成案を作成しましょう。(※Webサイトの訪問者がサイト運営者の望む行動を取ってくれること)

また、なかには最初にディレクトリマップなしで制作を進める……というWebディレクターもいるようですが、ディレクトリマップはサイト制作における地図のようなもの。
これがないと全体の構造が乱れてまとまりのないサイトになってしまうことがあります。サイトコンセプトを実現するためにも、必ず最初に作成するようにしてください。

使いやすいWebサイト制作は
最初の構成づくりが肝!

ユーザーが「使いやすい!」と思ってくれるホームページを制作するには、最初の構成案・ワイヤーフレーム作成が非常に重要です。全体の構成がしっかりできていると、ユーザーは迷わず自分の欲しい情報にたどり着くことができ、最終的な目標(お問い合わせ・購入など)にも結び付きやすくなります。

使いやすいホームページになるかどうかは、Webディレクターの作るワイヤーフレームにかかっています。デザインや技術ばかりに偏らず、ユーザー視点に立ったWebサイト・コンテンツ作りを目指しましょう。

Point
【ひとこと】
ZenkenのWebディレクターが実践する
「構成案作成」とは?

サイトの戦略を決める重要な構成案。ここがサイト制作における屋台骨になります。

そのため私たちZenkenでは、Webサイトの構成ができた時点で、ここまでのペルソナ・コンセプト・提案内容を制作メンバー全員で確認するミーティングを行います。
Webディレクターの独りよがりなサイトになっていないか?訪れるユーザーにとってわかりやすい設計か?まとまりのないサイトになっていないか?など、さまざまな視点からメンバーが気づいた意見を出し合い、サイト構成のブラッシュアップを図るのです。

大勢のWebディレクターやクリエイターが集まり、自身が練ったサイト戦略をチェック・吟味するのは誰しも緊張しますが、それ以上に自分一人では気が回っていなかったポイントに気づけたり、サイトの深みが増し、より良いサイト設計になることを実感できたりする場でもあるんです。

未経験からWebディレクターに
なれる会社の求人を見てみる!

新人Webディレクターの働く現場に突撃!
デスクでカメラ目線で微笑むさとゆり
先輩とミーティング中のさとゆり
構成ラフ考え中… 先輩とミーティング

「Webサイト制作ってどう進めているの?」
「Webディレクターはどんな仕事をするの?」
 これを読めばイメージが掴めます!

クライアントの課題解決のために、市場を分析、ターゲットを設定して企画を練り、コンテンツを創るWebディレクター。…と言われても、「Web制作がよくわからないから、いまいちイメージが湧かない!」という皆さんに、新人Webディレクターの一日を追いかけながら、Web制作の現場やWebディレクターの仕事の一部をご紹介します♪

hello 新人Webディレクターさとゆり
新人Webディレクター

さとゆり

前職はラジオディレクター兼ライター。Web業界未経験でWebディレクターになり丸1年♪ガッツと取材力が武器!

デスクでカメラ目線で微笑むさとゆり
先輩とミーティング中のさとゆり
構成ラフ考え中… 先輩とミーティング