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

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

前回に引き続き、これぞ！というWebサイト様を観察トレースし、デザインについて考察しました。今回も素晴らしいサイト様でした…さっそくいきます！

【今回の作業時間：トレース→観察まで2時間ちょうど】
※この「観察トレース」の詳細や目的は＃1に記載しておりますので、なんぞや？という方はどうぞそちらをご覧くださいませ。(o _ _)))

1.観察トレース

今回のお題サイト様は「FUWA」様です。（右端がトレース）

メインビジュアルの銀のスプーンが印象的なサイト様です。
見ていて「商品がよく引き立つ洗練されたデザインだな、ほぼ無彩色なのに飽きもこない…なぜ？」と感じ、その理由を確かめたい（自分もこんなデザインができるようになりたい！）ということで、こちらを選びました。

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

先に、観察によって得られたデザインのテーマとターゲットがこちらです。

★テーマ：
「繊細で洗練された商品（カトラリー）の魅力を最大限に引き立て、サイトの世界観を重視したデザイン」
・ほぼ白・グレーだけという無彩色メインの配色により、銀のカトラリーの魅力を最大限に引き立てている
・サイトのカラーそのものは地味で落ち着いているので、レイアウトを工夫し動きのある視線を誘導
・メインビジュアル直下の「商品を購入した素敵な暮らしの写真」や商品にまつわるストーリーにより、もたらされる素敵な未来へのワクワクを効果的に表現

★ターゲット：
・こだわりのあるインテリア、生活用品、高級カトラリーに興味がある人
・新生活を始める、あるいは今の生活に何か特別なものを取り入れたい人
・経済的に余裕があり、上流・洗練された生活に憧れている人

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

上記の結論に至った観察の詳細を、トレースでの気付きと共にカテゴリ別に記していきます。

【ヘッダー周辺】
◆ヘッダー（特徴・幅・フォントサイズ・アイコンの有無・配置）
・メインビューと一体（それらしいもの無し）。左上に企業ロゴ。

◆メインビジュアル（サイズ・カラム・特徴）
・サイズ：W：1920px、H ：1053px（黄金比にやや近い比率）
・主役のスプーン写真を切り抜きアップで中心に据え、リボンのようにロゴを重ねて配置。とても印象的。白のブロック、さらにその背景として濃グレーの配色
・メニュー文字など他の要素は極力削り、周辺に散らすように配置。散らした文字でメインビジュアル画面全体を囲う「大枠」のような効果になっている

◆タイトルロゴ
メインビュー右側に縦書きで配置

◆ナビ（グローバル）メニュー
→右上にハンバーガーメニューとしてシンプルに設置

◆ボタン（カラー・サイズ・種類・ホバーの変化）
・サイズ：W 450px、H 35px
・配置場所：商品一つひとつの説明欄下にCTAとして設置
・ホバー：色が反転

◆アイコン（特徴・配置場所・使い方）
・インスタのアイコンがメインビュー・フッターあたりに配置。どちらもさりげなく。

◆フォント（フォント種類・サイズ、カラー、マージン、効果）
・書体：futura, MyYuGothicM, YuGothic, -apple-system, system-ui,
“Hiragino kaku Gothic ProN”, Meiryo, sans-serif;
・フォントサイズ：タイトル；30px：その他テキスト：20px、25px、17px　19px　
・カラー：＃333
・どこをどう強調しているか：
細く、小さめのサイズ。可読性よりサイトの繊細な世界観を重視。

【配色・カラー】
◆カラー
・サイト全体での使用色数：3色（グレー系）
・ベース：白
・メイン：グレー・グレイッシュブルー
・アクセント：メインビュー下の写真と、中央あたりの小写真のホバーが
唯一の「有彩色」となり、アクセントとして目立つ。

◆配色・カラーによる印象・トーン
・商品である銀のカトラリーを引き立てるよう、白・グレーという無彩色のみの配色。
・洗練・気品・高級感・清潔感のイメージ

◆背景色
・濃い色：濃グレー・グレイッシュブルー
・薄い色（グレーなど）：薄グレー

◆線（カラー・幅・背景色との違い）
・1px #DCDCDC （背景の濃グレーより濃いグレー）

【コンテンツ幅・グリッドレイアウト】
◆コンテンツ幅の種類　：メイン入れて6〜7種類

◆グリッドの種類・幅・カラム　　→1・2カラム

◆ブロークングリッドの法則・ルール　
・サイト上半分は左右130pxほどを余白に左右にずらしてブロックを
配置し、カトラリーを並べる方向を左右転換させて構図のバランスを
とっている

【写真・画像素材の使い方】
◆写真や図の縦横のアスペクト比・何種類・特徴
（大1：暮らし）W：1539px、H:645（2：1に近い？）
（大2：スプーン）W： 1784px：H 564px
（中）W：510px、H：500px
（商品写真）W：710px、H：710px（1：1）

◆サイト全体での素材の効果
（ユーザーへ伝えるサイトストーリー）
キービジュアルで商品を紹介
→これを購入するとこんな素敵な暮らしに
→商品に込められた想いやこだわり、ストーリーを紹介
→商品購入へ
・写真の構図：商品のアップから少しずつ引いていく
・「暮らし」の写真のみ有彩色で大変目立つ
・商品写真はサイト全体の世界観にマッチしたグレーベースの写真

