【WordPress】おすすめの「和風」テーマ|旅館や和食系飲食店向けならコレ

実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。
A8メディア オブ ザ イヤーってそもそも何だ?
初心者

WordPressで和風サイトを作るテーマってないの?
旅館や和食屋さんのサイトを仕事で作りたい?
仕事で使い回せるテーマってないかな?

そんな疑問に答えます。

WordPressの和風のテーマってあんまり種類がないですよね?メチャクチャ高いテーマはあっても、クライアントサイトの制作には特別ライセンスが必要だったりする。

僕も仕事で和風のテーマ探しをしていて結構時間を使ってリサーチしました。Web制作事業者がクライアントの和風サイトを作る場合に最適なテーマを紹介します。もちろんWebデザイナーとしてライセンスを考慮したものを厳選してお伝えします。

和風サイト向けオススメWordPressテーマ

  • SWELL
  • Nishiki Pro
  • Lightning G3
この記事を書いた人
  • IT業界24年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

おすすめ和風テーマ①「SWELL」

WordPressテーマ「SWELL」とは?

ここ数年ものすごくツイッター上で評判のSWELL。ブロガーさん向けのテーマなのかと思いきや、和風サイトも作成できる万能テーマです。

公式 WordPressテーマ「SWELL」

【デザイン】SWELLで作成した和風サイトのサンプル

SWELLを使い和風のサイトを作ってみました。

デモサイトはクリックすると別ウィンドウで表示できます。

かんた

デモサイトは一般ユーザーの僕がSWELLを使ってお試し感覚で作ったものです。

【概要】SWELLについて

SWELLテーマ開発は株式会社LOOS。WordCamp Japan 2021ゴールドスポンサーです。

SWELL
テーマ名SWELL(読み方はスウェル)
販売事業者株式会社LOOS
発売日2019年3月
価格17,600円(税込み価格)
ライセンス複数サイトOK
ブロックエディター対応
公式サイトWordPressテーマ「SWELL」
SWELLの概要

【機能】和風サイトを作るならこの機能を活用しよう

専門知識がいらない

SWELLは信じられないほど使いやすい設計になっています。HTMLといったプログラムの知識なしでもサイト制作できます。今回の旅館や和風飲食店デモサイトを制作に使った一部機能を紹介します。

メインビジュアル

SWELLのメインビジュアル
初心者

メインビジュアルっ何?

かんた

トップページ上部の画像部分をメインビジュアルといいます。

SWELLの旅館デモサイトでは静止画像が3枚切り替わるスライダーを使っています。SWELLのスライダーはPCと、スマホ用別々の画像を設置できます。管理画面上からスライド画像ごとに上乗せするキャッチコピーの文章を変更することができます。

メインビジュアルは静止画のスライドショー以外にも動画を設置できます。メインビジュアルの設定はカスタマイザーからのマウス操作だけ。インパクトのあるファーストビューをノーコードで作れます

横幅いっぱいにコンテンツエリアを拡張

横幅いっぱいに拡張


コンテンツエリアの横幅をブラウザ幅まで広げ背景に画像を設定しています。

和風デザインは色彩を抑えて作ることが多く、変化のない単調なデザインになりがちです。コンテンツエリアを横幅いっぱいに広げて画像を入れるだけで、デザインにアクセントが生まれます。

SWELLにはコンテンツエリアをブラウザの横幅いっぱいに広げる「フルワイドブロック」があります。ブロックエディター上からコードをを編集することなく、誰でも簡単に扱える機能です

かんた

フルワイドブロックの背景に埋め込む画像には、次のオプションを設定できます。

背景オプション

  1. 設定なし
  2. 固定
  3. パララックス

デモサイトでは背景に「固定」オプションを指定しています。

スクロールしても背景画像の位置が変化しないおもしろい仕様になっています。

横並びに配置

和風のWordPressテーマで作ったデモサイト

デモサイトの一部要素は、「画像」と「テキストエリア」を横並びにする機能を使っています(上記図参照)。

画像を左テキストエリアを設置する機能ですが、デモサイトのように画像の位置を左右どちらにでも指定できます。このデザインはWordPressの「メディアとテキストブロック」機能を使っています。

