CSS Nite LP53「ワイヤーフレームとビジュアルデザインの間の暗くて深い闇」

コンテスト関連を除いて、すべてのフォローアップが出揃いました。

更新情報は、Facebookイベントページでも［参加］とされておくと、見落としにくいと思います。

最終更新日： 2018年01月04日 (木) 18:00

公開ポリシー

このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。

Twitter

ツイートは下記にまとめました。

動画について

ダウンロード期限があるものもありますのでご注意ください。
現状、ダウンロード不可になっています。

人を巻き込むワイヤーフレーム活用術　ー4つの活用法と問題の本質ー
田島 ちはる（HUMORE）

1番目のセッションを担当した、田島ちはるです。ご参加いただきました皆さまに改めて感謝申し上げます。
私からはワイヤーフレームの役割を改めて整理し、活用法や今回の「闇」の原因の分析についてお話しました。

基本的な内容も多くなりましたが「作る前の相談や途中のすり合わせが無い」と、悩む声に応えたく、ヒアリングをもとに取り組みました。現在のワークフローに事前相談やすり合わせがない等、お悩みがあれば、ぜひスライドを改善のきっかけに使ってください。

制作と人の間で物事をスムーズに進める際の活用法を、解りやすく、使いやすく…と、心がけました。
お役に立てれば幸いです。

アンケートでの質問への回答

大型サイトの場合はどこまでワイヤーフレームを作りますか？

大規模サイトの場合どうしますか？

大規模（大型）サイトの場合は、サイトマップを作る段階で必要な機能・内容を洗い出します。そこから「固定のページ」と「テンプレートページ」に分けて洗い出します。
「テンプレートページ」のワイヤーフレームは、クライアントサイドとすり合わせながら、平均、最大、最小の情報量で3パターンを出して最終的な確認をとり、デザイナーに割り振ります。
「固定のページ」「テンプレートページ」ともに、セッションでお話した「クライアントの意見を引き出す工程」をすり合わせも兼ねて何度か行い、確認をとって進めます。
また、修正量が多そうな時はツールで作ります。デザインに続けることを踏まえてイラストレーターで作成することが多いです。

大規模サイトは後々、成長や変化が起きるものなので、完成後はパーツを使い分けれるようにスタイルガイドの用意を見越して進めてます。

イメージボードで納得いただくために、どう説明しますか？

イメージボードを提示する際に「ユーザーに何を伝えたいか、ユーザーは何を求めているか」という理由もあわせてデザインの説明をします。
例えば、コーポレートの理念とロゴに合わせ色やテイストを示す、製品など重要な部分を引き立たせるため、周囲をシンプルにする…など。
切り口に合わせて2~3パターン出し、そこからすり合わせます。

チームビルディングはどうしてますか？

チームメンバーの意見を聞くことや、個人の業務、価値観の理解を大切にしています。実際に自分でコーディングを行ってみたり、業務内容を細かく教えてもらいながら、どうしたらチームのメンバーが心地よく仕事できるのか考え、プロジェクトのゴールに向かいます。

方向性を示してプロジェクトを引っ張っていくことは大前提ですが、一緒に制作物を作り上げてくれるチームのフォローで走り回ることも、とても大切にしています。

お知らせ

ダウンロード

ワイヤーフレームは誰のため？『ディレクター視点で探求する、理想的なワイヤーフレーム』
田口 真行（デスクトップワークス）、金子 夕紀（スタイルメント）

メッセージ

皆さん、ありがとうございました！

今回、田口＆金子のセッションでは、Webディレクターの視点で探求する『理想的なワイヤーフレーム』をテーマにお届けしました。コンビ登壇ということで、フォローアップも「掛け合い形式」でお送りします。

（田口）
さて、金子さん。
今回、セミナー初登壇ということで、まだ余韻が冷めやらない興奮の最中かと思いますが、フォローアップまでがセミナーです。

（金子）
はい！気を引き締めて、まいります。

