Webデザインの観察トレース　＃1

大阪でWebサイト制作をしている本まるです。

最近はご案件でWebデザインのお仕事も増えてきたので、勉強のため既存のサイトをトレースし、自分の備忘録・成長記録としてこちらに記していこうと思います。
既存サイトの構図や配色、余白などのカテゴリごとにどんな特徴があるのか細かく観察し、Webデザインの基本の型を身につけると共に、観察から見えてきたそのデザインの意図や背景、もし自分ならどのようにデザインするかまで考察していきます。

※第1回目なので、以下詳細に内容説明しています。
早く本題をご覧になりたい方は「3.観察トレース」へどうぞ。

※ご注意※

あくまで勉強のための個人的な解釈です。スキル・経験不足による見当違い・思い違いも多々あるかと存じますが、対象サイト選びも考察も一個人の好み・勉強の一環としてご覧いただけましたら幸いです。
また、自分自身も経験を重ねることで新たに見えてくるものもあると思います。その違いも成長記録として可視化していけたらいいな、と考えています。
よろしくお願いします。(o _  _)))

1.観察トレースの目的

この「既存サイトの観察トレース」の主な目的は、
①とにかく数をこなして、Webデザインの「基本の型」を学び身に付ける
②既存サイトを観察して、そこに表現されているデザインの意図や背景、サイトのメッセージを伝える工夫などを読み取り言語化する力をつける
③自分ならどうデザインするか、代替案を考える力をつける
というものです。

その他にも、対象サイトを選ぶために日頃から多くの優れたデザインにふれる機会が増える、トレースに使用するadobeXDやFigmaなどのツールの作業スピードがアップするなど多くの学びがあります。

また、目的①で説明しているとおり、細部まで完コピするというより「とにかく数をこなす事」を重視しています。
トレース自体はコンテンツの配置や余白の空け方など全体の構図をざっくり捉えるために簡易的に行い、その後のサイト観察によってデザインをしっかり「見る」ことに重点を置いて行います。

通常のトレースとはやり方が違うかもしれませんが、個人的な練習だと捉えていただけましたら幸いです。

2.観察トレースの手順

以下の手順でサイトをトレースし、観察・考察していきます。

①トレースするサイトの選定・全体スクショ（PC・SPサイズ版）…5分程度
②全体のざっくりしたレイアウトを捉えトレース（ワイヤーフレーム程度）…10〜15分
③カテゴリごとに細部まで観察し、可能な限り数値データをとる…1〜1.5時間
④観察による気付き、自分ならどうするかのアイデアを言語化・アウトプット

初めて実施してみると、シンプルなサイトにもかかわらず観察・考察まで2時間近くかかりアウトプットは翌日に持ち越しました。
数をこなして効率的に行えるようがんばります！

3.観察トレース

長くなりましたが、ここから本題です。
今回のトレースさせていいただくサイト様は「日本茶ミルクティー専門店　OCHABA」様です。
初回ということで、コンテンツの少ないシンプルなサイトを選びました。

3-1.レイアウトのトレース（右端）

3-2.【結論】考察したテーマとターゲット

観察によって得られたデザインのテーマとターゲットがこちらです。
★テーマ：
「日本の伝統と新しさを融合させた、可愛らしく親しみを感じるデザイン」
・白ベースに明度の高いピンク・グリーンの配色　→ターゲットであるスイーツ好きの若い女性の世界観
・見出しの横に英語表記・インスタグラムアイコンの配置　→新しさ、親しみを表現
・シンプルで開放的（広々とした余白・風光明美な風景写真）

★ターゲット：
・和スイーツや抹茶好きの若い女の子、甘いもの・可愛いもの好き
・インスタユーザー・ビジュアル重視の人

3-3.カテゴリ別サイト観察

上記の結論に至った観察の詳細を、トレースでの気付きと共に以下に記していきます（長いです…）。

【ヘッダー周辺】
◆ヘッダー（特徴・幅・フォントサイズ・アイコンの有無・配置）
・ヘッダーらしいヘッダーはない。
・サイト最上部に装飾のライン。和風・市松模様のライン：カラーは濃緑。
→使用している写真素材の背景画像と同じ

◆メインビュー（サイズ・カラム・特徴）
・サイズ：W（100%）1920px：H 1175px（黄金比に近い比率）
・緑・ピンク・白の配色が美しい
・タイトルテキストは写真のバランスを考えやや左寄りに配置

◆企業ロゴ
メインビュー上部：約70px下・中央付近に配置
ロゴの「日の丸」の赤がアクセントカラーとなっている。

◆ナビ（グローバル）メニュー　→なし

◆ボタン（カラー・サイズ・種類、非活性状態）
・サイズ：H 40px：W 666px
・サイトの一番下に長方形・イメージカラーのグリーン白抜き文字で
→ホバー時には色が反転＋フォントサイズが大きく浮かび上がる動き

◆アイコン（特徴・配置場所・使い方）
・インスタのアイコンが写真の下に配置
・中央あたり、数字をロゴの形でデザイン（80px）
・一番右下に会社ロゴ

◆フォント（見出し、書体、サイズ、カラー、マージン、効果など）
・ヒラギノ角ゴシックPro・：タイトルの書体は不明
・フォントサイズ：タイトル：30px、その他テキスト：22px、21px、20px　
・どこをどう強調しているか：タイトルはやや明るい緑、その他見出しの左には英語（明るい緑）を添えて和風・伝統の中に新しさ・スタイリッシュさが感じられる
・ページのスクロールに合わせフワっと文字が浮き出てくるようなアニメーション：→キービジュアルの「抹茶ラテ」を想起

