2017年9月30日（土）ベルサール神田 イベントホールで開催したCSS Nite LP53「ワイヤーフレームとビジュアルデザインの間の暗くて深い闇」のフォローアップとして、益子 貴寛さん（まぼろし）、松田 直樹さん （まぼろし）の『ワイヤーフレームに必要な視点とワークフローの再考』セッションのスライドなどを公開します。
フォローアップメッセージは、イベント開催直後（2017年10月）の時点のものです。
メッセージ
益子さんから
セッション4「ワイヤーフレームに必要な視点とワークフローの再考」を担当した益子貴寛です。
各登壇者からの「コミュニケーション」や「合意」という共通のメッセージがコインの表側で、クライアント（社内の担当者であれば事業責任者）の納得感を高めることがコインの裏側。両方をきちんとケアすることが「よい仕事」なんだ。そんな力強さをしっかりと感じたイベントでした。
クライアントの中でも、担当者は「完成度」を、決裁権者は「納期」を、というように、求められる満足が異なるケースもあります。こういった複数の満足を支えるひとつのカギであり、初動段階でのコミュニケーションや合意の蒸留物がワイヤーフレームだと考え、「たかがワイヤーフレーム、されどワイヤーフレーム」という気持ちで仕事をしています。そんな言外の思いが、みなさんに伝わったのなら幸いです。
以下、アンケートでいただいた質問に回答します。
Q1：写真撮影を実施するタイミングは、全体のワークフローの中でどのあたりがよいですか？
A1：私は、サイトマップをひととおり作り、主要ページ（数ページ分）のワイヤーフレームを描いたら、撮影の日程調整に入るパターンが多いです。つまり、設計作業のわりと初期の段階で動き出す感じです。撮影の実施（クライアント側の日程とカメラマンの日程が合うタイミング）まで、早くても2週間、遅ければ1か月くらいは先になるので、それまでに設計作業もだいぶ進んでいるはずで、当日までに撮影項目やそれぞれの仕上がりイメージを決めておくのはむずかしくないでしょう。
外観、社内や社外の様子、イメージカット（キービジュアルで使う雰囲気重視の写真）などであれば、それほど入念な準備はいらず、長くても2時間くらいの撮影で済むはずです。撮影費もそれほどかからないと思うので（たとえば5万円前後など）、ストックフォトなどを使うよりも、このようにオリジナルの写真を用意するとよいでしょう。けっこう、「撮影予算が取りにくい」という話を聞くのですが、そこはきちんとクライアントや社内に認めてもらう（見積り項目として堂々と立てる）ことが大切です。
もし予算が出にくければ、制作会社内や知り合いで（プロまでは当然いかなくても）撮影が上手な人に頼む方法もあります。あるいは、クライアントの社内で撮影が上手な人を探してもらい、写真を支給してもらう方法もあるでしょう。とにかく、「オリジナルに勝る素材はない」という意識が大切です。
一方、採用サイトで社員インタビューをともなう場合、プロダクトサイトでブツ撮り（製品の説明写真）の点数が多い場合などは、きっちりとスケジューリングし、数日に分けて実施することもあります。このような案件は、撮影費をきちんと予算取りできるはずで、その点は大きな問題はないと思います。
Q2：コピーライティングなどに関する作業について、見積書ではどのようにしていますか？
A2：きちんと項目を立てます。私は「コピーライティング／文章校正費」（素材準備段階の費用）や「エディトリアル費」（テストサイトを作るまでのブラッシュアップの費用）といった項目名を使っています。コピーや文章は、段階的に完成度を高めていくので、なかなかこれといった見積り項目を立てるのがむずかしい（工数が読めない）部分はありつつですが、まず企画や設計の段階（たとえばワイヤーフレーム）でその力や付加価値を認めてもらうことが、見積り項目の説得力を支えます。
Q3：ワイヤーフレームの完成度が高いと思いましたが、ディレクターにもデザインのスキルが必要ですか？
A3：ある程度はあったほうがよいと思います。というのも、デザイン的に完成度が低すぎるワイヤーフレームだと、アラにばかり目がいってしまい、肝心な「中身の検討」に意識を向けにくいからです。といっても、私も高いデザインスキルがあるわけではまったくなく、何とかここ数年、ワイヤーフレームの段階で、クライアントに「よし、行ける」と思ってもらえるクオリティにしようと心がけてきた積み重ねとして、お見せしたようなワイヤーフレームに行き着いた、という感じです。
Q4：優柔不断なクライアントのときは、どうしていますか？
A4：まず、「私たちの仕事は、提案である」という意識が大切です。クライアントが優柔不断であれば、こちらからどんどん提案し、リードして進めていきましょう。
このような前提がありつつ、テクニックとしては、担当者だけでなく決裁権者（上長など）に打ち合わせや意思決定に加わってもらう、A案とB案から選んでもらう（選択肢を狭める。ガラッと変えるのではなく、特徴的な部分を変えるだけでOK）、フィードバック期日をきちんと設定する、といったことが有効です。
そうそう、せっかくなので、とっておきの方法を教えますね。こちらが作ったワイヤーフレーム（などの中間成果物）について、「これでよいですか」「何か意見はありますか」という聞き方ではなく、「違和感がある部分はありますか」「どうしてもここは、という部分はありますか」という聞き方にすると、相手の視野を限定でき、リアクションのハードルを下げられます。公開日や納品日までタイトなスケジュールで進めなければならないときにも使える方法です。
松田さんから
以下、アンケートでいただいた質問に回答します。
Q：ワイヤーフレームはAdobe XDで作っているとのことですが、ワイヤーフレームとプロトタイピングを一緒に進めるメリットとデメリットは何ですか？
ワイヤーフレームは画面の構成要素を確定させるもの、プロトタイプは複数の画面のインタラクションを決めるためのもの、ということを前提とすれば、各画面のワイヤーフレームを作った後にプロトタイプとして画面間の関係性を検証できます。となると、複数画面の遷移において、整合性が取れているか、情報が冗長的でないか、ユースケースに適合するかなど、時系列での情報設計を行うことになります。これにより更にワイヤーフレームの精度を高めていくことが可能になります。
デメリットとしては、プロトタイピングを行うために想定されるすべての画面を用意しなければいけない点ですね。結構手間がかかります。そういう場合は手書きのプロトタイプにしてしまう方がいいかもしれませんね。
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
