和カフェ向けWordPressテーマ「HaruSaji」を作り始めた理由｜静かな世界観の設計
WordPressテーマ「HaruSaji」を作り始めました。
HaruSajiは、和カフェや小さなお店、古民家を活用した店舗などをイメージして作っているWordPressテーマです。
テーマを作ろうと思ったきっかけは、地方で訪れた古民家系のアイス屋さんや旅館でした。
古い建物を活かした空間、木の質感、やわらかい光、器や季節の食べ物。派手ではないのに、そこにいるだけで落ち着くような雰囲気があります。
そのときに感じた空気を、ホームページでも表現できたらいいなと思いました。
HaruSajiで目指しているのは、侘び寂び。情報をたくさん並べることでよりも
シンプルにお店の空気感や、そこで過ごす時間の心地よさが自然に伝わることを大切にしたい。
HaruSajiを作ろうと思った背景
WordPressテーマを探していると、機能が豊富で見た目もきれいなテーマはたくさんあります。
ただ、小さなカフェや旅館のように、世界観を大切にしたいお店にとっては、機能が多すぎることで「どこを触ればいいのかわからない」と感じることもあると思います。
また、テーマによっては動画をトップページに表示するために別のプラグインが必要だったり、細かな設定が必要だったりします。
WordPressに慣れていない人にとっては、最初の設定だけでも少しハードルが高くなりがちです。
自分自身も、動画を使ったトップページには少し使いにくいイメージを持っていました。
- 動画を表示するために追加のプラグインが必要になる
- 設定項目が多く、初心者にはわかりにくい
- 動画が再生されないと、デザイン全体が崩れて見えることがある
- 見た目は印象的でも、お店の情報へたどり着きにくい場合がある
だからこそ、「動画を使えるけれど、動画に頼りすぎないテーマ」を自分で作ってみたいと思いました。
動画はあくまで、お店の雰囲気を伝えるための要素です。
動画が再生されない環境でも、写真と文字だけで必要な情報が伝わり、デザインが崩れないことを前提にしています。
「季節を、ひとさじ。」というコンセプト
HaruSajiのコンセプトは、「季節を、ひとさじ。」です。
季節の食材を使ったお菓子や飲み物、窓から入る光、木のテーブル、湯気の立つお茶。
日常の中にある小さな季節感や、少しだけ気持ちがほどける時間を、サイトのデザインにも取り入れたいと考えました。
そのため、強い装飾や大きな動きで目を引くのではなく、余白・文字・色のバランスを整えながら、静かな印象を作ることを意識しています。
想定しているのは、和カフェや小さなお店
HaruSajiは、たとえば次のようなお店をイメージしています。
- 古民家を活用したアイス屋さんやカフェ
- 日本茶、和菓子、珈琲を扱うお店
- 地域の食材や季節のメニューを大切にしている店舗
- 小規模な旅館、宿、ゲストハウス
- 作家さんや地域とつながる小さなショップ
こうしたお店のホームページでは、情報を詰め込みすぎるよりも、「どんな場所なのか」「どんな時間を過ごせるのか」が最初に伝わることが大切だと思います。
営業時間やアクセス、メニュー、お知らせといった情報はもちろん必要です。
ただ、それらの情報を見る前に、「ここに行ってみたい」と感じてもらえる空気感も同じくらい大切です。
HaruSajiは、デザインを優先するだけのテーマではありません。
お知らせやページを更新しながら、お店の情報をきちんと伝え続けられることも大切にしています。
配色・フォント・余白で作る静かな印象
HaruSajiでは、和の雰囲気をそのまま強く出しすぎないように、少し現代的でやわらかい色を選びました。
- 背景：生成り
- 本文・見出し：墨
- メインカラー：利休鼠
- 補助色：栗皮茶
- アクセント：柿渋
真っ白や真っ黒ではなく、少しだけやわらかい色を使うことで、紙や木、器のような落ち着きを感じられるようにしています。
見出しには明朝系のフォント、本文やメニューには読みやすいゴシック系のフォントを使う想定です。
見出しで少しだけ品を出しながら、本文は長く読んでも疲れにくいように整えています。
そして、HaruSajiで特に大切にしているのが余白です。
文字と文字、画像と見出し、セクションとセクションの間に少し余白を持たせることで、急がせない画面を作りたいと考えました。
ヒーロー動画は「最初に見せる」ためではなく、空気感を伝えるために使う
トップページには、動画またはポスター画像を表示できるようにしています。
動画を使う場合は、料理を仕上げる手元、湯気、窓から入る光、風に揺れるのれんのような、動きの控えめな映像を想定しています。
大きく動く映像で注目を集めるためではなく、サイトを開いた瞬間にお店の空気を少し感じてもらうための動画です。
ただし、動画があることで使いにくくなってはいけません。
そのため、動画が読み込まれる前や、端末の設定によって動画が再生されない場合でも、ポスター画像を表示して見た目を保てるようにしています。
動画が再生されなくても、写真・コピー・導線だけでトップページが成立すること。
これがHaruSajiのヒーロー設計で大切にしている考え方です。
トップページは、迷わず情報へ進める導線にする
HaruSajiのトップページは、最初に世界観を伝え、そのあとに必要な情報へ自然に進める流れで考えています。
- ヒーローで、お店の空気感と短いコピーを伝える
- コンセプトで、どんなお店なのかを紹介する
- お知らせで、営業時間や季節のメニュー、イベント情報を届ける
- メニュー、店舗案内、アクセス、問い合わせなどのページへ案内する
最初に動画だけがあり、何をすればいいのかわからないサイトにはしたくありませんでした。
雰囲気を感じてもらいながらも、営業時間を確認したい人、メニューを見たい人、場所を調べたい人が、すぐに目的の情報へ進めること。
デザインと使いやすさのどちらも諦めないことが、HaruSajiを作るうえでの軸になっています。
まとめ
HaruSajiは、地方で訪れた古民家系のアイス屋さんや旅館で感じた、静かで心地よい時間をヒントに作り始めたWordPressテーマです。
動画を使えること、見た目がきれいなことだけを目指すのではなく、WordPress初心者でも扱いやすく、動画が再生されないときにも情報がきちんと伝わるテーマにしたいと思っています。
次回は、HaruSajiに実装した機能について、お知らせ投稿、本文デザイン、案内BOX、Contact Form 7への対応などを中心にまとめる予定です。
楽しんでください！！
ではまた〜
