XDサイト模写まとめ #04

前回に引き続きXD模写の記録用noteです。
1回目の記事はこちら。（参考にさせて頂いた記事も記載しています。）

お手本

模写

今回はレスポンシブデザインと文字量に注目することにしたので、PC、SP版とシンプルなものを選んで模写しました。合計2時間弱の作業でした。
SP版、けっこうざっくり模写になってしまった…

抽出した情報

■フォント
sans-serif（メイリオで代用）
helvetica（Arielで代用）
游ゴシック

■カラー
文字：#FFFFFF（白）、#8B97B0（グレー）
文字、タブ、フッター、#252525（グレー）
背景：#D9DEE6（水色）
罫線：#545557（グレー）、#848484（グレー）、#E0E0E0（グレー）
SP版罫線：#C8C8C8（グレー）
ボックス背景：#F2F5F6（薄い水色）

気付いたこと

バランス、配置
・ファーストビューは画面幅を一杯に使ってH772pxほど。
・ナビゲーションの間隔は約26px。少し狭い？
・見出し、キャッチコピーには約80～90pxの字間。
・サブコンテンツの画像比率が約3:2、3:5とされていて見やすいサイズだと感じた。
・字間がバラバラだとコーダーが（自分が）後々大変そう…幅を揃えるために漢字、記号、平仮名で調節しているものが多かった。
・フッター300px。高さを抑えてこれくらいの幅が良さそう。
・セクション間の間隔を約125pxで取っていて見やすい。特別に理由がない場合間隔＝100pxと取ることが多かったので目安にしたい。

レスポンシブデザイン
※sp版の級数が抽出したサイズを合わず、27px→20px、18px→16px、14px→12pxで合った。(スクロールバーの影響？？）
・級数はPC→SPでおおよそ半分か半分以下のサイズに。
・SP版のコンテンツ間隔は13px～15pxで統一。
・コンテンツ幅：332px、左右に15pxの余白＋スクロールバー13px？
・コンテンツ幅が決まればコンテンツ、テキストの幅、ボタンの幅など統一して作成していけばバランスがよくなることが感覚的にわかった。
・ブレイクポイント：750px
・SP版に切り替わるとポイントになっていたロゴ画像が背景になっている箇所があった。
・基本的に縦並びに変更して差し支えない構成でPC版が作られている。

文字量
・ニュースの文字数は40～60文字前後。
・メインコンテンツのキャプション文字数は45文字前後。SP版に変わってもユーザーが読み疲れない短い説明文にまとめている。
・英字のキャッチコピーは2行にわたっていても写真の雰囲気によってはあしらいのように見えて馴染んでいる。このサイトの場合、キャッチコピー下の動画への誘導分も英字なのでキャッチコピーの一部として読み飛ばされてしまいそうだと思った。
・文字数が多い場合、級数が大きいと目に入りやすい。
・グローバルナビゲーションのメニューは4～6文字。1行でまとまらないとレイアウトがしづらいし端的なワードで揃って並んでいる状態が綺麗だと思う。どうしてもまとまらないメニュー名の場合、サブコンテンツに入れるなどデザインの工夫が必要だとわかった。

配色
・色を抽出してみると、罫線のグレーを数種類で使い分けていことがわかる。
・ホバー時のリンク色と罫線の色を合わせている箇所があった。
・文字色#252525は完全な黒より淡い色に馴染んで目にも優しい感じがする。

レスポンシブデザインはまだまだ勉強不足なので、自分でもバランスの良いものを作る感覚を持てるようになっていきたいです。

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