かんた

フルワイドブロックのようにコードを編集せずブロックエディター上からマウス操作だけで実装できます。

旧式のクラシックエディターで同様のデザインを作る場合は、HTML+CSSを使ったコード作りが必要です。スマホや、タブレットからのアクセスに対応できるようレスポンシブコーディングを実装する手間がいります。

メディアとテキストブロックはデフォルトの仕様でレスポンシブコードです。
クラシックエディターでの制作と比べると時間と手間がかかりません。

動画埋め込み機能

和風のWordPressサイトに動画を埋め込んでいるデザイン例

インパクトのあるサイトを作りたいと思いデモサイトでは動画ファイルを埋め込んでいます。

動画を背景に埋め込み自動で繰り返し再生する機能もWordPress標準の機能です。ブラウザの横幅も自由にアレンジできます。デモサイトでは画面の横幅いっぱいにコンテンツエリアを拡張し動画を埋め込みました。

【ライセンス】複数サイトOK。Web制作向けのテーマ

コスパ良し

ライセンス
自分のサイトサイト数に制限なし
クライアントのサイトサイト数に制限なし
制作NGなジャンルなし
SWELLのライセンス

SWELLのライセンスは使い回し可能です。クライアントワークも含め複数サイトで使えます。

WordPress有料テーマの中には「クライアントのサイトを制作するなら特別ライセンスが必要」というライセンスがあります。その特別ライセンス料金だけで3万円だったりするので、テーマ選びの際はしっかりライセンスを確認しましょう。

テーマ代とは別に特別ライセンス料金が必要な有料テーマは、駆け出しのフリーランスデザイナーにとっては利益を圧迫してしまうので、なかなか選びにくいですよね。

かんた

SWELLはテーマ本体を1つ購入するとクライアントサイトへの導入も追加なしで行えるので、かなりお得で安心です。

【総評】Web制作事業者なら買って損なし

項目評価
デザインの自由度 5.0 / 5
装飾の種類 5.0 / 5
レスポンシブ対応 4.5 / 5
初心者向け度 5.0 / 5
総評 4.8 / 5
SWELLの評価

SWELLはWordPress5.0から採用されたグーテンベルクエディターに対応しています。自由度が高く、和風サイト以外のデザインも作成できます。

ライセンスはGPL。1つ購入するだけで複数サイトを作れるライセンス形態。Web制作事業者なら他のサイト制作にも使い回しできるのも大きな利点。

公式 WordPressテーマ「SWELL」

おすすめ和風テーマ②「Nishiki Pro」

おすすめ和風テーマ②「Nishiki Pro」

公式 Nishiki Pro販売サイト「サポトピア」

【デザイン】Nishiki Proで作成した和風サイトのサンプル

Nishiki Proで和風デザインのサイトを作ってみました。

デモサイトはクリックすると別ウィンドウで表示できます。

かんた

デモサイトは一般ユーザーの僕が2~3時間でお試し感覚で作ったものです。

【概要】Nishiki Proについて

Nishiki Pro
テーマ名Nishiki Pro(読み方はにしき ぷろ)
販売事業者株式会社 AnimaGate
発売日2019年3月
価格17,800円(税込み価格)
更新料金の有無なし
ライセンスサイトごと
ブロックエディター対応
公式サイトNishiki Pro販売サイト「サポトピア」
Nishiki Proの概要

【機能】サイトを作るならこの機能を活用しよう

Nishiki Proで和風なサイト制作をする際に使える便利な機能を紹介します。

絞り込み検索機能

Nishiki Proの絞り込み検索機能設定画面
Nishiki Proの絞り込み検索機能設定画面

Nishiki Proには「絞り込み検索機能」がテーマに標準搭載されています。

情報を分類する時のカテゴリー、タグなどを活用しポータルサイトのような絞り込み機能をサイトに導入できます。絞り込み検索機能が1万円代のテーマに搭載されているのはかなり珍しい。

かんた

有料のプラグインだと3万円以上するので、本当にありがたい機能。

レスポンシブデザイン機能

レスポンシブデザイン機能
Nishiki Proの編集画面

Nishiki Proはレスポンシブ系のオプションが充実しています。