◆配置の仕方
→左右に視線を振るような、動きのある配置

【余白】
◆余白の特徴と効果
・余白：やや多め、セクションごとに異なるinner幅？
・行間：65〜85px前後、コンテンツ間は150px前後空いている。
実際に余白をはかってみると、そこまで広く空いているわけではないが、
フォントサイズや無彩色の配色、コンテンツをずらす配置等の効果でスッキリ程良い開放感が感じられる。

◆余白によってどういう視線を誘導しているか・目的
・注目させるべきところへしっかり視線誘導しつつも、コンテンツを左右に配置しその間の余白によって動きのある動線を作っている。

【レスポンシブサイズ変化のセオリー】
◆PC→SPでレイアウトどう変わるか？
単純に一直線に配置変更し、大きな変化はなし

◆小さなデバイス表示では、より上に表示されるのは文
字？画像？
→画像が上

4.観察のまとめと考察

以上の観察から、改めてこのデザインによって表現されているサイトのテーマや意図、メッセージを考察します。
・何を意図してそのデザインを採用したのか？
・何がそのデザインをデザインたらしめているのか？
・デザインによる効果は？
上記のポイントを意識しつつ、読み解いていきます。

★テーマ：
「繊細で洗練された商品（カトラリー）の魅力を最大限に引き立て、サイトの世界観を重視したデザイン」
・ほぼ白・グレーだけという無彩色メインの配色により、銀のカトラリーの魅力を最大限に引き立てている
・サイトのカラーそのものは地味で落ち着いているので、レイアウトを工夫し動きのある視線を誘導
・メインビジュアル直下の「商品を購入した素敵な暮らしの写真」や商品にまつわるストーリーにより、もたらされる素敵な未来へのワクワクを効果的に表現

★ターゲット：
・こだわりのあるインテリア・生活用品、高級カトラリーに興味がある人
・新生活を始める、あるいは今の生活に何か特別なものを取り入れたい人
・経済的に余裕があり、上流・洗練された生活に憧れている人

★高級な銀のカトラリーという商品の魅力を最大限に引き立たせるためのデザインの工夫が多々見られた。
【レイアウト】
配色がグレーを主とした無彩色で落ち着いた雰囲気なので、コンテンツや画像写真を左右に配置したり、濃グレーやグレイッシュブルーのブロックをあえてずらすように配置し、目線を左右に振らせるような動きを付けて飽きさせないようなレイアウトとなっている。
【使用カラー・配色】
・主役であるカトラリーが銀製品なので、それを引き立てるための配色としてグレー系統のカラー（濃グレー・薄グレー・グレイッシュブルー）で配色。透明感・清潔感・気品・洗練・高級感を感じさせ、カトラリーの持つ洗練された高級な雰囲気や繊細さがサイト全体でよく表現されている。
・有彩色はメインビジュアル直下に挿入されている「商品を暮らしの中に取り入れた未来のイメージ写真」と、中心あたりにあるスモールサイズの写真のホバー時のみ。商品もサイトカラーもほぼ全て無彩色な中、有彩色は大変際立つ。「暮らしの中のイメージ」は、「やや高価な買い物だが、このカトラリーを買うとこんな素敵な暮らしになる」というワクワクを引き立てる。【その他】
・フォントは細く、小さめのサイズ。当サイトのユーザーはこの繊細な商品をじっくり見ると仮定しており、文字サイズや画像スクロールの表示なども可読性よりもサイトの世界観を重視している。
・商品画像の下には別の画像を表示させるための「点」があるが、トップ画面ではさりげない（気づかれなくてもいい）サイズで、「購入する」ボタンを押した次の商品詳細ページではより画像を見やすくなるデザインとなっている。

5.自分だったらどうデザイン？

今回トレースさせていただいたデザインは、商品の魅力が見事に引き立てられている大変素晴らしいデザインであり、（はるかに未熟な）自分ならどうしようかな…と考え込みました；
はじめは「黒をベースにして高級感を出しつつ、銀のスプーンを浮かび上がらせるようデザイン、岐阜県のオリジナルブランドということで「和」のイメージを出して」…と考えていました。ですが、メインである商品は「食器」という日常の暮らしの中で繰り返し使用するものなので、「高価であってもあなたの暮らしの中に溶け込む、身近な食器」というナチュラルな雰囲気を取り入れたいと思い、白、ベージュ、グレー、茶などを使用して自然で落ち着いた暮らしの雰囲気になるようデザインすると思います。

5.まとめ

今回、無彩色のみで配色された、美しく洗練されたデザインをじっくり考察し、改めて自分がいかに日頃「色」に頼ってデザインしていたかが実感できました。
綺麗な配色だけで「それっぽい、いい感じのデザイン」ができてしまうので、安易に色に頼らず、サイトの目的を純粋に考えた最適なデザインができるよう、今後も研鑽を積んでいきたいです。

今回も大変勉強になりました。「FUWA」様、本当にありがとうございました！