WEBディレクターズガイド#5「設計・デザイン」
受注(勝利）したら…
昔はとりあえず打ち上げをやっていましたが、最近はCovid-19の状況もあるからか打ち上げもオンラインで…みたいなケースも増えたのではないでしょうか？流石に路上で打ち上げをするわけにもいかず…（っていうかそんな打ち上げ嫌だ…。）
と、言うわけで氏がないWEBディレクターのWEBディレクターズガイドも5回目になりました。このシリーズは全15回で完結予定ですがまだまだ序盤戦から中盤への入口に差し掛かったばかりです。
ここからは実制作に関して留意するべき点を本公開～運用まで書き、最後に用語集＋あとがきで完結の予定です。
ぶっちゃけ作るのはこれからです。（まだ何も作っていません）
では本題です。
WEBサイトの性質により異なりますが、ディレクターが主に準備するものを記載します。
・制作版サイトマップ
・実施設計版デザイン
・要件定義書
・工程表(スケジュール）
主にこの4つになります。まぁCMS設計書類やアカウント関連書類、プロジェクト計画書（プロジェクト概要、工数計算、日々の稼働時間、プロジェクト体制図、リスク管理シート）、など細かいことをいうと山ほどありますが今回は「制作版サイトマップ＋実施設計版デザイン＋要件定義書」に絞って解説します。
上述の通り、用意するものを見て察する方もいらっしゃるかもしれませんが、このフェーズにおけるディレクターの役割は「ルール作り」です。とても重要な役割となることはいうまでもありません。
①制作版サイトマップ
サイトマップは、お客様、ディレクター、制作現場がこれから制作するWEBサイトに関する共通認識を行う役割があります。サイトマップを作成する場合、情報設計能力が求められますのでコンテンツの意味合いを理解することがとても重要です。ユーザビリティにも配慮し、階層構造を組み立てます。
その昔は「3クリックルール（目的の情報まで3クリック以内で到達する事）」なんてことも言われていましたが、今は3クリックどころかクリックなくてもだしてよ！！！と言われる時代です。（言われたことはありませんが…）
制作版サイトマップはプロジェクトのステークホルダー全員が共通の指針となる羅針盤的なものになります。お客様はこれに基づき原稿を用意するでしょうし、コーダーはこれに基づき自分の作業スコープと作業内容を大まかに把握するでしょうし、営業担当は、これに基づきスケジュールと見積を見直してゾッとするかもしれません。。。何よりディレクター自身がこのサイトマップを持って各所と調整・折衝を行い自分の仕事の把握をするわけです。
サイトマップを作るにあたり、特別なソフトは必要ありません。私はずっとエクセルで作っていました。インターネットの各所にサイトマップのテンプレートも落ちているので、それらを使うのも手、ですが、私は何気にサイトマップってディレクターの性格であったり個性が出るものだなぁと思っています。要は「何をどこまで一覧にするか？」ってことになると思うので、あまり詰め込みすぎると作った時点で達成感が湧き出るようなものになりかねず実用的な側面から行くとあまり使えないものになってしまいます。
それでは意味がありません。
下記に私が切っていたサイトマップの一例を記載します。
こんな感じでした。素材の管理は別フォーマットでやっていましたが、素材支給の場合、チェックリストを右に付け足すのはありだと思います。
上記はサイトマップに詰め込める情報のギリギリくらいではないかと思います。これ以上入れるとA3縦で印刷したときに可読性が低くなってしまうラインじゃないかと思います。「A3縦で出力した際に読めるギリギリの情報量」を私は目安にしていました。
画面数に関して言いますと普通のコンテンツページには1を、外部へのリンクの場合はlink、PDFの場合はpdf、CMS記事の場合は横にもう一つ「記事/CMS」と言う名前のカラムを設けて別枠の扱いにしていました。
②要件定義書
要件定義書も粒度が様々あります。開発するWEBサイトの概要が分かる程度のもの、開発体制からサイトマップ、画面設計書などが一式となったもの、など。ですが、必要最低限下記の項目は押さえておきます。制作現場との認識共有資料として、クライアントへの成果物の一部として使用します。
②-1：何を作る？予算と納期
ここでは改めて作業スコープの握り合いをする、と言う感じです。平気でちゃぶ台返しをするお客様もいれば、ずぼっと追加を突っ込んでくるお客様もいたり、「何をどこまで作りますか？」の範囲を確認するのは多少しつこいくらいでもいいのかもと思います。
・クライアント名
・サイト名
・対象となるドメイン
・WEB刷新の目的
・作業スコープ
・希望予算
・公開日
辺りがそうじゃないかと思います。
②-2：何を、誰を対象にして作る？
提案した前提条件に変わりないですよね？と言うところになります。こちらは仕様にも関わりますし、難易度そして工数にも影響しやすいポイントなので、②-1と合わせてしっかりと確認し、握り合う事が大切です。
・対象ユーザー
・対象言語
・対象OS
・対象端末
・対象ブラウザ
・アクセシビリティ対応
・モバイル対応
辺りがそうじゃないかと思います。
②-3：どんな条件で作る？
この辺は技術要素が強くなります。ですが、前提と開発条件が異なると今はよくてもあとで困るので、お客様との打ち合わせで即答して頂けなくても、きちんと情報をつかんでおくことが大切かと思います。
・文字コード
・JavaScriptの有無
・使用言語
・使用可能なDBの種類
・埋め込みタグの種類
・使用するCMS
・サーバーの種類/スペック
・テスト領域の有無
・サーバー移管の有無
事前のヒアリングでも聞く内容ですけどね。
上記②-1～②-3＋アルファの情報を「この条件でいいですよね」とドキュメントにまとめます。承認印を頂いても良いくらいです。結局この辺りがあやふやだとあとで言ったの言わないのの話になり、結果的に立場が弱い業者の方が埃をかぶる羽目になるので。。。
③実施設計版デザイン
提案の時にデザインカンプを作るかと思いますが、あの段階で諸々設計しておくことは稀じゃないかと思います。（取れるかどうかわからないですし）なので、実際に制作する時に諸々設計を始めることは普通じゃないかと思います。（少なくとも私はそうでした）
この段階になると、実際に構築するためのデザインを作っていきます。なので、各配置要素のサイズや、カラムなど諸々考えるわけなんですが、流石にこの作業をPowerPointで行うは難しいため、XD、Figma、Sketchなどのツールを使って行います。WEBページ内で使用するレイアウトをリストアップしながらカラム計算します。その場合、グリッドを使うと便利です。またこの段階でコントラスト比をチェックし、配色調整を行っておくと後々スムーズ化と思います。
ちなみに、私はよく以下のサイトを使っていました。
960GridSystem
Gridpx
結構昔からあるサイトですね。特にレスポンシヴデザインになると一貫性のあるデザインにしていくためには綺麗な段落ちが肝になってくるので、この辺りを使いながら計算しつつ、やってました。定番はPC、タブレット、スマホ、なんだと思いますが、PC→デジタルサイネージ、への展開なんかもレアだと思いますが出てくるケースもあるかもしれません。
後は情報設計に留意する必要があります。IAと呼ばれていますがこちらも奥が深く、これだけで4000文字とか書けてしまうのでここでは大事ですよ！と言うにとどめておきます。
そこに関連して出てくるのが版面設計ですね。WEBサイトが表示する情報の領域と役割を定義する作業です。
WEBサイト内の版面を領域定義します。こちらはトップページですが、同様の考え方で下階層ページも領域定義しサイト全体を通じて一貫性を持たせます。デザインの4原則の反復を思い起こしてもらうと良いと思います。
こうする事により、サイト全体に統一感が生まれ、利用者がメニューの操作に意識を取られず、直感的にブラウジングをすることができます。
これは究極ではありますが、私個人的にはUIをなくしてユーザが迷わず操作できるのが一番だと思っています。それくらいUIと言うのはある種作り手の自己満足に近いものなんじゃないかと感じています。ユーザにとってみれば正直操作なんて必要ないわけです、自分の欲しい情報、求めている情報が楽に手に入るのが目的なわけです。あくまでUIはユーザの補助ツールの役割だと思っています。
画面を超えてVRやMRなどのデバイスを装着し、空間内に浮かぶUI…近未来的ですが正直僕は邪魔だと思います。なんというか仮想空間上に人工的な誘導装置があるとある種の現実に引き戻されるような感覚を覚えてしまう気がしています。
そういった意味ではまだARの方がうまくクロスしている感がある気がします。
上記に関連する話で少し前の本ですが、この本を読んで「なるほど」と思った事がありました。
話を戻しますと、ユーザがWEBサイトを閲覧する際に操作に意識が行ってしまっては、それはいいWEBサイトとは呼べないと思います。なかなか難しいと思いますし私もまだまだUIにお世話になっていますが、追い求めるところはNoUIですしユーザが操作を意識しない画面構成です。
最後に
諸々後半に話が飛んでしまいましたが今回言いたかったことはこちらのワンフレーズにつきます。
このフェーズにおけるディレクターの役割は「ルール作り」です。
プロジェクトを生かすも殺すもルール次第と言っても過言ではありません。
余談ですが、ARやVRそしてスマートグラスなどのデバイスを使ったUX/UIデザインの話もディレクターズガイドとは別でまた書きたいと思います。
では次回は「#6：スケジューリング」について書きます。ディレクターから多少PMやプロデューサーの要素も入ってくるかと思いますが、ディレクターのネクストステップとして考えられるキャリアでもあるかと思うので、お付き合い頂ければ幸いです。
今回もありがとうございました！
この記事が気に入ったらサポートをしてみませんか？