制作ディレクション番外編:構成の役割って?

みなさんこんにちは、こんばんは、初めまして。Webディレクターのヒデノリです!
(twitter始めてました:@hidenori_KROWL

前回までに

と、3回にわたりディレクターの実務に関してご紹介させていただきました。

会社によってディレクターの業務範囲は違うのですが、かなり幅広く紹介しましたので、どの会社のディレクターでも何かしら業務内容として当てはまる所があるかなぁと思います。今からWeb業界に入ろうとお考えのみなさまに「こんな仕事なのか~」と参考程度にでも見ていただければ!

さて、今回は制作ディレクションの「構成を引く」という工程に関して掘り下げてご紹介します。

構成とはいったい?

構成に関しては「Webディレクター徹底解剖!制作ディレクション編」でも記載していますが、会社によって呼び方が違い「構成」「構成書」「ワイヤー」「ワイヤーフレーム」等々。

呼び方は違えど中身は概ね同じで、「サイトの骨組み」となります。
ほとんどがデザインの無い、要素のみでつくられています。

実際に見てみましょう。こんなヤツです。

写真以外ほとんどが白黒ですね、目的が「要素・配置・文言を伝える」事の為、デザインイメージに影響を与えないよう色は基本入りません。

この無愛想なそっけない感じのヤツ、制作進行上の役割は

  • ページの要素・配置・文言等に相違ないか、クライアントと共有する事
  • 訪問者がサイト内でストレスなく回遊できる仕組みになっているか確認・共有する事
  • チーム全体に要素・配置・文言等を共有する事

等々です。

構成を作成するにあたり、事前にクライアントに確認・認識の共有をしておく重要なポイントが2つあります。

  1. ターゲットの訪問目的(主に何が知りたくてサイトに来るのか?)
  2. ターゲットに伝えたい事(企業が最も伝えたいことは何なのか)

の2点です。

例えば訪問者は以下のようにサイトを訪問、回遊します。

【入口】

A社のキャンペーン情報が知りたい!

サイトに入ってすぐに情報を発見!(ストレスなくGOOD!)

さらに別の新商品情報が掲載!次はこんなサービスが始まるのか!

【出口】

極端ですがこんなイメージですね。
つまり重要な2つのポイントを構成に落とし込む場合、

「入口は訪問者の欲しい情報、出口は企業側の伝えたい情報」

になるように制作をします。

最初にアクセスしたページで訪問者のほしい情報が見つからない(すぐに見つけることが出来ない、も含みます)場合、別のサイトへ行ってしまいます。3秒位までには見つかるように情報を配置したい所です。僕は2スクロールして見つからないと諦めます(早い)

では、早速制作してみましょう!

 

何で構成引くべき?

制作に便利な色々なソフトが世の中には存在します。
好きなの、選んで下さい。

Microsoft PowerPoint

windowsならコレ、っていう定番ソフトですね。バージョンさえ気にしなければ割と多くのパソコンに入っているかと。基本的にはこれで十分な気がします。

 

cacoo

簡単に共有できる、いい感じのソフトです。無料での使用も可能です。企業単位で使うこともできるので、おススメです。有料プランあります。

 

Adobe Illustrator CC

アドビの有名なソフトですね、無料期間もありますが、基本的に使用にはお金かかります。

 

Adobe XD

KROWL MAGAZINEでも過去に紹介しています。無料で使用も可能ですので、おススメです。

 

紙とペン

紀元前からガッツリ使われている最強にして至高のツールです。チラシの裏を利用すればモチロン無料。私も紙から書き出すことが多いです。

 

構成書いてみよう!

準備が出来たら早速始めましょう。今回まず紙に書いていきます。

こんな感じですね。

最新情報(ニュース)をTOPに掲載する事で、検索時に流入しやすく。
かつ、自社サービスをTOPでわかりやすく説明する事で、訪問者によりサービスを理解してもらうようにします。

また、TOPに更新頻度の高いニュースの要素を配置する事で、しっかりと「生きたサイト」に。SEO的にも良いと思います。

そしてここからはわりと細かく、清書的な意味合いでPCに向かいます。

今回はcacooで制作してみます。

こうなりました。

※中身は非常に適当です。

この構成をもとに、クライアントとやり取りをしていきます。

1ページで完結するLPやキャンペーンページなら、クライアントとのやり取りを含め3日~5営業日、数十~数百ページのコーポレートサイト等になるとフェーズ分けをしながら1か月単位で進める事になります。

そして文言・写真・要素、全てがFIXして初めて「構成FIX」となります!

 

最後に

いかがでしたでしょうか?凄くザックリですがこのように作っていきます。

上記の流れが私の構成FIXまでの進め方になります。
ただ、構成の進め方も人によって、チームによって、会社によってそれぞれ違います。
構成の時点は本当に要素のみで、文言はデザイン時に纏めて進めるディレクターさんもいます。
意図だけ共有して構成はデザイナーさんが引いたりするチームもあります。

この記事も一つの進め方として是非参考にしてくださいね!

最後まで読んで頂き、ありがとうございました!

関連記事