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

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

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

f:id:daiiz:20141004234610j:plain

「Hatena」

f:id:daiiz:20141005102313j:plain

受付にて頂いた「はてなブックマーク」「はてなブログ」「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の話は考えず、ユーザーの心境を中心にストーリーをまとめる必要があります。振り返ってみると、個人的にはこれが一番難しかった気がします。

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

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

f:id:daiiz:20141004235331j:plain

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