はてなデザイナーワークショップで学んだこと

昨日の午後、はてな東京オフィスで開催された「はてなデザイナーワークショップ2014」に参加してきました。Webサービスのデザインについて興味を持っているものの、大学では本格的なデザインの勉強をしたことは無いため*1、参加にあたって少々不安がありました。しかし一旦始まってしまうとこんなことも忘れるくらい忙しくて楽しい体験の連続でした。

とても充実した一日でした。 学んだこと・感想をレポートしてみます。

「Hatena」

受付にて頂いた「はてなブックマーク」「はてなブログ」「mackerel（サーバー管理ツール）」のステッカー

はじめに

まずはじめに「はてなについて」、「はてなのWebサービスについて」の講義を受けました。はてなでは「知る・つながる・表現する」というミッションを掲げ、デザイナーとエンジニアが協力してブラッシュアップをしていくことでスピーディーな開発が実現されているというお話を聞きました。

また、常にシンプルで率直なデザインを保ちつつ、新しいコミュニケーションをデザインするというとても難しいことに日々挑戦されていることを知り、感激しました。

さらに、ソーシャルニュースアプリ「Presso」： https://itunes.apple.com/jp/app/presso-anatani-hewasete-ji/id799334646?mt=8&uo=4&at=10l8JW&ct=hatenablog を例として、新しいWebサービスの発想法とデザイン過程についてより細かい部分を説明していただきました。愛用アプリなので、開発ストーリーを聞くことができて嬉しかったです。

いよいよワークショップ開始！

ワークショップのお題

新しいウェブサービスを考えてください。

が発表され、グループ（１グループ４人ほど）での作業が始まりました。

今回のワークショップではコードは書かず、サービスの企画やペーパープロトタイピング、ユーザーテストに重点がおかれました。つまり、コードを書く前段階の「アイデアを捻り出し画面遷移などのUIを考えること」というアプリ開発において実はかなり重要な部分を頭フル回転で練習しました。

実際に作業が始まると思った以上に時間の余裕がなく、メンバーとともに無我夢中でアイデアを何とかカタチにまとめていきました。あっという間に時間が過ぎました。はてなデザイナーさんのご指導のもと、以下のような感じで制作が進められました。*2

ペルソナを決める

「ペルソナ」とは、今回開発する新サービスの利用者像としてターゲットとなる架空の人物です。この架空人物に対して、より具体的にリアリティあふれる設定を用意しておくことがポイントだそうです。今回は事前にはてなさんが用意してくださったペルソナを利用しました。僕のグループのペルソナのキーワードは「就活生」でした。（後のほうで掲載する写真に細かい設定が書いてあります）

ブレインストーミング

ペルソナの細かい設定から得られる人物像を汲み取ったうえで、この人に必要そうなサービスをどんどん付箋に書いていきます。この段階では、小粒なアイデアを数多く挙げていくと良いそうです。ある程度出揃ったら、付箋を似たもの同士分類します。この行程でアプリの主軸が決まってしまうので非常に重要なステップだと思いました。

グループ内で話し合っているだけだと「ふつうな」アイデアに落ち着いてしまうことが多々ありました。こんなときにベストタイミングてはてなデザイナーの方が「とがった」アイデアにするためのしびれるアドバイスをくださったのでとても勉強になりました。

シナリオをつくる

ユーザーがアプリを使い始める動機から使い終わりまでの一連の流れを紙に書き、まとめます。このステップでは、アプリやUIの話は考えず、ユーザーの心境を中心にストーリーをまとめる必要があります。振り返ってみると、個人的にはこれが一番難しかった気がします。

ペーパープロトタイピング

ここでようやくアプリの画面と遷移関係をデザインします。

アプリ開発においては、この段階でUIの基本的な構成はほぼ完了させるようです。後になってデザインを大幅に書き換えるといった事態を発生させないためにも、ペーパープロトタイピングをしっかり行うことは重要だと思いました。今回は画面デザインを描いた短冊状の紙を並べ替えたりして画面の遷移を考えましたが、以下のような専用アプリを使うとより捗るようです。

POP - Prototyping on Paper

• Marvel Prototyping LTD
• 教育
• ç„¡æ–™
• 

今度使ってみたいと思います。

ユーザーテスト

一般的に用いられるユーザーテストの方法を教えていただき実際に行いました。「自分たちでは十分だと思っていても、初見のユーザーには分かりづらいと感じる部分が数多くある」ということを学びました。

プレゼン

僕たちのグループは

• 他のアプリ利用者（就活生、企業の方）に向けて自分の就活の近況を匿名で報告できる
• 気になる職種の企業の方からのコンタクトが得られる
• 就活状況の投稿頻度、企業の方との面会、まわりの利用者からの評価により、アプリ内での自分のランキングがアップする

就活専用アプリ「就活エクスプレス*3」を発表しました。プレゼンでは僕がメインで喋ることになり緊張していましたが、視聴者の皆さんが暖かい雰囲気をつくってくれたので楽しく発表できました。ありがとうございました。

上の写真は発表時に使った成果物：

• ペルソナの詳細
• どんなアプリなのか
• シナリオ（青い付箋と赤い付箋）
• ユーザーテストで挙がった改善点（下の方の青い付箋）
• スマートフォン画面のペーパープロトタイピング

です。

グループでのチームワーク、デザイナーの方々のサポートがあったからこそ発表まで辿りつけのだと思います。

投票結果は２位でした。景品逃してしまいました。（景品となった本はどれも興味あったのでタイトル控えておけば良かったな...）

さいごに

最後の懇親会では、

• はてなデザイナーの方にいろいろ質問させていただいたり
• 「はてなブログ」の開発についてお話を聞いたり
• 他チームの人と発表作品を振り返ったり
• いま大学でやっていることや将来像について語り合ったり
• デザインを専攻されている方はやっぱり凄いなと感じたり
• etc...

と充実しており、こちらもあっという間に時間が過ぎてしまいました。Webデザインに興味がある同年代の方々と交流できたことはとてもラッキーでした。

何度か迷ったりして大変なこともありましたが、アイデアを組み立ててカタチにしていく試行錯誤こそがデザインすることの楽しさだと思いました。

アイデアと手元の道具でWebサービスは作れる！*4

を実感した一日でした。

id:tanemuさん、id:kyabanaさん、id:yulily100さん、id:murata_sさん、id:akawakamiさん、id:swimy1113さん、id:uedayさん、 貴重な体験をさせていただき本当にありがとうございました。

後学期の良いスタートを切れました。

*1:大学では情報・通信工学科という理系の学科に所属しています。

*2:もう少ししっかりとメモを取っておけばよかったです

*3:「エクスプレス」には「就活を通して自分を表現する（Expression）」と「企業の方と超特急（Express）で会う」の意を込めました。

*4:ワークショップ開始時に、はてなの方からいただいた言葉です。