WordPressテーマ「HaruSaji」に実装したこと｜お知らせ・本文デザイン・フォーム対応
前回は、和カフェや小さなお店をイメージしたWordPressテーマ「HaruSaji」を作り始めた理由と、デザインの考え方について書きました。
今回はその続きとして、HaruSajiに実装した機能や、運用しやすくするために考えたことをまとめます。
テーマを作るときは、トップページだけがきれいに見えても、その後に投稿や固定ページを追加したときにデザインが崩れてしまうと、なかなか使い続けにくいと思います。
そのためHaruSajiでは、トップページの印象だけではなく、日々のお知らせ、店舗案内、メニュー、問い合わせページなどを無理なく更新できることも意識して作りました。
トップページの主要な項目は、カスタマイザーから調整できるようにした
お店のホームページでは、ロゴやメインビジュアル、キャッチコピーなどを変更したくなる場面があります。
しかし、そのたびにテーマファイルを直接編集するのは、WordPressに慣れていない方にとっては少し不安がある作業です。
そこでHaruSajiでは、トップページで特に重要になる項目を、WordPressのカスタマイザーから調整できるようにしました。
- サイトロゴ
- ヒーローエリアの動画・ポスター画像
- メインコピー
- コンセプト文
- お知らせの表示
最初にテーマを有効化したあとも、店舗ごとの雰囲気に合わせて少しずつ整えられるようにしています。
テーマを使う人が必要なのは、細かなコード設定ではなく、まず「自分のお店らしい見た目にできること」だと思います。
触る場所を必要なところに絞ることを意識しました。
日々の情報を届けるために「お知らせ」を用意した
カフェや旅館、小さなお店のサイトでは、営業時間の変更、季節限定メニュー、イベント、臨時休業など、日々更新したい情報があります。
こうした情報を固定ページへ追記していくと、古い情報と新しい情報が混ざってしまい、見る人にとっても管理する人にとってもわかりにくくなります。
そこでHaruSajiでは、通常のブログ投稿とは別に「お知らせ」を管理できるようにしました。
登録したお知らせは、トップページに新しい順で表示できます。さらに、お知らせ一覧ページや個別ページも用意しているため、必要に応じて過去のお知らせも確認できます。
- 営業時間の変更
- 季節限定のメニュー
- 催し・イベントの案内
- 臨時休業のお知らせ
- 新商品の紹介
トップページの見た目を崩さずに、必要な情報をきちんと届けられるようにしたかった部分です。
本文はWordPress標準ブロックで整えられるようにした
テーマを使い始めたあと、実際に更新する機会が多いのは投稿や固定ページの本文です。
たとえば、店舗紹介、メニュー、アクセス、お知らせ、読みものなどを追加するとき、毎回特別な書き方が必要だと更新の負担になってしまいます。
HaruSajiでは、WordPress標準のブロックを使っても、テーマの雰囲気を保ちやすいように本文デザインを整えました。
- 見出し
- 段落
- 箇条書き・番号付きリスト
- 引用
- 表
- 画像・キャプション
- 動画やSNSなどの埋め込み
- ボタン
特別なブロックや複雑なショートコードを覚えなくても、WordPressで普段使うブロックを組み合わせながらページを作れることを目指しています。
本文の見出しは、ページタイトルとの階層をわかりやすくするため、本文ではH2から使う運用を想定しています。
スマホでも表を読めるようにした
飲食店や宿のサイトでは、メニュー表、料金表、営業時間、アクセス情報などを表で掲載することがあります。
ただ、横幅のある表はスマホで文字が小さくなりすぎたり、レイアウトが崩れたりしやすい要素です。
HaruSajiでは、表の内容を無理に縮めるのではなく、スマホでは横方向にスクロールして読めるようにしています。
画面に収めることを優先して文字を小さくするよりも、内容を読めることを優先しました。
スマホでの見た目を整えるときは、「すべてを1画面に収める」よりも、必要な情報を無理なく読めることを大切にしています。
案内・ポイント・注意を伝えるためのBOXを用意した
お店のサイトでは、本文の中でも特に伝えたい情報があります。
予約に関する案内、アレルギーに関する注意、初めて来店する方への補足などは、通常の文章だけでは見落とされてしまうことがあります。
そこでHaruSajiでは、情報の役割に合わせて使えるBOXを3種類用意しました。
- 案内BOX：リンク、予約方法、営業時間などを目立たせたいとき
- ポイントBOX：おすすめ、補足、知っておくと便利な情報を伝えたいとき
- 注意BOX：予約前の注意、変更事項、確認してほしい内容を伝えたいとき
すべてを強く目立たせるのではなく、情報の重要度に合わせて見せ方を変えることで、読みやすさを保てるようにしています。
テーマの色や余白のルールに合わせているため、本文の中にBOXを入れても、急に違うデザインが混ざったように見えにくいのも意識した点です。
Contact Form 7のフォームもテーマの雰囲気に合わせた
お問い合わせフォームは、お店とお客さまがつながる大切な場所です。
せっかくサイト全体の色や文字、余白を整えても、フォームだけがブラウザ標準の見た目のままだと、少しだけ印象が途切れてしまいます。
HaruSajiでは、Contact Form 7を使うことを想定し、フォームの見た目もテーマに合わせて整えました。
- テキスト入力欄
- メールアドレス欄
- 選択項目
- お問い合わせ内容の入力欄
- 同意チェック
- 送信ボタン
- 入力エラーの表示
- 送信完了メッセージ
入力欄を見やすくするだけでなく、エラーがあったときに気づきやすいこと、スマホでも入力しやすいことも意識しています。
フォームを公開するときは、送信後の管理者通知・自動返信メール・必須項目のエラー表示まで、実際に送信して確認することが大切です。
編集画面でも完成イメージを想像しやすくした
WordPressのブロックエディタで記事を書いているときと、公開したあとの見た目が大きく違うと、改行や見出しのバランスを調整しづらくなります。
そのためHaruSajiでは、編集画面でも公開画面に近い色・文字・見出し・表・BOXを確認できるようにしています。
公開前の段階でページの印象を想像しやすくなるため、書くことに集中しながら整えられるようになります。
テーマの機能を増やすことだけではなく、日々の更新作業が少しでもやりやすくなることも、テーマ作りでは大切にしたい部分です。
まとめ
HaruSajiでは、トップページの印象だけではなく、お知らせ、本文、表、案内BOX、問い合わせフォームなど、サイトを運用する中で必要になる要素を少しずつ整えました。
テーマを使う人が、特別な知識や複雑な設定を必要とせず、お店の情報を更新し続けられることを目指しています。
次回は、HaruSajiを公開する前に確認したこととして、スマホ表示、キーボード操作、ヒーロー動画、アクセシビリティなど、品質面で意識したことを書こうと思います。
楽しんでください！！
ではまた〜