パソコン、スマホ、タブレット端末など解像度に合わせてデザインを自動的に変化させるのがレスポンシブデザインです。WordPressの有料テーマは基本レスポンシブデザイン対応ですが、カラムブロックなどで要素を配置させる場合に、細かな指定はできません。

Nishiki Proはレスポンシブに関する設定オプションがしっかりしています。「パソコンサイトなら横に一列に配置」「スマホなら2個ずつに並べよう」なんてことがCSSコードを編集することなく、簡単に実現できます。

【ライセンス】サポート付きのライセンスはサイト単位

ライセンス
自分のサイトサイトごと
クライアントのサイトサイトごと
制作NGなジャンルなし
Nishiki Proのライセンス

Nishiki Proはサイト単位でライセンスを販売している有料テーマです。

1サイト分なら、1ライセンス。2サイトなら2ライセンス必要という規約です。Web制作事業者がクライアントのサイトを作る場合でも特別ライセンスといった追加料金はありません。ライセンスは買い切りタイプ。一度支払うだけで更新料金などはありません。

ライセンスは別サイトに付け替えることも出来るので、サイトの運営を停止するといった場合でも別サイトに使いまわしできます。

かんた

国産の有料テーマと比較するとちょっとユニークなライセンス形態。Nishiki Proのライセンスについて次の記事で詳しく解説しています。

【総評】高いデザイン性を求める人向けテーマ

項目評価
デザインの自由度 5.0 / 5
装飾の種類 4.0 / 5
レスポンシブ対応 4.5 / 5
初心者向け度 5.0 / 5
総評 4.6 / 5
Nishiki Proの評価

脱テンプレ」「高級感」。そんなデザインが必要といった案件に使えるテーマです。

Nishiki Proはライセンス保有者に対しての無料のサポートがあります。サイト制作だけでなく運用後の相談もできるので、次のような制作者向けです。

WordPress初心者でも安心

  1. デザイン得意だけどWordPressが苦手
  2. 運用が心配…
  3. WordPressでサイトを作るのが初めて
かんた

ちなみに僕はNishiki Proがけっこう好きです!使って見た感想をレビュー記事にまとめました。

公式 Nishiki Pro販売サイト「サポトピア」

おすすめ和風テーマ③「Lightning G3」

おすすめ和風テーマ③「Lightning G3」

公式 Lightning G3販売ページ

【概要】Lightning G3について

Nishiki Pro
テーマ名Lightning G3(ライトニングジースリー)
販売事業者株式会社ベクトル
発売日2019年3月
価格9,900円 (アップデート期間:1年)
26,400円 (アップデート期間:2年)
3,9600円(アップデート期間:3年)
更新料金の有無あり
ライセンス複数サイト
ブロックエディター対応
公式サイトLightning G3販売サイト
Lightning G3概要

【デザイン】Lighthing G3で作成した和風サイトのサンプル

試しにLightning G3で和風なサイトを作ってみました。

デモサイト

Lighting G3は和風スキン「VEKUAN」を販別売りしていますが、デモサイトでは使っていません。

Lighting G3の特徴は予めデザインや配色のプリセットがあること。デザインをイチからしなくても、マウス操作で選ぶだけでサイトが作成できる点です。WordPressに慣れていない初心者の人でも、プロがデザインしたパーツを選ぶだけでオシャレなサイトが作れます。

【機能】和風サイトを作るならこの機能を活用しよう

Lighting G3で和風テイストなサイトを作る時に便利な機能を紹介します。

縦書きナビゲーション

和風デザインの定番「縦書き」
縦書き設定

和風といえば「縦書き」デザインパターン。

Lighting G3はグロナビを縦書きにする設定がカスタマイザーに用意されています。独自カスタマイズ抜きで縦書きナビゲーションを導入できます。

コンテンツエリアを部分的に縦書きにするのはCSSをチョッチョっと加えると簡単です。でも、グロナビなどのレイアウト周りはそのパーツだけ縦書きを設定すると他とのバランスが取れなくなったります。

テーマの基本機能で縦書きにできるのは相当に便利。

かんた

メニュー部分を縦書きに設定できる有料テーマってほとんどありません。

