皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。失礼ながら、そのお気持ち、たぶん5ヶ月、遅いです!仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD(テクニカルディレクション)やPM(プロジェクトマネージャー)として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方において、(当然のことなんですが)埋めがたいギャップが生じてしまっています。当たり前なんですけどね。僕らはプロとして年間いくつもWebサイトやWebサービスを制作しています。ギャップがあって当たり前ですし、そのギャップを乗り越え、素晴らしい制作物を作るのが僕らの当然の務めであり、そうありたいと思っています。超えがたいのがお金と時間の厚い壁です。ご希望をもう一段下げることができれば200万円かわるのに、あと3ヶ月ご依頼が早ければ期日までに間に合うのに、そういったプロジェクトはどうしても散見されます。ものすっごい善処するんですけど。僕らものすっごい頑張るんです。無理をすると必ずどこかにしわ寄せが来てしまうものです。できればもっとお客様にも安心していただきながら、僕らもいいものを作りまくりたい。そこでWeb制作のフローを振り返りながら、「Web制作のここに金と時間がかかっちゃいます!」というところを、少し言いにくい部分ではありますが、明らかにしていきますね。要件定義デザイン制作マークアップフロントエンド開発バックエンド開発テスト・検収リリースWeb制作はここにコストがかかりますスケジュールにまったく余裕がないお客様側に専門のWeb担当者がいないお客様のWeb担当者が意思決定者ではないプロジェクト発足の目的があやふやで熱量がない「誰のために作るか」のコンセプトがブレる一度FIXした工程が巻き戻される古いブラウザ、不要なデバイスの表示が指定されるこれまでのサイトのデータを移行するこれまでのサイトと同じ古いサーバーを使うサーバーにハイスペックを求める運用担当者が決まっていないだけど理想のプロジェクトなんてないからところでWeb制作ってどうやって進めるの?弊社では下記のようにWebサイトの制作を進めます。基本的にウォーターフォールと呼ばれる開発手法で、成果物を順々に出しながら完成を目指します。どんな作業、お客様との関わりが生まれるのか、上から順に説明させてください。お問い合わせいただいたお客様に対して「LIGはどのような課題解決ができるか」ということを提案させていただきます。抱えている課題を先にご共有いただくこともありますし、それも含めて提案することもあります。課題の種類はさまざまで、サイトのデザインかもしれませんし、PVかもしれませんし、回遊率、コンバージョン、コンテンツ設計やコンテンツの編集、運用上のコスト、社内システムとの連携だったりするかもしれません。いったWebサイト内外にある課題をあぶりだし、解決策を提案いたします。このシーンで活躍するのは、基本的にプランナー、ディレクターです。この時点でビジュアル的な強さが求められれば、デザイナーがアサインされることもあります。提案が受け入れられ、ご発注をいただいたのち、本格的に「達成するもの」のすり合わせを行います。ここでの「達成するもの」は基本的に課題に対する解決策であり、どのようなWebサイトを作るかというお話になります。ご提案時には考えられていなかった細かなところまで検討していくと、決めること、想定しておくことはさまざま存在し、また相対するお客様もWeb担当者から会長レベルまで多種多様。「達成するもの」は何で、いつまでにやるのかというお約束を、(弊社では)主にディレクターが中心となってお客様と結びます。この工程の終わりに基本的なワイヤーフレームができあがります。ワイヤーフレームとは、Webページに何の要素をどの順番で配置するか、というのを視覚的に表したもので、デザインの前段となるものです。これはデザインの土台になるもので、デザインではないのですが、初見のお客様から見ると、載っている情報が少ない質素なデザインに見えるでしょうね。デザイン制作ディレクターがまとめた要件定義に沿って、ベストなデザインをデザイナーが作成します。お客様が最終的に目にする完成品(の見た目)なので、お客様と認識に齟齬がでないように注意を払います。トップページなどは、デザイナーが直接お客様のもとに赴き、考えと思いを伝えることが多いです。先んじてお渡ししているワイヤーフレームをもとに、想像を超えるインパクトを与えられるよう、デザイナーが命をそそいでいます。デザイン初披露時は歴戦のデザイナーでも毎回緊張すると聞いています。マークアップWebページのほとんどはHTMLというフォーマットで記述されています。この工程で初めてWebのページを作り始めます。文章でビジュアルを再現するため、HTMLはとても書く量が多く、デザイナーが作成したデザイン通りにページを作るのは困難を極めます。「ピクセルパーフェクト」という言葉がありますが、デザイナーがフォトショップやXD、Sketchなどのアプリケーションで作成した「画像」を1ピクセルもずれなく、HTMLでモニタ上に再現するのは非常に根気のいる作業です。世の中にはマークアップを専門に行うマークアップエンジニアという存在もいるらしいのですが、弊社ではこの部分をフロントエンドエンジニアが担っています。フロントエンド開発マークアップの工程でできあがったWebページは動きがなく、あくまでデザインを再現したものになります。次の工程では、アニメーションやUI部分の微調整などを作り込んでいきます。基本的にはJavaScriptを使用することが多いです。クリックしたときにボタンはどのような挙動をするのか、トップページのアニメーションはどのように動くのか、Webページをロードするとき画像はいつ読み込まれるのか、など......Webの持ち味を活かせるよう、細部にこだわって開発と検証を繰り返します。弊社ではマークアップもフロントエンド開発もフロントエンドエンジニアが実装するため、同時に完了することになります。この工程が完了すれば、Webページの見える部分の作業は終了です。前工程まででWebページが完成しているのですが、課題によってはCMSを導入する必要があります。CMSというのはWordPressのような「自分でコンテンツを管理できるシステム」のことですね。平たく言うとブログです。弊社ではだいたいWordPressでWebページを表示させています。フロントエンドエンジニアが作り上げたページをWordPressの仕組みで表示ができるように、組み込みを行っていきます。それが作り終わると、サーバーにWebページを載せなければなりません。提案しておいたサーバーを作り、Webページを外部から見られるように設置します。「Webサーバーを作り」と言ってもいろいろな手法があって一口に言えないのですが、触れたことがない人には、まったく想像もできないことと思います。たとえるならば、そうですね......。Facebookの設定を確認されたことはありますでしょうか。複雑で何を設定するための設定なのか分からなくなりますよね。少なく見積もって、このFacebookの30倍くらいの何言ってるか分からない設定項目を満たして、Webサーバーはできあがります。ここはお客様にはもっとも理解されにくい、もっとも遠い部分だと言えます。