ディレクトリリスト作成のポイント
はじめに
はじめまして、こんにちは。UIデザイナーの猪口です。このnoteではWebデザイナー時代に学んだ設計手法について、複数回に分けてご紹介しています。今回は設計タスクにおけるディレクトリリストについて、その特徴や作成のポイントを詳しくご紹介していきます。
ディレクトリリストとは
ディレクトリ(directory)という英単語は、電話帳や人名簿といった意味があります。IT用語では特定のファイル群をまとめるものを指し、基本的には「フォルダ」と同じものとして扱われます。
ディレクトリリスト(directory list)は、Webサイトのディレクトリ構造と各ページの情報を表組で一覧表示した資料です。その他の呼称としては以下のようなものがありますので、作成する際はチーム内で統一しておくことをお勧めします。
ディレクトリ一覧
ディレクトリマップ
ページ一覧
この資料は情報量が多くなることが必定なため、ステークホルダー全員が読み込むもの、というよりは、主に制作者が作業内容などを正確に把握するために用います。
以下の２種類を作成します。
現状版ディレクトリリスト
リニューアル版ディレクトリリスト
見た目はいずれも同様ですが、それぞれ異なる目的をもって作成します。作成方法や違いなどについて詳しくご説明します。
現状版ディレクトリリスト
この資料で合意したいこと
現状のディレクトリ構造とページ数を正しく把握するために作成します。このため、現状版のディレクトリリストはページの確認漏れを防ぐため、機械的に作成します。ただ、機械的に取得した情報は人間の目にとっては読みのくいので、吐き出されたデータを元にして読みやすくなるように成形しましょう。この成形作業を行うと作業者自身が情報を深く読み込むことになるので、自然とディレクトリ構造もよく把握できるようになります。
整理方法
インデント用のセルを設けたり、セルの結合などを行なってページの親子関係を視認しやすくする
セルや文字の配色を変更して関係性を視認しやすくしたり、重要な情報の強調などを行う
どこからもリンクが貼られていなかったり、空のページだったりして、削除対象であることが予想されるページには、その状況がわかる情報を付記する
特定のAPIを利用していたり、CMSを導入しているなど、設計上考慮が必要な情報がある場合はその旨を記載する
各ページのmeta情報(title, discription, keyword)も取得し、記載する
機械的に取得したデータに対して上記の変更を行うと、作業者が正しくディレクトリ構造を把握できるようになるため、ここで得た情報を現状版詳細サイトマップにも反映することができます。ディレクトリリストの情報を整えたあと、クライアントにご確認いただいて完成させます。このリストは、プロジェクトの後半で課題管理リストや進捗管理表に転用することができます。こちらのカスタマイズ方法についても後述します。
リニューアル版ディレクトリリスト
リニューアル版ディレクトリリストは、多くの場合現状版のものを編集するかたちで作成します。
この資料で合意したいこと
この資料では、以下の情報を制作者に齟齬なく渡すことを目的とします。
各ページのリニューアル後の予定（新規作成、変更、移動、削除など）
ディレクトリ名
ディレクトリ構造
ページタイトル
ディスクリプション
キーワード
その他伝達事項
作り方
リニューアル版ディレクトリリストを作成する際に行う編集内容は以下のようなものになります。
URLはディレクトリ情報を元に自動生成されるように作成します
どこからもリンクが貼られていないページについてはその旨を明示します
各ページごとに、リニューアル後の対応方針（移行、削除、CMS導入など）を記載します
ページIDを設定してください。設定するタイミングは、プロジェクトメンバーと相談して決定してください。クライアントから指定がある場合はそのIDを記入してください。この情報は、その後のワイヤーフレーム作成時や、ページの作成進捗管理などに使用します
ページの新規追加がある場合は行を追加し、ディレクトリの指定をして、「旧URL」欄に「新規」と記入してください
削除するページがある場合は、「新URL」欄に「削除」と記入し、行をグレーアウトさせてください
特定の条件でセルのスタイルを変更するように設定すると、よりステータスがわかりやすくなります。例えば、削除予定のページの行を灰色にするなど
制作によく使うツール
大量の情報を扱うので、検索機能やフィルタ機能が豊富な表ツールがおすすめです！
Google スプレッドシート
Excel
Numbers
SmartSheet
上記以外の場合は、以下の要件を満たす作図ツールがおすすめです。
共同編集ができる
表組みで構成できる
計算ができる
他のセルやシートの情報が参照できる
条件別のセルのスタイル指定ができる
活用例のご紹介
進捗管理表として使う
作成したディレクトリリストは必要に応じて様々な資料に転用することが可能です。私の場合は課題管理表や進捗管理表に転用し、状況の可視化を行うことが多かったです。
やり方：進捗管理表の場合
元のデータを複製し、以下の情報を追加します。
作業ステータス
担当者
承認者
優先度
対応予定日
対応完了日
承認者チェック
これらの情報をもとに進捗状況を可視化することで、健全なプロジェクト運営が可能になります。様々な設計が完了して「あとは作るだけ」というフェーズになった際は、ひたすらこの進捗管理表と睨めっこをします。
一見とても神経を使う作業に見えるかもしれませんが、慣れてくるとゲーム攻略の感覚に似てくるため、人によっては病みつきになる工程だと思います！進捗状況を可視化すると予定のズレが分かりやすくなるため、思ったより早く終わりそうであれば次のタスクを探し始めますし、予定よりも遅れている場合は担当者を増員したり、作業ボリュームを減らすなどの調整を行うこともできます。これにより「毎日徹夜をして乗り切る！」という解決策を取らずに済みます。
おわりに
ディレクトリリスト管理は、サイト構造図作成と同じように細かな整理整頓が大好きな方にとってとても楽しい工程です。ここからは管理により緻密さが求められてきますが、逆に言うと重箱の隅にとらわれる危険性もはらんでいます。常にプロジェクト全体を俯瞰するマクロの視点も持ちながら、着実で事故のないプロジェクト運営をしていきましょう！