ブログ移転しました。数秒後に新しいURLへ自動的に遷移します
タイトルは釣ｒ・・・じゃないよ。釣りじゃないです。
何かって言うと、二週間ぐらい前に自分でつぶやいたツイートです。
なんでそんなことつぶやいたかは面倒くさいので聞かないでくださいええ。ええ。面倒くさいので。
何かって言うと、二週間ぐらい前に自分でつぶやいたツイートです。
なんでそんなことつぶやいたかは面倒くさいので聞かないでくださいええ。ええ。面倒くさいので。
「ワイヤーフレームなんてなぁ、その前までで9割は勝負ついてんだよ」って言うのがいいかもしれない（謎）
— toksato (@toksato) 2014, 9月 11 で、そんなことを言いながらUI設計のスライドとか公開しちゃうとか。ほんと何したいのか自分でもよくわからない（謎）
しかもバリッと本名出てる。いいけど。探せばわかることだったし。前から。
しかもこんなページがあったりする変なスライドです（謎）
いや、でもね、タイトルのようなことってぜんぜん僕にとっては嘘でもなんでもなくて。
だからこのスライドでもぜんぜんUIの話してなくてｗ
そんなわけで、うぇぶぎょうかいのむめいディレクターのおじかんです。
僕ね、「ワイヤーフレームをいかにうまくつくるか」なんて学んでもあんまり意味ないと思うんですよ。いや、意味ないことはないんですけど（なんなんだ）、ワイヤーフレームそのものの作り方なんか一生懸命学んだところで、良いUIなんかできないだろうって思うんですよね。
PowerPointで書くのかPhotoshopで書くのか、要素をどこまで入れ込むのかなんてのはすげー些末なことで、そんなもんは前後の工程に合わせて決めればいいし、ビジュアルデザイン一発で多くを解決する手法ならそれはそれで、ワイヤーフレームなんてテキトーに要素つっこんどけばいいんですよ。その手法だとどうせデザインみないとわかんないんだから。
グローバルナビをどうするか、どの要素、ボタン、バナー、メッセージを強調するかなんてのはワイヤーフレーム書く前に終わってる話であるべきで、画面構成を考えるときに「うーん、何を置こうか」なんて考えてんのはだいぶ遅いだろと思うわけですよ。
だってそんなの画面構成関係なーいじゃーん。
何を強く推すべきか、逆に何を小さく引っ込めて、何をあえて排除するかなんてのは、（もちろん画面と言う制限のなかで取捨選択はあるとしても）それ以前にビジネス側、ユーザーニーズ側から考える話でしょう。
・経営戦略
↓
・事業戦略
↓
・Web戦略
というふうに、本来的にはまずWebに関わらず企業全体の戦略があり、そのなかでWebが何をするのかということを決めなければならないわけで、それなしにWebサイトの設計も何もない。そのWeb戦略のなかで、「Webではひたすらキャッチ―な感じでポップさ、ライトさを全面に出していく」となったならば、コーポレートサイトだってそうなるわけですよね（某面白法人さんとか）。
ほんとみんなリニューアル案件とか持つと「キービジュアル何を置くか」みたいな話が大好きで、TOPページのそこの部分をアツく議論して、相手にプレゼンしたりしてるんですけども、
え、そもそもキービジュアル置くことがなんで決まってんの？って話なわけですよ。別になくたっていいじゃん。ユーザーが求めてない、ビジネスとして効果がないなら置く必要ないっすよ。そら、だって、いらないじゃん。
たとえばバーグハンバーグバーグさんのサイトとか、
※バーグハンバーグバーグのサイトより
キービジュアルと言われるものはたぶんないですね。
たとえばマクドナルドのサイトとか（ハンバーグばっかかい）、
※マクドナルドのサイトより
えーとこれはどこをキービジュアルと呼ぶべきですかね？えーと？きのこ月見？きのこリゾット？まあ、この場合はキービジュアルを二つに分けますとかそういう話なんでしょう。それキービジュアルなのかどうなんだそれは。
「それはそういうビジネスモデルだからだろう」という話なんでしょうけど、うん、だからビジネスモデルによって必要ならいれればいいし、不要なら外せばいいわけで、キービジュアルありきで考える必要なんかまったくないんですけど、まあ、やたら入れたがる。とかいいながら僕も画面設計していると入れること多いですけどねｗでも、それは必要だと思うから入れるわけであって、つまりそこには必要だと思う根拠や仮説があるわけですよ。それなしに「キービジュアル何を置こうか」ってのは僕はぜんぜん違うだろうと思っていて。
他にも、やたら「更新情報は重要なのでファーストビューの目立つ位置に」とか盛んに言ってたりするわけですけど、べつに更新しなくてもいいんじゃないのっていうね。そういうね。あるわけですよ（謎）更新情報と名付けているということはおそらくリピーター向け情報なんでしょうけど、重要な時に一度だけ訪れてくれればいいサイト、マーケティングファネルとかいうあのじょうごみたいなあれ（何）の上の方でだけサイトが活躍して、あとはリアルでコミュニケーションを取るなら更新情報などいらんわけです。また、何度も訪れるサイトだったとしても重要な更新情報はメルマガで配信していたり、そのメルマガからクローズドなサイトに飛ばしているなら、オープンな方のサイトのトップページの更新情報なんてものはさほど重要ではなくなるわけでして。
でね、これやっぱり画面構成そのものの話ではないんですよ。
いや、最終的なアウトプットはワイヤーフレームになるのかもしらんけど、でも更新情報を重要視するかどうかというのは、そのWebサイトがユーザーとのタッチポイントのどこで活躍するのか、さらにそれほどに有益な情報をそのWebサイトで発信できるような運用体制があるのかという、「制限」の方からも考えなきゃいけないわけで、いくらWeb屋が「Webサイトは更新するのが大事なんです！だからTOPに大きく！」とか言っても、サイトオーナーにとってそれが不要、もしくは運用不可能であれば何の意味もないんですよね。
だから、ワイヤーフレームだって大事なドキュメントなんだけど、本当に良いWebサイトUIをつくろうと思ったら、勝負なんてもうその前段階で９割ぐらい決まっているんじゃないかと思うんですよ。
例えばね、ソニー損保のサイトみてくださいませですよ。
※ソニー損保公式サイトより
瀧本美織がかわいいですよね
ちがう。そうじゃない。いやそうだけど、今言いたいことはそうじゃない。
ソニー損保サイトのサイト構造って大雑把にするとまあこんな感じですよね。
で、これを何にも考えないで画面構成にすると、こうする人って結構多いと思うんですよ。
主にグローバルナビがこうなる。
うん。多いな。多い。多い気がする。
まあそれはいくつかをサポートリンク的に右上にテキストリンクとして引っ込めたりすることはあるかも。
で、じゃあ実際のソニー損保サイトの下層を見てみると。
※ソニー損保公式サイトより
はいきた。
瀧本美織かわいい。
ちがう。それじゃなかった。また間違えてしまった。
グローバルナビ、違うんですよね。
実際に下層に入るとこうなってるわけです。
うん。ふりきってるなこれ。ふりきってる。
いやうそです。ぜんぜん振り切ってるとは思いません。
むしろこうあるべきだと思います。
これは、つまりTOPページをゲートウェイページにして、その下にマイクロサイトを持つ形ですね。僕もたまにこういう設計をしますｗ
サイト構造とか、画面に何を置こうかなとか考える以前に、「このサイトに何をしに来るのか」ということを考えれば、「自動車保険と医療保険をいっぺんに探す人はいないだろう」となるわけですよ。そりゃね、ときにそれが同一人物であることもあるだろうし、むしろ企業としてはそれがのぞましい。ちなみにそれをクライアントにいうと「いえいえtoksatoさん、その人が同一人物であることもあるんですよ」と言われますね。ほいで「いえいえ、それは、PS4とダイソンの掃除機を買う人が同一人物の可能性がある、という話と変わらなくて、いま大事なのは利用シーンの把握、そしてそれに沿った設計をすることなんです。ダイソンの掃除機とPS４を一緒に吟味する人はたぶんそうそういないですよね」とかコメントするわけですが。
「自動車保険を探しながら医療保険を探す人はそうそういない」となれば、グローバルナビを
とすると、自動車保険のことを知りたい人にはほとんどのボタンがノイズにしかならないんですよね。「自動車保険のことを調べたい人には自動車保険についてのナビゲーションを用意する」が大事だと思うし、だからソニー損保サイトもそうなってるんだろうと思います。
これ、ワイヤーフレームの書き方なんか必死に勉強してたって出てこないんですよね。それ以前の問題だから。そして、ワイヤーフレームを書くころにはもうこのあたりのことが整理されているはずであって、画面に落とし込む作業と言うのは「このページに必要な要素をどう並べるか、共通要素とユニーク要素のなかでどうバランスとって配置するか」ってフェーズに入ってるはずで、だから、もうその時点で９割がた勝負は決まってると思うんですよ。
ワイヤーフレームというドキュメントはもちろん大事だし、それが上手にかけるようになること、そしてそれで合意を得ることはとても大事なんですけど、それってほとんど「良いものをつくる」というより「納品物として、エビデンスとして仕様をまとめておく」というもので、UI設計のすべてがそこにあるわけじゃないと思うんですよね。
なんかこうみんなよってたかって（謎）ワイヤーフレームの書き方を悩んでセミナーとか受けたりしてるんですけど、いや、たぶんそれそのセミナーにいっても解決しないんじゃないの？問題はもっと手前で起きてるんじゃないの？って思ったので書いてみました。
ぼくもがんばります（なにが）
【追記】
あ、そうだ。
ソニー損保サイトで思い出した。
僕はこのページがとても好きです。
ソニー損保について知っておいてほしいこと｜自動車保険はソニー損保
PowerPointで書くのかPhotoshopで書くのか、要素をどこまで入れ込むのかなんてのはすげー些末なことで、そんなもんは前後の工程に合わせて決めればいいし、ビジュアルデザイン一発で多くを解決する手法ならそれはそれで、ワイヤーフレームなんてテキトーに要素つっこんどけばいいんですよ。その手法だとどうせデザインみないとわかんないんだから。
グローバルナビをどうするか、どの要素、ボタン、バナー、メッセージを強調するかなんてのはワイヤーフレーム書く前に終わってる話であるべきで、画面構成を考えるときに「うーん、何を置こうか」なんて考えてんのはだいぶ遅いだろと思うわけですよ。
だってそんなの画面構成関係なーいじゃーん。
何を強く推すべきか、逆に何を小さく引っ込めて、何をあえて排除するかなんてのは、（もちろん画面と言う制限のなかで取捨選択はあるとしても）それ以前にビジネス側、ユーザーニーズ側から考える話でしょう。
・経営戦略
↓
・事業戦略
↓
・Web戦略
というふうに、本来的にはまずWebに関わらず企業全体の戦略があり、そのなかでWebが何をするのかということを決めなければならないわけで、それなしにWebサイトの設計も何もない。そのWeb戦略のなかで、「Webではひたすらキャッチ―な感じでポップさ、ライトさを全面に出していく」となったならば、コーポレートサイトだってそうなるわけですよね（某面白法人さんとか）。
ほんとみんなリニューアル案件とか持つと「キービジュアル何を置くか」みたいな話が大好きで、TOPページのそこの部分をアツく議論して、相手にプレゼンしたりしてるんですけども、
え、そもそもキービジュアル置くことがなんで決まってんの？って話なわけですよ。別になくたっていいじゃん。ユーザーが求めてない、ビジネスとして効果がないなら置く必要ないっすよ。そら、だって、いらないじゃん。
たとえばバーグハンバーグバーグさんのサイトとか、
※バーグハンバーグバーグのサイトより
キービジュアルと言われるものはたぶんないですね。
たとえばマクドナルドのサイトとか（ハンバーグばっかかい）、
※マクドナルドのサイトより
えーとこれはどこをキービジュアルと呼ぶべきですかね？えーと？きのこ月見？きのこリゾット？まあ、この場合はキービジュアルを二つに分けますとかそういう話なんでしょう。それキービジュアルなのかどうなんだそれは。
「それはそういうビジネスモデルだからだろう」という話なんでしょうけど、うん、だからビジネスモデルによって必要ならいれればいいし、不要なら外せばいいわけで、キービジュアルありきで考える必要なんかまったくないんですけど、まあ、やたら入れたがる。とかいいながら僕も画面設計していると入れること多いですけどねｗでも、それは必要だと思うから入れるわけであって、つまりそこには必要だと思う根拠や仮説があるわけですよ。それなしに「キービジュアル何を置こうか」ってのは僕はぜんぜん違うだろうと思っていて。
他にも、やたら「更新情報は重要なのでファーストビューの目立つ位置に」とか盛んに言ってたりするわけですけど、べつに更新しなくてもいいんじゃないのっていうね。そういうね。あるわけですよ（謎）更新情報と名付けているということはおそらくリピーター向け情報なんでしょうけど、重要な時に一度だけ訪れてくれればいいサイト、マーケティングファネルとかいうあのじょうごみたいなあれ（何）の上の方でだけサイトが活躍して、あとはリアルでコミュニケーションを取るなら更新情報などいらんわけです。また、何度も訪れるサイトだったとしても重要な更新情報はメルマガで配信していたり、そのメルマガからクローズドなサイトに飛ばしているなら、オープンな方のサイトのトップページの更新情報なんてものはさほど重要ではなくなるわけでして。
でね、これやっぱり画面構成そのものの話ではないんですよ。
いや、最終的なアウトプットはワイヤーフレームになるのかもしらんけど、でも更新情報を重要視するかどうかというのは、そのWebサイトがユーザーとのタッチポイントのどこで活躍するのか、さらにそれほどに有益な情報をそのWebサイトで発信できるような運用体制があるのかという、「制限」の方からも考えなきゃいけないわけで、いくらWeb屋が「Webサイトは更新するのが大事なんです！だからTOPに大きく！」とか言っても、サイトオーナーにとってそれが不要、もしくは運用不可能であれば何の意味もないんですよね。
だから、ワイヤーフレームだって大事なドキュメントなんだけど、本当に良いWebサイトUIをつくろうと思ったら、勝負なんてもうその前段階で９割ぐらい決まっているんじゃないかと思うんですよ。
例えばね、ソニー損保のサイトみてくださいませですよ。
※ソニー損保公式サイトより
瀧本美織がかわいいですよね
ちがう。そうじゃない。いやそうだけど、今言いたいことはそうじゃない。
ソニー損保サイトのサイト構造って大雑把にするとまあこんな感じですよね。
で、これを何にも考えないで画面構成にすると、こうする人って結構多いと思うんですよ。
主にグローバルナビがこうなる。
HOME｜自動車保険｜医療保険｜ペット保険｜ご契約者ページ｜会社情報｜採用情報
うん。多いな。多い。多い気がする。
まあそれはいくつかをサポートリンク的に右上にテキストリンクとして引っ込めたりすることはあるかも。
で、じゃあ実際のソニー損保サイトの下層を見てみると。
※ソニー損保公式サイトより
はいきた。
瀧本美織かわいい。
ちがう。それじゃなかった。また間違えてしまった。
グローバルナビ、違うんですよね。
実際に下層に入るとこうなってるわけです。
自動車保険トップ｜商品の特長｜補償内容｜自動車保険ガイド｜お客様の満足・不満の声｜よくある質問
うん。ふりきってるなこれ。ふりきってる。
いやうそです。ぜんぜん振り切ってるとは思いません。
むしろこうあるべきだと思います。
これは、つまりTOPページをゲートウェイページにして、その下にマイクロサイトを持つ形ですね。僕もたまにこういう設計をしますｗ
サイト構造とか、画面に何を置こうかなとか考える以前に、「このサイトに何をしに来るのか」ということを考えれば、「自動車保険と医療保険をいっぺんに探す人はいないだろう」となるわけですよ。そりゃね、ときにそれが同一人物であることもあるだろうし、むしろ企業としてはそれがのぞましい。ちなみにそれをクライアントにいうと「いえいえtoksatoさん、その人が同一人物であることもあるんですよ」と言われますね。ほいで「いえいえ、それは、PS4とダイソンの掃除機を買う人が同一人物の可能性がある、という話と変わらなくて、いま大事なのは利用シーンの把握、そしてそれに沿った設計をすることなんです。ダイソンの掃除機とPS４を一緒に吟味する人はたぶんそうそういないですよね」とかコメントするわけですが。
「自動車保険を探しながら医療保険を探す人はそうそういない」となれば、グローバルナビを
HOME｜自動車保険｜医療保険｜ペット保険｜ご契約者ページ｜会社情報｜採用情報
とすると、自動車保険のことを知りたい人にはほとんどのボタンがノイズにしかならないんですよね。「自動車保険のことを調べたい人には自動車保険についてのナビゲーションを用意する」が大事だと思うし、だからソニー損保サイトもそうなってるんだろうと思います。
これ、ワイヤーフレームの書き方なんか必死に勉強してたって出てこないんですよね。それ以前の問題だから。そして、ワイヤーフレームを書くころにはもうこのあたりのことが整理されているはずであって、画面に落とし込む作業と言うのは「このページに必要な要素をどう並べるか、共通要素とユニーク要素のなかでどうバランスとって配置するか」ってフェーズに入ってるはずで、だから、もうその時点で９割がた勝負は決まってると思うんですよ。
ワイヤーフレームというドキュメントはもちろん大事だし、それが上手にかけるようになること、そしてそれで合意を得ることはとても大事なんですけど、それってほとんど「良いものをつくる」というより「納品物として、エビデンスとして仕様をまとめておく」というもので、UI設計のすべてがそこにあるわけじゃないと思うんですよね。
なんかこうみんなよってたかって（謎）ワイヤーフレームの書き方を悩んでセミナーとか受けたりしてるんですけど、いや、たぶんそれそのセミナーにいっても解決しないんじゃないの？問題はもっと手前で起きてるんじゃないの？って思ったので書いてみました。
ぼくもがんばります（なにが）
【追記】
あ、そうだ。
ソニー損保サイトで思い出した。
僕はこのページがとても好きです。
ソニー損保について知っておいてほしいこと｜自動車保険はソニー損保