（田口）
今回のアンケートを拝見したところ、おおむね好評いただけたようですが…いくつか質問も届いてますね。

中でも『金子の秘訣』パートでお話しした「ワイヤーを読めない人向けに成果物を連想させる工程」に関するご質問が多く寄せられてます。

（金子）
はい。まずこちらから回答します。

そもそも、クライアントに対して行う「成果物を連想させるという工程」は、「完成形のイメージを共有する」ということではありません。

あくまで、そのプロジェクトにおける方向性の確認及び共有です。構成要素や実装する機能を固めるために行う事前対策であり、それがイコール、デザイナーへの指示にならないように注意してディレクションを行います。

（田口）
つまり、「成果物を連想する」工程は、デザイナーへの指示とは全くの別物であると？

（金子）
そうです。
デザイナーに対して「成果物を連想させる」資料は共有しないですし、セミナー中にもお話ししましたが、デザイナーがアイデアを発想する余地の線引きは明確に引きます。余計な制限をかけることは避けるように注意してます。

（田口）
なるほど。他にも多数のご質問が寄せられてますが…

（金子）
はい、ガンガン答えていきましょう。

（田口）
しかし、我々に用意されているフォローアップメールの文字数にも限りがあります。

（金子）
どうしましょうか？

（田口）
せっかくいただいた質問をスルーしちゃうのも勿体無いですし、この辺りは別の機会に行いましょうか。

（金子）
別の機会…ですか？

（田口）
はい。セミナーのフォローアップをライブ配信でやりましょう。

（金子）
ライブ配信？！
ということは、生放送ですか？

（田口）
生放送です。今日の22時からやりましょう。

（金子）
今日？！

（田口）
というわけで、本日10月2日（月）22:00〜、田口＆金子セッションの『フォローアップ特番』をFacebook Liveでお届けします。

こちらのURLにアクセスして、「リマインダーを設定」をクリックしましょう。ライブ配信開始前にリマインド通知が届きます。

皆さん、お楽しみに！

お知らせ

現役18年目のWebディレクター 田口真行の「サイトプラニング手法」と「マネジメント手法」をベースに開発した、Webディレクター向けツール、『Webディレクター手帳（プロトタイプモデル）』の限定予約販売がスタート！

https://webdirection.jp/tools/

※今回のプロトタイプモデルは数量限定（特典付）です。売り切れ次第、販売終了となります。お早めにどうぞ。

ダウンロード

「闇」をなくすためのコミュニケーションとユーザーテスト
林 大輔（楽天）

「『闇』をなくすためのコミュニケーションとユーザーテスト」を担当しました林大輔です。

今回は楽天トラベルの実例を交えながら、インハウスの制作ワークフローの一例や、コミュニケーションとユーザーテストについてお話ししました。

案件のスケジュールや予算、会社規模など、様々な要因によりすぐに取り入れることが難しいこともあるかもしれません。もし、取り入れられる案件やタイミングがあった際は、私の話を思い出していただけると幸いです。

アンケートでの質問への回答

被験者が社内の人間だとネットリテラシが高い人に偏らないか？

偏ります。ここは、被験者を正しく集めるか、スピード感を持ってテストをするかのトレードオフだと考えています。ネットリテラシが高い人にテストをしても、改善点はそれなりに発見されます。
同様にオンラインのユーザテストサービスも、被験者がテスト慣れしているなどの偏りはあります。

ワイヤーフレーム作成段階でのテストってどうやるのでしょうか？

ペーパープロトタイプでテストをするとは、具体的にどういうことをされるのでしょうか？

本編で口頭でお話しした「ペーパープロトタイプ」という手法が有効です。
ペーパープロトタイプについては下記のサイトを始め、いくつか参考になる記事があります。
https://fladdict.net/blog/2013/12/paper-prototyping-1.html

オススメのUTサービスでオススメのものはありますか？

