Webサイトトレース#01
こんにちは。sakiです🌷
予定通り中間課題が終わり、デジハリ４ヶ月目に入りました。
４ヶ月目はブラッシュアップ期間として卒制まで１ヶ月自由時間となるので、卒制に向けてWebサイトレビュー・トレースを実施していこうと思っています。
使用ツール・参考にしたサイト
トレースは実務で使用する機会が多いと聞いた、XDを使用していこうと思っています。
デジハリの教材ではXDについては触れないので、ちづみさんのnoteを購入して学習しました。
XDでのWebサイトの模写方法についても、別途noteを書いてくださっているので、参考にしながら進めました。
しかし、XD、良きですね。。
リピートグリット機能で繰り返しが簡単にできたり、プラグインで新たな機能を次々に追加できたりと、可能性が無限大のように感じました...
トレース内容
今回、以下サイトを選ばせていただきましたが、テーマとしては「お洒落で清潔感があり、洗練されたデザインに仕上がっている理由」をトレースして探りに行きたいと思います。（あと、卒制で写真を目立たせるようなデザインにしたいと思っているので、写真を多く使っているこのサイトの写真の配置を参考にしたいと思い選びました。）
（トンマナ）
・欧文はFutura PT。
・和文はヒラギノ明朝で、大人な印象。
・フォントはどちらもウエイトが細いので、より洗練されたイメージを後押し。
・letter spacing:0.3em程あいていて、ゆったりめで、落ち着いたお洒落なイメージ。
・テーマカラーは水色（#22d4d61）。タイトルは黒で目立たせていたが、本文は薄めのグレー（#606060）に設定、儚げな印象を強めていたように感じる。
・ターゲットは、20代後半〜40代女性と予想（全体的に高級感があるので、学生向けではない印象）
（お手本）
（トレース）
◆メインビジュアル
・メインビジュアル部分のみ背景が白に設定されていた。それにより、Cafeのロゴにもあしらいがある３本線のデザインが目立つ。（他の部分は最後まで固定で、大理石柄の画像が背景に設定。）
・ナビゲーションは横に出現する。この３本線もCafeのロゴのデザインと同一にして統一感がある。（ハンバーガーメニューは右上にあるものが多いので、デザイン性があって新鮮..）
◆About us
・店舗デザインの写真が目立つコンテンツ部分。店内の写真を見て、このWebサイトと店舗デザインがかなりリンクしていることを感じた。配色、フォント、ごちゃごちゃ感のないシンプルな内装、大理石柄のカウンター（＝背景色に使用）
・文章も、店舗デザインを軸に書かれているように感じる。店舗デザインにかなり力を入れていることがわかる。（本文抜粋：そこに流れているのは、洗練されたくつろぎの時間。そこで生まれるのは、微笑み溢れる気持ちの輝き。品がありながらも鮮やかなブルーで彩られた空間に一歩踏み入れれば、何でもない一日は、少し特別な一日に変わる。）
◆News
・説明文もあるため、他と比べると画像は小さめに設定。（width: calc(100% / 4)）
◆MENU
・hoverすると薄く色が変化、クリックで画面全体に詳細表示。そうすることで、LP上の文字数を少なく、写真を大きく配置することを可能にし、目立たせることができている。
◆Instagram
・Instagramを見に行くと、かなりインスタ映えをしている写真が並んでいた。SNSの中でInstagramだけに焦点を当てて、目立つContents部分に追加しているということは、このInstagramをみて「私もお洒落な写真を撮りたい！」という、来店への行動喚起を促すためだと考えられる。
ただ、この作りだとボタンをクリックしてInstagramに飛ばなければならないという１ステップがあり、スルーする可能性も高いように感じるので、Instagramの写真を埋め込むなどして、LPからも写真が見れるようにしたら良いのではないかと感じた。（他に写真が多いから、ごちゃごちゃしちゃうのかなあ...）
◆Shop Info
・ショップインフォのバランスは少しきになる...文字ボックスと写真の位置が少しアンバランスなように感じた。写真を下にもう２つ位並べても（違う角度から撮った店内写真等）良い気がする。（このデザインにした理由がきになる.....レスポンシブ対応のためかなあ..）
まとめ
トレースした結果、私が考える「お洒落で清潔感があり、洗練されたデザインに仕上がっている理由」は、以下ではないかと考察しました。
・欧文和文共にウエイトの細いフォントを使用し、文字間をゆったりめに設定していること。
・和文の文字色を、薄いグレーに設定していること。
・ページ全体的に、文字量が少ないこと（MENUエリアなどに見られるように、クリックしたら詳細が見れる作りになっている）
・AboutUsの説明文のBoxや、メインビジュアル部分等、余白が十分に取られていること。（けっきょく、よはく。また読もう..）
店舗デザインとWebサイトがかなりリンクしているのだろうと想像ができたので、今度実際に足を運んでみたいと思いました🥰