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

NO IMAGE

今回は「ショコラ・シック」です。

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

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

トレース

まず見本です。

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

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

スマホで見た時用。

見本。

ワイヤーフレーム。

ヴィジュアル。

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

分析

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

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

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

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

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

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

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

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

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

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

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

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

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

おまけ

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