フルサイト編集ができる最新WordPress日本製ブロックテーマ3選!

このサイトでは
アフィリエイト広告を表示しております。
ご了承の上、お読みください。 
▶詳しくはこちら

みずにゃん

どうも、みずにゃんです。
今後、WordPressで主流になっていくであろうブロックテーマにチャレンジしています。今回は日本人の方が作られた最新のWordPressブロックテーマを3つご紹介します!

これからのWordPressは「フルサイト編集」がトレンド!

先日、WordPress6.1メジャーアップデートが正式リリースとなりました。今回のWordPress6.1では、ブロックエディター周りの機能が強化され、より洗練なUIへと改善しています。

4年前のWordPress5.0でエディタがブロック化(Gutenberg)になってブロックエディターで記事を書くことが当たり前になってきました。その裏でエディタ以外のデザイニングの部分についても、ブロックで編集できるようにシステムが変わってきました。1年前のWordPress5.9アップデートで、ベータ版ながらもついに「フルサイト編集」(FSE)が実装されました。これによってテーマテンプレートもブロックでカスタマイズすることができるようになり、コーディングの手間を大幅に削減でき、より効率的に、より自由にWordPressサイトをカスタマイズできるようになったといえます。

フルサイト編集(FSE)にはFSEに対応したWordPressテーマ(ブロックテーマ)が必要です。従来から出ているテーマの大半(クラシックテーマ)はFSEに対応していません。

FSEが実装されてからまだ1年ほどで機能自体がベータ版なのでまだまだ試されていない人も多いかと思いますが、6.1アップデートでデフォルトのブロックテーマ「Twenty Twenty-Three」も登場しましたし、日本人の方が作られたFSE対応ブロックテーマも出始めて、そろそろトライしてみよう!と思っている人も多いのではないでしょうか。

今回はその中から、今僕が使っている日本製ブロックテーマを3つ、ご紹介します。

今回紹介するテーマはすべて再配布などが可能の100%GPLライセンスです。

真のレスポンシブデザインを追求した「unitone」

「unitone」は「Snow Monkey」を販売するモンキーレンチのキタジマタカシさんが開発したブロックテーマです。Every Layoutにインスパイアされているため、レイアウトプリミティブなブロックや、ブレイクポイントではなくコンテンツに基づいたレスポンシブデザインが採用されています。

テーマそのものはunitoneのサイトにアカウント登録すると無料でダウンロードでき、使うことができますが、16,500円/年のサブスク課金でライセンスキーを契約すれば、ワンクリックアップデートや豊富なブロックパターン、サポートフォーラムの利用などができるようになります。
実際に販売され頻繁にアップデートのあるテーマなので本番環境の使用でも安心できるかと思います。

実際のサイトエディタ画面

シンプルなデザインで余白に余裕のある設計なので、PCで見てもスマホで見てもバランスの取れたデザイニングができるようになります。

実際に触ってみて感じたのは、フルサイト編集によるデザイン自由度の高さを上手く活かせているテーマだと感じます。ただ、プラグインで子テーマを作り子テーマでカスタマイズしていると、サイトエディタがフリーズしてカスタマイズができなくなる不具合がありました。

僕の管理する「Dreaming Factory公式サイト」は現在この「unitone」を使用していますので、ぜひサンプル代わりに見てください(ただし、他社プラグインも使ってデザイニングしています)

Lightning譲りのデザイン性と安定性がウリの「X-T9」

「X-T9」株式会社ベクトルさんが開発する“Made in Nagoya”のテーマです。ベクトルさんといえば「Lightning」「Katawara」などのビジネス向けテーマが定番ですね。このX-T9もまた、ビジネス向けテーマとして開発されているFSE対応ブロックテーマです。

まだ正式リリースにいたってはいませんが、公式ディレクトリにも登録されている無料テーマなので、すぐトライすることができます。

X-T9の最大の魅力点は、同社の従来製品と比べてカスタマイズ性が大幅に改善している点です。従来のLightningやKatawaraは正直言ってデザインチューニングできる部分に乏しく、個人サイトには使いにくい構成でした。X-T9ではサイトカスタマイズ部分がブロック化したことでデザインの自由度が向上し、個人サイトや趣味サイトでも使いやすく仕上がっています

もちろん、同社のVKプラグイン群とセットで使うことで、従来通りビジネスサイトでも威力を発揮できる、オールラウンダーです。

