CRAFT テンプレ市場 テンプレートランキング【2026年11月版】動きの演出つき新作3種と、業種別のおすすめ20種

このランキングの選び方

最初に、このランキングがどうやって決まったのかを説明します。順位は、販売数やアクセス数を集計したものではありません。CRAFT編集部が、20種類のテーマを実際に開き、スマホとパソコンの両方で触ったうえで、次の4つの観点から選んだおすすめの順です。

この4つは、どれか1つが飛び抜けていればよいというものではありません。たとえば、見た目がどれだけきれいでも、料金や予約の場所がわかりにくければ、お客さまは問い合わせの前に離れてしまいます。反対に、情報がそろっていても、印象に残らなければ、ほかのお店と比べられたときに選ばれません。今回の順位は、この4つのバランスを見て決めています。

1位から3位は「動きの演出つき」の新作

2026年11月、CRAFT テンプレ市場に、これまでのテーマとは少し性格の違う3種類が加わりました。スクロールやマウスの動き、ページを開いた瞬間に合わせて、ページが表情を変える「動きの演出つき」のテーマです。今回のランキングでは、この3種類を1位から3位に選びました。

なお、11月のアップデート（v1.1.0）で、ほかの17種類にも、スクロールに合わせて見出しや写真がふわっと現れ、トップの写真がゆっくり寄っていく、控えめな動きが入りました。ページの作りや編集のしかたは変わらず、すでにお使いの方も、マイページから新しい版を入れ直すだけで使えます。新作の3種類は、そこからさらに一歩進んで、テーマごとに専用の演出を作り込んだものです。

理由は大きく2つあります。1つ目は、これまで制作会社に数十万円で頼むしかなかったような見せ方を、テーマを入れるだけで使えるようにしたこと。2つ目は、動きを入れながらも、表示の軽さと、見る人へのやさしさを両方守る作りにしたことです。

動きのあるホームページというと、トップに大きな動画を流すものを思い浮かべる方が多いかもしれません。けれど、動画のファイルは1本で数MBから数十MBあることも多く、スマホで開くと表示に時間がかかったり、通信量がかさんだりします。新作の3種類は、動画のファイルを1つも使っていません。写真を少しずつ動かしたり、重ねた影の濃さを変えたりする、CSSと短いスクリプトだけで動きを作っています。

さらに、3種類とも、スマホやパソコンで「視差効果を減らす」「アニメーションを表示しない」といった設定をしている方には、演出を出さずに最初から全部見える状態で表示します。動きが苦手な方や、乗り物酔いのような気分になりやすい方にも、内容はきちんと届きます。

1位

建築・住まい

あとりえ作品が主役の、動くポートフォリオ。

マウスについてくる丸いカーソル、画面いっぱいに広がる写真、横にすべる作品の並び。作品が主役の、動くポートフォリオです。

1位に選んだのは、建築設計事務所やデザイン事務所のための「あとりえ」です。パソコンで開くと、マウスの動きに少し遅れて、丸いカーソルがついてきます。リンクの上では大きくなり、作品の写真の上では「VIEW」の文字が出て、押せる場所が自然にわかります。トップの大きな写真は、最初は額縁の中に収まっていて、スクロールするにつれて画面いっぱいに広がっていきます。

その下には、大きな英字がゆっくり流れる帯があり、さらに進むと、作品の写真が横にすべるように次々と現れます。縦にスクロールしているのに、作品は横に流れていくので、まるで展示室を歩いているような感覚で作品を見てもらえます。ページのいちばん上には、どこまで読んだかを示す細い線も出ます。

• マウスについてくるカーソル（作品の上では「VIEW」と出る）
• スクロールで画面いっぱいに広がる、トップの大きな写真
• 縦のスクロールで横にすべる作品の並び（スマホは指で横にすべらせる）
• 用途・所在地・延床面積などの概要表つきの作品詳細ページ
• 設計料の目安と、ご相談からお引き渡しまでの流れのページ