選ぶだけでサイトが作れる「パターン」

パターン
パターン

パターンはプリセット型のデザインパーツです。

会社紹介ページ用のパーツ、採用ページパーツなどが豊富にプリセットされています。デザインに困ったら、パターンから見本を探して選ぶだけでサイトを作成できる機能です。

気に入ったパターンを選びそのまま使っても良し。さらに自己流のアレンジを組み合わせてもOKという仕組みです。

こんな人向けの機能

  1. デザインに自信がない
  2. WordPressに慣れていない
  3. 時間がない

【テーマ】複数サイトOK

ライセンス
自分のサイトサイト数に制限なし
クライアントのサイトサイト数に制限なし
制作NGなジャンルなし
Lightning G3の利用規約

使いまわしOK

Lightning G3は復数サイトで使いまわしできるテーマです。自社サイト、クライアントサイトともに制限はありません。受注制作する場合にテーマ販売会社に特別料金的なものを支払う必要はありません。

【総評】進化が半端ない

項目評価
デザインの自由度 5.0 / 5
装飾の種類 4.0 / 5
レスポンシブ対応 5.0 / 5
初心者向け度 5.0 / 5
総評 4.75 / 5
Lightning G3の評価

無料版のLightingを試したことがある僕にとって、有料版のLightning G3は衝撃的でした。ブロックエディターテーマにここまで対応している有料テーマってみたことありません。

プリセット」「パターン」といった選ぶだけでオシャレなサイトに早変わりする機能が充実しています。特に「パターン」と呼ばれるデザインパーツがあらかじめ用意されているので、初めてサイトを自作する人でも簡単にクオリティーの高いサイトを作れます。

2021年5月に発売されたばかりでアップデートが頻繁。プリセット・パターンなどの機能がじゃんじゃん追加される進化中のテーマ。

公式 Lightning G3販売ページ

【選外】HAKU

HAKUはWordPress有料テーマ販売サイト「TCD」で購入できる和風テーマです。

和風のテーマと言えば必ずランキングに入ってくるような定番テーマだと思います。

HAKUはかなり知名度があり人気の高いテーマ。実は、僕も利用経験があります。今回紹介したテーマの中では唯一和風に特化した素晴らしいデザインのテーマなのですが、ライセンスの都合上ランキング選外にしました

テーマ代とは別に「特別ライセンス」として3万円かかる

Web制作事業者向けの重要な情報です。

個人や法人が、自分でテーマを購入して自分で作る分には関係ありません。

TCDのテーマを使ってサイト制作代行する事業者向けに「特別ライセンス」があります。フリーランス、法人とわずTCDの有料テーマを使ってサイト制作代行する場合は特別ライセンスの契約が必要と公式ページに明記してあります。対象テーマはHAKUだけでなくMIKADO、TOKI、KADANなどTCDテーマ全てです。

TCD特別ライセンスについて
  • 特別ライセンス料金:3万円
  • 有効期限:証明書発行から3年間

Hakuでクライアントサイト制作をする際はHakuのテーマ代29,800円とは別に、特別ライセンス代30,000円が必要です。合計59,800円。

デモサイトを作るにも特別ライセンスが必要

今回紹介したSWELL、Nishiki Proと同じようにHAKUでもデモサイトを作成し皆さんにお見せしたかったのですが、デモサイトを作るのもライセンス違反になりそうなので控えることにしました。

かんた

公式サイトの情報です↓

購入したテーマを使用してデモサイトを作成しましたが、まだ実際には制作代行を行っていません

特別ライセンスの対象は、制作代行と制作代行に関わる一切の行為です。デモサイトの作成は、制作代行のための営業行為となりますので、クライアントにご提案する時点で特別ライセンスの取得が必要です。なお、ご提案後に弊社テーマの採用・不採用に関わらず、特別ライセンスは必要となります。

ライセンスについてよくあるご質問

営業用にデモサイトを作っておくのって、僕は普通によくやるんです。

オリジナルデザインでデモサイトを作るのは大変ですが、有料テーマを使うと簡単にデモサイト作れるので予め用意している事業者さんていますよね?

