最近UX/UIデザインが気になっている素人がXdを使って初めてトレースしてみた〜Pintarest編〜

こんにちは。初めまして。

普段は普通のOLとして働いています。会社もデザインとは程遠い（遠すぎる）業界で、デザイナーではない全くの素人です。

いろいろあってUX/UIデザインに興味を持ち始めてから結構な時間が経ってしまったのですが、遂に先日「UIトレース」というものを行いました。

初めてのトレースに選んだのは、皆大好きな「Pintarest」です。

今回は初めてAdobeXdを使用してみました。UIデザインの細かい分析というよりは、ただデザインツールに慣れるためのトレース作業となってしまいました。そして、ただの感想文に・・・（もっと勉強して分析できるようになりたい・・・！！）

いろいろ多めに見てください。

トップ画面

ピンタレストはとにかく画像を見せたいアプリなので、１つ１つの画像はトリミングされずに表示されています。

１つ１つサイズが違うのに統一されたように見えるのは、全てが角丸に統一されているからかな？

タブバーは画面いっぱいのバーではないので、常に次の画像が見えています。少し見えている画像というのが、どんどん下へスクロールしたくなと感じました。

検索画面

検索画面にもたくさんの「おすすめコンテンツ」が表示されています。「おすすめコンテンツ」の一覧も画像メインで置かれています。

また、文字の可視性を高めるために、画像は下部が少し暗くなっているようなグラデーションが被せられていて、コンテンツ名の白文字が読みやすくなっています。

サーチバーのプレースホルダーテキストは「検索」です。（私は最近みた映画「ミッドサマー」を検索していますね・・・）

サーチバー下の「人気」「あなたのコンテンツ」「ユーザー」の切り替えができるバーは滑らかに動きます。このタブを触らなくても、画面を左右にスライドさせるだけで、表示される画面が変わります。

表示されているコンテンツの文字が黒文字、その他はグレーで、画像の邪魔をせずにページの場所を教えてくれています。

自分で作成したカテゴリ内

左上部の「＜（戻る）」は、シンプル。この部分には背景画像を配置することもないですし、白背景だからできるんだろうなと思いました。

SNSやメールで共有するボタンは、オプションメニュー（右上「・・・」のところ）ではなく、上部中央に「➕」で表現されています。珍しい〜。

この共有ボタンの設置はあまり見ない形なので、少し分かりづらいかなと思いましたが、右上の「・・・」から、他のメニューと混合しているよりもダイレクトに共有してもらいやすくなるのかなと思いました。

フォローしているトピック一覧

「フォローボタン」は分かりやすく、ピンタレストのカラーである赤が利用されています。

ここの画面では、画像は全て同じサイズ（長方形）に揃えられいて、「フォローボタン」の位置も統制せれています。

画像サイズがバラバラなページ、このように揃って整理されているページ。ここのメリハリ好き！です。

各ユーザで４枚ずつ画像が表示されていて、フォローしたいと感じるアカウントが探しやすいです。

更新情報

ユーザにおすすめのピンを日にちごとに教えてくれるページです。

ここも日付ごとに画像が一まとまりにされていて、過去におすすめされたピンも遡りやすいUIになっているなと思いました。

あとは、「あなたにおすすめの〜」の前に「赤点」が付くだけで、目のいき具合（？なんていうの）が違うなと。引き締まって見えるし、目に留まりやすい。

（言語化難しい）

ユーザーの検索画面

画像よりもユーザーメインで表示されていて、たくさんスクロールしなくてもアカウントがたくさん閲覧できます。

さすが、Pinterest！ユーザーのアイコン以外にも投稿されている画像が表示されています。インスタグラムだと、ユーザーのアイコンのみなので、ユーザーがどのような投稿をしているのかがPinterestでは一目でわかります。

インスタグラム→ユーザーでフォローを決める
ピンタレスト→画像でフォローを決める

ような感じかな、と思いました。

カテゴリ分けされたコンテンツ一覧

カテゴリも他と同様に一塊(グループ化)されていて、カテゴリ別で角丸の一つの画像になっています。

ここでも、カテゴリの名前が重要というよりは画像メインですね。

並び替えの画面（モダリティ？というのか）

シートタイプのモダリティというのですかね。

コンテンツの並び替えや見せ方を変更することができます。先ほどのコンテンツのカテゴリ一覧はデフォルトの見せ方で、「コンパクト」を選択すると一画面に表示されるカテゴリを増やすことができるんですね（トレースするまで知らなかったし、分析でもないし、ここに関してはただのアプリ紹介）

「並び替え」や「ビューオプション」の文字は、選択肢よりも薄く小さな字でした。ここのテキストはあまりボタン感がないのですが、右端にあるチェックによってタップできることが認知できます。

ただ、テキストとチェックのマージンが広いために、中央あたりをタップしてしまうと自分がどのテキストをタップしたのかあまり分からないな〜と思っちゃたのですが、そもそもフィルタかける人あまりいないのかなとも思いました。

まとめ

いかにユーザーに多くのイメージを見せるか工夫されたレイアウトだなと感じました。

また、全体的に角丸で統一されていて、まとまっていて見ていて気持ちいいです。（角丸のデザインってレイアウト組むの難しくないですか・・・・？）

ほぼ個人的な感想となってしまいましたが、これから本を読んだり自分で手を動かしたりして知識を増やして、しっかり分析できるように頑張ります＾＾

以上