もしもボタンをポチッと押したら、すべてが解決する全自動装置。
そんなものが作れたらと思っている、ずぼらコーダーの小宮山です。

制作の中で
・最新のファイルどこだっけ…
・次のページはどんなページだろう…
・あいつと同じパーツ作ってしまった…

そんな事を考えた時にも、ずぼらはふと思います。
ポチッと解決できたら。

コーディングにおいて効率の良い作業をすることはとても大切です。
順序を決め、無駄な生産を発生させない事は
実制作やその後の更新性に大きく影響を出します。

コーディングファクトリーではさまざまなクライアントからデザインをいただき、コーディングするため、様々なフォーマットに対して柔軟な対応が求められます。

例えば、複数のデータでいただく場合や、バージョンのアップデートなどがあり、いただいたデータを常に更新し最新のファイルを常に把握する必要があります。

私たちは均質で均一なクオリティで制作を進めていくために、データを元にコーディングの進めやすい形へ情報を落とし込んでいきます。

「必要な情報を集約する」

高い生産性を保つ、大事なポイントです。

クライアントの進行に合わせデータをまとめ、スムーズに制作を進めるツールとして、スプレッドシート（エクセル）を使ったサイトマップを活用しています。
今回は、私たちが普段使っているサイトマップがどのように活躍するのかを、作り方を追いながらをご紹介していきたいと思います。
 

サイトマップとは

サイトマップとは、サイトのページ構造を表にしたもので、建物の施設地図のように、何がどこにがあるのかを示した、いわばサイト全体の設計図です。

サイト内のページをリスト状に表記して、該当のページに付随する情報を横に並べています。
サイトマップを作成する場合、エクセルやスプレッドシートなどの表計算ソフトを使われる事が多いです。

まずはもっともシンプルなサイトマップをご紹介します。

ページ名・ディレクトリ名・ URL をリストにした必要最低限の情報のみのサイトマップです。
（スプレッドシートで作られています。）

トップページや紹介ページなどのページ情報がまとまっています。カテゴリやディレクトリ（階層）、ファイル名が表組化され、ページ構成が体系的にわかりやすくなっています。

一般のユーザーやクライアントが確認するだけのサイトマップであれば、こちらの要素だけでも十分でしょう。
 

コーダーのサイトマップ

コーダーが使うサイトマップでは、さらに「必要な情報を集約する」べく「かゆい所」に手が届くコーディング情報を、上記のシンプルなサイトマップに追加していきます。
ここで、コーダーにあるあるの「かゆい所」とその症状をお伝えします。

• どれがFIXデザインなのかわからない　→　古いデータで作業、参照に時間がかかる
• テンプレートページはないのか　→　重複制作、違うコーディングの見た目が同じパーツができる
• どのくらいの制作ボリュームかわからない　→　思わぬ残業の発生、連携の待ち時間発生
• ページ制作が完了しているか把握できない　→　ページ点検漏れ、確認による時間ロス

これら課題を解決すべく、整理して要素を足していくと…

このようなサイトマップが出来上がります。これが、私たちが普段使っているサイトマップです。

先ほどの「かゆい所」でご紹介した内容は、下記の各要素を参照することで解決していきます。

・どれがFIXデザインなのかわからない（C. デザインファイル 参照）
→　参照先の最新ＵＲＬを添付して、迷う隙を与えません。

・テンプレートページはないのか（D. パターン 参照）
→　類似ページをまとめているので、パーツ重複はそうそうできない。

・どのくらいの制作ボリュームかわからない（F. 工数 参照）
→　工数見積もりを目安に、スケジュール設計が可能。

・ページ制作が完了しているか把握できない（I. お客様情報 参照）
→　チェック項目があるので、全体の制作進捗もわかるほどに。

また、コーダーのサイトマップの大きな特徴は、ページ情報を省略しないということです。
制作するときに制作漏れを防ぐために、すべてのページを明確に表示する必要があります。
実際の現場で制作担当者がその列を見ただけで、制作ができる。そんな状態を目指しています。

すべてのページを見渡せるようになってはじめて、無駄の少ない制作が可能になるのです。そのためにサイトマップを細部まで作り込みます。
 

サイトマップの作り方

サイトマップはいきなり完成形の形を迎えるのではなく、情報を埋めながら、パズルのように作られていきます。

ここからは、実際にサイトマップを作る手順に沿って説明をしていきます。
 

０．プリセット : 事前にわかるサイト構成情報を入力する。

今後の資料確認の時間を少なくするために、内容をまとめます。
デザインデータや納品スケジュール、JS や CMS の実装の有無などの情報は別々の資料や会話の一部になっていることが多く、とても拡散しやすい情報です。
ページに必要な情報を全て入力していくと、不足している情報やページがこの段階で発見できます。