低料金かつイメージにあうモノがあればテンプレから選びたいユーザー層って必ずいます。TCDのHAKUの場合はそういったユーザー層向けのデモサイトを作るにも特別ライセンスが必要になります。

TCDの有料テーマは素敵なデザインが多いのですが、Web制作事業者とするとライセンスのチェックが大事になってきます。

かんた

必ず特別ライセンスの内容を一読しましょう。

和風テイストのサイトをオシャレに作るポイント

和風テイストのサイトをオシャレに作るポイント
初心者

和風サイト向けのテーマを決めたよ!
オシャレな感じに仕上げるにはどうしたらいいの?

そんな人向け、Webデザイン初心者でも和風サイトをキレイにに仕上げるポイントを紹介します。

和風サイトをキレイに作るポイント

  1. 色彩
  2. 縦書き
  3. 余白
  4. フォント
  5. 画像素材


かんた

ポイントごとに詳しく解説します。

色彩は控えめに

WordPress有料テーマで和風サイトの色彩
和風サイトの色彩はシンプルに

ベースとなる色は「白」、「黒」、「灰色」から選び、ポイントカラーを1~2色程度に限定しましょう。

かんた

あまり派手な色合いをさけ、黒ベースでシンプルに仕上げるだけで和風ぽく見えます。

本記事で紹介したデモサイトもほぼこのパターン。

  • 背景を「黒」
  • テキストを「白」

もしくはこの逆に背景を「白」、テキストを「黒」を選び、他に色を使わないだけでもOKです。

サイトを作っていると何かしらオシャレな要素を加えようと「色」を足してしまいがちです。高級感のある和風サイトを作る場合は不要な色をできるだけ使わない配色がおすすめです。

縦書き

縦書きで和風ぽいテイストにWordPressサイトを仕上がる
縦書きでアクセントを出す

縦書きの要素があると和風度が上がります。英語や他の外国語にはないスタイルかつ、習字に馴染みのある日本人にはグッと刺さります。

テーマによっては縦書き機能がありませんが、以下のようなCSSコードを指定するだけで見出しだけなど特定のテキスト要素だけを縦書きにすることができます。

サンプルコード

任意のセレクタ{
writing-mode: vertical-rl;
}

CSSはカスタマイザーの追加CSSに加えるだけでOKです。既存のテーマファイルを上書きする必要がないので、テーマのアップデートでも消えることはありません。

テーマアップデート時にテンプレート内のクラス名がまれに変わることがあります。アップデート後に縦書き設定が正しく動作しない場合はセレクタ名を見直しましょう。

余白でバランスを調整する

スペーサーブロックなどで余白でバランスを調整する
和風サイトは余白が命

和風に仕上げる場合の重要な要素が「余白」です。余白は気持ち大きめがポイント。全体を通して共通サイズの余白を入れることで和+高級感を演出できます。

ちょっと窮屈かな?」と感じたら迷わず余白を入れましょう。

ブロックエディターにはスペーサーと呼ばれる余白調整機能があります。余白のサイズを調整し、使い回すことでサイト全体にバランスの良い余白を設定できます。

フォント

WordPressで旅館サイト向けのフォント
和風デザインならフォントにこだわれ

和風のデザインの場合は「明朝系」のフォントをデフォルトのフォントにするのがオススメス。ゴシック系のフォントより細身の明朝スタイルのフォントはデザインがグッと引き締まって見えます。

デフォルトのフォントをゴシックから変更したくない場合は、アクセントとして見出し部分だけを明朝系のフォントにするといった手法もあります。

フォントはテーマの管理機能から選択することができますが、必ずしも自分の使いたいフォントが利用できるわけではありません。和風サイト用にフォントを変更したい場合は、CSSで任意のフォントを指定することができます。

かんた

テーマファイルを直接編集する必要はありません。カスタマイザーの追加CSSに次のコードを追加しましょう。

サンプルコード

body{
font-family:serif;
}

フォントは閲覧環境によって見え方が異なります。パソコンだけでなく、スマホやタブレットなどでも表示チェックをしましょう。

画像素材

和風のWordPressテーマで作ったデモサイト
画像はサイト内で均一に整える

和風サイトを白黒をベースで制作する場合、画像素材の役割はものすごく重要です。