向いているお店・会社建築設計事務所 / インテリアデザイン事務所 / 設計に強い工務店 / リノベーション会社

見本サイトを見る ↗テーマの詳細と料金

あとりえを1位にした理由は、3種類の中でいちばん「見た瞬間に、ほかのホームページと違う」とわかる作りだからです。マウスについてくるカーソル、広がる写真、横にすべる作品と、演出の数も見せ方の幅もいちばん多く、それでいて作品の写真を差し替えるだけで、自分の事務所の作品集になります。設計事務所だけでなく、デザイン事務所や工務店、写真家やクリエイターなど、「作品で選ばれる仕事」なら幅広く使えるのも強みです。

あとりえは、「作品の質で選ばれる仕事」のためのテーマです。設計事務所を探す方は、まず作品を見て、自分の好みに合うかどうかを確かめます。作品を大きく、ゆっくり見せる仕掛けがそろっているので、写真の力をそのまま伝えられます。一方で、「設計事務所に頼むといくらかかるのか」「どう進むのか」という不安にも答えられるよう、設計料の目安や、家づくりの流れのページも最初から入っています。

2位

ブライダル・写真

つむぎ開いた瞬間から、映画のように。

開いた瞬間のオープニングと、写真がゆっくり寄りながら入れ替わる見出し。写真だけで「動画のような」トップページを作れるテーマです。

2位は、ブライダルフォトやフォトスタジオのための「つむぎ」です。トップページを開くと、まず生成りの画面に細い線がすっと引かれ、スタジオ名がふわっと浮かぶ、2秒ほどのオープニングが流れます。オープニングが明けると、画面いっぱいに写真が広がり、3枚の写真がゆっくり寄りながら、6秒ずつ入れ替わっていきます。写真の上には、窓から光が差しこむような明るさの動きが重なり、まるで短い映像を見ているような印象になります。

これは動画ではなく、写真3枚を重ねて、見える1枚を入れ替えているだけです。そのため、動画を埋め込むよりずっと軽く、写真を差し替えるだけで中身を変えられます。オープニングは、同じ人がサイトの中を回っているあいだは2回目から出ないので、ページを行き来するたびに待たされることもありません。

• 開いた瞬間のオープニング（1回の訪問で1度だけ。押すとすぐ消える）
• 3枚の写真が寄りながら入れ替わる、動画風の見出し
• 写真はスクロールで、カーテンが開くように左から現れる
• 撮影の種類から選ぶ入口、プランの料金表、撮影の日の一日の流れ
• 相談予約・LINE・電話の3つの入口（スマホは下部に固定）

向いているお店・会社ブライダルフォト / 前撮り・フォトウエディング / 写真館 / フォトスタジオ

見本サイトを見る ↗テーマの詳細と料金

つむぎのよいところは、「写真で選ばれる仕事」の強みを、トップページの最初の数秒で伝えられることです。前撮りやフォトウエディングを探している方は、何社ものスタジオを見比べています。開いた瞬間に、スタジオの撮る写真の空気がそのまま伝われば、比べられる中でも記憶に残ります。撮影の種類（前撮り・フォトウエディング・家族写真・記念日）から選べる入口や、プランごとの料金のカードもそろっているので、見た目だけでなく、相談の予約まで迷わず進めます。

3位

カフェ・飲食店

よいやみ扉を開けるように、ページが明けていく。

開いた瞬間は真っ暗。スクロールすると、扉を開けるように少しずつ明るくなっていく、夜のお店のためのテーマです。

3位は、バーやダイニングのための「よいやみ」です。トップページを開くと、画面はほとんど真っ暗で、パソコンではマウスを動かしたところだけが、ろうそくの灯りのようにふわっと明るくなります。スクロールを始めると、暗がりが少しずつ晴れていき、画面の高さぶん進むころには、カウンターの写真とキャッチコピーがはっきり読めるようになります。お店の扉を開けて、暗い店内に目が慣れていくときの感覚を、そのままホームページにしたような見せ方です。

