Webサイトの作り方〜Webディレクターというお仕事〜

WEB・デジタルのお仕事
2017.09.12

 今回はWebサイトの作り方について少しご紹介してみます。いきなりwebサイトの作り方などというと、「HTMLが~」「JavaScriptが~」など難しい話になるのではと思う方もいらっしゃるかもしれませんが、今回はWebディレクター、いわゆる現場の責任者に焦点をあて、どんな動きをしているかを中心に解説していきたいと思います。

 もちろん制作会社等によって作り方もいろいろと違いはありますが、例によって“当社での進め方”ですので、その旨ご了承ください。

はじめに

 当社で手掛けるのは、ゲームメーカーのコーポレートサイトをはじめとして、コンシューマゲームやスマホアプリの公式サイトなどです。その作業は情報の収集から始まり、幾多の工程を経て、最終的にHTMLのアップロードを行うところでひとまず作業が完了となります。

 今回はその一連の流れを、

①ヒアリング+企画提案
②制作準備
③ワイヤーフレームの作成
④ページのデザイン作成依頼
⑤コーディングの依頼とチェック
⑥公開

というように以上6つの段階に分けて説明していきます。

①ヒアリング+企画提案

 Webサイトの制作を依頼された場合、まず必要になるのがヒアリングの場です。その際、スムーズに打ち合わせが進むよう、当社でも現状の情報を整理しておきます。

 まずは過去に取引があるかないかを確認します。あればその事例の記録をチェック、なければどのような業務を行なっている会社なのかを調べ、それがゲームメーカーならどんな作品を出しているのかなど、事前にある程度の準備をしてから打ち合わせに臨みます。
 依頼内容によっては、この段階で機密保持契約や守秘義務契約なども並行して準備し、打ち合わせまでに完了させておく必要があります。

 そして打ち合わせ本番では……

・サイトの目的
・ターゲット(年齢や性別、ゲームであればユーザー層)
・どんな情報を載せたいのか、何を伝えたいのか
・サイトを表示するデバイス(PC、スマートフォンなど)
・デザインの要望
・納期
・費用感

……などを取材し、どんなWebサイトを制作するのか決めていきます。お客様との擦り合わせがうまくいかなければ複数回に及ぶこともありますが、Webサイトの制作ではどうしてもイレギュラー要素が途中で発生することが多くなります。そのため時間は多少かかっても、お客様と着地点をきちんと共有しておくことが肝心です。
 また、お話を聞いてこちらから企画やサイトに関して提案できることがあれば、打ち合わせ後に内容をまとめ、提案させていただくこともあります。
 当社ではWebサイトだけでなく、ゲームの攻略本や取扱説明書、各種グッズなどの制作も行っているため、それらのノウハウやゲーム知識なども活かしたさまざまな提案を行えます。人気ゲームなどでは多くの企画がメンバーから上がり、提案できる形にまとめるだけで就業時間の大半が過ぎていくということも少なくありません。

写真は株式会社タカラトミー様の「ベイブレードバースト」公式Webサイトです。実際の玩具をアプリと連動させたサイトになっています。
©TOMY Company,Ltd.

②制作準備

 ヒアリングした内容をもとに掲載する情報をリストアップし、その情報で関連するものをグループ別にまとめていきます。
 ここで重要なのは、必要な情報が抜けないこと。制作する側が必要ないと判断した情報でも、サイトを訪れるユーザーから見ると必要な情報である場合もあります。
 ひととおりのグループ分けを終えたら、サイトに訪れた人にどの順番でページを見せるかを決め、以下のようなイメージ図を作成します。

上はサイトのイメージ図(実際にはもっと複雑です)。ほぼサイトマップと思っていただいてOKです。

 このようなイメージ図を作成することで、サイト全体の構造や各ページの主題が明確になります。

③ワイヤーフレームの作成

 ワイヤーフレームとは、ページを作成する上で必要な情報やレイアウトなどがわかる構成図のことです。イメージ図とまとめた情報をもとに各ページのレイアウト(マルチカラムやタイルなど)や掲載する情報の優先順位を決めていきます。
 ワイヤーフレームを作成するときは、次の2つのことを念頭に作成しています。