サイト上に余分な装飾がないので画像が際立ちます。どれだけバランスの良い配色・余白でサイト制作をしても、クオリティーの低い画像が1点あるだけでイメージを損ねます。

飲食系店舗、旅館などイメージを伝えるのが重要な業種はプロに依頼し写真素材を用意しましょう。画質が低いものや、サイトイメージに合わない画像しかない場合はあえて入れない勇気を持ちましょう

かんた

サイト上に画像素材を複数設置する場合は以下の点に注意しましょう。

画像を使う際のポイント

  1. 縦、横のアスペクト比を均一にする
  2. 明度、コントラスト、彩度などを一定に整える

今回紹介したポイントを上手に取り入れるだけで和風デザインの質がワンラックアップします。クライアントが驚くような和風デザインに挑戦してみてください!

和風サイトに取り入れるべきコンテンツ例

和風サイトに取り入れるコンテンツ例

和風サイトを制作するWordPressテーマが決まったらコンテンツですよね。

各ジャンルごとに必要なコンテンツ例を紹介します。

  • 旅館などの宿泊施設
  • 飲食系店舗

旅館などの宿泊施設HP

旅館などの宿泊施設サイトのコンテンツと盛り込むべき情報を紹介します。

宿泊施設のコンテンツ例

  1. 宿泊施設の紹介
  2. 周辺の観光スポット
  3. 支払い方法
  4. アクセス
  5. 最寄りのコンビニ・スーパー

宿泊施設の紹介

メインのコンテンツです。
「温泉付き」「地元の食材にこだわった食事」「富士山が見える」など十分に特徴をPRしましょう!

今回紹介した有料テーマSWELL、Nishiki Pro、Lighthing G3は動画を埋め込むことができるので、視覚的にも旅行者に訴求できます。

宿泊施設の紹介ページでは特徴をアピールするのは当然ですが、以下のような情報の掲載もおすすめです。

設備、貸し出し品

  1. Wi-Fi
  2. アメニティー
  3. 娯楽系(卓球、トランプ、UNOなどカード系の貸し出し)
  4. 加湿器
かんた

僕は卓球があったら嬉しい!

周辺の観光スポット

旅行者は宿泊施設に滞在するのが目的な場合もありますが、観光も楽しみたいと思いっています。周辺の観光スポットに関する情報を紹介するだけで宿泊施設がより魅力的な存在になります。

観光スポットまでのアクセス方法、写真スポットの他、効率よく観光スポットを回れるモデルルートがあれば詳しく紹介しましょう。

掲載する情報例

  1. 観光スポット
  2. アクセス方法
  3. 写真スポット
  4. モデルルート

支払い方法

支払いのポイントはクレジットカードに対応しているかどうかです。

都市部から地方にくる旅行者は、クレジットカード対応が当然と思っている人もいます。クレジットカードでの支払いを受け付けていない場合はホームページに明記しておきましょう。

アクセス

宿泊施設の住所とグーグル・マップを埋め込むだけでは不十分です。

宿泊施設までのアクセス手段をできるだけ紹介しましょう。アクセスに関する情報を掲載する目的は「アクセス方法がある」ことを旅行を検討している人に伝えることです。

旅行者

ここに宿泊したいけど、車ないしバスとかあるのかな…

かんた

土地勘のない旅行者の悩みを想像してアクセス方法をできるだけ紹介するのが大事!

  • 公共交通機関(電車・バス・飛行機)
  • 徒歩
  • 送迎

宿泊施設によっては空港を利用からくる旅行者もいます。空港からアクセスする旅行者向けの情報も記載しましょう。バスなど公共の交通機関が利用できる場合、アクセスにかかる時間までの時間だけでなく運行間隔や降車するバス停、運行会社のホームページのリンクを紹介するのがオススメです。

車で来るお客さんは駐車場の有無をチェックしていますので、宿泊施設に駐車スペースがある場合は明記しましょう。

周辺の観光スポット

宿泊施設からアクセスできる観光スポット紹介。宿泊施設からのアクセスからだけでなく、各スポット間のアクセス紹介などがあるとポイントが高い。地方だと観光スポット間の距離が遠いこともあるので、効率よく回れるルート紹介などがあれば掲載しよう。

