こんにちは。アシスタントディレクターの鳥垣です。
紅葉も色づき、秋の訪れを感じる日々です。「〇〇の秋」と聞いて、これまでまっさきに思い浮かんでいたのは「食欲の秋」ですが、今年は「芸術の秋」にも興味が湧いています。中でも一番気になっているのが、最近SNSでよく見かける現代的なデザインの美術館です。自分には良さがわからないから…と足を踏み入れることのなかったスポットですが、自分の世界を広げるためにも必ず行こうと思っています。
さて、今回はWebサイト制作の流れをご説明させていただきます。
ウィルスタイルに入社してから「Webサイトってどうやってつくるの？」と聞かれることが多いのですが、私自身、公開まで実際に携わらせていただいたことで初めて工程を明確に把握できました。一連の流れが明確に把握できた今だからこそご紹介したいと思い、記事を作成しました。
あくまでも弊社の進め方ということをご承知の上で参考にしていただけますと幸いです。
Table of contents
制作フロー
まず、全体の流れを一覧で示すと以下のとおりです。
- 素材（サイトで使用する原稿や写真など）回収の準備
- 社内打ち合わせ
- お客様との初回お打ち合わせ
- 素材あつめ
- トップページデザイン
- トップページデザインをお客様へご案内
- トップページコーディング・下層ページデザイン
- 下層ページデザインをお客様へご案内
- 下層ページコーディング
- デバック
- 公開
仕様確定
まずはサイトの仕様を確定したり、素材をあつめたり、といった土台作りから始まります。私は、この最初の工程がサイト制作の要といっても過言ではないと思っています。
お客様からお問い合わせいただいた際には、まずディレクターがお客様とお会いし、サイト制作の目的やデザインのイメージ、ご要望などを伺います。お打ち合わせでのお話をベースに、ユーザー視点も取り入れながらサイトの構成を検討し、サイトマップとお見積もりを作成してご提案します。
正式にご依頼いただくことになれば、さっそく素材回収の準備に取り掛かります。
素材回収の準備
この段階で準備するのは、
- お客様との共有フォルダ
- サイト原稿のベース
- 制作スケジュール
の3つです。
弊社では、お客様との素材の共有ツールとしてGoogleドライブを使用し、サイト原稿やお写真などは共有フォルダに格納して共有します。また、お客様にお写真やデータをご提供いただく場合も、こちらのフォルダに入れていただくようお願いしています。
サイト原稿はGoogleドキュメント、制作スケジュールはGoogleスプレッドシートを用いて作成します。
社内打ち合わせ
共有フォルダの準備が整った後は、社内で打ち合わせを行います。ここで、ディレクターからデザイナーへお客様のご紹介やお打ち合わせで伺ったご要望を伝えます。
初めて案件に一から携わらせていただいた時は、この社内打ち合わせの進行を任せていただくことから始まりました。進行を経験させていただいたことで、事前に段取りを決めておくことの重要性と、自分自身がお客様のことを明確に把握しておかなくてはいけないというディレクターとしての役割を改めて実感しました。
お客様との初回お打ち合わせ
ここで、お客様と改めてキックオフのお打ち合わせをさせていただき、サイト構成の再確認やイメージの共有、担当デザイナーのご紹介を行います。
このキックオフ時には、よりお客様のことを知るため、社内や工場見学も兼ねた取材をさせていただくこともあります。
素材あつめ
初回お打ち合わせの後は、お客様にご協力いただき、サイト原稿やお写真、データなどの素材をあつめていきます。
原稿作成はお客様とGoogleドキュメントを共有し、一緒に編集を進めていただくのですが、実際にスタッフ様へ取材させていただき、想いを直接伺うことも多いです。
お写真は、弊社に撮影をご依頼いただく場合もあります。弊社の場合、撮影をスタッフが行うため、私も撮影できるようになりたいという思いがあるのですが、今は撮影に同行させていただき、カメラの使用方法や構図などを教えていただいているところです。
先日は、キービジュアルの撮影として、iPhoneのタイムラプス機能を用いた早回し動画の撮影に同行させていただきました。（「キービジュアル」という用語の意味については、私の前回のブログを参考にしていただけますと幸いです。）約4時間にもわたる撮影で、普段何気なく見ている動画も裏ではこのようにカメラマンの方のこだわりが詰まっているのだと改めて感じた瞬間でした。完成したキービジュアルを見せていただいた時は、やはり過程を自分自身も経験させていただいたからこそとても思い入れが深く、感動したことを今でも覚えています。
デザイン・コーディング
サイトへの入り口にあたるページのことを「トップページ」、トップページからクリックして遷移するページを「下層ページ」といいます。下層ページは「第2階層ページ」とも呼ぶこともあります。
弊社では、トップページのデザイン後、お客様に一度ご確認いただいた上で、コーディングと下層ページのデザインを進めていきます。
コーディング
「コーディング」とは、デザインをWebサイトとして見せるための作業で、コンピュータが理解できる言語でコードを書くことを指します。
そう聞くと、「プログラミングと何が違うの？」と思う方もいらっしゃるのではないでしょうか。
コーディングは「プログラミング言語を使ってソースコードを作成すること」をいいます。一方、プログラミングは「プログラムを作成する作業全般」を指します。つまり、コーディングはプログラミングの作業の一部、ということになります。
より詳細にいうと、コーディングは、Webデザインをブラウザ上で見える形にするためにソースコードを記述することで、言語はHTMLやCSS、JavaScriptなどを主に使用します。一方、プログラミングはプログラムを動作させることを目的としており、 JavaやC言語などのプログラミング言語を使用して作業します。
チェック
コーディングの後は、お客様へご案内する前にまず社内で検証・修正を行います。
デバッグ
コンピュータプログラムのバグや欠陥を発見し、修正する作業のことを「デバッグ」といいます。複数のデバイス（PCやスマートフォン、タブレット）、ブラウザ（Internet explorerやGoogle Chrome）で正常に作動しているかを複数人で確認します。また、テキストの誤字・脱字やページタイトルが適切かどうかなども重要なチェック項目です。
デバッグを終えた後はお客様に再度ご確認いただき、問題がなければ公開となります。
初めて一から携わらせていただいたサイトが公開した時は、嬉しくて何度も何度もサイトを見返していました。自分が制作に携わったサイトを世界中の人が見ることができるのだと思うと、なんだか不思議な感覚でした。
これからたくさんのサイトに携わらせていただきたいと思っていますが、常に初心を忘れず、ひとつひとつの案件に全力を注ぎたいと思います。
一連の流れを把握して
一連の流れの中で、自分自身の課題だと感じているのが、スケジュール管理です。
公開までの制作スケジュールを作成する際に一番難しいと感じているのが、担当デザイナーの方の他の案件との兼ね合いも考慮しながら作成する必要があるということです。今は、自分の担当するお客様のスケジュールしか把握できていないため、デザイナーさんに随時確認をとって他のお客様のことも考慮したスケジュールが立てられるよう試行錯誤しているところです。
また、当初に引いたスケジュールどおりに進んでいないとどうしても焦りを感じてしまいます。もともと計画通りに進めたいという性格もあるのかもしれませんが、予定していた公開日がずれてしまうとどうしよう…と悩んでしまいます。遅れてしまっている工程があるなら、その後の工程で短縮できるところはないかと考えられるような柔軟に対応する力、悩む時間があるのであれば自分からアクションを起こす行動力を身につけていきたいです。
おわりに
Webサイトがどのような流れで制作されているかイメージしていただけましたでしょうか。
私自身全体の流れを把握できたことで、その次の作業を見通しながら進めることができるようになり始めたと思います。
これからは、「全体を俯瞰で見る余裕を持つこと」を目標に、日々精進していきたいと思います。
最後まで読んでいただき、ありがとうございました。