Webデザイン制作の初心者さんは「他のサイトをデザインの目を養おう」とよく言われますよね。
また、長年Webデザインをしている人も、日々トレンドが変化していくので他のサイトをチェックすることは大切ですよね。
この記事では、私が気になったサイトのサイトレビューをしていきます。
このレビューを一つの視点として、Webデザインの参考になればうれしいです。
1. Webサイト紹介と第一印象
画像出典：本と美容室
1-1. Webサイト紹介
今回は『本と美容室』という本屋さんと美容院のお店のWebサイトをレビューしました。
なぜこのサイトを選んだのか？というと、私の感覚では、美容院のWebサイトはどちらかと言うとナチュラルでシンプルな印象のサイトが多い傾向です。
しかし、このWebサイトは本屋も兼ねている特性を生かしたポップで華やかさが印象的だったので選びました。
【基本情報】
| 名称 | 本と美容室 |
| URL | https://book-and-hair.com/ (※)サイトのデザインは変更されている場合があります。 |
| 推定公開時期 | 2022年 |
| 推定ターゲット層 | 求職中の美容師、店主になりたい人、店舗利用者/見込み客 |
| レビュー時のディスプレイ解像度 | 1920 x 1080px |
1-2. Webサイトの第一印象
まず、このサイトの全体的な第一印象を5つの軸で表しました。
第一印象は「美容院のサイトらしくないな。本と掛け合わせることで新しいワクワクをポップさで表現しているのかな。どんなことが書いてあるのか読んでみたくなるサイトだな。」でした。
これは配色と近代的なイラストが影響しているように感じました。
この第一印象の理由を文字と色、レイアウト、ナビゲーションの4つの観点からもう少し詳しくサイト分析していきます。
2．文字のフォントとサイズ
■文字のフォント
見出しと「VIEW MORE」で『Yeseva One』、その他で『TsukuAOldMinPr6』が使われています。
Yeseva Oneの「Yeseva」とは、”Yes, Eva”を略した言葉で、Evaという女性への愛情表現という意味です。
フォントの特徴は、女性的なのでファッションや美容のデザインで使われるのに向いているとされています。
装飾的なので長文には向いていませんが、このサイトのように見出しで使うことでデザイン性を出すことができます。
TsukuAOldMinPr6の「Tsuku」は開発元の筑紫書体シリーズの略、「A」はOpenTypeのAフォーマット版、「OldMin」はオールド明朝体(Old Mincho)を意味します。
フォントの特徴は、筆文字の風合いが感じられる柔らかくて優雅な明朝体です。
このサイトはこのフォントで本の書籍を表現しているのかもしれません。
■文字の大きさ
見出し(H2)は他の文字との区別がしっかりできる70pxです。
この文字サイズは通常、長文になると読みにくくなることもあります。
しかし、短い英単語で統一されており、サイトのイラストの一部のような表現になっています。
説明文は15pxなので、一般的な文字サイズです。
H3は25pxで、説明文の約1.7倍となっており、こちらも区別しやすい一般的な文字サイズになっています。
そして、VIでW MOREという文字はH3の見出しとやや近い大きさの22.5pxにすることで、メインページ内のそのコンテンツの終わりであることと、ここをクリックすると詳細ページに移動することがわかりやすくなっています。
■文字のフォントとサイズのまとめ
| 注目箇所 | 文字フォント | 文字サイズ |
| H2 | Yeseva One | 70px |
| H3 | sukuAOldMinPr6 | 25px |
| 説明文 | sukuAOldMinPr6 | 15px |
| VIEW MORE | Yeseva One | 22.5px |
3. 配色
■イラストの配色
このサイトで印象的なのは、メインページを開いて最初に出てくるイラストです。
このイラストのテイストのイラストや配色がページのあらゆるところでも使われています。
この配色はライト・ソフト・ブライトトーンで、浅い・柔らかな・明るい印象を与えられるのが特徴です。
トーンの配色はトーン同士が離れていると対称性が出てきて、隣り合うトーンを組み合わせると共通性が出ます。
このサイトは隣り合うトーンを組み合わせることで共通性を出して柔らかで明るいイメージが印象付き易くなっているのだと考えられます。
また、色が単色でなく明度のグラデーションになっていることで、それぞれのトーンのイメージを強調しすぎない自然なイメージになっています。
PCCSトーン部の出典：DCIカラーデザイン株式会社
■文字の配色
文字は基本的に黒色(#0000)になっています。
サイトの文字は濃いグレーにすることが多いのですが、このサイトは黒となっています。
例えば、このサイトの文字を濃い灰色(#333333)にすると、柔らかいイメージになります。
ただ、このサイトのポップなイメージを出すには灰色より黒があっているように思いました。
また、文字のフォントが明朝体でゴシック体より可読性が低くなる傾向なので、黒色を採用することで背景とのコントラストを高め、可読性を高めているのかもしれません。
4. レイアウト
■全体の構成
私は第一印象で「美容院のサイトらしくないな。」と感じました。
その理由は、美容院のサイトは下画像のようにメニューや髪型のサンプルを載せていることが多いのですが、このサイトはそのような美容院サイトでよくみられる要素が少なかったからです。
しかしその代わり、最初にコンセプトが書かれていることで、この美容院自体に興味が湧くような構成だと思いました。
画像出典：Hair MADA
■図やイラストのレイアウト
サイトを開いて最初に出てくるのがサイトを象徴するイラストです。
線の柔らかさや輪郭の細さから温かみを感じられます。
また、各見出しではグラデーションや丸みのある形や四角い形の背景が使われています。
敢えて背景の色や形を統一しないことで中立的に感じます。
5. ナビゲーション
画像とVIEW MOREどちらからでもページ移動できるようになっています。
また、マウスオーバーすると画像拡大や下線表示されることで、視覚的にもページ移動できることがわかるようになっています。
Webサイトレビューのまとめ
今回は本と美容室のWebサイトをレビューしました。
このサイトはこの美容院の特色(コンセプト)をイラストや配色で表現されているのが印象的でした。
「私はそう思わない」という意見の人もいたかもしれません。
見る人の感性によって感じ方は変わるので、このレビューを一つの視点としてとらえてWebデザインの参考にしてもらえればうれしいです。
