【UIUX】20170502_instagramをトレースしてみた

はじめまして。

UIデザイナーを目指してデザイン勉強中の者です。

(今はコンサル的なことをやってます。)

このブログでUIUXの気づきなど挙げていきたいと思います。

 

「デザイン力を高めたい」と一口に言っても、色々な方法があるけれど、

最も費用対効果の高い方法の1つが、「良いデザインを真似ること」。

 

 ・・・とあちこちで耳にしたので早速instagramをトレースしてみた。

 

<使ったツール>

<やり方>

  1. instagramをスクショする。
  2. PCに1を取り込む。
  3. sketchにアートボードを2つ作成する。
  4. 3の片方に2を貼り付け、大きさを調整する。(375px*667px)
  5. 1pxが見えるくらいに拡大しながら、4で貼り付けた画像をトレースする。
  6. 都度都度5を、もう片方のアートボードにコピペする。

※写真は、ピクセルを図りながら切り抜きコピペ。

※アイコンはillustratorでトレース。

※フォントはネットで調べる。見つからない場合は同じor似たものを探す…。(これが面倒大変💦)

 

<完成品/気づいたこと>

今回は、instagramのトップ(渡辺直美さんのものを借用)とフィードをトレースしてみました。ほぼズレなくできたかと思います。

 

【トップ】

f:id:ayaconasuta:20170504182133p:plain

  • 使用フォント…(欧文)SF UI Text >>San FranciscoはiOS9以降iphone等で使用されているフォント。2年くらい前に出て、クセがなく見やすい。和文は自信はないが、Hiraginoに似ているので今回はHiragino Sansを使用。
  • リンクのカラーは暗めの青(#003569)を使用>>リンクだと判別できるが、暗めの色を使っているので目立ちすぎない
  • ぱっと見ブラックに見える色は#262626グレーを使用。>>ブラック100%よりも少しグレー(80%くらい)の方が周りと馴染みやすく、見やすいらしい…と昔聞いた。
  • 下タブは、均等の大きさに見えるが、若干大きさが違う。ハートが高さ約18px(横は21px)、虫眼鏡とホームアイコンがほぼ一緒で高さ21px、自分アイコン23px、画像追加ボタン25px。>>位置・大きさから追加ボタンに目線が行くようにデザインされている。
  • 3列の画像は、左124.5px*124.5px・スキマ1px・中央124.5px*124.5px・スキマ1px・そして右124px*125px。375pxだと、単純に125px*3にしたくなるが、あえて1pxのスキマを優先させているのだから、このスキマにこだわりが感じられる。>>確かにスキマをなくしてみると、窮屈で煩雑な印象を受ける。かといってスキマが2px以上だと、写真のインパクトが下がり余白が際立って見える。

f:id:ayaconasuta:20170504200410p:plain

 ※なんか窮屈感。くどめ。

f:id:ayaconasuta:20170504200531p:plain

※2pxも見やすそうではあるけど…見慣れてないからか1pxのがきれいね。

 

【フィード】

f:id:ayaconasuta:20170504174412p:plain

  • 写真下のハートアイコンと、下ナビのハートだと、若干前者の方が1pxほど大きい。太さも写真下の方が若干太め。>>パッと見た感じでも、写真下アイコンの方が目立つようにできている。コミュニケーションの促進?
  • 紙飛行機のアイコンも合同な三角形を二つ重ねたものかと思ったけど、ほんのちょっぴり下の三角形の方が大きい。>>理由はよくわからないけど、上の辺中心と、下の三角形の角がなんとなく揃っているような…。安定感が出るのかと思われる。

f:id:ayaconasuta:20170504200139p:plain

  • いいね、と名前のフォントはウェイトが高め。

【全体】

  • 意外だったのは、位置やサイズのpxが奇数・小数点 多用していたこと。もちろん、小数点.3333などはなかったが、webデザイン・アプリデザインは偶数で収める方が良いと聞いたこともあったので驚き。7割以上が奇数サイズだった。(解像度に関係している?また別途調べる予定…)
  • 今まで同グループ内であれば、サイズ・ウェイトは揃えることが基本だと考えていたが、情報の強弱をつけたい場合は、違和感がない程度にサイズを大きくしたり、ウェイトを高くしたりして注意を引くようにデザインされていることがわかった。 e.g. 下ナビのアイコン
  • UIデザインにおいて、今まで「揃えること」が美しさにつながると思っていたが、全てをキリよく揃えるのではなく、どこを揃えると美しくなるのかという視点を持ってデザインすることが重要だとわかった。 e.g. 写真のスキマ1px

 

第1回目のトレースは以上です〜。次はFacebookを予定。