XDサイト模写まとめ #01

前回の記事で課題にしたサイト模写に早速1ページ取り組んでみました。
1ページだけでも気付いたこと、学びになったことがあったので今後は備忘録用に記事に残していこうと思います。

参考記事

XD模写については以下の記事を参考にさせて頂きました！

XDの超絶便利と言われるプラグインMimicがなぜか機能せず、画像や配色の抜き出しを手動で行った部分もありましたが、その分勉強になったこともありました。（それにしてもMimic使ってみたかった…エラーの原因は調査中です）

参考にさせて頂いた2件目の記事で【模写を継続するコツ】として、
1～8のポイントのうち、一定期間は学ぶことをひとつに絞って模写してみるという方法が挙げられていました。
慣れるまではこうした方法が自分に合ってそうだと思い、今回は主に配色や文字のバランスを中心に観察してみることにしました。

お手本

模写

繰り返し部分はリピートグリッドを活用、観察ポイントに影響のなさそうな箇所は細部まで模写せずにサイズ感だけわかるようにしたことで作業としてはあまり重くない印象でした。

抽出した情報

■フォント
TsukuARdGothicStd-E
Source Sans Pro
游ゴシック

■カラー
文字：#231916（焦げ茶）、#6f5240（焦げ茶）、#392214（焦げ茶）
リンク、アクセント：#e95516（オレンジ）
リンクポイント：#A9C100（黄緑）
罫線：#CCCCCC（薄いグレー）
背景：#F9F8EE（ベージュ）
イラスト：#C9A063（濃いベージュ）
強調ライン：#FFEF00（黄色）

気付いたこと

操作
・背景画像の取り出し方がわかった。検証ツール⇒sources⇒imgフォルダ右クリックで新しいタブで開いて保存。
・XDでの模写がほぼ不自由なく出来たので、アイコンなど作りこみが必要な箇所を覗くとXDでも十分にデザインカンプが作れそうなことがわかった。

バランス、配置
・ナビゲーションの間隔が40pxくらい。
・行間は2倍くらい。16pxに対して35pxとか。
・字間はナビゲーションごとに調整していたり、意識的に大きく空けている箇所がある。60～100とか。字間60が多い。
・見出しとテキストの間隔が30pxくらい。数値としては少なく感じたけれど視覚的には充分なことがわかった。逆にコンテンツが離れすぎている方が読み手にとっては不安かも。

・マップ、ボックスサイズなど厳密に計ると半端な数もあり疑問に感じた。
・このサイト独自の工夫だと思うが、フッター、最終セクションのわかりやすい場所2か所にトップへ戻るリンクを配置していた。

配色
・文字色は使用する場所や背景色によって茶の濃度を変えていた。
・リンクやアクセントはメインカラーのオレンジに統一されている。メインカラーが引き立つ背景色（薄いベージュ）を使ってバランスを取っている。
・ベースカラー、メインカラー、強調色の割合が7:2:1くらい、お手本になる割合だと感じた。

初回ということもあり、操作性含めてもこれだけの気付きがありました。優れたデザインを感覚でわかるようになる良い練習方法だと思うので、今後も継続していきたいです。

ここまで読んでいただきありがとうございました！