Webデザイントレース その3 「ショコラ・シック」
- 2019.11.03
- WEBデザイン サイト分析 / トレース

今回は「ショコラ・シック」です。
いわゆるカフェサイトです。
オンライショップがありECサイトの参考にもなりそうでしたが、残念ながら閉店しているためそちらはトレースできませんでした。
トレース
まず見本です。

続いてワイヤーフレーム。

見本を下に敷いてなぞったヴィジュアルです。

スマホで見た時用。
以上でトレース終了、続いて分析です。
分析
カフェサイトはお店の雰囲気やメニューを見て行ってみたい、食べたいと感じることが大事です。
ということで最初はメニューページをトレースしようと思いました。
しかしメニューのレイアウトがグリッドで前回(その2)やっているのと、トップページのレイアウトが参考になりそうだったのでこちらにしました。
ですのでカフェサイトというより 、トップページのお知らせのトレースです。
そしてもうひとつ、これはトレースしていて気づいたのですが、カーニングが細かく設定されていました。
カンマ(、)、句点(。)、カッコ(())、中点(・)が半角で入力されており、それぞれにマージンが設定されていました。
なんか文がキレイだなと思ったら(読むではなく見るで)そういうことでした。
雑誌の記事みたいでとても参考になりました。
レイアウトは1カラムで情報を探すのに迷うことはなく、お店の雰囲気も伝わってきます。
フォントは「游明朝」、「游ゴシック」、「Noto Serif」が使用されています。
配色はロゴのメインカラーと無彩色。
チェーン店のサイトと違い、ブランディングを重視しているのを感じました。
素敵なお店ですが、閉店したようでとても残念です。
おまけ
トップの美味しそうなショコラを実際に食べてみたかった!
-
前の記事
Webデザイントレース その2 「株式会社イトーキ」 2019.10.30
-
次の記事
影廊 -Shadow Corridor- 全アーカイブの場所 2019.11.04