【カラー】
◆カラー：サイト全体で何色使用？：5色前後
・ベース：白・薄ベージュ
・メイン：グリーン系・ピンク
・アクセント：赤（ロゴのごく一部に使用）

◆カラートーン・印象
→明度が高いグリーン・ピンク・白
和風・伝統美と新しさやポップさの融合・若い和風スイーツ好き・女性向け

◆背景色
・濃い色：メインビューの濃緑と、フッターの黄緑の2種類
・薄い色（グレーなど）：薄いベージュ1種類（和紙のようなテクスチャ ）

◆線（カラー・幅・背景色との違い）→無し

【コンテンツ幅・グリッドレイアウト】
◆グリッドの種類・幅・カラム
→1カラム

◆ブロークングリッドの法則・ルール　→無し

【写真素材の使い方】
◆写真や図の縦横の比率・種類
（キービジュアル）W 1920px：H 1175px（黄金比に近い）
（大1）W:1424px（16：9）
（中3）W：1080px・1050px（16：9）

◆サイト全体の使用素材の統一感について
・カラー：緑・ピンク・モノクロというサイトのテーマカラーで統一
「商品→風景→製造工程→商品」の流れ：
まずどんな商品かキービジュアルで提示→それがどうやって作られ、どんなこだわりや想いがこめられて商品化されていったかをストーリー仕立てで説明している。

◆加工について　→特に無し

◆配置の仕方
→上から下へ、シンプルで迷いのない視線の誘導

【余白】
・余白多め：50〜550pxほど
・行間でも50px以上、コンテンツ間は200〜300pxほどは空いている。
コンテンツの少なさ→スカスカ感は否めないが、シンプルにスッキリ見せられる、和風の洗練された雰囲気は出ている

【余白の意図・視線誘導について】
→上から下へ、ほぼ一直線に視線をおろしていく。
迷いなくスッキリとした1カラムのレイアウトだが、やや面白味に欠けるかも。

◆リンクについて　→今回は一番下のボタンのみ

3-4.考察と自分なりのデザイン案

以上の観察から、デザインによって表現されているサイトの目的は？
・何を意図してそのようなデザインを採用したのか？
・何がそのデザインをデザインたらしめているのか？
・デザインの外せない一番のポイントは？

★テーマ：「和風ベースの中に可愛らしさ・親しみを感じるデザイン
・白ベースに明度の高いピンク・グリーンの配色
・日本の伝統の中に新しさを融合（見出し横に英語表記・インスタグラム配置）
・シンプルで開放的（広々とした余白・風光明美な風景写真）

★ターゲット：
和スイーツや抹茶好きの若い女の子、甘いもの好き、
インスタや見た目にこだわるビジュアル重視の人

★このデザインで外せないポイント：
抹茶商品と静岡の風景写真のカラーであるグリーンを引き立てる配色は必須。ベースを白や薄ベージュにしていることから、高級指向というよりポップ、可愛らしさ、庶民的な親しみを重視している。
和スイーツや抹茶商品のLPはベースを黒にしているものも多いが、こちらは
ターゲット的にもこのようなレイアウト・白ベースのサイトに慣れている若い女性向けの世界観を演出、さらにピンクをテーマカラーに使用して可愛らしさを上乗せしている。
同世代がユーザーと考えられるインスタグラムへの誘導も、サイトの世界観を壊さない程度にさりげなく配置。

★コンテンツ（写真素材）の見せ方：「商品→風景→製造工程→商品」
まずどんな商品か、イメージとともにキービジュアルで提示
→それがどこからどうやってつくられ、どんなこだわりや想いがこめられて
商品化されていったかストーリー仕立てで説明　→上から下へ、シンプルで迷いのない視線の誘導

★キービジュアルとその下の全幅の画像で構図のバランスを取り、それ以下はタテのラインでシンメトリーなレイアウト。
コンテンツの少なさから余白が目立ち、レイアウトも1カラムで視線もほぼ真っ直ぐ落ちていくレイアウト。

★自分なら：
・コンテンツを増やせないなら、アイコンやイラスト、やや崩したレイアウトなどもう少し動きをつけた配置にする。あまりにストンと視線が落ちていくので、もう少しサイトに滞在し商品をじっくり見てもらう工夫をする。
・可能であれば、エピソードのあたりに写真素材を挿入したり、商品説明のテキストや商品のアップ写真、別アングルの写真なども入れてメリハリをつけたい。
・また、この商品を購入するメリットや魅力、一押しポイントもよくわからないので、もしあるのならそれをアイキャッチに入れて購買意欲を上げたい。

4.まとめ

今回、観察トレースを初めて試み、ただサイトを眺めるだけでなく実際に手を動かしてみて多くの気付きがあった。
初回ということでシンプルなサイトを選んだが、今後はさまざまなカテゴリー・業界のサイトを観察し基本の型を身に付けていきたい。
曖昧な感覚で「なんとなくいい」で作るのではなく、しっかりそのデザインの良さ・悪さ・改善策について言語化し、根拠をもって最適なデザインを提案できるよう研鑽を積んでいきたい。
おかげさまで大変勉強になりました。「日本茶ミルクティー専門店　OCHABA」様、本当にありがとうございました。