日本では本編でも紹介した「ポップインサイト」「UIscope」が有名だと思います。

ユーザーテストを省略することはありますか？

小さな案件・改修でも100%テストしていますか？

ユーザーテストをすることを強く推奨していますが、実施するかしないかは、PMやデザイナーの判断に任せています。

仕様書はPMがひとりで作るのか？

改善系のプロダクトが多いので、1人のPMで作ることがほとんどです。もちろん規模によって2人、3人でというプロダクトもあります。

ワイヤーフレームはPMが修正するのでしょうか？

ワイヤーフレームについては、デザイナーがデザインに着手した後は、多くの場合修正されません。最終的な仕様書にはデザインが貼られるカタチになります。

仕様書の課題はどのように決まるのか？

課題があって、はじめて案件・プロダクトになります。例ですが「ここの使い勝手が悪い」「〇〇というユーザー層にリーチできていない」という課題に対して、PMがどのように解決していくかを考えていきます。

お知らせ

楽天トラベルではUIデザイナーを募集しています。
ご興味持たれた方、ご応募お待ちしてます！

また、楽天トラベルのPMシニアマネージャー・齊藤満のインタビュー記事が掲載されています。PMに興味を持たれた方は、ぜひご一読ください。

ダウンロード

ワイヤーフレームに必要な3つの視点とワークフローの再考
益子 貴寛（まぼろし）、松田 直樹 （まぼろし）

益子さんから

セッション4「ワイヤーフレームに必要な視点とワークフローの再考」を担当した益子貴寛です。

各登壇者からの「コミュニケーション」や「合意」という共通のメッセージがコインの表側で、クライアント（社内の担当者であれば事業責任者）の納得感を高めることがコインの裏側。両方をきちんとケアすることが「よい仕事」なんだ。そんな力強さをしっかりと感じたイベントでした。

クライアントの中でも、担当者は「完成度」を、決裁権者は「納期」を、というように、求められる満足が異なるケースもあります。こういった複数の満足を支えるひとつのカギであり、初動段階でのコミュニケーションや合意の蒸留物がワイヤーフレームだと考え、「たかがワイヤーフレーム、されどワイヤーフレーム」という気持ちで仕事をしています。そんな言外の思いが、みなさんに伝わったのなら幸いです。

以下、アンケートでいただいた質問に回答します。

Q1：写真撮影を実施するタイミングは、全体のワークフローの中でどのあたりがよいですか？

A1：私は、サイトマップをひととおり作り、主要ページ（数ページ分）のワイヤーフレームを描いたら、撮影の日程調整に入るパターンが多いです。つまり、設計作業のわりと初期の段階で動き出す感じです。撮影の実施（クライアント側の日程とカメラマンの日程が合うタイミング）まで、早くても2週間、遅ければ1か月くらいは先になるので、それまでに設計作業もだいぶ進んでいるはずで、当日までに撮影項目やそれぞれの仕上がりイメージを決めておくのはむずかしくないでしょう。

外観、社内や社外の様子、イメージカット（キービジュアルで使う雰囲気重視の写真）などであれば、それほど入念な準備はいらず、長くても2時間くらいの撮影で済むはずです。撮影費もそれほどかからないと思うので（たとえば5万円前後など）、ストックフォトなどを使うよりも、このようにオリジナルの写真を用意するとよいでしょう。けっこう、「撮影予算が取りにくい」という話を聞くのですが、そこはきちんとクライアントや社内に認めてもらう（見積り項目として堂々と立てる）ことが大切です。

もし予算が出にくければ、制作会社内や知り合いで（プロまでは当然いかなくても）撮影が上手な人に頼む方法もあります。あるいは、クライアントの社内で撮影が上手な人を探してもらい、写真を支給してもらう方法もあるでしょう。とにかく、「オリジナルに勝る素材はない」という意識が大切です。

