【2026年】コーヒー店・個人カフェ向けWordPressテーマ3選！こだわりが伝わるWebサイトの作り方

こんにちは、webディレクターのきつねコードです。

当サイトでは、Wordpressやブログ運営のノウハウなどを解説しています。

今回は、「コーヒー店」や「カフェ」のホームページ作成やリニューアルに最適なWordPressテーマを厳選してご紹介します。

『テーマ』とは、WordPressにおける『着せ替え機能』みたいなものです。どのテーマを使うかで、サイトのデザインや機能が決まります。

実は最適なwordpressテーマさえ知っていれば、少ない予算でしかも短時間で、誰でもプロが作ったような素敵なWEBサイトを完成させることができます。

「お店の空気感」を正しく伝えられるサイトが作れるはずです。

2026年には、カフェ専用に設計された新しいテーマ「SALON」も登場しました。この記事でもさっそく取り上げています。

お店に足を運んでくださるお客さんが増えると良いですね！

ワードプレスが初めての方でも無理なくできますので、今すぐに動いていきましょう。

【結論】あなたの理想の「WEBの店構え」はどれ？おすすめテーマ4選

まずは、お忙しいオーナーさんのためにこの記事の結論からお伝えします。

コーヒーショップのWebサイトにおいて、最も避けるべきは「安っぽさ」です。

豆のこだわりや店主の想いを届けるためには、デザインの「トーン＆マナー」が非常に重要になります。

wordpressでは、必ず１つ「テーマ」を選んで入れることが必要なわけですが、

すでに綺麗にデザイン化されている高品質wordpressテーマを使うことで、安っぽくなるという失敗を避けて完成度の高いWEBサイトが出来上がります。

つまり、テーマ選びで90%ぐらいは決まります。

現在のトレンドや実用性を踏まえ、私がコーヒー店に推奨する4つのテーマを先出しします。

wordpressテーマ名	おすすめのタイプ	最大のメリット
TCD SALON（32,780円）	カフェ専用設計・豆やグッズの販売も視野に	カフェに必要なページが最初から揃う。軌道に乗ったら、同じサイトにネットショップを追加できる。
TCD Tree（28,380円）	世界観重視・和モダンや隠れ家系の店	圧倒的な「世界観」。縦書きと余白で、写真1枚から店の格を演出できる美しさがある。
JIN:R（19,800円）	操作性重視・親近感のある個人カフェ	コーヒー店用のデモデザインを使って、必要最低限のサイトを即構築。
Lightning（無料）	無料テーマ・カスタマイズ重視	テーマ代0円から開始可能。お店のサイトに必要な「信頼感」を自分で構築。

各テーマについて詳しく解説しますので、ぜひ読み進めてみてください！

コーヒー店がWordPressテーマを選ぶ際の4つのチェックポイント

コーヒーショップのサイト作りで最も大切なのは、デザインの良し悪しだけではありません。

「この店に行ってみたい」と思わせる仕掛けと、知りたい情報にすぐ辿り着ける機能性の両立です。

納得のいくテーマ選びをするために、オーナーさんや制作者さんが必ずチェックすべき4つのポイントを詳しく見ていきましょう。

① 視覚的な「シズル感」・写真が主役になれるか

コーヒー店サイトにおいて、特に重要なのは「デザインの雰囲気」です。 おいしいコーヒーを淹れそう、居心地の良さそうな雰囲気を演出できるかどうかです。

湯気が立ちのぼるカップ、焙煎機の重厚感、店内の柔らかな照明……。

これらを引き立てるためには、余白が十分にあり、大きな写真を美しく配置できるレイアウトが不可欠です。

私はwebディレクターでありwebデザイナーではないのですが、たまに自分でデザインすることもあって、「シズル感」を出すのって意外と難しいんですよね…。

素人が一からやると、レイアウト構成や、フォント、配色、余白などの微妙な違いでプロっぽくなるか、安っぽくなるかが変わってきます。そこがwordpressテーマの一番の役割です。

• チェック: メイントップ画面（ヒーロー画像が入るエリア）のレイアウトとデザインがイメージに合いそうか。

