[iOS 10] Apple Music デザインを確認

デザイナーの たなか ゆきこ です。

今回は iOS 10 で一新される Apple Music の UI について読み解きをしていきたいと思います。 私個人の見解ですので、本当は別の意図がある可能性もあります。

タブが変更

iOS 9

• My Music
• For You
• New
• Radio
• Connect

iOS 10

• ライブラリ
• For You
• 見つける
• Radio
• 検索

に変更。「My Music」が「Library」に変更になるようです。「My Music」は右端にあったのですが、9.3.4時点で左端に動いていました。「Library」に変わった時への布石だと思われますね。 Apple Musicサービスとダウンロード済みの自分のプレイリストを「Library」で統合するためのUI変更だと思われます。

タブのアイコンが線から塗りに変わった

線から塗りに変更になりました。ここの意味は、難しいですが、強いて言えば塗り面積が広くなった分、目が悪くても見えるようになった。かな。

見出しがボールドになった

デザイン上で確認したいのは、タイトルテキストのボールドと余白が広がったこと。 紙デザインで、モノクロでデザインをした後に色をつけるという基礎を思い出しました。 白黒でコントラストがわかるように配置できると、モノクロでも、色をつけても何が重要なのか、読む順番などがわかるというやつです。

全て細文字であった今までのデザインから、情報の構成に基づいてボールドにしている。また、大きく読みやすくなっています。 このあたりは、最近のUIの流行な気がしています。Airbnbとかもテキストが大きく目立つように、他のテキストとの差が明確になるように変更されてます。

テキストがブラックと簡易なスタイルで表現されるので、構成要素の分割を余白をたくさんとることで対応しています。余白については、デバイスが大きくなってきたという要因もあるかなと思いますね。 昔のウェブサイトでも最初は余白などの要素はなく、モニター画面が大きくなるのに比例して、余白が考慮されだした記憶があります。

画像が大きくなった

また、画像も大きく見やすくなっています。そのかわりにアプリの色面積が減っています。

写真を見せるデザインによくある写真を引き立たせるには、他を無彩色にするというアプローチかなと。

最後に

また、画像も大きく見やすくなっています。そのかわりにアプリの色面積が減っています。 写真を見せるデザインによくある写真を引き立たせるには、他を無彩色にするというアプローチかなと予想しました。デバイスの大きさやスペックが上がってくると、ようやくデザインに目が向く。

それは、DTP導入で印刷が活版印刷から変更した時・道具がなかった初期からPowerMacの出現や、Adobeやフォントがでそろった時と同じイメージでもあり。

紙からウェブサイトへ移行した時、紙面では自由であったはずのモノがデータサイズの関係で厳しかったのが、個人のパソコンの性能があがったことで、考えなくてすむようになり、さらには、アニメーションにまで発展したときのイメージでもあります。

アプリも、同じような気がすると眺めてます。

ということは、根本ってやっぱ変わらないのかもしれません。 勉強などで学ぶアカデミックな知識っていうのは、こういう時に底力として出てくるのだと思います。ちゃんと古典も勉強しておかないとダメだなと思いました。