一方、採用サイトで社員インタビューをともなう場合、プロダクトサイトでブツ撮り（製品の説明写真）の点数が多い場合などは、きっちりとスケジューリングし、数日に分けて実施することもあります。このような案件は、撮影費をきちんと予算取りできるはずで、その点は大きな問題はないと思います。

Q2：コピーライティングなどに関する作業について、見積書ではどのようにしていますか？

A2：きちんと項目を立てます。私は「コピーライティング／文章校正費」（素材準備段階の費用）や「エディトリアル費」（テストサイトを作るまでのブラッシュアップの費用）といった項目名を使っています。コピーや文章は、段階的に完成度を高めていくので、なかなかこれといった見積り項目を立てるのがむずかしい（工数が読めない）部分はありつつですが、まず企画や設計の段階（たとえばワイヤーフレーム）でその力や付加価値を認めてもらうことが、見積り項目の説得力を支えます。

Q3：ワイヤーフレームの完成度が高いと思いましたが、ディレクターにもデザインのスキルが必要ですか？

A3：ある程度はあったほうがよいと思います。というのも、デザイン的に完成度が低すぎるワイヤーフレームだと、アラにばかり目がいってしまい、肝心な「中身の検討」に意識を向けにくいからです。といっても、私も高いデザインスキルがあるわけではまったくなく、何とかここ数年、ワイヤーフレームの段階で、クライアントに「よし、行ける」と思ってもらえるクオリティにしようと心がけてきた積み重ねとして、お見せしたようなワイヤーフレームに行き着いた、という感じです。

Q4：優柔不断なクライアントのときは、どうしていますか？

A4：まず、「私たちの仕事は、提案である」という意識が大切です。クライアントが優柔不断であれば、こちらからどんどん提案し、リードして進めていきましょう。

このような前提がありつつ、テクニックとしては、担当者だけでなく決裁権者（上長など）に打ち合わせや意思決定に加わってもらう、A案とB案から選んでもらう（選択肢を狭める。ガラッと変えるのではなく、特徴的な部分を変えるだけでOK）、フィードバック期日をきちんと設定する、といったことが有効です。

そうそう、せっかくなので、とっておきの方法を教えますね。こちらが作ったワイヤーフレーム（などの中間成果物）について、「これでよいですか」「何か意見はありますか」という聞き方ではなく、「違和感がある部分はありますか」「どうしてもここは、という部分はありますか」という聞き方にすると、相手の視野を限定でき、リアクションのハードルを下げられます。公開日や納品日までタイトなスケジュールで進めなければならないときにも使える方法です。

松田さんから

以下、アンケートでいただいた質問に回答します。

Q：ワイヤーフレームはAdobe XDで作っているとのことですが、ワイヤーフレームとプロトタイピングを一緒に進めるメリットとデメリットは何ですか？

ワイヤーフレームは画面の構成要素を確定させるもの、プロトタイプは複数の画面のインタラクションを決めるためのもの、ということを前提とすれば、各画面のワイヤーフレームを作った後にプロトタイプとして画面間の関係性を検証できます。となると、複数画面の遷移において、整合性が取れているか、情報が冗長的でないか、ユースケースに適合するかなど、時系列での情報設計を行うことになります。これにより更にワイヤーフレームの精度を高めていくことが可能になります。

デメリットとしては、プロトタイピングを行うために想定されるすべての画面を用意しなければいけない点ですね。結構手間がかかります。そういう場合は手書きのプロトタイプにしてしまう方がいいかもしれませんね。

ダウンロード

デザインの考え方、つくり方
角田 綾佳（spicagraph）

「デザインの考え方、つくり方」を、お話しさせていただきました角田綾佳です。 今回はワイヤーフレームとビジュアルデザインの間にあるすれ違いや、わたしの実例、デザインの考え方などをお話しさせていただきました。当日はみなさんあたたかく聞いていただけて、緊張しながらも思いを出し切ることができました、ありがとうございました。

