今回は全国の和菓子屋さんの中から、和風であったり、可愛らしさであったり、様々な特徴をもった、素敵なホームページデザインとなっているお店をピックアップしてみました。
和菓子とえば、その名前な通り和風なんですが、ホームページのデザインではかなりたくさんのアプローチ方法があるのだと感じさせられるのではないでしょうか。
これからホームページをリニューアルや新規立ち上げをしようと考えている方は、ぜひ参考にしてみてください。
熊本むらた
美しい写真を大胆に使ったレイアウトが特徴的なホームページです。ページを読み込む際に、一瞬ローディングアニメーションが流れるのですが、そのアニメーションもきちんとこだわっています。全体的にシンプルでクセがなく、多くの和菓子店が利用できそうなデザインとして参考になるのではないでしょうか。
三勇堂菓子舗
和菓子は洋菓子に比べて、その作る工程にフォーカスが当たることが多いです。その点を利用した美しいムービーからスタートするホームページデザイン。職人さんが丹精込めて作っている様子はお客様にもその真心が伝わるのではないでしょうか。当主のお写真も正面を向いた証明写真のようではなく、仕事中の後ろ姿というのもまたかっこいいですよね。
和菓子このわ
全体的にシンプルでミニマルにぎゅっとまとまった印象のWebデザインです。縦書きと横文字を織り交ぜることで、シンプルながらもレイアウトで飽きさせないような工夫をしています。スポットで縦書きを利用することはよくあるのですが、メニューが右側にあって、しかもそれが縦書きというのは珍しいのではないでしょうか。
弁才天
https://benzaiten-daifuku.jp/#page1
シックでかっこいい雰囲気で、逆にフルーツの可愛らしさを引き立てています。一枚一枚スライドがめくられるようなアニメーションで、見せたいものをしっかりと中心で見せるという工夫がされています。全体を縦書きで統一しているので、こういった場合のボタンは横にするのか縦にするのか（ページの戻る進むボタンなどは基本横移動なので）、とても悩んだと思いますが、今回は縦型のボタンが採用されているようです。
翠江堂
こちらのホームページでもっとも面白かったのは、珍しいスタイルの３カラムレイアウトが採用されているところです。もちろんブラウザサイズによってカラム数は変わるのですが、それぞれのウインドウ幅で、効果的に余白を利用しようとしている姿勢が素晴らしいと思いました。トップページもそうですが、店舗情報ページなどが特に顕著で、店舗情報と地図とメニューがワイドスクリーンではひと目で見られるように工夫されています。
くわざわ
可愛らしい和菓子の写真が、これまた可愛らしいアニメーションとともに順に移動していきます。こういった遊び心やクリエイティブ性があると、きっと販売されている和菓子にも工夫があるんだろうなと想像を掻き立てられます。見出しなどでも「自慢」をあえて「じまん」とすることで、可愛らしさや雰囲気の演出に貢献しています。
まるもち家
全体を丸の世界観で統一したデザインです。ただ、そこは和菓子ですから、たとえばおまんじゅうなどは正方形型ではありませんよね。柔らかい形の丸まど、様々な丸が効果的に利用されています。また他には、トップページにカレンダーが掲載されており、イベントなどがわかりやすくまとめられているのですが、Googleカレンダーをべた張りするというわけではなく、きちんとホームページ全体のデザインに合わせてカレンダーもデザインされている点が素晴らしいなと思いました。
青柳総本家
https://www.aoyagiuirou.co.jp/
老舗のお店ではありますが、デザインについてはかなりチャレンジしていて、このあたりからも企業精神が伺えます。パット見は和風のイラストがただ並んでいるように見えますが、オンマウスをすると、それぞれのイラストが水たまり？のようなアニメーションとともにフォーカスされて、各ページに遷移できるような工夫もされています。また各ページには番号が振られていて、全体を見てもらえるような他の番号のページも見たくなるような仕掛けがあるのも印象的でした。
青木屋
ファーストビューではそこまで尖ったデザインは現れないんですが、スクロールをすると独特の世界観のイラストとともに、コンセプトが紹介されて、かなり印象に残りました。またサイト全体としても様々なカラーが登場して、見ていて飽きないような工夫がされています。
銀座菊廼舎きくのや
https://www.ginza-kikunoya.co.jp/
全体をレトロな雰囲気で統一したWebデザインです。黒色でシックな感じもレトロな雰囲気とマッチしていて素敵です。個人的には店舗情報ページに掲載されている手書きの地図があるのですが、それがまた味のある地図になっていて、こうったところまでこだわってデザインされているのが良いなと感じさせられました。
三原堂
https://ikebukuro-miharado.co.jp/
ページの背景に登場するイラストが独創的で、また世界観を引き立てています。ほとんどのユーザーが文字などの情報を見ると思いますが、こういった細かい雰囲気の積み重ねとでもいうんでしょうか、こだわりがサイトの世界観を引き出しているのだと改めて感じさせられるホームページデザインです。特に商品紹介の部分で、１つ１つの商品を枠やスペースで区切るのではなく、さりげなく背景の模様で区切るあたりも、自然な目線誘導ができていて素晴らしいと思いました。
つるたま
トップページに大きく配置された「つるたま」というやわらかな手書き風の文字と、カラフルな色使いがとても印象的でした。和菓子というと、渋くて落ち着いた雰囲気を想像しがちですが、このサイトは良い意味で期待を裏切るポップで親しみやすいデザインになっていて、見ていてワクワクした気持ちになりました。背景の淡い色と、可愛らしい和菓子の色合いのバランスが絶妙で、商品の魅力が直感的に伝わってきます。伝統的な良さを残しつつも、若い世代にも「可愛い！食べてみたい！」と思わせる、現代的でキャッチーなデザインだと感じました。
高山堂
サイトのトップに並ぶ和菓子の写真がとにかく美味しそうで、お菓子の質感や素材感までリアルに伝わってくるようでした。「さくさく」「ほこほこ」といった食感を表現する言葉の選び方もおしゃれかつ秀逸で、シズル感があり、見ているだけでお茶と一緒に食べたくなります。全体の色使いも明るくポップで、余白を広めにとったスッキリとしたレイアウトがおしゃれです。和菓子の伝統的で丁寧なイメージをしっかり残しながらも、日常のおやつとして親しみやすく、とても温かくて楽しい気持ちで見られるバランス感覚が素晴らしいサイトでした。
扇屋
「扇谷」という店名を美しく模したファーストビューの写真の切り口が非常に印象的で一瞬で見る人を独特の世界観へと導いてくれます。和菓子屋の歴史と格式を語るような縦書きの明朝体は、シンプルな白の背景に美しく馴染み、凛とした上品さを感じました。定番商品の写真を余白なく画面いっぱいに配置することでお菓子の質感や模様の美しさがダイレクトに伝わり強いインパクトを与えると思います。またお菓子の全体像が綺麗に収まった正方形の写真とのコントラストが絶妙で、視覚的な楽しさを生み出していました。ふわっと動くアニメーションの心地よいリズムも合わさり、見ていて飽きないホームページだと感じました。
日の出屋製菓
https://www.hinodeya-seika.net/
写真の彩度が柔らかく、落ち着いた色調で統一されているため、あたたかみが感じられます。商品が左右に流れるアニメーションがサイトに心地よいリズムを作り出しており、直感的に気になった商品を押せばすぐに詳細ページへ飛ぶことができる操作性の高さが魅力に感じました。全体の商品画像の並びやサイトの枠組みが直線的に構成されているのに対し、おせんべいや缶、CTAボタンには優しい丸みが持たされており、その対照的なギャップがとても良いと思いました。また、商品単体の写真よりも「人の手」が映り込むことで、人のぬくもりや丁寧に作られているストーリーが伝わってきます。