id:akawakami さんに開発の裏側を語って頂きました。――まずは自己紹介をお願いします。
デザイナーの akawakami です。Pressoのデザインを担当しました。
――Pressoの紹介をお願いします。
Pressoは自分が興味のあるジャンルやタグをフォローすることで、ネットで話題になっているニュースやブログなどを手軽にチェックできるニュースアプリです。
https://itunes.apple.com/jp/app/presso-sosharunyusu-matomemoburogumo/id799334646?mt=8&uo=4&at=10l8JW&ct=hatenablog
はてなブックマークとの違い
――早速ですが、Pressoのデザイン、はてなブックマークとはどこか雰囲気が違いますね。
今回のプロジェクトは、はてなブックマークアプリのリニューアルではなく、はてなブックマークを使った新しいコンセプトのアプリを作る目的でスタートしました。なので、はてなブックマークの延長線上というより、新しいアプリとしてデザインしています。
――キーカラーのブルーを継承したのはどうしてですか？
別のアプリではあるけど、はてなブックマークをベースにしたアプリであることは表現したかったので、サービスの世界観は共有しようと思いました。
――たしかに、デザインは全く違いますが、横に並べても違和感はないですね。
はい。質感やトーンは違えど、はてなブックマークとの連続性みたいなものは意識しています。
メディアっぽくするか、ツールっぽくするか
――Pressoのアイコンはとてもシンプルですよね。
そうですね。モチーフであるマグカップを配置した、シンプルなデザインのアイコンです。
――ニュースアプリなのに、ニュースっぽくないアイコンですよね。どうしてですか？
Pressoはニュースを読むアプリなんだけど、ニュースリーダーであってニュースメディアそのものではないからです。
――なるほど。
このアプリの本質は、ニュースというコンテンツそのものではなくて、価値あるニュースを集めて、読みやすい形で提供するという仕組み、機能にあると思います。だから、メディアではなく、ツールとして表現する方向性を選びました。
――ニュースアプリと言っても、アプリによって方向性は一様ではないと。
はい。アプリがニュースメディアそのものであれば、新聞や雑誌のような具体的なメディアをデザインモチーフにし、読みものとして表現することで、アプリの体験を簡潔に伝えることが出来ます。でも、Pressoはニュースリーダーなので、メディアであることより、機能やコンセプトにフォーカスして、ツールとしての特徴を表現したアイコンにするほうが良いと考えました。
――確かに、Pressoはメディアとして自ら何かを発信するのではなくて、ユーザーがツールとして使うことで結果としてメディアとなる、みたいなアプリですね。
ジャンルごとにそれぞれの世界やカラーがあるし、ユーザーのコメントからもカラーが生まれる。だから、アプリそのもののデザインには、特定の色合いを持たせるより、極力、プレーンな印象にしたいという気持ちがありました。アイコンが白っぽい背景なのもそういう理由からです。
Pressoという名前は意外でした
――新アプリの名前が「Presso」だと聞いて、とても意外な感じがしました。
はてなブックマークっぽくないですよね。開発初期は、はてなブックマークリーダーアプリとか、WatchListとか呼ばれていました。
――そこからPressoですか。大きく変わりましたね。
ネーミングについては、だいぶ議論を重ねました。サービスっぽくするか、アプリケーションっぽくするか、また、はてなブックマークらしさを出すかどうかの判断も含め、何度もブレストして、様々なアイデアを出しました。そして最終的に、Press（新聞・雑誌）とEspresso（エスプレッソ・抽出する）を掛けあわせた「Presso」に決まったんです。
――価値のあるニュースを抽出するというアプリの性質にしっくり来てますね。
「Presso」というネーミング案が出た時は、これだ！って思いましたね。ネーミングにあたっては、アプリの特徴や機能を分かりやすく表現出来るという点をとても重視しました。また、スマートフォンはユーザーのライフスタイルに密着しているデバイスなので、日々の生活に自然と同居できるような風通しの良さも意識しました。
――ロゴマークもシャープで爽やかな印象ですね。
やはり、日々の隙間時間に気軽に使って頂きたいので、強い主張は控え、自然な形でニュース閲覧を楽しんで頂けるようなデザインにしたいと思いました。ロゴマークはもちろん、デザインは、細めのラインや明るめの色を意識的に使ったり、ロゴタイプも文字がよりシャープな印象になるよう、フォントのウェイトを微妙に調整しています。PressoのロゴタイプはKoushiki Sans Fontというフォントをベースに作成しました。
――確かに、頻繁に使っていると主張の強いデザインでは疲れそうですね。
他にも、UIのデザイン要素は、色のニュアンスを微妙に変えただけで、画面から受ける印象がだいぶ変わります。また、屋内だったり、屋外だったり、画面の明るさの設定によっても、雰囲気が違って見えたりします。モックを画像に書き出して、いろんなタイミングやシチュエーションでスマートフォンを使って確認を繰り返し、ああでもない、こうでもないと微調整を続けました。この辺の調整にはだいぶ時間をかけましたね。
UIデザインの話
――UIのデザインは、どのように進めていきましたか？
まずはチームメンバーでブレストして、簡単なペーパープロトタイピングを行いながら、アプリの全体像を考えていきました。
――プロトタイピングでは、何かツールを使いましたか？
POPを使いました。紙に書いたUIのラフスケッチを写真に撮り、POPを使って動きを付けながら、アプリのイメージを膨らませていきました。ラフスケッチとはいえ、実際にスマートフォンで触りながらシミュレーション出来ると、何となく使用感をイメージできるようになるし、何よりアプリ作ってる感があって自分たちのモチベーションが上がります。
――チーム外の人にも見せやすくなりますね。
そうですね。スマートフォンで簡単なデモが見せれるので、これから作ろうとしているアプリのイメージを伝えやすいですし、また、意見を聞きやすかったです。
全体像がある程度見えてきたら、それを元に具体的なデザインを起こしていきました。ツールを使ってモックを作り、画像に書き出して実機で見たり触ったりしながら調整をする。後はその繰り返しです。
――特にここにこだわったというポイントがあれば教えて下さい。
強いて挙げるなら、コメントUIですね。コメントとニュースコンテンツを同時に見るという体験を実現したかったのですが、コメントをコンテンツと同時に見せようとすると、どうしてもコンテンツが見づらくなってしまう。コメントを表示するボリュームや、その見せ方、UIの操作感など、試行錯誤を重ねながら作っていきました。その甲斐もあって、とてもユニークな機能になったと思います。
WEBサービスの会社のデザイナーって？
――ところで、 akawakami さんは、いつもアプリのデザインを担当されているんですか？
WEBサービスの開発をメインに、ウェブ、アプリのUIデザイン、ページやグッズ制作など、いろいろですね。「ヱヴァンゲリヲン新劇場版：Q」とコラボしてアプリを作るというような、ちょっと変わった案件もありました。B!KUMA Qというアプリです。
――いろんな案件があるのですね。
そうですね。
――それでは、今このインタビューを読んでいるデザイナーの方に一言お願いします。
WEBサービスの会社のデザインというと、サービスのメンテナンスを黙々とやるイメージがありますが、実際の業務は多岐に渡っています。いろんなことにチャレンジできるので、やりがいがあるし、とても楽しいですよ。はてなでは積極的にもの作りに取り組みたいデザイナーを募集していますので、興味がある方は是非エントリーしてみてください。
――本日はどうもありがとうございました。
以上、まるでインタビューを受けているかのように、akawakami 本人がお送りしました。
https://itunes.apple.com/jp/app/presso-sosharunyusu-matomemoburogumo/id799334646?mt=8&uo=4&at=10l8JW&ct=hatenablog