香港を拠点とするデザインブック出版社のサイトをトレースしました。
自分の好きな雰囲気のデザインをトレースしようと思い探したサイトです。
■構成
トップ（メインビジュアル）
↓
ジャンル別書籍1
↓
ジャンル別書籍2
↓
ジャンル別書籍3
↓
MORE EXPLORE（カテゴリ別メニュー）
↓
コンタクト
↓
フッター
デザインブック出版社ということでまず書籍のデザインがとても素敵です。
ECサイトのように書籍の画像を並べつつ、シェイプなどを使っていることでアート性も感じるデザインとなっています。
アート本を販売するサイトとして、商品詳細を見たりカートに入れて購入することができるだけでなく、
作品や商品を見せるギャラリー的なサイトになっている点にも注目です。
ロゴもとても良い！
フォントはinternationalというフォント（検索しても見つからず）。
トレースではHelvetica Neueで代用しました。
図形や線などのシェイプと合わせる場合、その太さと同じくらいの太さのフォントにすると統一感がでるように思います。
今制作中のデザインでもこれができておらず統一感が出ていなかったので、とても重要なことだと思いました。
ゴシック系のフォントだとシェイプを四角や角のあるものを合わせてしまいそうですが、このサイトでは角アールの図形や半円など曲線のあるシェイプも取り入れています。丸みのあるシェイプを入れることで、かっちりせず面白さが出ていると思います。
カラーはパッキリとした黒背景に白の文字、ベージュ系背景に黒の文字を使用しています。
海外のデザインやアート関連のサイトっぽく好きな雰囲気です。
画像やフォント、シェイプなどの要素は大きめに感じます。商品画像自体がデザイン性が高いこともあり大きめに見せている？
セクションごとの余白は小さめに感じます。カラーで分けていることもあり空けすぎないくらいがちょうど良さそうです。
スクロールすると下から現れるアニメーションを全体的に使用しています。
単純にスクロールしたくなるのと、現れる要素に注目がいくので縦長のサイトに合っているのではと思います。
ホバーで画像が角丸になるアニメーションが可愛い。シンプルなようで意外と思いつかない気がして良いなと思いました。
■アート性を高く感じる要素
・不規則なシェイプ
・Helvetica系のゴシックフォント
・デザインされた商品画像
・グレーやベージュ背景×黒
割とモダンな印象のHelvetica系フォントやカラー（黒や白は#000000#ffffffでパッキリとした色）が使われていることが多い。
これら一つだけではあまり効果がなくうまく掛け合わせることでアート性を感じるように思います。
ぜひ実際のサイトもご覧ください。
自分の好きな雰囲気のデザインをトレースしようと思い探したサイトです。
■構成
トップ（メインビジュアル）
↓
ジャンル別書籍1
↓
ジャンル別書籍2
↓
ジャンル別書籍3
↓
MORE EXPLORE（カテゴリ別メニュー）
↓
コンタクト
↓
フッター
デザインブック出版社ということでまず書籍のデザインがとても素敵です。
ECサイトのように書籍の画像を並べつつ、シェイプなどを使っていることでアート性も感じるデザインとなっています。
アート本を販売するサイトとして、商品詳細を見たりカートに入れて購入することができるだけでなく、
作品や商品を見せるギャラリー的なサイトになっている点にも注目です。
ロゴもとても良い！
フォントはinternationalというフォント（検索しても見つからず）。
トレースではHelvetica Neueで代用しました。
図形や線などのシェイプと合わせる場合、その太さと同じくらいの太さのフォントにすると統一感がでるように思います。
今制作中のデザインでもこれができておらず統一感が出ていなかったので、とても重要なことだと思いました。
ゴシック系のフォントだとシェイプを四角や角のあるものを合わせてしまいそうですが、このサイトでは角アールの図形や半円など曲線のあるシェイプも取り入れています。丸みのあるシェイプを入れることで、かっちりせず面白さが出ていると思います。
カラーはパッキリとした黒背景に白の文字、ベージュ系背景に黒の文字を使用しています。
海外のデザインやアート関連のサイトっぽく好きな雰囲気です。
画像やフォント、シェイプなどの要素は大きめに感じます。商品画像自体がデザイン性が高いこともあり大きめに見せている？
セクションごとの余白は小さめに感じます。カラーで分けていることもあり空けすぎないくらいがちょうど良さそうです。
スクロールすると下から現れるアニメーションを全体的に使用しています。
単純にスクロールしたくなるのと、現れる要素に注目がいくので縦長のサイトに合っているのではと思います。
ホバーで画像が角丸になるアニメーションが可愛い。シンプルなようで意外と思いつかない気がして良いなと思いました。
■アート性を高く感じる要素
・不規則なシェイプ
・Helvetica系のゴシックフォント
・デザインされた商品画像
・グレーやベージュ背景×黒
割とモダンな印象のHelvetica系フォントやカラー（黒や白は#000000#ffffffでパッキリとした色）が使われていることが多い。
これら一つだけではあまり効果がなくうまく掛け合わせることでアート性を感じるように思います。
ぜひ実際のサイトもご覧ください。