② スマホファースト・通行人を今すぐ店に呼び込めるか

「近くにいいカフェないかな？」と探している人のほとんどは、スマホで検索しています。

どんなにおしゃれなサイトでも、スクロールしても地図が出てこない、営業時間が見当たらないようでは機会損失です。そういった「機能面」も見ましょう。

• チェック: サイト上に「Googleマップ」「電話」「営業時間」などの要素を綺麗に設置できるか。スマホでも見やすいかどうか。

③ SNS連携・Instagramをサイトの鮮度にすることも

個人経営のオーナーにとって、WEBサイトとSNSの両方を毎日更新するのは現実的ではありません。

最新の豆の入荷情報や、今日のお菓子の写真など日々の更新はInstagramにアップする運用でも良いと思います。

その代わり、最低限WEBサイトからはインスタなどSNSへ飛べるように設置は必ずしましょう。（SEO対策としても重要）

もし余力があるのであれば、wordpressプラグインの「Smash Balloon Social Photo Feed」などを使用して自動的にInstagramのフィードをWEBサイトに反映させることも可能です。将来的にでも良いので、ぜひやってみても良いかなと思います。

• チェック: SNSアイコンやボタンを分かりやすい位置に配置できるか。
• チェック: Instagramのフィードを、トップページに埋め込める（追加しやすい）ような構成かどうか。

④ メニュー更新・そして豆の販売も視野に入れるか

メニューの価格改定や季節限定商品の追加は頻繁に起こりますよね。そのたびに制作会社に修正を依頼するのはコストがかかりすぎます。

wordpressでは、その点においてはどのスタッフでも簡単に更新作業ができるので安心してください。

また、「いつかは自分の店の豆を全国に届けたい」と考えているなら、販売ページへの導線も考慮したほうがよいです。

• チェック: オーナー自身がメニュー表や季節商品を簡単に書き換えられるか。
• チェック: 豆などの販売もしたいケースでは、外部のECサイト（BASEなど）へのリンクボタンを違和感なく設置できるか。もしくは、テーマ自体にネットショップ機能が用意されているか。（これに関しては、のちほど補足解説）

（補足）コーヒー店向けwordpressテーマ選びでよくある悩み

コーヒーショップに使えるwordpressテーマを探すときに、こんなことがあります。

• 「飲食店向けテーマ」だと派手すぎる： 居酒屋やレストラン向けのテーマもありますが、それだと賑やかすぎて、コーヒー店の静かなトーンに合わないことが多い。（関連記事：レストラン向けにおすすめのwordpressテーマまとめ）
• 海外テーマは日本語フォントがダサい： 検索をすると、海外テーマもよく出てきます。（英語を基本として海外で作られているwordpressテーマのこと）。デモサイトが英語だとカッコいいですが、日本語を入れた瞬間に雰囲気が壊れることはよくあります。画像も然りで、日本の画像を入れるとダサくなることが多いです。
• 設定に時間をかけたくない： 焙煎や接客が本業。サイトの設定だけで何日も潰したくないという方は、できるだけ早く構築できるテーマを選ぶべきです。逆に、こだわってよいならば自由度の高いテーマや無料テーマでも良いです。

---

コーヒー店におすすめのWordPressテーマ４選

以上をふまえて、個人カフェやコーヒーショップにおすすめのwordpressテーマを厳選してとりあげます。

現在、まずこの４つを検討されるとよいでしょう。

wordpressテーマ名	おすすめのタイプ	最大のメリット
TCD SALON（32,780円）	カフェ専用設計・豆やグッズの販売も視野に	カフェに必要なページが最初から揃う。軌道に乗ったら、同じサイトにネットショップを追加できる。
TCD Tree（28,380円）	世界観重視・和モダンや隠れ家系の店	圧倒的な「世界観」。縦書きと余白で、写真1枚から店の格を演出できる美しさがある。
JIN:R（19,800円）	操作性重視・親近感のある個人カフェ	コーヒー店用のデモデザインを使って、必要最低限のサイトを即構築。
Lightning（無料）	無料テーマ・カスタマイズ重視	テーマ代0円から開始可能。お店のサイトに必要な「信頼感」を自分で構築。