暗がりが晴れたあとも、見出しや写真は、ぼかしが晴れるように浮かび上がります。写真はスクロールに合わせてほんの少しだけ上下に動き、奥行きが出ます。派手に動き回るのではなく、静かに雰囲気を伝える動きにとどめているので、大人のお客さまが落ち着いて読めるのもよいところです。

• 開いた瞬間は暗く、スクロールで明けていく、ほかにない入口
• 暗いあいだも、メニューと「ご予約」のボタンはすぐ押せる
• 写真つきの「今月のおすすめ」は、お酒や料理を1件ずつ登録するだけで並ぶ
• コース・チャージ・お酒と料理の料金表、はじめての方への案内まで用意
• スマホでは、画面の下にWeb予約・電話・地図のボタンがいつも出る

向いているお店・会社バー / ダイニングバー / ワインバー / 夜のレストラン

見本サイトを見る ↗テーマの詳細と料金

よいやみが向いているのは、「入ってみたいけれど、敷居が高そう」と思われやすいお店です。バーがはじめての方向けに、ご来店からお会計までの流れや、「甘め」「すっきり」のような頼み方の例を載せるページも最初から入っています。チャージやサービス料の有無を、料金の欄にはっきり書けるので、「いくらかかるかわからない」という不安を、ホームページの段階で取り除けます。

3種類の演出をくらべる

動きの演出つきの3種類は、どれも「動画を使わない」「動きを減らす設定の人には止める」という点は同じですが、動きの性格はかなり違います。自分の商売に合うのはどれかを考えるために、3種類をくらべてみましょう。

どのテーマも、トップページの1つ目のブロックに「印」が入っていて、それを消すと、その動きだけを止められます。たとえば、よいやみの暗がりは使わずに、ぼかしが晴れる見出しだけを残す、といった使い方もできます。くわしいやり方は、購入後にマイページから読める専用の説明書に、写真つきでまとめています。

上位3種類を使いこなすコツ

動きの演出つきのテーマは、入れただけでも見栄えがしますが、いくつかのコツを押さえると、ぐっと「自分のお店らしい」ホームページになります。3種類それぞれのコツをまとめます。

あとりえ：作品の写真の向きと数をそろえる

あとりえの作品の並びは、横長（3:2）の写真をそろえると、横にすべるときにリズムよく見えます。トップに並ぶ作品の数は、最初は4件です。作品がたくさんあっても、トップには「いちばん見てほしい4件」を並び順の数字で選び、残りは作品のページで見てもらう形にすると、印象がぼやけません。作品の詳細ページには、用途・構造・延床面積・竣工の年月を表で載せられるので、写真だけでなく、建物の中身もきちんと伝わります。住宅の所在地は、町名や番地まで書かず、「〇〇市」くらいまでにしておきましょう。

つむぎ：横長の写真を、3枚そろえる

つむぎのトップで入れ替わる3枚の写真は、雰囲気がそろっているほど、1本の映像のように見えます。たとえば「ロケーション」「ドレス」「小物」のように、撮影の流れに沿った3枚を選び、明るさと色味をそろえておくのがおすすめです。スマホでは縦長の画面に合わせて写真の真ん中が切り出されるので、主役が写真の真ん中にあるものを選ぶと、どの画面でもきれいに見えます。お客さまが写っている写真を使うときは、必ず掲載の許可を取ってください。

よいやみ：暗い写真を、あえて選ぶ

よいやみのトップは、暗がりの中から写真が浮かび上がる見せ方です。明るい昼間の写真を使うと、暗がりとの差が出すぎて、文字が読みにくくなります。カウンターの間接照明や、ボトル棚の灯り、キャンドルの光など、店内の灯りが写った暗めの写真を選ぶと、演出と文字の読みやすさの両方がきれいに保てます。また、「今月のおすすめ」は、季節が変わるたびに入れ替えると、常連のお客さまがホームページを開く理由になります。古いおすすめは、ゴミ箱に移すか下書きに戻せば、トップには新しい3件だけが出ます。

