Web Design Analysis Vol.1
こんにちは！須藤です。
これから会社のブログを活用させていただき、デザインの勉強としてWEBサイト分析を始めさせていただくことになりました！まさかこのような機会をいただけるとは思っていなかったので、少しドキドキしております…笑
そもそも、なぜサイト分析を始めようと思ったきっかけですが、弊社の代表である祐樹さんからデザインの勉強方法についてアドバイスをいただいたことが始まりでした。そして、何より、自分のWEBデザインに対する知識がまだまだ浅く、また「なぜそのようにデザインにしたのか？」とデザインをお客様に説明するにあたり言語化する力も身につけたいと考えたからです。WEBサイトは普段から見ていますが、ザッと目を通すことがほとんどだったので、サイト分析として隅々まで見ることで新しい発見がたくさんあり、とても勉強になりました！
では、どうぞ温かく見守っていただけましたら、幸いです！よろしくお願いいたします！
※模写に挿入し使用しました画像は、ネットで検索したフリー素材の画像を使用させていただいております。不都合がございましたら取り下げますので、ご連絡いただけますと幸いです。
今回、分析させていただいたサイトは、「Chocolaphil」さんのサイトになります。
サイトについて
「chocolate（チョコレート）」と「phill（愛でる）」を組み合わせた「Chocolaphil（ショコラフィル）」という、ガトーショコラを店舗とWEBで販売されている企業のサイトになります。販売しているガトーショコラがどのような商品なのか、販売店舗、ブランドについての詳細、オンラインショッピングなど、訪問してきたユーザーに対していかに商品に興味を持ってもらい購入まで繋がるのか、そのような点に着目しサイトを閲覧させていただきました。
なぜこのサイトを選んだのか
WEBの参考サイトを見ていた際に、アイキャッチ画像にもchocolaphilのブランドカラーでもあるウルトラマリンが使用されており印象に残ったこと、また、実際サイトを開いた時、デザインのレイアウトの組み方がシンプルな部分にも惹かれこちらのサイトを選びました。
デザインについて
サイトの方向性
全体的に色味・フォント・写真のレイアウトから、シンプルなサイトだと感じました。また、商品写真の撮影に力を入れているのが分かり、FVでは商品写真がテンポ良く切り替わり、企業のメイン商品であるショコラを一番に魅せるという意図が伝わって来ます。今まで自分が拝見したお菓子のWEBサイトは色味をたくさん使用していたり、デザインの装飾が多いサイトを目にする事が多かったので、シンプルなお菓子のサイトを拝見でき勉強になりました。
使用されているフォント
英語テキスト
・Bodoni Classico
・Neue Haas Grotesk
日本語テキスト
・Noto Sans JP
・Noto Serif JP
使用されているフォントは、英語・日本語テキストを合わせて計4種類でした。
Chocolaphilのイメージは可愛いというより、シンプルでクールなイメージだと汲み取れました。
レイアウト
企業がユーザーに一番に見せたいのは商品なので、商品写真が多く配置されていました。
TOPの商品を紹介する写真が商品の中身写真と全体写真の2枚が重なって配置されており、クリックすると切り替わるデザインになっているのですが、今後デザインのレイアウトの参考にさせていただこうと思いました。また、サイト内にブランドカラーや商品のパッケージについての詳しいデザインの説明が記載されており、商品の細部までトータル的にとても考えられている事が分かりました。
色
サイトを初めて拝見した際、鮮やかな青色にも目を惹かれました。この鮮やかな青色は、ブランドカラーとなる「ウルトラマリン」だそうです。サイトの全体的な色味もウルトラマリンと白のみで構成されていて、ウルトラマリンは結構強みがある青色だと感じたので、そちらに視線が誘導されてしまいそうだなと個人的に思ったのですが、メイン商品のガトーショコラの存在を邪魔する事なくマッチしており、色の配色についても勉強になりました。
写真
商品のガトーショコラ、ブランドカラーであるウルトラマリン、パッケージのシルバーの組み合わせがとてもマッチしており、見ていて美しいと感じました。また、物を配置した際の写真の構図、光が当たっている方向、商品を綺麗に見せる持ち方など、今後、制作物の撮影をする際の参考にさせていただこうと思いました。
模写してみた
実際にPC、SPとサイトを模写してみました。
・商品の詳細欄のフォントや級数の扱い方（値段の表記など）
・ユーザーが見やすい読みやすい、写真や文章の配置
・全体のフォントの使い分け
・画像の切り替わり
など、デザイナーによってデザインルールは変わって来ると思うのですが、やはりデザインの基礎が分かっているからこそ、オリジナリティのあるデザインが作れるんだなと思いました。目で見て学ぶこともありましたが、実際に模写して見ないと分からないこともありました。
最後に
今までWEBサイトのデザインの勉強をする際はバっと眺めて「このレイアウトが綺麗、この色づかいが素敵」と頭では覚えていたのですが、実際サイトを拝見しつつ、模写をすると細かいデザインまで気づく事ができ、とても勉強になりました。
Chocolaphilさんのサイトを拝見し、実際に商品を購入してみたいと思いました。