【TCD SALON】カフェ専用の最新テーマ。お店のサイトが、そのままネットショップに育つ

1つ目は、TCDテーマの「SALON」です。

TCDテーマとは、業種ごとに90種類以上展開されているシリーズで「完成された美しさ」を持つ最高品質テーマです。その分、汎用的なwordpressテーマと比べると値段がちょっと高いのですが、外注したレベルのサイトができあがるのでコスパは最上級です。

そのTCDから2026年に発売されたのがSALONで、最初から「カフェのサイト」として設計されているのが最大の特徴です。

焙煎豆の深い茶色をベースにした、落ち着いたトーンのデザインです。派手さはないのに、ちゃんと「良い店そう」に見えますよね。

これまでコーヒー店のサイトを作るときは、飲食店向けや汎用のテーマを「カフェっぽく」調整して使うのが普通でした。

SALONはその調整がいりません。色づかい、写真の見せ方、フォントの選び方まで、最初からカフェの空気感に合わせて作られているので、写真と文章を入れ替えるだけで、そのままお店のサイトになります。

そしてもう一つの大きな特徴が、ネットショップ機能（WooCommerce対応）です。

※WooCommerce（ウーコマース）とは、WordPressにネットショップ機能を追加できる、世界で最も使われている無料プラグインです。

最初はお店の案内サイトとして小さく始めて、軌道に乗ってきたらコーヒー豆やオリジナルグッズの販売を、別のサービスを契約せずに同じサイトの中で始められます。

カフェは客単価と席数で売上の上限が決まってしまう商売なので、「いずれ豆の通販を第二の柱にしたい」と考えているオーナーさんは多いと思います。そういう方には、現時点でいちばん合っているテーマです。

＼ カフェ専用設計。お店の案内から豆の販売まで、1つのサイトで ／

SALONの公式サイト・デモを見る

• カフェに必要なページが、最初から全部そろっている
  • コンセプト、店舗紹介、メニュー、アクセス、スタッフ紹介、お知らせといった、カフェのサイトに欠かせないページがテンプレートとして用意されています。「何のページを作ればいいのか」から悩まなくて済むのは、初めてサイトを作るオーナーさんにとってかなり大きいです。もちろん全部作る必要はなく、必要になったページだけ足していけばOKです。
• コードを書かずに、自分の店の色に育てられる
  • TCD独自の設定画面（TCDテーマオプション）から、色の変更やコンテンツの表示・非表示、並び順の入れ替えができます。トップページには写真ギャラリー、Googleマップ、Instagramの埋め込みなどを好きな順番で配置可能。先ほどのチェックポイント②③（地図・営業時間・SNS連携）は、このテーマなら標準機能だけでクリアできます。
• 豆やグッズを、同じサイトの中で販売できる
  • WooCommerceに対応しており、商品一覧・商品ページ・売れ筋ランキングまで、お店のサイトと同じデザインで統一されます。外部のショップサービスに飛ばす形と違って、お店の世界観のまま買い物まで完結するのが強みです。（外部サービスとの使い分けは、のちほどの補足で詳しく解説します）
• 季節メニューやイベント用の告知ページ（LP）を何枚でも作れる
  • 期間限定メニュー、イベント告知、スタッフ募集、豆のお試しセットや定期便の案内など、1つの目的に絞った告知ページを、通常ページとは別デザインで何枚でも作れます。表示速度についても、公式の発表ではPageSpeed Insightsで92点とのことで、最新テーマらしくしっかり作り込まれています。

注意点もお伝えしておくと、今回の4つの中では一番高いテーマです（32,780円）。

ただ、制作会社にカフェのサイトを依頼すれば数十万円はかかりますし、ネットショップまで含めればさらに上がります。それがこの金額で済むと考えれば、十分に元が取れる投資だと私は思います。