また、機能自体がベータ版で不具合のあるテーマも多い中、X-T9は不具合をほとんど起こさずにフルサイト編集ができました。安定性はさすがベクトルさんです。

当方ではまだX-T9を使ったサイトは公開していませんが、「体操服イラスト全国図鑑」サイトはこのX-T9テーマでのオープンを目標に制作を続けています(2023年春オープン予定)
また、Dreaming Factory公式サイトと同内容のデモサイトを作りましたので、他テーマとのデザインの違いをぜひ見てみてください。

充実のブロックスタイルとUDフォントが魅力の「Cormorant」

「Cormorant」は、Gifu WordPress Meetupのオーガナイザーで岐阜を拠点に活動されている、オレインさんのテーマです。

「Cormorant」は日本語で「鵜」のこと。岐阜は鵜飼いで有名ことからこの名が名付けられています

実は「Cormorant」は初の日本製ブロックテーマとして登場。機能を必要最小限に省き、フルサイト編集の本来の良さを最大限引き出せるように作られています。フルサイト編集入門にも良いですし、別途ブロックプラグインを追加して本番サイトでも使えるかと思います。

テーマ独自のブロックデザイン・スタイルが充実しているのが素晴らしいです。また、モリサワ製のUDフォント「BIZ UDゴシック」を採用していて、読みやすさへの配慮もしっかりとなされています。

公式ディレクトリにある無料テーマですので、すぐ試せます。別途プラグインで子テーマを作りカスタマイズしていますが、こまめに保存していればカスタマイズ不可になる、といったような現象はありません(ただし一気にやりすぎてPCの処理が重くなったときにエラーの出る不具合があります。WordPress6.1環境で確認)

先日、デザインテストを兼ねて「てつぱら!アーカイブ」のテーマを「Cormorant」に替えてみました。前の「yStandard」のときのデザインに近くなるようにチューニングしていますが、SNSシェアボタン等を除いたほとんどの部分はCormorantテーマとWordPress純正のブロックのみで出来上がっています。プラグインを入れなくてもここまでデザイニングできるのは驚きでした。

また、Dreaming Factory公式サイトと同内容のデモサイトも作っています。デモサイトではトップページ用のテンプレートが認識させず、別テンプレートでなんとか対処しています。上の2テーマと比較してみてください!

僕から見た、フルサイト編集のメリットとデメリット

フルサイト編集ができることによって、サイトデザイニングの時間が大幅に削減できました。当ブログ「あそぶログ!」のテーマ変更の際はCSSカスタマイズなどに常々悩まされました。おおむね半日くらいはかかりますし、それでも補えあえなかった部分を随時修正していました。

フルサイト編集ですと、サイトの雛形がわずか1~2時間ですべて出来上がります。小規模サイトならもっとサクッと数十分コースで、Dreaming Factory公式サイトはわずか3時間半、「てつぱら!アーカイブ」も4時間ほどですべて作業が終わりました。

CSSでのカスタマイズは見出しやどうしてもサイトエディタでも賄えない部分など、微修正くらいで済み、自サイトの場合はたった数十行で終わってしまいました。

その反面、カスタマイザーで設定できていた部分が設定できなくなるため、ナビゲーションメニューまわりの修正や従来のウィジェットを多用していた人には不足感を感じる部分があるように思います。

また、エディタそのものの安定性もまだ高いとはいえず、ゴリゴリにイジっていると、エラーの出る不具合がたびたびあります。とはいえテーマによって子テーマカスタマイズが厳しそうなものから全くと言ってほどエラーが出なかったり、と安定性にはかなりの差を感じましたので、各テーマの不具合がおおむね修正されるまでは本番環境ではあまり使わないほうが無難でしょう。

まずはためして慣らしてみよう!

ただ今後のWordPressではフルサイト編集ができるものが主流となっていくのは間違いなく、3~4年後にはFSE対応が当たり前の世界がやってくる可能性も十分ありうると思っています。

まだ時期尚早と思わずに、まずはフルサイト編集がどんなものなのか、テスト環境や小規模サイト等で試してみる良い機会だと思います。3テーマとも無料で試せるので、ぜひ今のうちにフルサイト編集にトライして、今後当たり前になるUIに慣れておくチャンスです。

もう僕はクラシックテーマに戻れないくらいブロックテーマにハマっています。ArkheのFSE対応化を楽しみに待っています!

最後まで読んでいただき、
ありがとうございました!

こちらもチェックしてみてください!

ソフトバンクオンラインショッププ