ホームページ制作は、自社サイトを持っていなかった企業にとって、一大事業といえるでしょう。しかし、実際にはどのような流れで行われているかを理解している人は少ないはず。
そこで今回は、デザインの観点から、BtoBサイトデザインはどのように制作されるのか、ということについてお話します。
デザイン制作の流れは、以下の５フェーズから構成されています。
1.企画
2.設計
3.デザイン
4.モックアップ
5.コーディング
それぞれについて、一つずつ解説します。
目次
企画段階におけるデザイン制作彩度の人間仕事は、いかにヒアリングで情報を引き出すか、という事です。
企画段階でまず聞き出すべきは、その目的です。ただ、今回はBtoBサイト制作、と限定しておりますので、目的は基本的に以下の通りです。
すなわち、資料請求、または問い合わせです。
BtoBサイトの目的は、案件成約ではありません。それは資料請求や問い合わせの後。営業部門の人間が直接問い合わせしてもらった会社と連絡を取り、様々なやり取りをしてやっと確約される最終目標です。BtoBサイトで完結するものではありません。
BtoBサイトの目的は、その営業部門へと問い合わせを行ってもらう、という案件成約までの入り口になることです。それがつまり、資料請求や問合せ、ということになります。
ですが、目的を知ったからと言ってすべての企業に対応できるわけもありません。顧客企業がどんな相手をターゲットとしているのか、そもそもサイトを見る人間は誰なのか、という問題もあります。
ターゲットそのものは、企業によってまちまちでしょう。そこを重点的にヒアリングすべきです。ですが、サイトの閲覧者はヒアリングせずとも特定できます。それは、「上司から調査を命じられた一般社員」です。
何故なら、一般社員以上の立場の人間は、そんなことに時間を割く余裕がないからです。ですが一般社員とて時間が有り余っているとも考えにくいでしょう。
そんな一般社員に優しい、ざっくりとした理解が得られるようなサイトデザイン、という事を念頭に入れて、デザイン作成に挑むのがよいでしょう。もちろん、だからといってヒアリングを疎かにしてはいけません。
目的もターゲットも分かっている以上、ヒアリングで何を問うべきなのでしょうか。
それは、要望、条件、方向性、コンセプトです。
どんなことができるサイトにしてほしい。これは最低でも入れてほしい。こういう方向性で行きたい。コンセプトはこう。クライアント側で様々なイメージがあることでしょうから、可能な限りここで情報を引き出す必要があります。
ただ、BtoBサイトは先ほど述べた通り、目的や想定閲覧者が決まっています。これらの知識にそぐわない要望があれば、ちゃんと却下して、より結果に結びつくのはどんなサイトデザインなのか、という点についてちゃんと話し合うことが重要です。
ヒアリングが終わった後に待っているのは、サイトマップ、ワイヤーフレームの作成です。
これかいわゆる設計、ということになります。ですが、サイトマップ、ワイヤーフレームと言われても知らない方もいらっしゃるでしょうから、ここでそれぞれの意味をご説明します。
・サイトマップとは
サイト全体のページ階層が把握できる図のことです
・ワイヤーフレームとは
ページのどこに何を掲載するのかを、レイアウトして現した設計図のことです。
こう言ったものは、基本的にWEBディレクターという立場の人間が作成します。WEBディレクターとは、WEBデザイン作成の管理者のことです。ここで作成されたサイトマップとワイヤーフレームがWEBデザイナーに渡されることで、次の工程、デザインに進みます。
補足として、この段階でクライアントから、掲載する写真や文章の文字データを受け取ります。デザインの素材として活用されるためです。
ですが、クライアント側で写真も文章も用意できないこともあります。その場合は、カメラマンやライターが代行して進めることとなります。
WEBディレクターから様々素材を受け取ったWEBデザイナーは、ここから作業を開始します。
作業は基本的にデザインソフトで行われます。例えばillustratorや、Photoshopなどです。
ここで念頭に置くべきは、企画段階でも述べた目的と、顧客企業のブランドイメージです。高級志向の顧客企業なら、静かで落ち着いた雰囲気に。大衆志向の顧客企業なら、賑やかなレイアウトにすると好まれるでしょう。
具体的には、ジャンプ率という要素があります。これはタイトル文字のフォントサイズと、普通の文章のフォントサイズがどれだけ離れているか、という事を示すデザイン用語になります。
ジャンプ率が高いと、賑やかな印象が出ます。逆にジャンプ率が低いと、静かな印象になります。高級志向ならジャンプ率低め、大衆志向なら高め、など使い分けが出来るのです。
また、デザイナーとしての腕が出るのは、デザイン全体の統一感でしょう。
デザインの統一感は、共通したコンテンツのハイツ、配色や、画像の大きさ。フォントの種類なども重要になってきます。
そう言った様々な要素を的確に組み合わせることで、デザインに統一感が生み出されるのです。
モックアップ、という言葉が聞きなれない方もいらっしゃるかと思いますので、まずモックアップとは何か、という事から説明します。
モックアップとは外見を実物そっくりに似せて作られた模型のことです。
転じて、この段階はモックアップ作成、提出、そしてクライアントのチェックとそのリテイク作業のことを指します。
何故この段階でのモックアップなのかといえば、それはコーディングまでしてしまってからリテイク作業を行うと、無駄な手間がおおく発生してしまうためです。
そのため、作業の効率化を目的としてこの段階でモックアップが行われます。設計段階ではダメだったのか、という疑問がありそうですのでそちらについても言及すると、「設計段階でも見えなかった要素が、ここで浮き彫りになる」ために、モックアップが行われるのです。
この段階で、デザインは最終稿にまでもっていきます。何かイメージが違ったり、という要素があれば、これだとこれこれこういう事が出来ない、という課題はこの段階で発見し、コーディング前に対応してしまいます。
モックアップが完了すれば、最後は実装、コーディング作業です。
コーディングとは、その名の通りコード。つまりはHTMLやCSSなどのコードを書き記すことで、デザインを素材としたサイトを構築するフェーズとになります。
ここで気を付けるべきは、可能であれば「レスポンシブデザイン」としてコーディングしてもらう事です。
レスポンシブデザインとは何かというと、「画面サイズに自動で対応して、表示サイズを変形させるデザイン」のことです。
レスポンシブデザインにしておくと、PC用のデザインはこれで、スマートフォン用のデザインはこれで、という風に、複数デザインを作成する手間が省けます。モックアップそのものは作成する必要がありますが、わざわざデザインもコーディングもPC用、スマートフォン用、という風に制作しなくて済むので、コストの削減につながります。
以上が、BtoBサイトデザイン制作の流れとなります。では、ここで一度振り返っておきましょう。
企画段階では、BtoBの場合は目的が資料請求ないし問合せで、閲覧者は一般社員です。その前提で要望などをヒアリングし、適切にデザインが作成でき、かつクライアントの目的が果たされるようなデザインイメージを掴みます。
設計段階では、企画段階のヒアリングで得た情報をもとに、サイトマップとワイヤーフレームを作成します。また、この段階でデザインの素材となる写真や文章をクライアントから確保します。
デザイン段階では、サイトマップとワイヤーフレームの情報をもとに、実際のデザインを作成していきます。注意点はクライアントのブランドイメージや、統一感です。デザイナーの腕が試されます。
モックアップ段階では、デザイナーが作成したデザインを完成形の模型として、クライアントのチェックに出します。ここでリテイク作業や課題の洗い出しなどを済ませます。
最後にコーディングです。HTMLやCSSで、作成デザインをもとに実際のサイトを作成します。おススメは、画像サイズに応じて表示が変化する、レスポンシブデザインです。
この、企画、設計、デザイン、モックアップ、コーディングの5工程でもって、BtoBサイトのデザインは作成されます。こちらの知識をご活用いただけたなら幸いです。