また、デモの雰囲気は「深煎りのコーヒーが似合う、落ち着いた洋風カフェ」です。縦書きを活かした和の世界観を作り込みたい場合は、次に紹介するTreeの方が向いています。

関連記事：WordPress TCDテーマの魅力を初心者向けに解説！最高品質のサイトができる

【TCD Tree】お店の「世界観」を確立する、プロ仕様の美しさ

2つ目は、同じくTCDテーマの「Tree」です。

SALONが出た今でも、「世界観の表現力」だけで選ぶならTreeは相変わらず強いです。特に、縦書きのキャッチコピーを使った和の空気感は、Treeにしか出せません。

シズル感（美味しそう、なんか良い、エモい）がとても出るサイトです。

例えば、

「うちはただのカフェではなく、豆の個性を伝えるお店でありたい」

「近隣の人が、寂しさを埋めにきたり、ふらっと立ち寄って会話をできる居場所として提供したい」

「店主の人柄やバックボーンに共感するファンを集めたい」

「集中して作業ができる場所を提供したい」

など、個人店では大手チェーン店にはない差別化要素を押し出すことも大切ですよね。

「美味しいコーヒー」はもはや最低条件で、その上の「情緒的価値（誰の、どんな感情の受け皿になりたいのか）」がブランディングの鍵となります。ホームページを実際に作る時もそれをぜひ意識してみてください。

『お店の世界観を確立したい』そう願うオーナーにとって、TCDの「Tree」は他の追随を許さない圧倒的な美しさを提供してくれます。

＼写真を流し込むだけで、地域一番の「ブランド店」の佇まいへ ／

TREEのデモサイトをみてみる

オーナーさんが自前で作る場合にも、制作クリエイターさんにもおすすめのテーマです。

• 圧倒的な「世界観」を構築する構成と余白の美
  • 計算し尽くされた「余白」と「レイアウト構成」。横書きの説明に紛れて、日本語の美しさを引き立てる縦書きのキャッチコピーも入れることで絶妙な空気感を演出。方向性はさまざまに、和モダンなカフェや、隠れ家カフェ、農園カフェや、こだわりの焙煎技術を持つカフェなどの空気感を演出するのに最適です。サイトにアクセスした瞬間に、まるで店内に一歩足を踏み入れた時のような静寂や高揚感を感じさせることができます。
• 豆や抽出のプロセスを芸術的に見せるギャラリー機能
  •  単なるメニュー紹介に留まらず、オーナーの想いや豆のルーツを深く語るためのレイアウトが充実しています。写真・画像を入れる場所が多く、焙煎の様子や抽出のプロセスを、まるでプロの写真集のように美しくアーカイブできます。「ストーリー性」のある並びですので、創業の想いや、なぜこの場所でコーヒーを淹れているのかを「語る」ことも得意。言葉で説明する以上に、視覚的な「説得力」でお客様の期待値を高めることが可能です。
• 「型」に流し込むだけでプロ級の仕上がりになる完成度
  • Treeは、「過度なカスタマイズ」を必要としないほどデザインが完成されています。プロのデザイナーが作成したこのテンプレに、用意した写真とテキスト文を流し込むだけで、地域一番のブランド店としての品格が漂うサイトが出来上がります。「デザインに迷う時間を最小限にしつつ、最高の結果を出したい」という、多忙なオーナーにとって非常に合理的な選択です。

SALONとTreeで迷った場合は、次のように考えると決めやすいです。

• SALONが向いている： カフェらしいサイトを迷わず作りたい。いずれ豆やグッズのネット販売もやりたい。
• Treeが向いている： 和モダン・隠れ家・焙煎所など、店の世界観やストーリーをじっくり見せたい。販売は考えていない、もしくは外部サービスで十分。

【JIN:R】直感操作で「憧れのカフェデザイン」を即採用

3つ目の有料テーマが、「JIN:R」です。

Webの専門知識がないオーナーさんにとって、最も「挫折しにくい」テーマと言えるのがこのJIN:Rです。

ブログ向けテーマとして絶大な人気を誇りますが、実は「店舗サイト」としてのポテンシャルも非常に高いです。

