日時：2013年03月07日（木）19:00～21:00
会場：コワーキングスペース茅場町Co-Edo
関連：CSS Nite @Co-Edo, Vol.6（2013年3月7日開催）
CSS Nite公式サイト: CSS Nite @Co-Edo, Vol.6アーカイブ
ワークショップの詳細のあたりで力尽きました。後で加筆する予定。。。。。
2013年3月17日に加筆しました。
感想など
大変たのしいワークショップでした。
私がいたチームは、5人中4人がノンデザイナーで、1人がデザイナーという構成でしたが、ワイヤーフレームを2回とも提出・発表できました！！
ほかのチームのワイヤーフレームで印象にのこったこと
- 更新のことを考えて Tumblr などの利用を想定している
ワイヤーフレームを作ることしか考えてなかったので、たしかに最初から考慮しておかないとなと思いました。
- 高円寺のイメージ（ごちゃごちゃ感）を
- 記事の画像とテキストで表現する
- 商品やコーディネートの記事の面積や位置を統一しないことで表現する（NHKスタジオパークみたいな感じ）
写真やイラストでの表現しか考えてなかったので、なるほどと思いました
チームでデザインを考えてワイヤーフレームを作っていくというのは大変貴重な経験でした。
また、決定権と判断基準の、大事さを身をもって体験できてよかったです。
（『スマートフォンデザインでラクするために』は社内で布教してみるか。）
参加した理由
仕事で、開発するWebアプリケーションの画面をつくったりするので、デザインには興味がありました。
（まぁ、画面を作るといってもWeb入稿とかWebシラバスとかです）
（ワークショップでやったWebサイトようなイメージ重視で集客するようなデザインはやったことないですし、やることもないでしょう）
(1) 「画面に向かうな！」のところに魅かれたから
(2) デザイナーさんと一緒にワークをすることに興味があったから
(3) CSS Nite のイベントに参加してみたかったから、@Co-Edoだったから
(1) どんな感じの処理にするのかとかあまり考えずに、画面に向かってコーディングしはじめて残念ことになることが多々あるので、
「画面に向かうな！」という言葉には魅かれるものがありました。。。。。
そして、どんなことをやるのか気になりました。
デザインで画面に向かってやることで浮かぶイメージは、illustratorとかPhotoshopを使うとか、HTML5とかCSS3でつくるとか。
画面に向かわないでやることで浮かぶイメージは、掲載する情報のリストアップするとか、サイト構造を考えるとか。
(2) 社内にはDTPのデザイナーはいますが、仕事で一緒にアイデアだしたり打合せたりする機会はいまのところなかったので、どんな感じなのかと気になりました。
(3) CSS Nite のイベントは1度は参加してみたいと思ってたので。気づいた時にはだいた埋まっている。
あとは、会場のCo-Edoが職場の近くなので参加しやすかった。
『スマートフォンデザインでラクするために』
イベント申込みページで紹介されていて、大変気になったので、すぐに書店で購入しました。
- 読んでみて、こういう感じのことが知りたかったのだ！という感じの本。特に第1章～第4章あたり。
- ヒアリングのメモと解説もあって、思考の流れとかポイントとかわかりやすかった。
- 章の最初のイラストが面白い。
デザイナーの方はもちろん、デザイナーと一緒に仕事をする方も読んどくとよいのかなと感じました。
デザイナーがどんなことをやるのかがわかるし、デザインの良し悪しは何で評価するかがわかる。
PIXTAさんの発表
PIXTAさん（http://pixta.jp）のサービス紹介
- 525円から
- 毎日5000点の新規素材で、新鮮
- 日本人のイメージが豊富
- 1度購入すればOK
私が、年賀状用のイラスト探しで利用しているPIXTAさんの発表がありました。
525円からという価格と、欲しい雰囲気の素材が見つかるので、個人的に年賀状作成でお世話になってます。
写真・動画素材は、仕事でも個人でも使うことはないから、日本人のイメージの豊富さは知りませんでした。
講義とワークショップ
『スマートフォンデザインでラクするために』の第2章「作る前に8割が決まる」の内容の一部を体験するワークショップでした。
高円寺の古着屋さんのWebサイトのリニューアルの案件という設定で、以下の流れでワイヤーフレームの作成と発表をやりました。
-
講義：よいデザインとは何か？
そもそもデザインって何なの？ということを、石嶋さんが経験や著書の内容を交えてお話されました。
-
ヒアリング
Webサイトのリニューアルの見積もり作業に必要な質問をして、情報収集しました。
-
ワイヤーフレームの作成・提出
15分という制限時間内で、ヒアリング結果をもとに、チームでリニューアルのワイヤーフレームを作成しました。
-
ワイヤーフレームの発表
1チーム1分で、ワイヤーフレームのデザインの説明をしました。
-
講義：決めないといけない2つのこと
ワークがうまくいかなかったのは、たった2つのこと（決定権、判断基準）を決めてなかったからだ！というお話をされました。
-
ワイヤーフレームの作成・提出（再び）
決定権、判断基準を決めて、再度ワイヤーフレームを10分で作成しました。
-
ワイヤーフレームの発表（再び）
1チーム1分で、ワイヤーフレームのデザインの説明をしました。
講義：よいデザインとは何か？
「スマートフォンデザインでラクするために」第2章を題材にしたお話でした。
第2章は、広義のデザインの話なので、ノンデザイナーでも楽しめるから題材にしたとのことでした。
よいデザインとは？
問題を解決しているデザインのこと
以上
定番の書籍。マカロン本（スマートフォンサイト制作入門）
ヒアリング
- 石嶋さんが、古着屋の男性店長の役で、アバウトな要望を伝える
- 参加者が一人一つだけ、制作に必要な質問をする
- 店長がまとめて答える
- 参加者（希望者）が追加で必要な質問をする
- 店長がまとめて答える
私が真っ先に浮かんだ質問は、1番目の人に言われてしまい、次の質問がうかばず最後にまわされました。。。。。
その後、考えた質問もどんどん他の参加者が言ってしまい、質問がなくなっちゃう！などとあせってました。
（まぁ、他の参加者と質問がかぶってはいけないというルールはなかったはずので、同じ質問でもよかったのでしょうが。
なんかかっこわるいし、せっかくだから被ってない質問がしたいじゃないですか。）
石嶋さんが、参加者の質問をメモしながら、いい質問だなどのコメントを言われてました。（コメントをメモする余裕はなかったですが。）
私が考えた質問：
- 対象とする客層は？
- 納期は？
- 参考サイトは？
- こだわりは？商品とかお店とか。
- 商品やコーディネートの写真などの素材はあるか？
実際にでた質問（うろ覚え）：
- ターゲット（客層とか）
- 現在のサイトへの不満
- イメージカラー
- 予算
- 対象の年齢層
- 高円寺らしさとは？
- 納期
- 現在のサイトの気に入っている点
- サイト上で販売するか？
- 対応デバイス
- 参考サイト
- サイトの目的
- サイトへの流入経路
- こだわりは？商品とかお店とか。
- KPI
追加質問：
- 現在のサイトのページ数
- カッコイイとは？
- サイトのロゴもリニューアルするのか？
- 商品やコーディネートの写真などの素材はあるか？
(
2013/03/17 に加筆)
石嶋さんが補足した質問：
- 前回はどうやって作ったのか？
- 組織形態は？
- なぜ自分のところに依頼したのか？
前回の状況を把握できれば、今回の進行方法や制作時の注意点などが予想しやすいという話だったと思います。
今回のワークショップでは決定権のある店長が担当をかねてましたが、組織形態によっては、決定権のない人が担当になることもあります。
その場合は、担当者ではなく決定権のある人を意識した提案・制作をやらなければならなという話だったと思います。
自分のところに依頼した理由を聞くことで、何が求められていることを把握できるという話だったと思います。
ネットでググって知ったのか、どの業績を見て選んだのか、で求められるものが違う。
ヒアリングすべき質問：
- 誰が更新するのか？
更新する人達のスキルや体制などを確認しておかないと、
- 用意した更新の仕組みを、お客さんが理解できてなくて更新できない
- リニューアル後に問い合わせやクレームがガンガンきて対応に追われる
- 契約になかったはずの更新作業までやらされる
などの事態が発生するというような話を、懇親会でしてました。
ワイヤーフレームの作成・提出
さっそくのワイヤーフレーム作成、チームのみんなとワイガヤでやるのだななどと思っていたら、
制限時間15分！
そして、やることはこれ
- トップページのデザインについて意見出す
- ワイヤーフレームを書く
- 参考サイトを探す
- ワイヤーフレームの写真と参考サイトのURLをツイートする
あっと言う間に15分が経過して強制終了！となりました。
石嶋さんが、終了宣言しながらチームをまわって、強制終了させてました。
短すぎる、無理だと思ってましたが、なんとかなりました。
間に合わなかったチームは、ゆずりあったり、意見の出だしがおそかったりして、時間が足りなかったらしい。
私がいたチームは、進行と意見集約してワイヤーフレームを書く役、参考デザイン探してワイヤーフレームの写真を送信する役を、決めなかったけどやる人がいたので、間に合ったというところでしょうか。
(
2013/03/17 に加筆)
だいたいこんな感じで進んだはず。
グループでやったこと（うろ覚え）：
1. 「15分？？短い！なにをやるの？？」って感じで困惑する
2. しばらく「どうしよう？」という空気になったけど、一人がリーダーシップをとって状況を整理しはじめる。リーダー(仮)の誕生。
3. まずは、質問の回答にあった、参考サイトを確認することにする
→ 高円寺のごちゃごちゃ感とはかけ離れたデザインで「どうするよ？？」ってさらに困惑する
4. そもそもごちゃごちゃ感ってどう表現するの？？ってなる
5. 散発的に意見が出た気がする
6. 時間が半分以上すぎてしまいあせる
7. ワイヤーフレーム書かないと！って感じになりつつも誰も書こうとしない。ちょこっと様子見状態になる
8. 書くよとリーダー(仮)が宣言して、「こんな感じ？」とみんなに確認しながら書き始める
9. ロゴ、メニュー、キービジュアの枠を書く（オーソドックスなレイアウト？参考サイトに似た感じ？になる）
10. キービジュアから下の部分について「何をかく？」ってなる
→ 住所と地図いるよねという話しになる
→ 店長が目立ちたがり屋な感じがするから、一緒に店長の写真いれたら？ってなる
11. ワイヤーフレームが完成
12. もう時間がない、参考サイト探さないと！！ってあせるが、即座に一人が「これなんかどう？」って参考サイトを提示する
13. これだ！ってことで採用する
14. 11で参考サイトを提示した人が、ワイヤーフレームの写真をとって、参考サイトのURLをツイートしようとするも、ハッシュタグなどの入力が終わらない！
15. 発表者がリーダー(仮)になりそうな流れになり、さすがにそこまでやってもらうのもどうかと思い、私がやることになる
16. 石嶋さんがタイムアップ宣言してまわる間に、ツイートとが完了できたらしく、一同がほっとする
振り返ってみて：
やはり、早い段階(2)で、リーダー(仮)の誕生があったから、ワイヤーフレーム提出が間に合った要因だなと思います。
また、参考サイトの提示(12)は、私やほかのメンバーがやってなかったので、ファインプレーだったなぁと思います。
結果的に、役割分担ができたからよかったですが、リーダー(仮)が誕生しなかったら、参考サイトを探してたメンバーがいなかったら、ワイヤーフレームを提出できなかっただろうことを考えると、「決定権」は大事だと改めて思います。
ワイヤーフレームの発表
提出したワイヤーフレームについて発表しました。
ちなみに私が発表しました。もう何をしゃべったのかよくおぼえてません。
発表したかもしれない内容：
- ヒアリングで店長は目立ちたがり屋と感じたので、店長の写真とコメントを掲載する
- 上部の写真でこちゃごちゃ感をだす
- 写真は、端の矢印を押すとスライドして別の写真にかわる
講義：決めないといけない2つのこと
決定権と判断基準を決める！
決定権
- だれが決めるのか？
- 役割を決める（司会、ワイヤフレーム書く、参考URL探す）
判断基準
- どっちがいいのか？
- ページ遷移させる or 1ページで全部見せる どっち？？
判断基準：若い人向け
→ スマホで見る → 1ページで見せよう（3Gだし、遷移がないほうがよい）
ワイヤーフレームの作成・提出（再び）
判断基準にしたがって、再度デザインを考え直しました。
1度やっているのと、判断基準が明確なので、前回よりよいものができました。
(
2013/03/17 に加筆)
「決定権」を知ったことで、1回目の役割が確定し、リーダー(仮)がリーダーになって、進行がよくなりました。
また、「判断基準」を知ったことで、ワイヤーフレームにもっと、要望に合った要素を取り込みやすくなったように感じました。
判断基準を元にした変更箇所（うろおぼえ）：
- お店のイメージを伝える
→ ロゴの文字を「温故知新」ととっさに読んでしまった。「温古着新」の「着」を強調したほうがよいのでは？
- こだわりを伝える
→ コーディネートの写真とがあるとよいのでは？
→ 店長の写真のところに、店長が選んだ店長のコーディネート写真を切り替えられるとよいのでは？
→ キービジュアにコーディネート前後の写真を掲載したらよいのでは？
→ 商品にこだわってるから、こだわり商品・レア商品のおすすめを掲載しよう
- ごちゃごちゃ感
→ キービジュアを一定間隔で切り替えては？
→ キービジュアに、店の様子や商品とかをごちゃごちゃに表示してみては？
→ マップをごちゃごちゃした感じの手書きにしてみては？
- 伝えたくなる仕掛け
→ ソーシャルボタンをつけよう
（変更した理由はおぼえてない）
- メニュをどうするか
→ 前のままキービジュアの上部に表示するか？
→ キービジュアの左に縦並びにしよう
振り返ってみて：
決定権
1回目になんとなく分担が成立していたので、それが明確になっただけでした。ただ、明確になった立場での進行なので、進行はよくなったと思います。
判断基準
1回目からの変更点のアイデアが、判断基準を意識して出てきた感じでした。私は、この判断基準に沿うならどんな変更がよいのかという、方向性で考えてました。
判断基準があると、アイデアが出しやすいと感じました。1回目では、こんなアイデアを出しても大丈夫かな？と不安な感じでした。
2回目では、この判断基準だったらこんな感じがよいのではないと、良し悪しは別にして、基準に沿ったアイデアを安心して出せました。
ワイヤーフレームの発表（再び）
発表したかもしれない内容：
- ロゴの（着）を目立たせる
- 上部のところで、コーディネートのビフォー、アフターの写真を掲載する
- こだわり商品・レア商品の写真とコメントを掲載
- マップは手書きの地図にする
(
2013/03/17 に加筆)
振り返ってみて：
発表内容を整理してなかったので、説明不足や、説明忘れがあり、十分には説明できませんでした。。。。。orz
2回目は、若干余裕があったので、発表内容を整理しておけばよかったと思いました。
懇親会
パエリアがなかなか届かなかった。
石嶋さんともお話できて、楽しかったです。
結局ほかのチームの方とほぼお話しなかったのがこころ残りです。
その他
そういえば、ワークショップのとき、私のいたチームは、立ってやってましたが、他のチームってどうだったのだろう？なんかみんな座ってやって気が。。。。。
あと、他のチームのデザイナーとノンデザイナーの比率が気になりました。懇親会で質問を投げかけたタイミングで、パエリアが届いたて、注意がそっちにいってしまった。。。。。
