インタビュー:利便性を徹底的に追求した「AWA」のUI/UXデザイン - デザインってオモシロイ -MdN Design Interactive-
デザインってオモシロイ MdN Design Interactive

インタビュー:利便性を徹底的に追求した「AWA」のUI/UXデザイン

  • 新規会員登録
  • ログイン管理
  • Twitter
  • facebook
  • はてなブックマーク
  • RSS

2026.4.22 WED

  • TOP
  • 特集
  • 連載
    • ALL
    • デザイン・アート
    • テクノロジー
    • コラム
    • インタビュー
    • レポート
    • インサイト
  • Tech
    • ALL
    • プログラミング
    • UI/UX
    • フレームワーク
    • Webアプリ
    • Webサービス
    • その他
  • ニュース
    • ALL
    • ニュース
    • 新製品
    • テクノロジー
    • アートイベント
    • モバイル
    • ネットで話題
新規会員登録
ログイン管理
  • プレスリリース
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 広告掲載について
  • インプレスグループ
閉じる
  • TOP
  • ニュース -
  • インタビュー:利便性を徹底的に追求した「AWA」のUI/UXデザイン
【サイトリニューアル!】新サイトはこちら/MdNについて
  • ALL
  • ニュース
  • 新製品
  • テクノロジー
  • アートイベント
  • モバイル
  • ネットで話題

コラム

2015.6.10 WED

インタビュー:利便性を徹底的に追求した「AWA」のUI/UXデザイン

インタビュー:利便性を徹底的に追求した「AWA」のUI/UXデザイン

2015年06月10日
TEXT:編集部