このテーマはとにかく初心者にやさしい操作性となっていて、設定するのも慣れるのも早く、更新も比較的楽にできるかなと思います。

ありがたい機能は「デザインプリセット（着せ替え）」機能です。

TCDのSALONやTreeも最初からほぼ完成系のテーマでしたが、このJIN:Rも最初から完成系を作れます。

特にコーヒー店に特化した「Demo13 (Coffee)」や「Demo14（Restaurant）」があるので、デモサイトのデータを1クリックで自分のサイトに反映させ、あとは写真と文字を入れ替えるだけで、綺麗なサイトが完成します。

• Demo13: 木の温もりやコーヒーの香りが漂ってきそうな、柔らかいベージュトーンのデザイン。
• Demo14: 同じくベージュトーンの店舗デザイン。タイポグラフィと余白を活かしたスタイリッシュなデザイン。

綺麗ですよね。シンプルなサイトではありますが、おしゃれで親近感の湧くホームページに本当にすぐになります。

スマホで見ても綺麗で洗練されています。

用意する画像や情報量も、先ほど紹介したTCDの2テーマと比べると少なくて済むのでサクッと店舗サイトを作りたい方に向いていますね。（将来的にトップページにパーツ要素をつけ加えたり、ページをつけ足したりすることは可能）

＼ 週末の数時間で公開。「お店の魅力」が真っ直ぐ伝わるサイトへ／

JIN:Rの公式サイト

• 「1クリック」でコーヒー店の顔が完成する、綺麗なデザインプリセット 
  • JIN:Rの魅力はデザイナーが制作したデザインをボタン一つでコピーできる「着せ替え」機能。デザインに自信がないオーナーさんでも、写真とテキストを差し替えるだけで、豆の香りが漂ってきそうな高品質なサイトを一瞬で手に入れることができます。
• スマホ感覚でメニューを即座に更新できる「JIN:R専用ブロック」 
  • 「季節限定のフラッペを追加したい」「豆の価格を改定したい」といった日常の更新作業に、専門知識は不要です。最新のブロックエディタに完全対応しており、直感的な操作でテキストや画像をスマホ感覚で編集できます。制作会社に修正を依頼するコストと時間をカットし、常に「今」の情報を発信できるスピード感は大きな強みです。
• 「今すぐ行きたい」を逃さない、強力なスマホ集客機能 
  • 移動中にカフェを探しているお客様を確実に店へ導くための工夫が凝らされています。画面下部に常駐する「スマホフッターメニュー」には、地図（アクセス）・電話・Instagramなどを自由に配置可能。読者が「行ってみたい」と思った瞬間の熱量を逃さず、スムーズに来店のアクションへと繋げます。

予算を2万円以内に抑えたい方や、「まずはシンプルなお店の案内サイトがあれば十分」という方は、このJIN:Rで決めてしまって大丈夫です。

関連記事：wordpress超初心者に大人気のwordpressテーマ「JIN:R」のレビュー

【Lightning 】定番の無料テーマで自作したい方向け

4つ目が、無料テーマであるLightningです。

「開店準備で予算が限られている」「まずは最低限、お店の情報を正しく伝えたい」

そんな堅実なオーナーさんにとって、国内屈指のシェアを誇るLightningはありがたい選択肢となります。

派手な装飾よりも「信頼感」を重視した、ビジネスサイトの王道を行くテーマです。

このLightningで品質の高い店舗ホームページにすることは十分可能なのですが、その一方「安っぽくなる」リスクもあります。

Lightningは白いキャンバスのようなものなので、上手にやればうまくいきますが、ある程度のデザインセンスや試行錯誤の時間が必要です。

• 無料とは思えない高機能（有料版もある）
  • 無料版でも、営業時間・アクセスマップ・お問い合わせフォームといった、コーヒー店を運営する上で欠かせないページを美しく整理して表示できます。シンプルだからこそ、オーナー自慢の「一杯の写真」が際立ち、誠実な店構えを演出できます。