宿泊施設の利用者は宿泊や食事だけでなく観光も目的の一つだったりするので、かなりの訴求ポイントになります。

最寄りのコンビニ・スーパー

掲載してあると嬉しい意外な情報です。

旅行先で夜は知り合いとワイワイしたいものです。近くにあるコンビニやスーパーで夜の宴会用に向けて飲食物を買い込みたい!そんな人向けの情報です。最寄りのコンビニ、スーパーまで徒歩〇〇分といった紹介とグーグル・マップを埋め込みましょう。

近くに飲食物を販売している店舗がない場合は宿泊施設ないの売店、自販機、製氷機など宿泊者のニーズを少しでも満たすことができる情報を提供しましょう。

飲食店舗のHP

和風のレストラン、居酒屋、料亭といった和食飲食店舗のHPに掲載するコンテンツ例です。

和風飲食店舗のコンテンツ例

  • 飲食店舗の紹介
  • お客様の声
  • 店舗の写真
  • お料理の写真
  • メニュー
  • アクセス
  • 予約方法

コンテンツは各1ページにする必要はありません。ボリュームの少ないコンテンツはわざわざ分割せず1ページにまとめてOKです。特にスマホユーザー向けの情報の場合、タップして移動するのがわずらわしいと感じるユーザーもいます。関連する情報は単一のぺージにまとめることでユーザービリティーが向上します。

和風サイト向けプラグイン

和風サイト向けプラグイン

デザインや機能的にに「これを入れたら和風に仕上がる」といったプラグインはありません。

今回紹介した和風デモサイトでは次のプラグインを使っています。

プラグイン一覧

  1. Blocks Animation: CSS Animations for Gutenberg Blocks
  2. WPForms Lite
  3. SEO SIMPLE PACK
  4. Countdown Block
かんた

それぞれのプラグインを紹介します。

Blocks Animation: CSS Animations for Gutenberg Blocks

項目評価
初心者向け
おすすめ度
プラグインの評価

Blocks Animationはアニメーション系のエフェクトを設定するプラグインです。

テキストをフワッと表示させる」「画面の下から画像をゆっくり表示する」。そんな設定をするのがこのプラグインです。

テキストや画像などブロック単位でエフェクトを設定できるのが特徴。Blocks Animationプラグインを有効化すると、各ブロックのオプションにアニメーションの設定項目が追加表示されます。マウス操作でポチポチ選択するだけでオシャレなアニメーションを設定できます。

アニメーションはエフェクト、タイミング、実行速度の3つのオプションがあるのでかなりアレンジの効くプラグイン。

かんた

かなりおすすめです。

WPForms Lite

項目評価
初心者向け
おすすめ度
プラグインの評価

WPForms Liteは問い合わせフォーム作成プラグインです。

宿泊施設や飲食店舗のサイトを閲覧するユーザーはモバイルユーザーのほうがPCユーザーよりも多くなります。ユーザーが問い合わせする際に入力する問い合わせフォームも当然レスポンシブ仕様が望ましいです。

WPForms Liteはスマホ対応のレスポンシブコードでフォームを作成することができるので、WordPress初心者でも簡単にサイト内にフォームを設置できます。

「名前」「電話番号」など、フォームの入力項目は管理画面上から自由に増やすせます。有料版で機能を拡張できますが、基本無料版の機能だけで十分です。

入力項目に設定できるオプション

  1. テキスト
  2. メールアドレス
  3. ドロップボタン
  4. チェックボックス
  5. ラジオボタン

定番のWordPress問い合わせフォームプラグインといえばContact Form7ですよね?WPForms LiteとContact Form7の違いの1つが問い合わせ完了時のアクションを管理画面上から設定できる点です。

クライアントワークだとほぼ毎回突っ込まれるので、送信完了画面が必要そうならWPForms Liteプラグインがおすすめです。

かんた

僕はクライアントワークのフォームには毎回このプラグインを使っています。

SEO SIMPLE PACK

項目評価
初心者向け
おすすめ度
プラグインの評価

SEO SIMPLE PACKはMetaまわりの設定をするプラグインです。

