【UI分析】InstagramアプリのUIの考察

こんにちは！アシスタントデザイナーのくぼです！

世界で使われるSNSアプリの一つであるInstagramを題材としました！

今回は「UIコンポーネント」の分析をしています！

「デジタルウェルビーイングとInstagramの機能分析」の記事も公開しておりますので、興味のある方はぜひご一読ください。

UIコンポーネント

それぞれのコンポーネントごとに分析していきます。

タイポグラフィ

フォントはシステムフォントが使われています。

iOSでデフォルトで利用されるシステムフォントはSan Franciscoです。しかし、San Franciscoには日本語は含まれていませんのでひらがなや漢字の部分はHiragino Sansで表示します。

また、システムフォントにはHiragino Sansをやや小さく表示する調整が入っています。これはSan FranciscoのアルファベットとHiragino Sansひらがなや漢字が並んだときに同じくらいの大きさに見えるようにするための調整ですね。

テキストサイズについては Human Interface Guidelines通りの標準サイズを使用しています。

カラー

プライマリーカラーは青

プライマリーカラーは青で、3種類の青を使い分けていました。機能の違いなどから、同じ青でも若干の色味の調整を加えていることがわかります。

テキストカラー

テキストリンクは、本文の中に混ざっていたとしてもそれだけが目立ちすぎないよう暗めの色に設定されています。

アイコンカラー

重要なタブバーや活性アイコンなどははっきりとした黒で、その他はグレースケールで構成されています。

色味を最大限に抑え、コンテンツに集中できるカラー定義になっています。

ボタン

Instagramは塗りのボタンが使われている場面は最小限です。

フォローやウェブサイトへの移行、プロフィールでの設定など、重要なアクションに限り、プライマリーカラーの塗りのボタンが使われています。

アイコン

ボタンでの操作が少ない分、Instagramはアイコンで操作する作りになっています。

アイコンによってスペースを省略しており、一つの画面で多くのアクションを実行できる画面を実現しています。

また、ガイドライン上でのアイコン押下のセーフゾーンは44×44pxですが、Instagramは40×40pxと少し小さいです。これはInstagramの主なユーザーの年齢層が関係していると推測できます。Instagramは若年層のユーザーの利用率が非常に高い傾向にあります。そのため、セーフゾーンが少し小さくなっていても押しにくいなどの問題が起こる可能性は低いです。むしろその分コンテンツに幅を使用することができ、より没入感のある体験を提供できるでしょう。

また、instagramのアクションにはアイコンが割り当てられています。設定画面でメニューを開くとアイコンとラベルがセットになっています。

行えるアクションの数はとても多いですが、アイコンとセットになっていることで直感で理解しやすいですね。

余白

Instagramのメインコンテンツの写真や動画は、左右の余白は取っていません。これにより没入感のある画面になっています。

また、その他のコンテンツの画面左右の余白は16pxです。全体的にメインコンテンツを大きく見せる設計で余白は狭目な印象を受けますが、基本的なアクションはアイコンで行うため、余白が狭くても明瞭で使いやすいです。

写真の画像サイズ

投稿する際に推奨されている画像サイズは以下です。

• • 正方形の画像：最大1,080px x 1,080px→アスペクト比1:1
  • 横長の画像: 最大1,080px x 566px→アスペクト比1.91:1
  • 縦長の画像: 最大1,080px x 1,350px→アスペクト比4:5

過去、正方形が定型サイズでしたが現在は縦長の写真も投稿できるようになりました。

また、24時間で自動的に削除される「ストーリーズ」の画像サイズはスマホの縦長サイズが基準です。ストーリーズの特性は、24時間で消えるため、写真を載せやすい手軽さがあります。正方形など画像サイズを編集してからというよりも、サクッと共有する使い方をします。そのため、標準サイズでの共有が基準になっていると考えられます。

タブバーの構成

現在のタブバーの構成を改めて見てみると、Instagramが重要視している体験が変化していることが伺えます。

まず、一つ前のアップデートでのタブバーの変化から分析します。

アップデート後のタブバーの構成は以下の通りです。

・ホーム ・発見 ・リール ・ショップ ・アカウント

これまでタブバー中央に位置していた「投稿」に変わり、「リール動画」を視聴する導線へと変化しました。また、「お気に入り」が「ショップ」に変化しています。