• 成長に合わせて機能を追加できる、高い「拡張性」
  •  「最初は無料で始めたいけれど、将来的にこだわりたい部分が出てくるかも……」という不安にも、Lightningなら柔軟に応えられます。有料の拡張プラグインを導入することで、デザインの幅を広げたり、さらに高度なブロック機能を追加したりすることが可能です。最初から高価なテーマを買うリスクを避けつつ、お店の成長と共にサイトも進化させていけます。
• 「迷わない」操作性と、圧倒的な情報量・サポート
  • 初心者でも使いやすいテーマです。パズルのような感覚でサイト構成を構築できるパターンライブラリ機能が非常によくできており、種類も豊富です。また、利用者もとても多いため、困った時の情報がネット上に溢れています。公式マニュアルも充実しており、心配がほとんどありません。

Lightningを使用する場合は、wordpress管理画面のテーマ公式ディレクトリからインストールすることができます。

カスタマイズを楽しめる方には最適な無料テーマです。

関連記事：WordPress無料テーマLightningの特徴とホームページを自作する方法【初心者】

---

ここからはいくつか補足をします。

ご自身の該当しそうな部分だけをお読みください。

豆の販売や予約はどうする？「外部サービス連携」と「SALONのショップ機能」の使い分け

「店内商品やコーヒー豆をネット販売したい」

「WEBサイトからの予約機能をつけたい」

そういったケースもあるでしょう。

結論から言うと、汎用のテーマに、あとからプラグインで「決済機能」や「予約機能」を足すことも全然可能ですが、初心者さんにはあまりおすすめしません。理由は、設定やデザインの調整に手間とリスクがかかるからです。

※プラグインとは、WordPress本体に機能を追加・拡張できる追加プログラム・拡張機能のことです。

では、どうするかというと、方法は2つあります。

• 方法①： 決済や予約には外部サービスを利用して、店舗ホームページ（wordpress）にはURLだけを貼る。（Tree・JIN:R・Lightningなど、どのテーマでもできる）
• 方法②： 最初からネットショップを前提に設計されているSALONを使って、同じサイトの中で販売する。

方法①：外部サービス（BASEなど）にリンクする

一番手軽なのは、「決済や予約には外部サービスを利用して、店舗ホームページ（wordpress）にはURLだけを貼る」形です。

1. BASEやSTORESでショップを無料開設する（最短5分）。
2. WordPress側に「オンラインショップ」「ローストコーヒー販売はこちら」などのメニューやボタンを作る。（wordpressテーマならすでにデザイン化されていますね）
3. そのボタンのリンク先を、BASEのショップURLにする。

やってみるとすごく簡単ですので、安心してください。

コーヒー豆を販売するとなると、決済（クレジットカード等）の安全性や在庫管理、配送伝票の出力など、目に見えないバックヤード業務が山ほどありますよね。

特にセキュリティの安心感が最も重要な点ですが、お客様の決済情報や稼働状況を自前で管理するのは非常にリスクが高いですし、BASEなどの専門サービスなら鉄壁のセキュリティに丸投げできます。

運用面でも圧倒的に楽です。商品の登録、スマホからの注文確認、在庫の自動更新など、ショップ運営に必要な機能が最初から100%揃っています。

BASEであれば、初期費用や毎月の費用は0円から使えます。（そのプランだと手数料は合計6.6%、1回ごとにかかる※公式サイトで要確認）

「月に数件売れればいい」「まずは試しに豆を出してみたい」という段階なら、この方法で十分です。

方法②：SALONなら、同じサイトの中にショップを持てる

一方で、豆の通販をお店の「第二の柱」として本気で育てたいのであれば、SALONのショップ機能を使う方法が有力になります。

• 世界観が途切れない： 外部サービスに飛ぶと、どうしてもデザインが変わって「別のサイトに来た感」が出ます。SALONなら、お店のサイトと同じデザインのまま商品ページ・カート・購入まで進めます。
• 売れるほど利益が残りやすい： ショップサービスに払う販売手数料がかからないので、販売量が増えるほど差が出ます。（クレジットカード決済を入れる場合の決済手数料は、どの方法でもかかります）
• お客さんのデータが自分の手元に残る： リピート購入の案内や定期便など、常連さん向けの施策を自分のサイトの中で組み立てられます。