●使いやすさ
 初めて訪れた人が使いやすく迷わないような設計になっているかということです。
 どれをクリックすれば、目的のページにたどり着けるのか、使っている人が今どこにいるかなどがわかりにくいサイトになっていると、訪れた人は使いにくいと感じてしまうため、レイアウトや階層をできるだけ使いやすい形にすることを心がけます。

●優先順位
 何を一番目立たせるかということです。サイトの目的やページによって、目立たせるべきものをできるだけ明確にします(一番目立たせたいものをページの上部に大きく配置するなど)。
 なお、スマートフォンでの閲覧時にレイアウトを変えたいと考えている場合は、スマートフォン版のワイヤーフレームも作成します。

上がワイヤーフレームです。出版業界でいうラフレイアウト。設計図のようなもので、コーダーやデザイナーに意図が伝わりさえすれば、手書きでもOKです。

 ワイヤーフレームがひととおり完成したところで、こちらの意図(ウィンドウのサイズに合わせて表示させる、TOPページではBGMが流れるなど)を書き込み、他の制作スタッフにもチェックしてもらいます。自分以外の人に見てもらうことで、追加した方がいい機能や自分では考えつかないレイアウト案なども出てくることがあり、クオリティの向上につながるからです。
 最終的に完成したワイヤーフレームは、レイアウトに問題がないかお客様に送って確認をとります。お互いのイメージにずれがないか確認することで、ページができあがったあとに一から作り直しを行うなどの大きな事故を防ぐことができます。
 また、同時に必要な画像やテキストなどもリストにし、お客様に伝えて用意してもらいます。

④ページのデザイン作成依頼

 続いて完成したワイヤーフレームをもとに、デザイナーにデザインを依頼します。
 当然ではありますが、デザイナーがイメージしやすいよう、お客様の要望は正確に伝え、最低でも以下のような材料はまとめておく必要があります。

・クライアントの要望
・ページの横幅
・作成してもらうパーツのリスト

 できあがったデザイン案は、社内でほかのデザイナーがチェックを行い、その後お客様に送ります。承認がとれたら各パーツの作成(HTMLで使用できる形式に変換する作業)を行います。

⑤コーディングの依頼とチェック

 これまでに作成したワイヤーフレームやページに載せる画像とテキスト、デザインのパーツなどをまとめ、コーダーへHTMLの作成を依頼します。

・サイトを表示するデバイス(PCやスマートフォン)
・各ファイル名のつけ方、
・テキストのフォント
・各ページの仕様

 ここでもデザイナーへの依頼時と同様に、イメージをしっかり伝え、かつ制作上のルールを決めておく必要があります。ファイル名のつけ方などルールを事前に決めることで、簡単な修正を自分で行うときに、リンク切れなどのニアミスを防ぐことができます。
 なお、検索フォーラムやお問い合わせフォーラムなどのシステムがある場合、コーディング後にシステムエンジニアに組み込んでもらいます。一方で社内のテストサーバーにできあがったページを確認するための場所も用意します。

 ページができあがったら、用意していたテストサーバーにアップロードし、複数のブラウザ(Internet ExplorerGoogle ChromeMozilla FireFoxSafariなど)やスマートフォンで確認します。
 その後、作成したHTMLをお客様に確認してもらい、問題ないという承認がおりるまで、チェックと修正を繰り返していきます。

⑥公開

 HTMLが完成したらサーバーにアップするとサイトが公開されます。お客様にHTML一式を渡し、お客様の側でサーバーにアップすることが多いのですが、こちら側で行うこともあります。
 こちらで行う場合は、クライアントが用意したサーバーにアップするか、レンタルサーバーを借りてアップします。

おしまいに

 おおまかな流れではありますが、以上が当社でのWebサイトの作り方となります。

 ただ、Webサイトは納品してもこれで終わりということは滅多にありません。Webサイトはある意味、生ものです。その後の修正や内容の変更など、継続して情報を更新して行くことが重要であり、たいていの場合は事前に納品後のサポートや更新についてもすり合わせを行います。
 こういった、いわば運営管理の仕事もまた別の苦労や工夫が必要になるのですが、それはまた別の機会に。

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です