サブスクリプション型音楽配信サービス「AWA」(http://awa.fm/)の提供が開始となった。スタート時点で23社のレーベルが参加しており、邦楽・洋楽あわせて国内最大規模となる数百万曲の楽曲を月額定額制で楽しめるのが特徴だ。スタート当初はiOS/Androidアプリで提供されるが、注目したいのがそのUI/UXデザイン。「スマートフォンで音楽を聞くのに一番適したUI/UXを研究した」と語るAWA株式会社のデザイナー・室橋秀俊氏に、AWAのデザイン面および将来性などについてインタビューを行った。



●室橋 秀俊氏
AWA株式会社 デザイナー
Webのデザイン制作会社や広告代理店を経て、2012年サイバーエージェントに中途入社。「Ameba」のコミュニティをいくつか担当したのち、エイベックス・グループ・ホールディングス株式会社の100%子会社であるエイベックス・デジタル株式会社と株式会社サイバーエージェントとの共同出資による新会社AWA株式会社(2014年12月1日設立)にてAWAの立ち上げに携わり、現在に至る。



AWAについての概要をお聞かせください

AWAは、洋楽・邦楽ともに多彩なジャンルで数百万曲の楽曲を楽しむことができる月額定額制の音楽ストリーミングサービスです。ユーザーが自由に作成できる「プレイリスト」や検索、リコメンドを通じて、ユーザーに「まだ知らぬ、でも好きな音楽」というパーソナライズされた音楽との出会いを提供しています。人気DJや音楽プロデューサーから一般ユーザーまで、さまざまな年代の方々が、「プレイリスト」をつくったり、聴いたりしてお楽しみいただけるサービスです。




LINE MUSICやレコチョクBestなど競合サービスも多いですが、その中でAWAの特徴はなんでしょう?

「プレイリスト×リコメンド機能」と徹底的にこだわった「インターフェイス」です。定額制で音楽が自由に聴けるというのは当然ですが、ユーザーから人気DJ、音楽プロデューサーまで、一人ひとりが想いをこめてつくった「プレイリスト」を軸に、新しい音楽に出会えたり、リコメンドされることで、好きだった音楽に再会できたりするのは、AWAの特徴だと思います。

「インターフェイス」に関しては、ユーザーが思わず「人にすすめたくなるデザイン」を意識してつくりました。ヘッダーがあって、カードビューがあってという、いままでのアプリにあった基本路線はとらず、極力要素を削ぎ落とし、見た目にインパクトがあるものにしました。ただ、動きまでいままでにないものにすると使いにくくなるので、見た目は新しいけれど、動き方は直感的に気持ちよく操作できるよう徹底的にこだわっています。




世界観もこだわったということですが、具体的には?

フラットデザインが主流のなか、「このアプリの世界観はこれ」という印象を与える要素として、色の影響が大きいと思います。たとえばFacebookだったら「ブルー」のような印象がありますよね。AWAに関してもベースカラー、アクセントカラーはあるんですが、あくまで主役は音楽であり、CDジャケットなので、「AWAはこの色だよね」という印象を与えたくありませんでした。そこでジャケット写真を効果的に使えないかと考え、背景のベースとして使うことで色の印象を意図的に押さえました。どんな色、デザインのCDジャケットでも魅力的に目立つよう、特定の色を使わずブラー処理やパララックス効果を使うなどの工夫もしています。




UI/UXでこだわった点はどこでしょう?

2点あって、ひとつめは「しきりを入れない」ことです。ここはボタン、ここはおすすめ枠、ここは新着というような「しきり」を入れると、ユーザーはそこに誘導されている感覚が生まれてしまうと思うんです。そうではなくて、感覚的に気づいたり、さりげなく目に入る方法で、パーソナライズされた音楽に自然にたどりつけるUI/UXを意識しました。

もうひとつは、「どうCDジャケットを主役にするか」です。プレイリストのサムネイルにはCDジャケットの写真が3枚並ぶのですが、そのジャケットを邪魔しないUIや色にこだわりました。邪魔しない方法として白や黒などの色を使うことをまず思いつきますが、白いジャケットや黒いジャケットの場合に映えないし、色とケンカする場合も考えられます。アクセントカラーのオレンジや、白・黒をベースにした案も検討したのですが、最終的にグレーをベースカラーにしつつも、主要となるプレイリスト画面の背景は、ジャケット写真をブラー処理で配置し、アクセントカラーは使いませんでした。こうすることで、すべてのプレイリストの印象を変えられ、まるでユーザーオリジナルのプレイリストの印象を与えることができ、なおかつCDジャケットも映えるデザインに仕上げることができたのです。




開発時に大変だったことや、ユニークな裏話などがありましたらお聞かせください

全部大変でした(笑)。デザインに関しては、メイン画面やジャンル・ムードの画面に使用している写真にはかなりこだわり、何時間費やしたかわかりません(笑)。特に難しかったのはTRENDINGページの背景です。音楽のTRENDを表現する写真、音楽のTRENDを知っている人の目線とはどんなものだろうと、悩みまくりましたね。最終的に、エイベックス・グループ・ホールディングスの松浦社長が社長室で撮影した写真を利用させていただきました。松浦社長はふだんからとてもステキな写真を撮られていて、加工もされたりしているので、この写真はあまり加工をしていません。AWAの空気感にもあっていて、個人的にとても気に入っています。

また、アプリ内での動きや遷移に矛盾のないデザインを目指していたので、作業に着手する前に、ユーザーにとって自然で使いやすいように主要ページと各ページの構造、遷移の仕方を、立体的に決めていく作業を行いました。すべて矛盾がないようにするのはたいへんでしたが、モックをつくるときや本番の実装時に概念として役立ったので、やってよかったなと思っています。

ユーザーがプレイリストをつくる部分の流れに関しては、遷移や仕様をつくっては直すということを何度繰り返したかわかりません(笑)。まだまだ完璧ではないので、今後も肝となる機能として、ブラッシュアップしていかないといけないなと感じています。




最後に、AWAを今後どのように展開されていく予定なのかお聞かせください

楽曲は随時追加予定で、2015年末までに約500万曲、2016年末までに1000万曲の提供を見込んでいます。機能に関しては、iOS/Android版アプリとして提供をはじめていますが、今後はPC版、タブレット版、ウェアラブル端末、車載端末など対応デバイスを拡充していく予定で、新しくデザインしなければならないことはたくさんあります。

今後機能が追加されるなかで、そのままデザインをしてしまうと要素が増え、ごちゃごちゃしてしまいます。デザイナーの役割は単に「UIをつくること」ではなく、デザインすることを通して「サービスの目的を達成したり、課題を解決させるということ」が重要なので、UIだけでなくインタラクションやプログラムロジックも表現する手法のひとつと捉え、わかりやすくスマートな“デザイン=設計”をつくっていきたいと思っています。




【AWAについて】

「AWA」は、洋楽・邦楽共に多彩なジャンルで国内最大規模の数百万曲の楽曲をいつでも楽しむことができる月額定額制の音楽ストリーミングサービス。サービス利用開始から3カ月間のお試し期間が用意されており、無料で利用可能。お試し期間終了後の利用プランとして、ユーザーのニーズに合わせた「Lite Plan(月額360円(税込))」 「Premium Plan(月額1080円(税込))」が用意されている。「プレイリスト×リコメンド機能」と「こだわりのUI/デザイン」」が大きな特徴で、音楽に精通した人からあまり詳しくない人まで、幅広い層に新しい音楽体験を提供する。
http://awa.fm/

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちら/MdNについて

前の記事を読む

オウンドメディアにユーザーを呼び込むFacebook広告活用法

オウンドメディアにユーザーを呼び込むFacebook広告活用法

2015.6.8 MON

次の記事を読む

温故知新を感じたWWDC2015

温故知新を感じたWWDC2015

2015.6.12 FRI

アクセスランキング

8.30-9.5

  • 携帯大手3社、メッセージアプリ「+メッセージ」を各社全ブランドとMVNOに拡大
  • テレビの音声をワイヤレス化して飛ばせる「トランスミッター」発売、サンワサプライから
  • iPhone 12/iPhone 12 Proに音の不具合、対象モデルは無償修理へ
  • ビクトリノックス、30色バリエーションのマルチツール「クラシック カラーズ」を発売
  • 今月発表のiPhone13、低軌道衛星通信を使い“圏外”でもテキスト送信などが可能か
MdN BOOKS|デザインの本

Pick upコンテンツ

現在

  • 【文房具連載】第19回 五十嵐製紙「Food Paper」/物語のある、ニューフェイスな文房具・雑貨
  • 見た目のかわいさだけじゃない、犬の形をした実用性の高いウェブカメラ
  • この秋に発表予定のiPhone 13(仮称)はどのような変貌を遂げるのか?
  • 植物性由来100%、合成香料不使用など、エコな洗濯洗剤5選/ライフスタイル連載・こんげつのきぶん
  • 【DESIGN DIGEST】書籍カバー『顔のない花嫁/K.R.アレグザンダー』、商品パッケージ『秋の限定商品/アフタヌーンティー・ティールーム』

MdN公式Instagram

Instagramでは、デザイン関連本や本に関連した参加型コンテストについて発信しています。

page top
MdN
impress
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 会社概要
  • インプレスグループ
  • 広告掲載について
  • MdN デザインの本
  • MdN新書 新ジャーナリズム宣言。
  • “静寂”文具サイト
  • MdN DESIGNFONT STORE

Copyright © MdN Corporation,
an Impress Group company. All rights reserved.

page top
MdN
impress
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 会社概要
  • 広告掲載について
  • インプレスグループ
  • MdN デザインの本
  • MdN新書 新ジャーナリズム宣言。
  • “静寂”文具サイト
  • MdN DESIGNFONT STORE

Copyright © MdN Corporation,
an Impress Group company. All rights reserved.