InstagramのUIデザインを「3構造」で分析してみた

実際に画面に触れてポイント確認して進めよう

サービスのURLから登録して自分でもUIを触りましょう。
UIUXデザイナーとしてUIに詳しくなるために、さまざまなサービスに率先して触る習慣はとても大切です

Instagram
https://instagram.com/

動画の目次

00:00 イントロ
01:46 ゴールと目次03:18 見ていくUI
03:58 Instagramアプリの『ホームUI』の3構造
07:40 コンテンツについて
10:44 ナビゲーションについて12:52 アクションについて
15:25 Instagramアプリの『投稿フロー』の3構造
16:25 3構造は？
17:03 ナビゲーションについて
19:24 アクションについて
24:18 Instagramアプリの『デスクトップUI』の3構造
24:44 コンテンツについて
25:14 ナビゲーションについて
27:15 アクション
29:21 Notion Mailの3構造
31:28 コンテンツについて
32:43 続きはBONOで！

スライドのURL

手元で見たい、編集したい時は、コピーして自分のファイルにペーストしてください。

FigmaのURL
https://www.figma.com/deck/9sXEWzI21qES3CocWVfBBc/%E4%BA%8B%E4%BE%8B%E3%81%A7%E5%AD%A6%E3%81%B63%E6%A7%8B%E9%80%A0?node-id=4-252&t=L6iMDfudW3zZfLjr-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1

‍

‍

実際に画面に触れてポイント確認して進めよう

サービスのURLから登録して自分でもUIを触りましょう。
UIUXデザイナーとしてUIに詳しくなるために、さまざまなサービスに率先して触る習慣はとても大切です

Instagram
https://instagram.com/

動画の目次

スライドのURL

手元で見たい、編集したい時は、コピーして自分のファイルにペーストしてください。

FigmaのURL
※BONOメンバーになると表示されます

‍

‍

‍