アンケートでは「デザイナーがこんなに考えているなんて」というありがたいお言葉をたくさんいただきましたが、同時に「わたしも同じことを考えていました！確認できて嬉しいです！」というお言葉もたくさんいただきました。大丈夫です、みんな頑張って考えています！

アンケートでの質問への回答

デザインで使っているソフトはなんですか？

WebはPhotoshop : Illustrator : Sketchで、比率は8:1:1です（元Fireworsk100%）。 印刷物はIllustrator＋Photoshopで、スライドはIllustratorで作成しています。 デザインデータを納品しますので、発注元の制作会社さんからの指定が使用の理由です。

苦手なジャンルはどうしてる？

ビジュアル部分の制作の場合に限ってお答えします。 例えば「装飾的なデザインが苦手」「シンプルなデザインが苦手」というようなことなら、ターゲットの好む雑誌やWebサイトを見て、「どういうところが好まれているのかな？」というポイントを探し、取り入れます（例えば写真のあしらいや、フォント、色数など）。

イラストを描くには何からすれば？

一番簡単なのは、今描いているイラストを「描けていない」と思わず、人に見せて一つでも褒められたところを伸ばすことです。 「こういうイラストを描きたい」というモデルがあれば、線の太さ、色数、塗り方、デフォルメの方法など、よく観察して真似してみてください。 わたしは実は手で描くのは苦手で、ベジェ曲線だといくぶんきれいに描けます、ツールの力も最大限借りましょう！

CMSのデザインの時どういう制約が出ますか？

物によりけりなので、「どういう制約が出ますか？」ということを最初に確認します。例えば、フォームのプラグインを使う、という時には「確認画面があるか」「ページ遷移するか」というようなことを確認します。なるべく労力少なくデザインを当てて欲しいので、デフォルトのデザインを活かせないか考えます（一部カラー変更のみなど）。

他のデザインメソッドを知りたい

まとめられるように、最小単位を探っているところです。わたしも知りたいので、みなさんぜひオレオレメソッドを発信してください^ ^

コンバージョンをあげられるメソッド

すみません、フリーランスということもあって、結果を事細かに知る機会が少ないのが現状です。制作会社さんから「前回はこれで下がったので、上がったので」という情報はいただきますが、案件によりけりという感じです。 矢野さんのバナーくるくる会での「写真とコピー！画像内にテキストがあるのがいい」という言葉がすごく参考になりました。

どうやって見積もりを作る？

いつも難しいのですが、基本は時間工数で出しています。そのほかに * いくら欲しいか * どれくらい手戻りがありそうか * やり取りのコスト これらを加味して決めます。

ディレクターや依頼者に恵まれないのでは？

とんでもない！そんな風に聞こえていたらすみません。 これまでわたしがワイヤーフレームを超えて提案できるのは、お客様とやりとりしていただくディレクターさんの苦労があってのことです。 様々な案件で、区切りをつけすぎず、任せていただけるのは嬉しいことです。いつもありがとうございます！（本当ですよ）

お知らせ

2017/10/28（土） WordFes Nagoya 2017　「デザイナー＆エンジニア座談会」参加します 2017/10/28（土） DevLOVE関西2017 commitment 〜"何"にコミットするのか？〜　「デザインを「伝える」ためにすべきこと」というテーマで登壇します

ダウンロード

コンテスト、コンテスト、「バナーくるくる会 」出張版
角田 綾佳（spicagraph）、矢野 りん（バイドゥ）

矢野さんから

セッション6「バナーデザインくるくる会」拡大版 の合いの手担当、矢野です。

最後までご参加下さりありがとうございました！
メディア制作においてデザイナーは、常にユーザー視点と発注者視点の板挟み。どちらも納得、満足させなければなりませんよね。
原則的には発注側とデザイナー、ディレクター皆が｢ユーザー満足」をともに目標とすることで結果が出せるはず。
どんな時もデザイナーはユーザーを主語にしてコミュニケーションすれば良くて、ディレクターも発注側もデザイナーの力量を信じ、任せれば問題は起こりにくいはずだと各セッションを通じて思いを新たにしました。

