こんにちは、プロクラスの杉本です！
サイトを制作していて、デザインの表現や自身がデザインした作品の言語化がうまく出来なかったりすることってありますよね。
そこで今回は参考サイトの「デザイン分析」を行ってみたいと思います！
目次
WEBデザイン分析
今回は、はじめての分析だったことから株式会社GIG様の「WEBデザインインプット術」の記事を参考に分析をさせて頂きました。
今回分析する参考サイト
株式会社 安藤七宝店様のWebサイトを分析させて頂きました。
https://www.ando-shippo.co.jp/
では早速分析していきます！
【Step1】デザインをパッと見たときの印象を言語化する
「上品」「高級感」「信頼感」「親しみ」を感じました。
SANKOU!では、安藤七宝店公式Webサイトは「上級感」「上品」「誠実･信頼感」のカテゴリに属しています。
【Step2】ロゴ・文章・写真からブランド理解を深める
文章からは、よく「伝統技術」や「七宝表現」といったキーワードが出てくることから「七宝という技術の価値」を伝えたいのではないかと感じました。
また、創業明治13年からつづく七宝の歴史や七宝焼の可能性をひろげると記載があることから「七宝焼を未来へつなぐこと」が信念やコンセプトなのではないかと思います。
ロゴからは、全体的にシャープ過ぎず、丸過ぎていない印象から「誠実さ」を感じることができます。
また文字間隔を広めにとられているのことから「高級感」も感じられます。
また職人さんの手元がアップされた写真や七宝焼のアップの写真から七宝焼の表現技法・伝統技術の価値や技術を知ってもらいたいのではないかと思います。
【Step3】レイアウト・余白を分析する
機能面
・セクションごとで背景色が変わることで、セクションの違いが分かりやすい。
・セクションの合間に横幅いっぱいの画像が敷かれているため、間延びせずに見ることができる。
・タイトルが左寄せ、テキスト・画像が右寄せにしたズラシのレイアウトによって目線の移動は多いが、飽きずに見ることができる。
・画像がリンクボタンになっていたり、リンクをホバーした時に画像が浮き上がったりすることで、視覚的にリンク先がイメージできる。
・写真の上下左右に余白が広めにとられていることで、写真の情報が入ってきやすい。
情緒面
・余白が広めにとられていることで、落ち着いた・余裕・高級感を感じる印象。
・写真を大きく使用されていることで、七宝焼の美しさが全面に伝わる。
・セクションの中の要素が左右に揃っている分、誠実感を感じる。
全体的に広い余白がとられていることで、七宝焼のもつ「高級感」や「上品さ」を表現しているのではないかと思います。
またレイアウトは、目線の移動が多いですが、要素の左右が揃っていることから「信頼感」を生み出すことが出来ているのではないかと感じます。
またダイナミックな写真使いは、七宝焼の世界がもっと広がり、伝統技術を未来へつないでいきたいという想いが伝わってきます。
【Step4】色味を分析する
機能面
・白色やグレー色を基調することで、七宝焼の写真が引き立つようになっている。
また七宝焼の情報が入ってきやすい。
・落ち着いたトーンの色使いであることから、長時間見ていても疲れない。
・赤色はボタンを押しているという役割を果たしている。
情緒面
・白色やグレー色を基調することで、「誠実感」「上品さ」を感じる。
・落ち着いたトーンの色使いであることから、「上品さ」「親しみ」を感じる。
・差し色として赤色を入れることで、安藤七宝店らしいブランドの個性が強く印象づけられていると感じる。
【Step5】フォントを分析する
機能面
・文字間隔と行間が広めにとられていることから読みやすい。
・全体的に文字が大きく、読みやすい。
情緒面
・タイトルやテキストに明朝体を使用することで、「高級感」「信頼感」を感じる。
・タイトルなどで使用されている欧文フォントは丸めの細めのゴシック体で、「上品さ」もありながら「親しみやすさ」も感じる。
全体的にやわらかく上品なフォントで統一されており、サイトの「親しみやすさ」や「落ち着き」といった世界観をより強めていると感じました。
また装飾の強い書体ではなく、繊細で読みやすいフォントを使用することで、七宝焼の丁寧で上質なイメージを自然に伝えているのではないかと思います。
【Step6】あしらい
・丸みのある特徴的なあしらいで統一することで、「親しみやすさ」を感じる。
・使用するあしらいの線が、細めでまとまっているため、「上品さ」を感じる。
サイト全体のあしらいは、丸みを帯びた形や細い線を使用しており、「親しみ」「上品さ」を感じます。
【Step7】アニメーション
・ホバーアニメーションは、少しスピード感のある演出で、「スタイリッシュさ」を感じる。
・ふわっとタイトルやテキストが表示される演出は、「優しさ」「上品さ」を感じる。
全体的には穏やかなアニメーションで統一されていますが、ホバーアニメーションは少しスピード感を持たせることで、ほどよいコントラストを生んでいるのではないかと感じます。
感想・まとめ
今回、はじめて7つのSTEPを踏んで分析してみて、普段はさらっと見てしまうデザインも、じっくり観察してみると、デザイナーのこだわりや「どうしてこの形にしたのだろう？」という工夫が見えてきて、とても面白いなと思いました。
デザイン分析をすることでデザインの表現方法を学ぶことができ、デザインを言語化して説明する力が少しついた気がします。
次回は、また違ったテイストの参考サイトをデザイン分析してみたいと思います！