AdobeXDでインスタのトレースやってみたよ!
0. 作成環境
- トレース元のスクショはXperia XZ1から取得
- AdobeXDはWindows10上で使用
- 写真はフリー素材サイトか自分で撮影したものを使用
- トレース共有リンク https://xd.adobe.com/view/82335817-f5b2-4fa6-ae6e-a272ae49d720
1. ホーム画面
- インスタのロゴはBillabongというフォントらしい。が、やってみたところ似ているものの完全に一致はしなかったのでパス貼りの練習もかねて自作
- 本文のフォントはAndroidではRoboto(OSのシステムフォント)らしい。が、Windowsに入ってなかったのでSegoe UIで代用
- 各アイコンも練習を兼ねてAdobeXDで作成
2. 検索画面
- ストーリーと写真部分はリピートグリッドを使用
- ストーリの縁取り部分の丸のグラデーションうまくいった気がする
- グレーの部分、上は影あり、下はなし
3. 写真・動画追加画面
- フォント違うのが気になる(が、ないのでとりあえずこれで)
- ここまで全部に言えることだけど、ほぼすべて字詰めしてる
- アイコンは枠線だけのやつと、枠線なしのボディ部分だけのもの両方を使用している(よって自作する際は両方作成する必要ある?まぁ場合によるけど見やすい方を使えばいい気がする)
4. 通知画面
- 繰り返し部分はリピートグリッド使用
- アイコンの周りにはうっすら枠線がある。ほかの画面も同様。色は画像の色みに合わせてるように見える
- 同じ図形は同じ側にそろえた方がいいのかも(円形アイコンは左に統一、四角形のフォローボタンや写真は右に統一)
- ボタンは中の文字数に合わせたサイズになってる(文字数関係なく統一とどっちがいいのかしらね)
- 「NEW」と「過去」のアイコンとの距離感がそろってないなーと思ったけど、通知メッセージ部分との距離に依存?
5. 自分のアカウント
- プロフィールを編集ボタン、やたら横長だけど境界線代わりというか、安定感はある
- 人型のアイコン、枠線のみとボディのみのものを作成することで役割が違うことがわかりやすい
- 枠線アイコンは周りとのバランスの都合もあるかな
…とりあえずそんな感じですかね。何かあったら書き足します。
この記事が気に入ったらサポートをしてみませんか?