4.「 シュガークラフト&ウエディングギフト　poupée -プーぺ」のホームページ　#1日1サイトレビュー

こんにちわ、ayakaです。

今回は、シュガークラフトとウエディングギフトの専門店「シュガークラフト&ウエディングギフト　poupée -プーぺ-」のホームページをレビューさせていただきます！

poupée［プーペ］ | 大阪・北摂のシュガークラフト専門店

サイト選びは下記から行いました。

Web Design Clip | Webデザインギャラリー・クリップ集

レビュー

⓪このサイトを選んだ理由: 

・上記で挙げた "Web Design Clip" にて２番目に最新で、かつ店舗の公式サイトであったため、今までレビューした企業サイトや企業のブランドサイトなどのカテゴリーとは、一味違う学びができると考えたから。

・ファーストビューにて、新郎新婦がガーデンを歩く写真に加え、その右に新郎新婦の柔らかい色がついたフィギュアの写真があり、そのフィギュアが心に残ったから。

① サイト概要:

・ニュース

・プーペのサービス概要と利用方法の紹介

・過去の販売実績を掲載したギャラリー

・タルト商品の紹介

・アクセス

・店舗紹介

・オンラインストア

② 目的:

・店舗又はオンラインショップにおける、シュガークラフトやタルトの販売促進

③予想ターゲット層:

・結婚式を行う予定の新郎新婦、出産を控える夫婦、１万円以上の高額な予算又は4,000円程度の予算をかけて結婚後に毎年の結婚記念日やお互いの誕生日を祝いたい夫婦

・結婚する年齢を踏まえると、上記に該当する年齢層は主に20代から30代だと考えられる。

・ホームページの背景は柔らかいオレンジと白で、かつ柔らかい色の写真が多いため、女性向けのデザインと考えられる。しかし男性が女性側にもてなすためにスイーツ店を探す可能性も考えられるため、性別は男女両方がターゲットであると予想する。

④全体の印象:

・新郎新婦や赤ちゃんの実際の人物写真とクラフトの写真が並べられているので、人物写真がクラフトでどう再現されるのかが一目で分かるので、ファーストビューを見た段階で、サイト全体で見ても分かりやすいサイトになっていると予想できた。

・ホームページ全体を全て見る前にフーペが提供するサービスの雰囲気が掴めるので、閲覧者はサービスの雰囲気をいち早く把握することで購買するか否かを早く決定できる。その決定で購買する人が増えると、早期にプーペの売上増加につなげることができるので、販売促進に大いに貢献する可能性があるサイトだと思った。

・ファーストビューの後は、プーペのコンセプト紹介、過去の実績紹介、クラフト以外の販売商品紹介、アクセスと続き、閲覧者の思考プロセスを先読みしてサイトの構成を考えている印象を受けた。閲覧者の求めたい情報を順序も意識して掲載されているため、閲覧者思いのサイトになっている。

⑤配色:

（左から白、ローズホワイト、灰色）

・アクセスのコンテンツの背景: 灰色

・アクセスとaboutのコンテンツ以外の背景:白とローズホワイトのうち一方

・aboutのコンテンツの背景: 白枠で囲んだ見出し・本文の外側にローズホワイトの背景

参考: https://www.htmlcsscolor.com/hex/FBEEE8

⑥フォント:

・全見出しの生クリーム絞り袋のイラスト、全見出しの英語、全てのmoreボタン、contactボタン、online storeボタン、コピーライト表記: minion-pro

・ファーストビュー、ニュース一覧の各ニュースの日時、全見出しの「___」、about、gallery&story、tartコンテンツの小見出し、ryo-text-plusn

・ニュース一覧の各ニュースのタイトルと、about、gallery&story、tart、accessコンテンツの本文、メインコンテンツの最下部の中でcontactボタン・online storeボタン・コピーライト表記以外全て: ryo-gothic-plusn

⑦余白:

・各コンテンツごとの余白が大きく、コンテンツごとの区切りが明確である。

・各コンテンツ内の大見出しと小見出しの間、小見出しと本文の間の余白が大きく、見出しと本文の区別がしやすい。

⑧競合サイト: 

【お菓子のアトリエ】オリジナル シュガークラフト専門店

https://okashi-atorie.com/

オーダーシュガークラフトケーキ専門店　Sweet Art　結婚式・ウエディング・ブライダル・パーティ・オリジナルケーキ

ケーキとシュガークラフトのお店 Candy Apple

2019年11月1日（金）

⑨このサイトのデザインから学べる事:

・ファーストビューで複数の写真を映す方法として、複数枚を横にスライド表示する形式以外には、複数の写真の一部を横に並べてそれぞれ縦に自動スライドさせることで別の写真も表示する形式もあること。

後者の形式の注意点は、サイトの最も伝えたい雰囲気と関係ない写真を混在されないことである。混在させてしまうと、前者の方法よりも早く全ての写真を閲覧することになるので、閲覧者はファーストビューを見ても何についてのサイトなのかが分かりにくいと感じる。結果、サイトを見る意欲を消失してすぐに他のページにジャンプする可能性がある。

・見出しと本文の文字の大きさだけではなく、フォントも別々にすることで視覚上の区別が更にしやすくなること。

・メインコンテンツ全体で見ると、背景に同じ色を複数回用いているとしても、隣接したコンテンツ間で背景の色を別々に設定しているだけで、コンテンツ間の区別がしやすさは確保できる。

つまり、背景の色でコンテンツを区別するためには、５個のコンテンツにつき５色も選択する必要はなく、２色から4色で良いということ。

・コンセプトを伝えるコンテンツ(今回だとaboutのコンテンツ)だけ、小見出しに英語の筆記体を記載するなど、他のコンテンツでは行っていない記載の仕方をすることで、特定のコンテンツに特別感を付与できること。

・サイト全体を見てもらうには、ファーストビューを低ストレスで見やすいものにすることが一番大事であること。ファーストビューの印象がサイト全体の印象に直結するため。

PC版サイトの外観

iOS版サイトの外観(PC版との相違点のみ)

参考サイト

記事作成にあたり上記で示したサイトの他、下記のサイトを参考にさせていただきました。

参考になるサイトを作成して下さった皆さん、ありがとうございました。

https://note.com/sasasakura/n/ne0aea7f379a4

https://www.houzz.jp/ideabooks/73027541/list

デザインを綺麗に見せる余白！～デザインの基礎～ – 東京のホームページ制作 / WEB制作会社 BRISK

最後までお読みいただき、ありがとうございました。