デザイン模写 Day4
毎日模写、4日目。
今日は東京の和食レストラン808TOKYOさんにしてみました。
以前京都を拠点にしている食品販売店のオンラインストアデザインさせていただいたことがあるんですが、和なんだけど古くならない、スタイリッシュさも求められていて、それってこういうサイトが参考になったな〜と思って選んでみました。お料理の写真がどれも美味しそうすぎる、、写真の力もかなり大事ですよね。。写真はかなり彩度高めで、それを落ち着いたトンマナで引き立たせてるように見えます。
所要時間
2時間
そこまでコンテンツが多くなかったのとメインコンテンツが繰り返しになってたので！
利用ツール
Adobe XD
どんな語り口で、どんな感情を与え、どんな情報を受け手に伝えたかったのか
このお店が提供する空間と料理、器、そこで過ごす時間それぞれの魅力について語り予約につなげる。
・大まかなレイアウト、余白の取り方など
余白は多いのか少ないのか：
画像はそれぞれ大きく使っているが、テキスト周りなど余白はたっぷりとっている。
どこに一番視点が集まるように設計されているのか：
セクションそれぞれの画像。左右互い違いの配置、器はトリミングして並べるなどの工夫。
視点を誘導するためにどんな工夫がされているのか：
スクロールすると次のコンテンツがふわっと現れる、器の画像部分は１つずつ順番に現れる。
(グリッド的に)どこが揃っていて、どこを外しているのか：
画像がサイドいっぱいにくるセクションは10pxのpaddingで揃っている。繰り返し部分も画像は横10px、テキストは画像からの距離を統一。
・配色
何色くらい使っているのか：
黒、グレー系：#231815（ベースの黒）、#404040、 #1f1f1f、 #737373、#d4d2d2、#c5c5c5、#000
ポイントカラーの赤：#b54434
基本は#231815の黒ベースでポイントカラーに#d4d2d2。ボーダーのグレーをボタンに使うか、背景によってなどいろいろ使い分けている
どういったトーンでまとめられているのか：
質感のある白い背景、アイボリーに黒とくすんだ赤、再度の高い写真を引き立てている印象。
パキッとした印象か、ぼんやりした印象か：
コントラストが強くパキッとした印象
・文字組み
フォントはどういうものを何種類使用しているか(ゴシック、明朝、太い、細い、丸みがある、角張っている、など)：
ヒラギノ明朝（日本語）、Times New Roman（メインビジュアル能見出し、フッターのFOLLOW US、電話番号ボタン）、Roboto（英語のキャプション）
行間、字間はゆったりなのか、きつめなのか：
若干字間とっているが広くはない、行間はしっかりとっている
どこを強調しているか：
日本語見出しに赤で英語のキャプションをつけている部分が強調されて見える。
ジャンプ率はどれくらいつけているか：
繰り返し部分の見出しは、1.8:1:1.4、キャプションは小さくしているがそこまで高くはない印象。お知らせも1.8:1.3。
・あしらい
あしらいを使用しているか：
画像＋テキストの繰り返し部分、料理画像と室内画像にロゴを透過して重ねている。
どういった意図であしらいが使われていそうか：
短調になりそうな四角い画像の繰り返しにワンポイントを持たせ、ロゴの家紋のような和の風合いもプラスしている。
あしらいのサイズ感や量はどれくらいか：
ロゴがしっかりわかる、存在感もある大きめなサイズ。
ヘッダーメニューの追尾はユーザーにとっても親切なのでどのサイトでも取り入れられてますよね。こちらのサイトはメインビジュアルでは白抜き、スクロールすると黒に変化するようにされてました。
余白のとりかたは、pxと%をうまく使い分けている感じでした。
デベロッパーツール凝視するのでコーディングの勉強にもなってる予感です。
明日もがんばります〜