notitie

日々感じたことをメモ書き

【Sketch】InstagramのUIデザインをトレースして気がついたこと

f:id:rindarinda5:20160708202102j:plain

前の記事でこれからUIデザインを極めると書きました。なのでこれが最初のトレース記事となります。第一回目はInstagramのUIをトレースしてみました。今回は2枚の画像をトレースしたので、それぞれ順に気がついたことをまとめていきます。

トレース方法を探していたらこちらの記事がタイムリーで出てきたので、参考にさせて頂きました。とても分かりやすい内容で良記事です。

【Sketch】TwitterのUIをトレースしながら研究しよう!(初心者向け) - NOGA BLOG

 

1. プロフィールページをトレースして気がついたこと

自己紹介部分

f:id:rindarinda5:20160707205844p:plain

上に17px、下に16pxの余白がありました。しっかりと1pxもずらさないように合わせたはずなのですが、なぜか1px分の違いがあります。ぼくの間違いかもしれませんが、ほぼ同じ余白のスペースを取ってるということは分かりました。

 

メニュー部分

上メニューのアイコン上下には余白が共に13px取られています。

f:id:rindarinda5:20160707213504p:plain

 

下メニューのアイコン上下には余白が共に11px取られています。そしてアイコンの大きさ、アイコン間の余白を見てみると以下の画像のようになっていました。 

f:id:rindarinda5:20160707214202p:plain

f:id:rindarinda5:20160708135428p:plain

 

上下にあるメニューは両方とも縦45px横375pxと同じ要素からできていることが分かりました。 

f:id:rindarinda5:20160707213005p:plain

  

画像部分

f:id:rindarinda5:20160707211212p:plain

それぞれの画像の間隔は1pxでした。Instagramの画像がお洒落に見えるのはもちろん正方形に並べられているという理由もあるかとは思いますが、このわずかな1pxの間隔こそが、画像をよりお洒落に見せているポイントなのかもしれません。

 

2. 写真単体ページをトレースして気がついたこと

f:id:rindarinda5:20160708142830p:plain

右側の画像が今回ぼくがトレースしたものです。

 

 フォントの太字とサイズについて

f:id:rindarinda5:20160708151913p:plain

それぞれ抜粋してみたのですが、トレースをして気がついたことはユーザー名、いいねの数、コメント数には太字が使われていたということです。なぜこれらが太字で書かれているのかを考えてみましたが、ユーザー数、いいねの数、コメント数はどれもユーザーにとって気になる部分だからだろうという結論に至りました。曖昧な言い方となりましたが、だれが写真を投稿したのか、誰がいいねを押したのか、そしていいねの数とコメント数はどのくらい付いているのかというユーザーが気になる部分を目立たせた方が視認性も高まるので太字を採用しているのだと思いました。それに対して写真の位置情報やコメントの字が通常の太さになっているのは、あくまでも副次的な要素に過ぎないからだと考えました。

 

他にも英字の大きさが14ptに対して、和字は13ptになっていたというのも気がついた点です。 こちらの方も同じことを書いていました。

プロフィール内の文章は、和字が1pt小さくなっていました。和字は英字より大きく見えるため、見た目上のバランスが整うようにしているのだと思います。Instagramも同様、文字サイズを変えていました。

【Sketch】TwitterのUIをトレースしながら研究しよう!(初心者向け) - NOGA BLOG 

 

今回のトレースで得た知識

①Illustratorでもマスクはよく使いますが、Sketchを触るのは初めてだったので以下の記事を参考にしました。

Sketch初心者が知っておきたい。画像の切り抜きに使えるマスクの解説 | Creive【クリーブ】

②個別にradiusを指定したいなと思ったので、探してみると分かりやすい記事がありました。

Sketch.app で角丸の半径を個別に指定する方法 | Developers.IO

③初めてプラグインを使いました。Instagramの画像を挿入する時に、このCraftを利用すると自動で画像が挿入されるのですごく便利でした。

Sketch3とPhotoshopのプラグイン Craft を使って制作を楽にしよう | Tips Note by TAM

 

まとめ

トレースをすることで、普段何気なく触っていれば気がつかないであろうアプリの細かいデザインに気がつくことができました。ただ自分にとって良いと感じるデザインがあった時に、その感情をうまく言語化にするのはとても難しいと思いました。直感でこのデザイン良い!と感じたとしても、そこには何らかの理由が必ずあるだろうし、その理由を掘り下げて言語化していく必要があると感じたので、日々読んでいる本やブログ、人との会話から、言語化するのに手助けとなる表現を意識して拾っていきたいと思います。

まだまだデザイン初心者ですが、早く成長できるように日々頑張ろう。