All in One SEO(旧名All in One SEO Pack)と同じような役割ですが大きな違いあります。

ザックリとした違い

  • 開発者が日本人
  • 機能がシンプル

SEO SIMPLE PACKはWordPress有料テーマ「SWELL」の開発者さん提供プラグインです。開発者が日本人なので、設定画面は日本語です。All in One SEOほど機能はありませんが、正直「All in One SEOのこの機能って何?」ってものが結構あります。

SEO SIMPLE PACKはシンプルかつ実用的なオプションしかありません

設定オプションの一例

  1. 記事ページのMeta設定(titile、description)
  2. index設定
  3. サイトマップ
  4. OGP
  5. グーグルアナリティクス
  6. サーチコンソール
かんた

ブログ、企業サイトの運営で困ることはありません。

Countdown Block

項目評価
初心者向け
おすすめ度
プラグインの評価

Countdown Blockは数字が徐々に減っていくカウントダウンタイマーを設定できるプラグインです。イベント情報などを掲載する時に便利です。イベント開催日を表示するだけでなく、記事が迫っているという切迫感を出す時に使えます。

出力されるカウントダウンタイマーはフォントの大きさ、余白などかなり細かく管理画面上から設定できます。デザインをオシャレに仕上げることが可能なんですが設定画面は英語のみです。

それほど難しい英語表現はありませんが、英語にアレルギーがある人は注意が必要です。

かんた

プラグインの詳しい使い方は次の記事で紹介しています。

和風の無料テーマ

和風の無料テーマ
初心者

できれば無料のWordPressテーマで済ませたい

そんなふうに僕も思ってました。

無料の和風専用テーマは少ない?

WordPressの無料テーマはWordPress公式サイトに公開されています。

公式サイトに登録されるにはガイドラインをクリアした一定水準以上のクオリティーが必要。「ここで探せばきっとオシャレな和風テーマが見つかる!」と思っていたのですが、和風専用テーマは見つかりませんでした。

WordPress公式サイト上には8629個の無料テーマ登録されています。

全部チェックするとキリがないので「Japan」「Japanese」で検索してみたところ、ヒットした結果は28件だけ。しかもどう見ても和風じゃない…

出典:WrodPress公式テーマディレクトリー「Japan」の検索結果画面

公式サイトに無料の和風テーマが少ない理由

世界レベルで見ればWordPressテーマ開発者は圧倒的に非日本人の割合が高いです。言語の都合上、日本人や日本向けのテーマを開発しているはほぼ日本人だけというのが現状です。

外国人エンジニア目線で考えると、まず日本語力がないと厳しいですよね

日本語の勉強に時間とお金を投資してまで収益性がゼロの無料テーマを開発したい物好きな人は見たことがありません。そのリソース使って有料テーマや有料プラグインつくった方がお金になります。

よほど日本愛のある人で、日本語レベルが高くしかも技術力があってボランティア精神溢れるエンジニアの人でもない限り無料で利用できる和風専用テーマは作らないでしょうね。

どうしても無料テーマを使うなら

100%イメージにあう和風テーマが見つからない場合は、なるべくイメージに近いレイアウト設計ができる無料テーマを選びましょう。

テーマの機能だけでは和風にならないものでもテーマ内のCSSやPHPの調整したり、画像などの素材を工夫することで和風デザインに近づけることが可能です。

必要なスキル

  1. HTML+CSS
  2. PHP
  3. jQuery

まとめ

和風サイト向けのWordPress有料テーマを紹介しました。

「どれにしようか迷っている!」そんな場合はSWELL。他のテーマと違い一度購入すれば他のサイト制作にも使えるので便利です。

SWELLNishiki ProLightning G3
テーマ名SWELLNishiki ProLightning G3
販売事業者株式会社LOOS株式会社 AnimaGate株式会社ベクトル
発売日2019年3月2019年3月2021年5月
価格17,600円(税込み価格)17,800円(税込み価格)9,900円(税込み価格)
ライセンス複数サイトOKサイト毎複数サイトOK
ブロックエディター
公式サイトSWELLサポトピアLightning G3
和風WordPressテーマ一覧
よかったらシェアしてね!
  • URLをコピーしました!
目次