WEBサイト模写02
ご無沙汰しております。
なんとか自分自身のリズムを取り戻しつつある新米デザイナーです。
Webサイトの模写をさせていただきました為、
もしよかったら、読んでいってもらえるとありがたいです。
模写の目的：審美眼を鍛える
今回のWEB模写の目的は、
プロが制作した実際のWEBサイトを模写することで、
レイアウトの設計意図
余白の使い方
フォントの選定
配色のバランス
情報設計の工夫
などを観察し、自分のアウトプットとの違いを見つけていきたいと考えています。その「違い」に気づく力こそが、
審美眼を鍛える一番の近道だと思っています。
学習目的としての模写
なお、今回取り組む模写は
あくまで学習目的での使用です。
公開や商用利用を目的としたものではなく、
スキル向上のためのトレーニングとして行います。
ご理解いただけますと幸いです。
本題
今回模写するサイトのフォントやカラー分析
比べてみた違い
① ファーストビュー（FV）の構図
まず、背景ビジュアルについてです。題材のサイトでは、二子玉川駅周辺の風景をベースに、ペーパークラフト風のビジュアル加工が施されているように見えました。
そのため模写では、AIを使ってペーパークラフト風の画像を生成し、再現を試みました。
しかし比較してみると、本家のビジュアルは手作り感を残しつつ、細かいディテールを意図的に削ぎ落としていることに気づきました。
一方で模写のビジュアルは、細部の情報量が多く、結果として本家よりもややリアル寄りの印象になっています。
また、ファーストビューの高さにも違いがありました。
模写では高さが不足しており、画面全体が少し圧迫された印象になっています。本家は高さに余裕を持たせることで、街の広がりやブランドの世界観を感じさせる設計になっていると感じました。
さらに、スクロールダウンボタンのサイズも違いがあります。
模写ではサイズが大きくなりすぎてしまい、少し目立ちすぎている印象があります。本家では控えめなサイズで配置されており、あくまで補助的なUIとして自然に溶け込んでいる点が印象的でした。
もう一つ気づいたのが、タイトルのジャンプ率です。
模写では、日本語タイトルと英語コピーのサイズ差が小さく、メリハリが弱くなっています。
本家では、日本語コピーを主役として大きく配置し、英語は補助情報として小さく配置されています。
そのため英語テキストは、現在のサイズの半分程度まで縮小することで、よりジャンプ率が生まれると考えました。
② ファーストビュー下の文章配置
模写では整列を意識し、FVのタイトルと同じ位置から文章を配置しています。しかし本家では、タイトルよりも少し内側から文章が始まる配置になっています。
これは視線誘導を意識したレイアウトだと考えました。
タイトルと同じラインから文章を始めてしまうと、視線が流れやすく、文章が読まれない可能性があります。
一方で本家のように内側から配置することで、視線を中央に移動することで、自然に文章を読ませる設計になっていると感じました。
また、模写では本文フォントがやや大きく、文字色も漆黒に近いため、少し強い印象を受けます。本家では文字色がやや柔らかく設定されており、長文でも読みやすいバランスになっているように感じました。
③ セクション間の余白
模写ではセクションごとの余白量にばらつきがあり、少し統一感が弱い印象があります。広く取られている部分と狭い部分の差が大きく、結果として少し野暮ったい印象につながっているように感じました。
一方、本家ではセクションごとの余白が一定のルールで設計されており、画面全体にリズムが生まれています。余白は単なるスペースではなく、デザインの印象を大きく左右する要素だと改めて感じました。
④ 見出しの文字サイズ
本家サイトでは、見出しの文字サイズが非常に大きく設定されています。
コピーを大胆に配置することで、強い印象を残すデザインになっています。一方、模写では見出しサイズがやや控えめで、全体のメリハリが弱く感じられました。
その結果、ページ全体が少しのっぺりとした印象になってしまっています。
見出しサイズを現在の約2倍程度まで大胆に拡大することで、ジャンプ率が高まり、より印象的なレイアウトになると感じました。
⑤ 背景の細かなデザイン
本家のサイトでは、背景の赤いエリアに画用紙のようなテクスチャが入っていたり、街並みのビジュアルが背景に自然に溶け込むように加工されています。こうした細かな処理によって、サイト全体の世界観や質感が作られているように感じました。
模写ではまだこのような細部の表現まで再現できておらず、細かな質感の違いが全体の印象の差につながっていると感じました。
引き続き、デザイン模写を続けていきますため、
応援や、アドバイスを頂けますと幸いです。
最後までご覧いただきまして、誠にありがとうございます。