キャッチコピーは、動きの演出と一緒に最初に目に入る言葉です。お店や事務所の「らしさ」を、短い一文で書いてみてください。2行に分けるときは、スマホでも読みやすい長さ（1行12文字くらいまで）にすると、折り返しで崩れません。

4位から10位：業種に必要な情報が、最初からそろったテーマ

4位から10位には、それぞれの業種で「お客さまが知りたいこと」の置き場所がよく作り込まれたテーマを選びました。新作ほど大きな演出はありませんが、スクロールに合わせて内容がふわっと現れる控えめな動きが入っていて、情報の読みやすさはそのままに、ページに程よいリズムが出ます。必要な情報がわかりやすく並んでいることは、問い合わせや予約につながるいちばんの近道です。

4位

美容・サロン

ひより予約の前に、サロンの心地よさが伝わる。

メニューと料金を、所要時間つきでタブで切り替えて見せられる、美容室・サロンのためのテーマです。

カットやカラー、パーマなどの種類ごとにタブで切り替わる料金表は、メニューが多いサロンでもすっきり見せられます。チケットの形のクーポンや、定休日・短縮営業がひと目でわかる営業カレンダー、スタイルとスタッフの紹介まで、予約の前に知りたいことがそろっています。

• 種類ごとのタブで切り替える、所要時間つきの料金表
• チケット型のクーポンと営業カレンダー
• 右下の予約ボタン（スマホは下部の帯）

向いているお店・会社美容室 / ネイル / エステ / リラクゼーション

見本サイトを見る ↗テーマの詳細と料金

5位

カフェ・飲食店

のれんのれんをくぐる前に、店の空気が伝わる。

縦書きの木札でお品書きを並べる、和食店・居酒屋のためのテーマです。

のれんをくぐる前に、店の空気が伝わることを大切にしたテーマです。生成りと墨、朱色の和の配色に、縦書きの木札のお品書き。営業時間と定休日をトップの最初に出し、お席や個室の案内、コースと宴会の紹介まで用意しています。よいやみがバーやダイニング向けなら、のれんは和食の店向けの定番です。

• 縦書きの木札で並べるお品書き
• 営業時間・定休日を最初に表示
• スマホ下部に電話・予約・地図の固定ボタン

向いているお店・会社和食店 / 居酒屋 / 割烹 / 小料理屋

見本サイトを見る ↗テーマの詳細と料金

6位

建築・住まい

こもれび建てる前に、暮らしの手ざわりが伝わる。

間取り図と建物データつきの施工事例で、家づくりの手ざわりを伝える、工務店・住宅会社のためのテーマです。

施工事例の詳細ページには、間取り図と建物のデータを載せられます。10段階の家づくりの流れや、費用のうちわけを帯グラフで見せる欄、性能の数値や見学会の日程のカードもあり、建てる前の不安に一つずつ答えられます。設計事務所なら1位のあとりえ、地域の工務店ならこもれび、という選び方がおすすめです。

• 間取り図と建物データつきの事例詳細
• 10段階の家づくりの流れと、費用のうちわけの帯グラフ
• 資料請求・来場予約・相談を選べる問い合わせ

向いているお店・会社工務店 / 設計事務所 / リフォーム会社

見本サイトを見る ↗テーマの詳細と料金

7位

医療・健康

すこやか受診の前に、知りたいことがすぐわかる。

トップの写真に診療時間の表を重ねて、受診の前に知りたいことがすぐわかる、クリニックのためのテーマです。

「今日は開いているか」「何時まで受け付けているか」を、トップを開いてすぐに確かめられます。休診のお知らせを目立たせる帯、症状から選べる診療案内、時間帯ごとの混み合う目安のグラフ、健診や予防接種の料金表まで、患者さんの「知りたい」に先回りした作りです。

