「声」にフォーカスしたアプリデザイン

こんにちは！アメーバ統括本部でデザイナーをしている石塚千裕（@pekep）と申します。
8月にリニューアルした「ラジ生？」のデザインを担当しました。

今回は新しい「ラジ生？」が生まれるまでの経緯やデザインのこだわりなどまとめさせていただきました。

ラジ生について

「ラジ生？」は誰でも気軽に本格的なラジオ放送ができるネットラジオ配信アプリです。

実は2015年5月にリリースしていましたが、再度デザインの見直しをすることになり、私は6月にサービスにジョインし、7月末にリニューアルデザイン版をオープンしました。

「デザインは振り切りたい」

プロデューサーからのデザイン要望として強く言われていたのが「ラジオ感をしっかり出す」ということでした。クリエイティブディレクターからも振り切ったデザインを作って、とにかくパターン出しをしようと伺っていたので、元のラジ生の世界観は壊す勢いでリニューアル案を考えました。

パターン出しの際、デザインも最終ゴールが決まっていなく、とにかく幅広い案を見たいとのことで、フラットからリッチなもの、ポップ、シンプル、おもちゃ、レトロ、近未来、ゆるい、などなど…とにかく数多くの案を出し続けました。

1番最初にユーザが訪れるホーム画面、そしてラジオ配信を行う放送画面、この2軸をしっかりと決め、他画面への展開を行っていきました。

デザイン案の作り方

まずは手書きでラフスケッチを描き大枠のイメージを固め、細かいディティールまで調整ができるPhotoshopでイメージを起こしていきました。ここでPhotoshopを使った理由としては、「とにかく沢山の案を出す」という、早さ勝負なところがあったので使い慣れているツールを選びました。

メインデザインFIX後は、デザインツールをSketchに切り替えて作業を行いました。
複数の解像度の書き出しが簡単にできることと、ページごとに管理でき、Illustratorのようなカンバス機能があるため、各画面ごとにデザインを俯瞰して見れるからです。

Sketchの使い方はアプリエンジニアさんにも展開し、マージンやフォント、カラー指定、画像の書き出しなどデザイナー側からの指定を待つ時間を軽減させ、スピード感高く作業を進めることができたと思います。

モックアップ確認はProttを使用しました。また別途動きが必要な部分はFlashでアニメーションイメージを作成しています。



より具体的に動きのイメージを伝えることで、実装に入る前に出来ることと出来ないことがはっきりと分かってきます。また問題点なども上がりやすく、デザインの大幅な戻りも防ぐことができました。

「リアル」にこだわったサービスの世界観

ホーム画面
アプリの第一印象を決める大事な画面です。ここでは視聴数の多い人気の番組が20件表示されます。
幅広く自分好みの番組を見つけられるよう、あえて細かい番組情報などは載せず、まずは放送を聴いてもらうということを重点に置いています。
画面下にラジオチューナーのようなデザインを置き、アナログで探しているような楽しさを残していて、この針の動きと同じようにリストも横にスライドするインタラクションにしています。


放送画面
一番悩んだ画面です。コンセプトにあるように誰でもラジオパーソナリティになれる、そして「声」のみ配信できる、ということを伝えるためマイクをメインに置く形で振りきりました。
放送者がラジオ放送に集中できるようにコメントはマーキーで流れるようにして一覧は別画面で展開するようにしています。
背景もラジオブースにいるようなリッチなデザインに仕上げ、実際のラジオ収録を意識した、とにかく「リアル」にこだわった画面となります。
また、声のログをとっている感を出すため、声音に反応するビジュアライザーも入れ、自分の声がしっかりと反映されていることが分かるようにしています。

最後に

サービスデザインにおいて、ロジカルに考えることももちろんですが、ルールやロジックにこだわりすぎて案が固まってしまうことは避けたいので、まずは自由に発想、創造することを心がけています。
ユーザと一緒にサービスを楽しみ、同じ目線に立って、設計することを念頭においてデザインしています。

まだまだラジ生はまだまだ改善途中で、これからもよりよいサービスに成長すべく開発陣一同、頑張っています。
沢山の人に、ラジ生？を知っていただけると嬉しいです。

そして、プロデューサーと毎週公式ラジオを放送しておりますので、良かったらぜひ聴いてみてくださいね。

【公式】ラジ生？の中の人のラジオ「ラジトーク」
※スマートフォンからご覧ください。


最後までご覧いただき、本当にありがとうございました！