最後に、最近めっちゃ面白かった私のデザインタスクの要件定義メモ（うちのPMが作り、ぺっ！とメール送ってきました）。
——————————————————————————————
画像A（若い人が好きそうなアーティストのライブ風景）
画像B（若い人に限らず誰でも好きそうなアーティストのライブ風景）
目標 CVR8%増
——————————————————————————————
なんだよそれwwww
ふざ（以下略）

いや、準備します。してこます。あげてやろうじゃねえか！！！そのCVRを！！！

ではまた！

アンケートでの質問への回答

コンテストの周知が足りなかったことから企画について唐突に感じたかたがいらっしゃったようです😭申し訳ありませんでした。最後のセッションでしっかり時間を頂戴したのに反省です。また、リニュアル用バナーの募集という前提なら「現在」のバナーをまずちゃんと紹介すべきでは？というご意見ももっともです🙇‍♀️

知っていたら参加したのになあ！とおっしゃってくださったかたもいらっしゃるので、運用状況をもっと改善したうえで、コンテスト形式に挑戦してみたいです（ね！角田さん！）

お知らせ

角田さんから

「バナーくるくる会」出張版でお話しさせていただきました角田綾佳です。
CSS Niteの中でも珍しい取り組みの、参加型コンテストでしたが、たくさんの方に応募いただき全て紹介し切れなかったのが本当に残念です。応募作品についてはこちらにまとめました。

講評ではビジュアル的な話だけでなく、矢野りんさんの現場のノウハウを伺えて、大変勉強になりました。同じお題にこれだけ複数のデザイナーが取り組む、というのはなかなか機会のないことです。「なるほど、そういう解決法が」と言う発見がひとつふたつあったのではないでしょうか。ぜひこれからの制作に生かしていただきたいです。

アンケートでは、「知っていたら参加したかった」「時間があれば」と言う声もいただき、周知の甘さ・時間配分については大変反省しております。しかし、「たくさんのデザインを見られて参考になった」と言う声も多数いただきました。

今回のことを教訓に、また次回たくさんの方に参加いただけるコンテストにしたいと思います。

アンケートでの質問への回答

素材を選んでいるサイトについて

応募いただいたデザイナーさんそれぞれ、ご自身のお気に入りのストックフォトがあるかと思いますが、角田の話をさせていただきますと「Adobe Stock」を契約しています。
日々の業務だけでなく、こういったプライベートワークや、ブログのアイキャッチなど幅広く利用しています。
様々なサービスがありますが、好みの写真がありそうかけんさくしてみて、合ったものを選ばれるといいと思います。

リンク集

バナーデザインくるくる会は、どなたでも開催いただけます。会の狙いなどについてはこちらにまとめています。
もし開催いただけましたら、こちらに出題された課題などフィードバックいただけますととても嬉しいです。

神森さんから

コンテストについて

既存のランディングページのリニューアルというお題を設け、目的と現状の課題、打ち出したい要素を提示させていただきました。また、構成に関しては、ランディングページの基本構成で構築されることを目標とし、そこで展開される項目などは既存のものを使ってかまわないという形にしました。

実際の案件においても、ランディングページのようなものであれば、この要件で制作をお願いすることが多くあります。

今回応募いただいたワイヤーフレームでは、既存のものから大幅に情報をそぎ落とし、スッキリさせていただいたり、キャッチコピーも含めてご提案いただいたりと、短い時間の中でサイトから情報を引き出し、ワイヤーフレームに落とし込んでいただきました。

またこのような機会がいただけることがありましたら、応募期間をしっかり設けた上で、開催できればと思います。

長い時間のご参加、本当におつかれさまでした。

ダウンロード

お問い合わせ

ご不明点やお気づきの点がありましたら、フォームからご連絡ください。

お問い合わせ

このページの上部に戻る