ただし正直にお伝えすると、BASEに比べれば最初の設定は多いです。決済方法の登録、送料の設定、特定商取引法にもとづく表記ページの用意などを、自分で行う必要があります。WordPress本体やプラグインの更新（セキュリティ対策）も、ショップを持つならこれまで以上にこまめに行いましょう。

とはいえ、SALONの良いところは「最初からショップをやらなくていい」点です。まずはお店の案内サイトとして公開して、余裕ができたタイミングでショップを追加する。この順番で進められるので、開業したばかりのオーナーさんでも無理がありません。

なお、席の予約機能については、SALONを使う場合でも外部の予約サービスにリンクする形がラクでおすすめです。

テーマ「Tree」を使うときの、画像の選び方と配色パターン参考

この章も補足説明です。

たとえばTCDの「Tree」は、その圧倒的な「余白」と「横書き×縦書き」の美しさゆえに、写真一枚でサイトの格がガラリと変わるテーマです。

さまざまな世界観を演出することができますが、「画像」と「配色」が重要なのでご参考までに載せておきます。（画像の選び方と配色の考え方は、SALONを使う場合にもそのまま応用できます）

【和モダン】静寂と伝統が調和するカフェ

「Tree」の縦書きが最も活きるスタイルです。京都の路地裏にあるような、凛とした空気感を演出します。

画像の選び方	影を意識した写真。器の質感、木の節、障子越しに差す光など。「余白（背景）」が多めの構図を選ぶと、縦書きの文字も美しく浮かび上がります。
配色パターン	墨色（#333333）× 栗色（#762f07）× 生成り（#f5f5f0）など
Treeの活用術	背景を「生成り（ごく薄いベージュ）」にすると、画面全体が柔らかい和紙のような質感になります。

【隠れ家・アンティーク】物語を感じるシネマティックな店

都会の喧騒を忘れさせる、おこもり感のある世界観。「没入感」を重視します。

画像の選び方	ローキー（低明度・薄暗い）な写真。アンティークの椅子、使い込まれたカウンター、暗がりに灯るランプ。全体的に「暗い部分」が多い写真を選ぶと、大人の雰囲気が際立ちます。
配色パターン	深夜の紺（#1a1a2e）× 琥珀色（#b87333）× 深い木目（#3e2723）など
Treeの活用術	ヘッダーの透過設定を活かし、トップ画像に「暗めのフィルター」を薄くかけると、ボタンや文字の視認性が上がり、高級感が増します。

【農園・オーガニック】自然の恵みと鮮度を伝えるカフェ

開放感があり、素材（豆や野菜）への安心感と「生命力」を感じさせる世界観です。

画像の選び方	ハイキー（高明度）な写真。窓から差し込む明るい太陽光、青々とした観葉植物、白いリネン。接写よりも、奥行きを感じる「抜け感」のある写真が向いています。
配色パターン	セージグリーン（#879381）× サンドベージュ（#e3d5ca）× 白（#ffffff）など
Treeの活用術	ギャラリー機能を使って、農園の風景や収穫の様子を多めに画像利用。文字の色を真っ黒ではなく、少しグレーがかった緑にすると、目に優しいオーガニックな印象に。

【本格焙煎所】職人の技術と機能美を見せるラボスタイル

「プロの道具」や「プロセス」を強調し、コーヒーに対する真摯な姿勢を伝える世界観です。

画像の選び方	コントラストが強めの写真。ステンレスの焙煎機、銀色のタンパー、黒いコーヒー豆。人物を入れるなら、顔よりも「作業する手元」にフォーカスすると職人らしさが出ます。
配色パターン	スチールグレー（#757575）× カッパー（#b87333）× コンクリート白（#eceff1）など
Treeの活用術	余白をあえて広めに取り、「情報の少なさ＝専門性の高さ」として演出。フォントは明朝体ではなく、スタイリッシュなゴシック体を混ぜるのもアリです。

