あとで読む
ウェブ担当者通信の代表である丸山が「これは！」と思った優良セミナーを受けてきて、感想をお伝えするものです。内容については丸山の解釈が入りますので、間違っている部分があるかも知れません。もし内容を気に入ったり、より詳しいお話がお聞きになりたい場合などは、ぜひ著者・主催者のセミナーに参加されることをお薦めいたします。
画像：Pixabay
ディレクターがデザイナーと共同作業をする場合、ワイヤーフレームを作ることは多いと思います。
しかし、ワイヤーフレームの正しい作り方を知っている人はどれだけいるでしょうか？ワイヤーフレームを作ったものの、最終的に理想のデザインに近づけなかった経験はありませんか？
本セミナーでは、ワイヤーフレームの作り方から、デザインにとって必要な中間制作物について学べます。
まさにその課題の解決方法を学べる、珍しい講座だと感じたので参加してきました。
ワークショップも有意義でしたし、内容も濃く“当たり”のセミナーだったと思います。
講師の松田さんはデザインに対する洞察が鋭く、大規模プロジェクトも経験されていますし、とても使い勝手のよいシステム的なデザインも手がけておられます。講座に参加して正解でした。
会場には40名ほど入っていたと思います（ほぼ定員です）。しかし募集開始当初は集客に苦戦したとのことでした。良いセミナーでしたが、なかなか訴求が難しいテーマだったのかもしれません。参加社の属性は、制作会社のデザイナーさんや、企業のウェブ担当者さんが多かったと思います。
興味のある方はぜひ主催者のページをご覧ください。
中間制作物には下記のようなものがある。それぞれ下記の順番に作成されることが多い。
しかしワークフローのように全てを作る必要があるかどうかは疑問である。
後ほど紹介するが、最初からモックアップを制作した方がうまくいく案件もある。
中間制作物を作る目的はコンセンサスを得る（合意形成）ことである。なのでコンセンサスに関係ないものは作らない方がマシである。
作り込みが大きいほど制作に時間がかかるので、制作負荷の低い制作物で早めに大筋のコンセンサスを得るためにワイヤーフレームが存在している。
しかしコンセンサスを得ても後ほどひっくり返る可能性があるならば、時間の無駄なので作らない方がマシである。
※これは講師の話ではなく丸山の実感値の話です。
セミナーでは6チームで、講師が用意した学習用ワイヤーフレームからデザインを起こすワークショップを行った。
この作業の中でわかったことが2つある。
プロジェクトの中で、成果に直結する課題や目標を広い視野で見つける人は限られている。
おそらく課題設定力は属人的であり、個人の特性や知識量に依存する。
一方で、解決方法というのは、各人が良いアイディアを思いつくことが多い。
なので、根本課題や目標の抽出は得意な人がやった方がよいが、解決方法については他の人に任せたり、チームで取り組んだりしても良い。
課題解決方法についてアイディアが出た後は、引き出しの多いスペシャリストと組む方が良い。
実際、ワークショップの中でずば抜けて制作スピードが速く、かつクオリティが高かったチームは、チーム内に凄腕のデザイナーさんがいて、アイディアをどんどん形にしてき、コミットしていったからである。
一方で、全員の合意性や、デザインを役割分担したチームは制作スピードが遅かった。
結局、仕事は適切な役割分担を行えればとてもうまくいくが、その配置をミスすると余計な苦労が増えることになる。
よくあるケースとして、クライアント担当者に対してワイヤーフレームで合意をとったら、そのままワイヤーフレームをデザイナーに発注する人がいるが、これはNGである。
なぜなら、中途半端なワイヤーフレームは、クライアントもよくわかっていないし、デザイナーも何を信頼して進めればよいかわからないことが多いからである。
一方で、ワイヤーフレームがデザイン的な要素を入れ込みすぎるのもNGである。
クライアントのイメージが固まってしまい、自由度がなくなるが、実際にコンテンツを入れてみるとうまく当てはまらないことも多い、
例）
「お知らせ」という欄に表示する行数は二行がいいのか？10行がいいのか？などがワイヤーでは決められていないが、デザインだけ決まってしまっていることがある。こうなるとデザイナーができることは限られてくる。
ディレクターが完全に決めるべきなのは「コンテンツ（中身）」と、「キャッチコピー」など細部の表現。およびそのページの情報の優先度である。
Adobeの案件「5つのメディアを統合するプロジェクト」を実行する時に、責任者がそれぞれのメディアに5人いた。そうするとワイヤーフレームレベルで合意形成することはとても難しい。（なぜなら、自分の担当している製品がどの位置にくるのか？というのがとても大切なので）
そこで実際にワイヤーフレーム作成はすっ飛ばして、ワードプレスで動くモックアップを作って確認した。
運用イメージが出ることによって納得感を作りやすかった。モックアップを作ることで、5人で1つのものを作るというイメージになった。ワイヤーフレームが毎回必要なのかも、あらかじめ考えたい。
7つの事例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法
tomoyukiarasuna.com/as-it-is-wireframe/
デザイナーはワイヤーの通りにデザインすべきかという議論は虚しいのでやめよう
in.spicagraph.com/other/design-wire/
主役が何か？を間違えているワイヤーは多いので、そこは注意しよう。
以下に事例を掲載する。
グラフの下に、グラフを変更する設定ボタンがついているワイヤーフレームがあった。
実際にはデザイン上ではグラフが主役。設定なんてそんなに変えないので、右上に歯車マークでOK.
カフェの店でカフェの写真を載せているワイヤーはよくある。
しかし本当は店内の写真の方が吸引力があるのでは？といった機転を利かせたい。
ワイヤーフレームでは「キャンセル」「OK」という表現だが、「参加しない」「参加する」の方が適している場合がある。
なお文語より口語を使おう。就寝より「寝る」の方が適している。
おしゃれなセレクトボックスを使うワイヤーフレームになっていたが、実際にはスマホで見るとセレクトできないデザインに。
その場合はJavaScriptなども使わずブラウザ標準のセレクトボックスを使えば、ブラウザの枠からはみ出そうな時も自動調整してくれる。デザイナーにはこのような知識も欲しい。
ワイヤーフレームではそのページのコンテンツが0の時の検討がないことが多い。
デザイナーはリストが0の時のアイディアを補完すべきだ。
何もない状態には「見つかりませんでした。○○はどうですか？」といったアドバイスの言葉をいれよう。
モーダルとはその状態（モード）になっている状態。ワイヤーではモーダル前提になっていることが多いが、要不要の検討はされていないことも多い。
デザイナーはモーダルが解除されたモードレスな状態を意識してデザインすべき。
ワイヤーではモーダルを使われていることが多いが、乱用はよくないことが多い。
モーダルはそれ以外の操作をしちゃいけない時に使うべき。
ワイヤーフレームでは表現しづらいが、実装時には、カートに入れるなどでアニメーション効果などもつけることができる。
ユーザーの行動に対する反応が「インタラクション」。
例えばFacebookの保存するボタンは、押すとどこに保存されたかアニメーション（インタラクション）する。そうするとどこに入ったかがわかる。こういった気遣いも考えておきたい。
ユーザーがその画面でどこを見るか？という点に着目して操作を可視化していく手法。
www.standardinc.jp/reflection/article/ui-flows/
何を見るか？どう行動するか？
→その先でも同様に考えていく。
どう行動するか？は無限に増えていく。その後をどれだけ減らせるか？がデザインである。
ペルソナに沿っているといい。
例）
すごい情報量があるサイトをデザインする場合、ワイヤーフレーム上で中途半端にデザインを決められたり、特定のボタンを目立たせたりなどが決まってしまうと、結局文字数によってデザインで調整が入るなど矛盾が出ることが多い。
一方で、情報の優先順位と掲載量をディレクター側でがんばって決めることができれば、それをどのように見せるかはデザイナーが考えることができる。
この役割分担を明確に意識した方がよい。
「決まったこと」と「自由なこと」が明確だとわかりやすい。
ワイヤーレベルでは色を使わない
その代わりコンテンツをしっかり決めきる。
チームメンバーが、なぜこの画面を作るのか？誰に向けての作業なのか？といった文脈や理由を理解すること。そうすれば各自コラボレーションしてよりよいデザインになる。
共同作業はinVisionが優秀。特にコメント機能が良い。inVisionのコメント機能は、色をつけることができる
www.invisionapp.com/
同様のことはAdobe XDでもできる。
パワーポイント＆Dropboxでもできる
セミナーを受けた丸山の感想
■総合評価
レポート中にも記載しましたが、内容もとてもよかったですし、個人的に収穫だったのは、どのようにすれば最も作業が早く、かつクオリティ高く完成するのかを実感できたことでした。
その人の得意分野を見極め、適切な役割分担で作業を進めることが大切だと感じます。変に合議制にすると話が進まないので、視野の広い人と、引き出しが多い人は才能なのだと割り切って考えることでヒントが生まれると思います。
●本セミナーの内容に質問がある方へ
事務局で質問を受け付けます。メンバーズサイトの質問コーナーに記入して頂くか、お問い合わフォームよりご連絡ください。
「ムダな情報で頭脳を消耗することなく考える時間を確保する」
ウェブのノウハウだけに限らず、広告やマーケティング全般の知識、時には組織論や時事に至るまで、最先端や未来予測などみなさんにとって本当に必要な情報だけをお届けします。
