Webデザイントレースその３「ショコラ･シック」

いわゆるカフェサイトです。

オンライショップがありECサイトの参考にもなりそうでしたが、残念ながら閉店しているためそちらはトレースできませんでした。

トレース

まず見本です。

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

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

スマホで見た時用。

見本。

ワイヤーフレーム。

ヴィジュアル。

以上でトレース終了、続いて分析です。

カフェサイトはお店の雰囲気やメニューを見て行ってみたい、食べたいと感じることが大事です。

ということで最初はメニューページをトレースしようと思いました。

しかしメニューのレイアウトがグリッドで前回（その２）やっているのと、トップページのレイアウトが参考になりそうだったのでこちらにしました。

ですのでカフェサイトというより、トップページのお知らせのトレースです。

そしてもうひとつ、これはトレースしていて気づいたのですが、カーニングが細かく設定されていました。

カンマ（、）、句点（。）、カッコ（()）、中点（･）が半角で入力されており、それぞれにマージンが設定されていました。

なんか文がキレイだなと思ったら（読むではなく見るで）そういうことでした。

雑誌の記事みたいでとても参考になりました。

レイアウトは１カラムで情報を探すのに迷うことはなく、お店の雰囲気も伝わってきます。

フォントは「游明朝」、「游ゴシック」、「Noto Serif」が使用されています。

配色はロゴのメインカラーと無彩色。

チェーン店のサイトと違い、ブランディングを重視しているのを感じました。

素敵なお店ですが、閉店したようでとても残念です。

トップの美味しそうなショコラを実際に食べてみたかった！