まず、リール動画の視聴する動線へと変化したのは、投稿共有するよりも、コンテンツを見て消費するニーズが増えてきたことが理由の一つと考えられます。YouTubeやTikTokなどショート動画の需要と供給が高まっている時代背景に合わせた変化でしょう。

お気に入りの変更はInstagramの市場での立ち位置の変化が関係していると考えられます。Instagramは自分で撮った写真を簡単におしゃれに加工でき、共有することができるアプリでした。現在では、Instagramを参考に買い物をする人が増えるなど、購入の意思決定の要因の一つになる場面が多くあります。今や様々な業界・企業が公式Instagramを開設し、商品紹介などに活用しています。そうした市場でのInstagramの利用価値が高まったことからタブバーに「ショップ」が追加されたのではないかと推測できます。

ちなみに、お気に入りはプロフィールの「メニュー」→「アクティビティ」→「インタラクション」から確認することができます。

そして最新(23年2月)のアップデートではまたタブバーに変化がありました。

現在(23年2月)のタブバーの構成は以下の通りです。

・ホーム ・発見 ・投稿 ・リール ・アカウント

タブバー中央の「リール動画」が「投稿」に戻り、「ショップ」のあった場所に「リール動画」が移動しています。

公式サイトには「友達や興味のあるものを簡単に共有してつながることができるようにします。」と書かれています。

タブバー中央にリール動画を置いていたのは、動画やメッセージング機能を中心に、クリエイターをサポートするためだったそうです。

Instagramの責任者であるアダム・モセリさんが自身のインスタグラムで「Instagramは2023年も「趣味や好きなことで人々を結びつける」というビジョンを継続し3つのことに焦点を当てる」と表明しています。

• 　クリエイティブになるよう人々にインスピレーションを与える
• 　人々が好きなものを発見できるよう助ける
• 　人と人とのつながりをスパークさせる

タブバーの中央に投稿が戻ったことで、これまでよりも簡単に好きなものを共有しやすく、また友だちと繋がりやすくなりますね。

また、ショップはタブバーからはなくなりましたが、今後もショップを設定し運用することは引き続き可能です。

タブバーの変化を一覧にしてみました。

タブバーに何を置くのかでそのアプリが今何を重視しているのかがわかって面白いですね。

トップバーの構成

先ほどタブバーのアップデートで「投稿」が「リール動画」に変化したケースについて触れました。

その際には一緒にトップバーも変化しています。優先度が下がったとはいえ「投稿」はなくてはならないアクションなので、トップバーへ移動しています。

その後、ダイレクトメッセージ機能のアイコンの変更もありました。

これまでは、コンテンツをInstagram内のDMで共有できる紙飛行機のアイコンと同じアイコンが使われていました。

今のダイレクトメッセージを開くと、24時間で消える「ノート(ストーリーズの文字だけバージョンのような機能)」を残すことができたり、通話ができたりと様々な機能が使えます。その中で共有する機能と明確に違う遷移であることがアイコンを変えたことでわかりやすくなったと感じます。

そして、最新のアップデートでタブバーに「投稿」が戻ったことでトップバーの投稿は削除されました。

タブバーの変化を一覧にしてみました。

タブバーとトップバーは異なるコンポーネントパーツですが、同一アプリ内でそれぞれ関連しあって機能しています。

一つの機能のアップデートでも、画面全体の整合性を検討する必要がありますね。

最後に

Instagramについてあれこれ調べているうちに偶然知ったのですが、Netflixで公開されている「アートオブデザイン」でが最高に面白いです！

デザインに携わる方にぜひお勧めしたい！！

一話ずつ、様々なジャンルのデザイナーが出演し、それぞれのプロフェッショナルについて語られています。

その中にInstagramのデザインに携わるイアンスパルター氏のデジタルプロダクトデザイナー編があるのです！

「地球上の7人に1人が彼のデザインする製品(Instagram)を使っている」というセリフから始まります。最高にかっこいいですね！

また、「重要なのはアプリの中身じゃない。アプリを通して自分に一番興味のあることと繋がり、他のユーザーたちと強い関係を築くことが重要」と話していたのがとても印象に残っています。機能のひとつひとつがユーザーにとってどんな意味をもたらすのかを理解しようとする必要があるのです。

最初から最後まで画面に齧り付いて観ました。こういった作った人の思いや背景の中にデザイナーとしての大切なものがたくさん散りばめられていると感じました！

最後までお読みいただきありがとうございました！