2024-07-23Webディレクションがどんなことやっているのかわからない人、普段フロントエンド開発やっているがWebディレクターをやったこと無い人向けにフロントエンドエンジニアがWebディレクターをやった際の1例をご紹介します。内容・状況によりフローは変わります)※企業のオフィシャルサイト制作(30ページ程度)で行うWebディレクションを想定してます。詳細は以下の通りです。※システム開発がメインなWebサービス案件の要件定義とは異なります。ヒアリングまずは顔合わせもかねてクライアントとの打合せを行います。打合せのヒアリング内容は以下の通りです。スケジュール等の情報を元に今後の進め方が大枠決まります。要件整理ヒアリングした内容を元に、Webサイトを作る上で何が必要か洗い出す必要があります。洗い出す内容は以下の通りです。見積を出す際に規模感によって、外部パートナー(カメラマン、デザイナー、システム会社等)に見積依頼を出すことがあります。提案書(コンセプト、デザイン、CMSの有無、機能等)、スケジュール、見積を算出しクライアントに提案します。依頼することが決まってたりすると、提案書は出さないこともあります。提案が通ったら、制作を行う上での設計を行い、設計内容で問題無いかクライアントに確認します。ワイヤーフレーム、サイト設計、システム設計は同列で一緒に考えて設計することが多いです。小規模の案件だと納期が短かったりするのでクライアントに確認しつつ、設計し同時進行で制作・開発を進めるケースも多くあります。ワイヤーフレーム作成サイトの主要ページのレイアウト、コンテンツ配置等の設計資料を作成します。サイト全体のサイトマップ作成し、どのページがどんな役割で見せ方や演出を入れるのかを決めます。デザインラフ提案デザイナーがワイヤーフレームやヒアリングしたデザインの方向性を元にデザインラフ案を作成し提案します。CMSのシステム設計CMSを入れる場合はどのページをCMSで更新しやすくするのか等を決めます。CMSをフルスクラッチで作るのかオープンソースのWordPress等を使用するのかで作業工数が結構かわるので、この場合、見積提案の段階で決めておく必要があります。元に制作・開発を行います。この段階で仕様変更や戻しが入ると、変更内容によってかなりの作業時間のロスになるので「設計」内容をクライアントに確認・了承を貰って進める必要があります。サイトに掲載する情報(テキストや写真素材等)をデザイナーやコーダーに渡す必要があるので、この段階までには揃える必要があります。デザイン制作デザイナーが「デザインラフ提案」で決まった内容でWebサイトの主要ページデザインを行います。下層ページで同じようなレイアウトのページが複数ある様であれば、ベースを1ページ作ってコーダーに渡します。コーディングデザイナーが作ったデザインを元にコーダーがhtml+css+JavaScriptコーディングを行います。システム開発CMSやお問い合わせフォーム等が必要な場合、プログラマーが開発を行います。複雑はシステムで無ければ「コーディング」「システム開発」両方を同時進行でフロントエンドエンジニアがやるケースが多いです。テストWebサイトが一通り出来上がったら、各種対応ブラウザや端末、バージョンで確認を行い、不具合があれば修正をします。同時にクライアントにもWebサイトやCMSの確認を行って貰います。クライアントへの確認は全てのページやCMS出来上がったタイミングでの確認は行わず、主要数ページが出来たタイミングで随時確認を取っていくと進捗状況の報告・確認も取れ、また認識の相違があった場合の戻しを最小限に抑えることができます。公開(ローンチ)「テスト」段階での確認が問題無ければ、公開日に公開となります。公開後に多くの色んな人が見始めるので、そこで今まで見つかって無かった不具合や場合によっては変更が発生するケースがあります。運用・保守サイト「公開」後の「運用・保守」として、見積・費用を掛けて行います。クライアントによっては予算の都合で毎月の費用が出せないこともあるので、都度依頼があって見積・提案を行うケースもあります。サイト更新サイト「公開」後に出てくるクライアントからのリクエストや月日が経つと掲載情報も変える必要があるので、変えた方が良い内容の提案・見積を出してサイトの更新を行います。サーバー・セキュリティ保守サイト「公開」後、月日が経つとサーバーのバージョンやセキュリティの脆弱性が出たり、同様にCMSの脆弱性が出てくるのでバージョンアップやセキュリティパッチあてる対応を行う必要があります。まとめ以上あくまで、私が担当してきた案件の1例となりますので、所属する会社や業種、案件等の内容・状況により流れ(フロー)は変わります。Webディレクターは色んな人とコミュニケーションしたり、全体の進行も管理する必要があるのでスケジュールの先読みをし、先手をうって対応していくのが重要では無いでしょうか。Webの知識やコミュニケーション能力等全てにおいてのバランス感覚が必要な仕事ですね。これからWebディレクターを目指す人の1例として参考になれば幸いです。※このフローを仕事で流用される場合は自己責任でお願いします。