• 共同作業を行う場合、データの参照に時間がかかることが多いので、デザインファイルのアクセス URL を決めておきます。
• お客様から頂いたデータをサイトマップへ入力していきます。

ページ名・ディレクトリ構成などは各階層ごとに分割し入力します。

あるあるの出来事として、 URL の変更があります。
変更が行われると複数のパスの調整が必要となり一苦労だったりします。
そこで、シートの表計算の式を使って確認用 URL を設定します。
（式はエクセルとスプレッドシート共通で利用できます）

この式により、ディレクトリの値を変更する事で自動的に URL が変更されるようになっています。
ドメイン設定のセル（）に入力規則で複数のURLを入れておくと、開発環境やローカル環境と切り替えができてより便利に使う事ができます。ずぼらが冴えます。
 

１．インプット : 全てのデザインデータを洗い出し、制作の最大値を知る

全体のコーディングの最大量を把握します。
その為に地道に1ページずつ確認をして入力をしていきます。デザインからサイトマップに必要な情報をまとめていく重要で大変な作業です。
そこで、まずは D.パターン、E.特記、F.工数の見積りをした情報をそれぞれ埋めていきます。

Ｄ.パターン　共通のパーツ（モジュール）を利用しているか。
パーツの組み合わせとして同じ構成かどうかを確認していきます。
コーディングでは、同一のパーツをスムーズに使いまわせるかが効率を大きく左右します。
同一のパーツの場合、テキストと画像を差し替えるだけで制作が完成してしまう程、作業を簡略化できることがあります。運用・改修面では、ソースコードが統一されているので、スタイル修正や一斉置換など、その後のメンテナンスも快適になるメリットがあります。
※カテゴリーごとの詳細ページなどの似ているページをグループになることが多いです。

Ｅ.特記　固有の情報
デザインの中で、動画や地図、CMS などの固有の実装が必要なパーツをもっている場合記載します。

F.工数　見込みのコーディング所要時間
ページのコーディングにかかる工数の時間を計算します。共通のパーツは流用を想定して実装にどれだけの時間がかかるかを入力していきます。css での見た目の実装と JS での動きの実装は、作業として分けることができるため、ここでは別々に工数を出していきます。

共通パーツの使用時のバリエーションも把握できるので、
「まるごとパーツの組み直し」のリスクも解消できます。
 

２．プラン : まとめたデータをもとに効率化された制作プランを導き出す。　

デザインから抽出した情報をもとに、最善の制作順序を考えます。
「たくさん」「早く」作れる量産ページを優先して作ることがお勧めです。
量産できるページを先に制作することで、複雑なページを作る前にソースコードを最適化できたり、大量のページをクライアントが確認する時間を多めに確保できるメリットがあります。
なので、出現回数が多いパターンの多いページ、工数が軽いページ、の順でソートし、ピックアップします。

表計算ソフトのフィルタ機能を使って、表をソートしていきます。
パターンの重複（たくさん）工数の軽い（早く）作れるページがこの手順で並びます。

上から順に荒削りで、作業ボリュームの少ないものが整列されました。
このように手順を踏むと自分で考えずとも、どのページを作ればよいかの道筋が現れてきます。

最後に暫定の順序が決定した段階で、納品の優先度の調整を行い順序を決めます。
複数人で制作する場合は、パターンを参照して制作領域（共通パーツ作り）が重複しないように注意しながら分担を分けていきます。

着手の順序が決まったら、コーディングの具体的な制作日程の J. コーディングに振り分けていきます。
 

３．コーディング : チェックバックを減らす

この段階まで来れば、あとは制作順序に沿って実際のコーディングで進めるだけです。

今までまとめてきたページごとの情報群を各制作ページにて入力していきます。

ページが完成したら、J.コーディングの項目
・ブラウザ検証
・リント（バリデーションチェック）
・見た目確認
を検証し、不具合が無ければ「o」をつけ、制作と進捗状況の確認を進めていきます。
また、案件ごとに特別確認した方がよい内容（コンソール確認など）を項目に設定することで、制作のチェックバックを減らします。
 

まとめ

サイトマップ上に「必要な情報を集約する」ことで、
制作で生じていた都度発生する細かな時間の無駄は省略され、制作フローがよりコンパクトになりました。

サイトマップは効率よく制作を行うために制作工程の設計図として、
コーディングの計画を立てる際にとても役に立ちます。

急がばまわれと言うように、最初に計画を立てていると
その後の工程をスムーズに進められるようになります。

正確で、品質の高いコーディングをするために、サイトマップ作りに力を入れてみてはいかがでしょうか。

最後に紹介したコーダー用のサイトマップのサンプルをこちらに載せていますので、制作にお役立てください。