とあるUIデザイナーによる、Webサイト設計の流れ
はじめに
はじめまして、こんにちは。UIデザイナーの猪口です。私はWebデザイナーを10年経験した後、UIデザイナーにジョブチェンジし、現在SaaSプロダクト開発に2年ほど携わっています。WebデザインとUIデザインは似ているようで求められるものがまったく異なる職業ですが、あまり大きなギャップを感じることなくジョブチェンジをすることができました。その理由のひとつとして、Webデザイナー時代に諸先輩方から学んだサイト設計の考え方が、UIデザインのお仕事でも役立っているのだろうと感じています。
UIデザインの仕事そのものとは少し異なりますし、Web黎明期からあるオーソドックスなものではありますが、同時に普遍的でもあると感じていますので、今回はその手法と流れを、成果物を基準にしてご紹介します。今回ご紹介するのは、私がよく担当していた仕事における設計の部分です。
ざっくりとした設計の流れ
ご説明の前に、まずは大まかな流れをご紹介します。
実際にはデザインリサーチやUXデザインも専任担当者が実施するのですが、設計そのものとは少し異なるので今回は割愛します。
各工程をもう少し詳しく！
まずは現状把握から
現状版簡易サイト構造図
プランナーやPMからプロジェクトの情報を得た後は、現状サイトの状況を自分自身で把握するため、サイトを目視で確認しながら簡易サイト構造図を手で書き起こしていきます。
アナログな方法ではありますが、対象サイトの全体像を把握するためには大切な工程です。ステークホルダー間で共有する必要がある場合にはPowerPointやMiro、Figma、Cacooなどで清書します。プロジェクトの対象範囲などを確認します。あくまで概要を掴むことが目的なので、第２階層までのみ書き出し、複雑に作り込みすぎないように注意します。
現状版ディレクトリリスト
ざっくりと構造を把握した後は、正確に把握するためにディレクトリリストを作成します。ページの確認漏れを防ぐため、情報は機械的に取得します。PMやディレクターが作成したものか、クライアントからご提供いただいたものを使用して見やすいかたちに成形していくことが多いです。この資料では、リニューアルの対象ページ数、ディレクトリ構造、各ページのtitleとdiscription、公開状況などを確認します。よく使用するツールはスプレッドシートかExcelです。
現状版詳細サイト構造図
ディレクトリリストで正確な構造を確認しながら、詳細のサイト構造図を作成します。ディレクトリ構造を視覚的に理解しやすくするための資料です。また、この資料中で簡単なページ構成まで書き出すこともあります。
この資料で確認するのは階層の深さやサイトのボリューム感、主な導線、各ページの簡単な構成などです。
作成に適しているツールはMiro、Figma、Cacoo、Visioなどです。各ページを線で繋いで関係性を示すので、線がひきやすく、描画エリアが広大な作図ツールがおすすめです。
リニューアルの目的を確認する
どのような機能やコンテンツを盛り込むべきかインプットします。このフェーズではプランナー、PM、サービスデザイナー、UXデザイナー、リサーチャーが、エンドユーザーのことを一番よくご存知のクライアントとともに戦略を共創していくため、そこで練られた戦略を確認しながら、具体的な設計図に落とし込んでいきます。
リニューアル後の姿を描く
リニューアル後の対応内容を確認すると、次はそれを具体的な形に落としていきます。ここから作成するアウトプットは建築における設計図にあたるため、制作者にとっての指標になるべく、より正確さが求められます。
リニューアル版簡易サイト構造図
現状と何がどのように変わるのか、制作の大まかな方針を共有するために作成します。前段の工程で決められた戦略が、具体的にどのようにサイト構造に反映されるのかを確認する最初のアウトプットになるため、一見して変更点がわかること、その戦略が有効であると感じさせられることが大切です。現状版のものと同様、こちらも概要を伝えるのが目的のため、複雑にならないように注意します。
リニューアル版詳細サイト構造図
リニューアル後の変更点をより詳細な図に落とし込みます。こちらの図はより複雑になり読解が難しいため、ステークホルダー全員が対象ではなく、制作者が作業内容を把握するために用いることが多いです。この資料では、ページの移動や追加、削除、管理方法などの情報を確認できるようにします。また、場合によってはサイト構造の指定だけではなく、ヘッダやフッタ、メニュー、各ページの大見出しなど、簡単なページ構成まで指定することもあります。
リニューアル版ディレクトリリスト
制作者に最も参照される資料です。各ページの新規作成、移動、削除などの変更ステータスを確認する必要があるため、変更前と変更後の情報を並べて示します。
この資料で確認するのは以下のような内容です。
リニューアル後の予定（新規作成、移動、削除など）
ディレクトリ名
ページタイトル
ディスクリプション
キーワードなど
階層構造
また、この資料をタスク管理表に転用して、進捗状況の可視化を行うことも多いです。その場合には、元データを複製した上で以下の情報も追加します。
作業ステータス
担当者
優先度
対応予定日
承認者チェック
これらの情報をもとに進捗状況を可視化することで、健全なプロジェクト運営が可能になるため、後半はひたすらこのタスク管理表と睨めっこをします。一見非常に神経を使う作業に見えるかもしれませんが、慣れてくるとゲーム攻略の感覚に似てくるため、人によっては病みつきになる工程になるのではないでしょうか。
こうして、細かなタスク調整を行いながら公開まで制作を進めていきます。
おわりに
今回は思い切って自分の知っている手法を記事にしてみました。（陳腐だと思われるかも知れない、という恐怖を乗り越えるのに少し勇気がいりました）次回はそれぞれのより詳しい方法をご紹介してみたいと思います。もしおひとりでも興味を持ってくださる方がいらっしゃったらとっても嬉しいです。