• トップの写真に重ねた診療時間の表
• 症状から選べる診療案内と、科ごとの詳細ページ
• 時間帯ごとの混み合う目安のグラフ

向いているお店・会社内科 / 小児科 / 皮膚科 / 地域のクリニック

見本サイトを見る ↗テーマの詳細と料金

8位

フィットネス・ジム

はずむ体験の予約まで、迷わずまっすぐ。

黒に明るいライム色、数字が目に入る太い書体。体験の予約まで迷わず進める、パーソナルジムのためのテーマです。

目的別のコース、回数ごとの料金表、資格や経歴つきのトレーナー紹介、目的で絞れるお客さまの声、時間帯ごとの混み具合の表までそろっています。体験トレーニングの予約ボタンが、ページのどこからでも押せるように置かれているのも特長です。

• 目的別のコースと回数ごとの料金表
• 経歴・資格つきのトレーナー紹介と詳細ページ
• スタジオ設備と、時間帯ごとの混み具合の表

向いているお店・会社パーソナルジム / 少人数のフィットネス / ピラティス・ストレッチ / 加圧・整体ジム

見本サイトを見る ↗テーマの詳細と料金

9位

宿泊・観光

はたご泊まる前に、宿で過ごす時間が伝わる。

縦書きのキャッチコピーと、写真に重ねた空室のお問い合わせ欄。泊まる前に、宿で過ごす時間が伝わる旅館・民宿のためのテーマです。

日付・泊数・人数を入れて空室を問い合わせる欄が、トップの写真の上にあります。お部屋ごとの広さ・定員・設備・料金の目安、1泊2食や素泊まりの札つきの宿泊プラン、宿からの距離つきの周辺の観光案内まで、宿選びに必要な情報がそろっています。

• 写真に重ねた空室のお問い合わせ欄
• お部屋の一覧と詳細、札つきの宿泊プラン
• 宿からの距離つきの周辺の観光案内

向いているお店・会社旅館 / 民宿 / ゲストハウス / 観光の宿

見本サイトを見る ↗テーマの詳細と料金

10位

ブログ・メディア

しおり読み終えたあと、また開きたくなる。

明朝体の見出しと、読みやすい1段組み。読み終えたあと、また開きたくなるブログ・メディアのためのテーマです。

記事を読む時間を心地よくすることに力を入れたテーマです。カテゴリつきの記事一覧とサイドバー、写真と目次つきの特集、お店へのリンクつきのおすすめ紹介、「この記事を書いた人」の欄まで用意しています。お店のホームページに、読みもののページを別に持ちたいときにも向いています。

• 明朝体の見出しと、読みやすい1段組みの記事ページ
• 写真と目次つきの特集
• 広告・アフィリエイトの方針のページ

向いているお店・会社個人ブログ / 小さなWebマガジン / オウンドメディア

見本サイトを見る ↗テーマの詳細と料金

4つの観点で見た、上位10種類の評価

上位10種類を、最初に説明した4つの観点で見ると、次のようになります。◎はとくによい、○はよい、という編集部の評価です。どのテーマも、ほかのテーマと比べて劣るところがあるわけではなく、強みがどこにあるかの違いと考えてください。

動きの演出つきの3種類は、デザインの印象の強さで抜けていますが、見本の作り込みでは、長く改良を重ねてきたひよりやすこやかなどのほうが細かいところまで行き届いています。「とにかく印象に残したい」なら上位3種類、「必要な情報を漏れなく載せたい」なら4位以下の業種のテーマ、という考え方もできます。

業種別のおすすめ：20種類から選ぶならこれ

ランキングに入らなかったテーマも含めて、20種類を業種別に整理しました。同じ業種に2〜3種類あるときは、どちらを選ぶとよいかの目安も書いています。