【補足レクチャー】Canvaで作る「文字入り画像」の作り方

もしJIN:Rを購入されて、「demo14」を選ばれた方がいれば、この補足をお読みください。

このデモですが、メイントップビジュアルの画像（パンやピザの画像）は、画像に文字を入れている「文字入り画像」なんですよね。

ですので、JIN:Rのデモみたいにしたければ、文字入り画像を用意しなければいけません。

一度やり方をマスターしておくと何かと使える技なので、ぜひ挑戦してみてください！

以下のステップ通りに進めれば大丈夫です。無料ツールの「canva」を使います。

STEP 1：適切なサイズでキャンバスを作る

まずはCanvaを開き、右上の「デザインを作成」から「カスタムサイズ」を選びます。

※私は有料版で使っているのですが、もし「カスタムサイズ」がつかえなければ、テンプレートのプレゼンテーションとかでも良いと思います。似たような比率のテンプレを開いて白紙のページを追加してください。

• 推奨サイズ： 幅 1600px × 高さ 900px （または 1200px × 675pxとか）大きさはなんでもいいけど比率が重要。ただし小さすぎはNG。
• 理由： 16:9の比率は、PCでもスマホでも表示が崩れにくく、JIN:Rのメインビジュアルに最も適したサイズです。

STEP 2：主役となる「シズル感のある画像」を配置する

背景となる写真をアップロードして配置します。（デモの場合は、パンとかピザでした）

• コツ： 文字を置くための「余白」を意識してください。JIN:Rのデモのように、左側や空いているスペースに文字を置くことを想定し、被写体（コーヒーやサンドイッチなど）を少し左右に寄せた写真を選ぶと、格段にプロっぽくなります。

STEP 3：メインの文字（キャッチコピー）を入れる

キーボードの「T」を押してテキストを追加します。

JIN:Rのデモ14の画像を踏襲する構図でもプロっぽくなると思います。

• フォント： 日本語なら「Noto Serif JP（明朝体）」や「筑紫A丸ゴシック」など。好きなものを探します。
• 配置： 左下に大きく。Demo 14のように「漢字（石窯）」と「英語（Pizza）」を分けるとおしゃれです。
• 色： 白が基本ですが、背景が明るい場合は「エフェクト」→「袋文字」や「ドロップシャドウ」で薄く影をつけると読みやすくなります。

STEP 4：アクセントの「吹き出し」や「あしらい」を加える

Demo 14の「生地が自慢」や「できたて」という手書き風の吹き出しを再現します。

• やり方： 左メニューの「素材」から「吹き出し」や「手書き」と検索。
• コツ： 線が細めのものを選ぶと、コーヒー店の繊細な空気感に合います。その上に、少し崩した手書き風フォント（「源暎ちくご明朝」など）で文字を乗せましょう。

STEP 5：書き出しの「形式」に注意

完成したら、右上の「共有」→「ダウンロード」から保存します。

• ファイル形式： PNGもしくはJPGがおすすめ。
• その他： 画像は、もし容量が大きければ圧縮してからwordpressにアップしましょう。

関連記事：【基本】画像を軽くする方法｜圧縮・縮小・WebP化まで全部わかる！

---

まとめ・あなたの「店のこだわり」をWEBで発信しよう

ここまで、コーヒー店に最適な4つのテーマと、賢いサイトの作り方をご紹介してきました。

最後に、自分にぴったりのテーマを診断してみましょう。

• 「カフェらしいサイトを迷わず作りたい。いずれは豆やグッズの販売もしたい」 → TCD SALON（32,780円）で、お店の案内からネットショップまで1つのサイトで育てましょう。
• 「とにかく一目惚れされる、美しいブランドサイトを作りたい」 → TCD Tree（28,380円）で、圧倒的な世界観を構築しましょう。
• 「シンプルでおしゃれなサイトを即公開して、楽しく更新したい」 → JIN:R（19,800円）のデモデザインを使って、最短で公開しましょう。
• 「まずはコストを抑えて、お店の情報を正しく届けたい」 → Lightningで、誠実な店構えを形にしてみましょう。