”第一線で話題を呼ぶwebデザインのプロセスを知る Vol.2 実践編”行ってきた

写真ナシ

板橋聡さんを特別講師に招いてたイベント行ってきた。
http://everevo.com/event/2704

引越しの荷物を新しい家に送る準備に手間取って（クロネコさん遅いよ！！） 1時間遅れで行ったので始めの話聴けず、戸惑いながら入った僕にも親切なスタッフの人たちがイベント概要教えてくれてよかった。
場所も人数の割に開放スペースが広くてよかった。

内容

内容はほぼタイムテーブルの通りでイベント開始後10分で即製作、製作時間は少し伸びてて3時間あった。
作るものはtwitter, youtube, dribbbleの3つから1つ選んでRedesignするというもの。
で、製作終わった後は同じように製作してた人たち向けに1人1分プレゼンして、1-3位の順位付けも全員終わった後に制作した人達同士で近くにいた人と10分くらい話し合って決めました。

そのあとは1-3位に選ばれた人とその作品をみながら板橋さん交えてトーク。
最後は名刺交換とか「あの作品は..」「既存のものをデザインし直すのは..」「ビール旨し！」って感じで残った人と話して終わりました。

他の人が作ったやつを見て

youtube選んでた人が半数以上、次にdribbble、twitterはホントに少なかった。
確かにtwitterは個々でデザインを変更できる所が多いし、使用頻度が高いページ、パーツはホントにシンプルにできてる。
dribbbleは使うけど、1日で使う時間も短ければ毎日必ず開くようなサービスでもない。特に、今回は今の職業がデザイナーの人がそんなに多くもなかったので知らない人もいたかもしれない。
そんなところがyoutubeが多く選ばれたのには理由かなぁと思いました。

20人くらいの発表を自分の発表の準備と合わせて聴いていたので、1人1人詳細なメモ取ってなかったんだけど、各サービス単位でメモみながら今思い出せるだけ載せとく。

• youtube

  • ユーザーが動画に集中できるように全面を黒背景。これは男の人が多かったです。
  • 普段使う機能が限られていて、他の機能は邪魔に思える人たち向けに機能を削ってシンプルに。
  • 普段webを触らない人、例えば高齢の方等も使いやすいようにSuggestionsにリモコンと同じように連番をふる。他にボリューム調節バーを▲, ▼などアイコン化
  • Suggestionsからもある程度内容が伝わるようにを今のものよりも大きく。
  • 再生、音量、拡大等があるバーがマウス操作ミスによって動画を押してしまう（動画が止まる）ことがあるので動画とバーを切り分け。余白のセパレーションを挟んで動画下に持ってくる。
  • 再生中動画の表示領域拡大、large player（ページ内での拡大）の削除。
  • スクロール短縮のため、コメント欄をiframe化や、Suggestionsを1列3つ並べてワンカラム化。
  • 再生中動画下はHistory, Comment, Suggestionsで3カラム化（ごめん、理由忘れた）
  • 今後、スマートフォン等の普及でそちらの利用者が増えることを予想し、Suggestionsに陰影を付与。
  • コメントでの会話を活性化させるため、コメント欄を再生中の動画の右横に。
  • Suggestionsを再生中動画下に（ニコニコ動画風）。

• dribbble

  • 写真やイラストに集中させるために背景色を黒に。とか、好奇心を煽るために黄色に。など
  • 画像選択時にページが遷移してしまうため、右に選択画像や作成者情報、左にサムネイルを少し小さくして1番の指標となると思われるlike数のみを表示。

• twitter

  • webのtwitterは情報収集目的のユーザーが多いと考え、保存した検索リスト、検索フォーム、トレンドを右カラムに、左カラムにストリーム。
  • 自分の興味ある情報をより絞って収集できるようにtweetdeckのような形で3カラム表示。

僕がやったやつの振り返り

twitterやった。

見にくいんだけど変更したのは以下。
twitterは廃人のように使っるユーザーより新規や時々使う程度なんか向けに方向を変えてきてるのはなんとなく感じるんだけど、今回は「より精度の高いストリーム作るために指標を増やす、動作を少なくさせて楽に見る」みたいな事考えて作った。
色はリンクでもない所にリンク色はいってるし、”Tweets””Favorites”のところは個人用のデザインかもだけど時間の都合上ということで勘弁したりました。

• 開きっぱなしにしてたら出てくる"n new tweet"ってやつ消して代わりに新着の1番古いtweetの下部borderの色を変更。 新しい新着がn件ってのは、それほど気にするものでもないし1日100, 200followとか増やさなければ大体予想つく。あと1番気にしてたのは、コマンドを覚えてなければ毎回押すでしんどいと思ってた。それならborder付けるだけで”前はここまで読んだ”ってのがわかればいいのでは？と、思っての変更。
• Tweetsが流れてる所、Favoritesの切り替えができるように。 ”Who to follow”のように曖昧なfollow候補の指標がでるくらいなら自分がfollowしてる人の中から普段その人が見ている、アクションを起こしてる人を見てfollowしたいと思ったから。
• リストの表示。 自分のリストの表示。理由はfollowが多くなってきたらリストを使い始めると思うのでその時、設定アイコンから選ぶのもしんどいと思ったのでここに置いた。

初めにwebのtwitter見返したりとか、前ちょっと勉強会やって話した内容見返したりとか、あと普段考えてたこと思い返したりとかして40分くらいドキュメントに落としてた。

そんな時間はなかった

なかった。
余白とか整列とかあんまり気にすることなく、アイコンも既存のもの使って、背景色・文字色はユーザーの変更が大きいのでトップだけ大雑把に作り変えるなら1時間くらいでなんとかできるでしょう。とか、思ってたのが甘かった。
パーツ（要素）の配置変更一つするにしてもキャプチャ撮って切り貼りしてするのに時間かかる。
普段なんとなくで見てたから気づかなかったけどhttps://jp.twitter.com, https://jp.twitter.com/thleapでは左カラムの魅せ方が少し違ってたりする（コンテンツの話じゃないよ）。
あと、なんで気づかなかったか分かんないけどTweetsとFavoritesのとこ、上記の理由でhttps://jp.twitter.com/thleap のものとは違うように見せようと思ってコンテンツ上部タブで切り分けようとしたらtwitterそういうの使ってないとかね。

いろいろ作り始めてから再考することが多くて、これはずっと会社のタスク割り振りで悩まされながら考えてることなのに予想できなくて情けなかったです。

終えて

普段見てるサービスでもすぐReDesignというのはできないもんだな。と、知りました。

あと最後に板橋さんに話を聞いてもらいに行った。

聞いた内容は「ReDesignってなんですか」。
理由は、今回機能を削ったりしてた人が多かったり、サービス対象ユーザーを変えたりする人が多かったのでそれではそのサービスを使う必要なくて、それをすると例えばyoutubeならただの音楽サービスになる。youtubeではない。と、思ったから。

答えは「もちろん既存サービスのデザイン、要素を考えてからReDesignに着手しますが最終的にどんなものにするかは自由です。」だったので、素直にそういうものなんだなーと思いました。

こういう実績的なイベントは自分の実力を図るのが怖くて今まで行けなかったけど、今回行っていい刺激になったし、何より話を聞くだけのイベントよりも楽しく感じたので、次また同じようなイベントがあったら参戦してみよ。

鶏食べた

※あ、嫌いと思ってたフォントサイズのアホみたいなコントラスト好きかもしれない