業種の名前がぴったり合わなくても、「お客さまがホームページで最初に知りたいこと」が近いテーマを選ぶと、うまくいくことが多くなります。たとえば、予約制のサロン型の仕事なら、ひよりやととのえ。作品や実績で選ばれる仕事なら、あとりえやかなで。料金を見積もりで決める仕事なら、みがくやたくみ、という具合です。

動きのあるホームページを選ぶときの考え方

動きの演出つきのテーマは、うまく使えば強く印象に残りますが、どんな商売にも合うわけではありません。選ぶ前に、次の3つを考えておくと失敗しにくくなります。

1. 動きが「商売の中身」を伝えているか

動きは、それ自体が目的ではありません。あとりえの広がる写真は「作品の迫力」を、つむぎの入れ替わる写真は「撮る写真の空気」を、よいやみの暗がりは「夜のお店の扉を開ける感覚」を伝えるためのものです。自分の商売にとって、動きが「伝えたいこと」を助けるかどうかを考えてみてください。たとえば、営業時間や料金をすぐに知りたい人が多いお店なら、動きより情報を前に出したテーマのほうが向いています。

2. 写真をそろえられるか

動きの演出つきのテーマは、写真の印象がとても大きく出ます。作品の外観の写真、光のきれいな撮影の写真、暗い店内の雰囲気が伝わる写真など、トップに使う写真を2〜3枚用意できるかを先に考えておきましょう。見本の写真のまま公開すると、ほかのお店と同じ写真になってしまいます。スマホで撮った写真でも、明るさと向きをそろえれば十分にきれいに見えます。

3. 表示の軽さと、見る人へのやさしさ

動きを入れると、ページが重くなったり、動きが苦手な人に負担をかけたりするのではないか、と心配される方もいます。CRAFTの新作3種類も、ほかの17種類の控えめな動きも、動画のファイルを使わず、写真と短いスクリプトだけで動きを作っています。また、端末で「動きを減らす」設定をしている人には演出を出さず、最初から全部見える状態で表示します。これは、ウェブの見やすさの指針（WCAG）で、操作に合わせた動きを止められるようにすることがすすめられているのに合わせたものです。

チェックが3つ以上なら、動きの演出つきのテーマを試してみる価値があります。2つ以下なら、まずは業種のテーマ（4位以下や業種別のおすすめ）から選び、必要なら新作を見比べてみるのがおすすめです。

テーマを決めるまでの手順

最後に、20種類の中からテーマを決めるまでの手順をまとめます。どのテーマも、購入前に見本サイトを何度でも開いて、スマホとパソコンの両方で試せます。

買い切りプランは10,000円（税別）で、テーマ本体と専用の説明書がつきます。WordPressがはじめてで、最初の設定を手伝ってほしい方は、買い切り＋初回セットアッププラン（19,800円・税別）も選べます。どちらも月額の費用はかかりません。サーバーとドメインの費用は、それぞれの契約先にお支払いいただきます。

まとめ

CRAFT テンプレ市場のテンプレートランキング（2026年11月版）では、動きの演出つきの新作「あとりえ」「つむぎ」「よいやみ」を1位から3位に選びました。どれも動画のファイルを使わずに、開いた瞬間やスクロールに合わせてページが表情を変える、これまでにない見せ方ができるテーマです。4位以下には、ひより、のれん、こもれび、すこやか、はずむ、はたご、しおりと、業種ごとに必要な情報の置き場所がよく作り込まれたテーマが並びました。11月のアップデートで、この4位以下を含むほかの17種類にも、控えめな動きが入っています。

テーマ選びで大切なのは、順位よりも「自分の業種のお客さまが、ホームページで何を知りたいか」です。業種別のおすすめの表で候補を2〜3種類にしぼり、見本サイトをスマホとパソコンで開いて、実際に触ってみてください。迷ったときは、テーマの選び方をまとめた安いWordPressテーマの選び方や、1万円でホームページを持つ方法もあわせて読むと、判断しやすくなります。