Twenty Twenty-Twoは2022年版のデフォルトテーマ

Twenty Twenty-Twoとは

WordPressテーマ Twenty Twenty-Twoは、WordPress 5.9で初めて導入されたデフォルトのブロックテーマです。これまでのWordPressテーマとは異なり、フルサイト編集 (Full Site Editing: FSE) の機能を最大限に活用できるように設計されています。

Twenty Twenty-Twoの主な特徴

Twenty Twenty-Twoが従来のテーマと一線を画す点は、その柔軟性とカスタマイズ性にあります。

  • フルサイト編集への対応:
    • サイト全体のレイアウト(ヘッダー、フッター、サイドバーなど)をブロックエディターで直接編集できます。
    • WordPress 5.9で導入されたサイトエディターを通じて、サイトのあらゆる部分を視覚的にカスタマイズできます。
    • 「Customizer(カスタマイザー)」ではなく、サイトエディターでの編集が推奨されています。
  • 豊富なブロックパターン:
    • あらかじめデザインされたブロックパターンが多数用意されており、数回のクリックでプロフェッショナルなレイアウトを作成できます。
    • ヘッダー、フッター、ページレイアウトなど、様々な用途に対応するパターンがあります。
  • グローバルスタイル (Global Styles):
    • サイト全体の色、タイポグラフィ、レイアウトなどを一括で変更できる機能です。
    • 個々のブロックだけでなく、サイト全体のデザインを統一的に調整できます。
  • テンプレートとテンプレートパーツ:
    • 投稿や固定ページのテンプレートを編集・作成・管理できます。
    • ヘッダーやフッターなどのテンプレートパーツもブロックとして編集可能です。
  • 軽量で柔軟性のあるデザイン:
    • 鳥の多様性や汎用性からインスピレーションを得た、軽やかで力強いタイポグラフィと自然の色を取り入れたカラーパレットが特徴です。
    • 最小限のCSSを使用し、theme.jsonとグローバルスタイルによってスタイルが設定されています。
  • カスタマイズの自由度:
    • 単一ページのサイトからブログ、ビジネスサイト、ポートフォリオまで、あらゆる種類のウェブサイトを独自のビジョンに合わせて作成できます。

Twenty Twenty-Twoが目指すもの

Twenty Twenty-Twoは、「誰もが真にユニークなウェブサイトを持つべきだ」という考えに基づいて開発されました。WordPressの進化に合わせて、ユーザーがコードを書くことなく、より直感的にサイトをデザイン・構築できるようにすることを目指しています。

このテーマは、WordPressのブロックエディターとフルサイト編集の可能性を探求するための理想的なテーマであり、WordPressの将来の方向性を示すものと言えるでしょう。

Twenty Twenty-Twoの使い方

WordPress のデフォルトテーマである Twenty Twenty-Two は、フルサイト編集 (Full Site Editing, FSE) に対応した最初のテーマです。従来のテーマカスタマイザーではなく、ブロックエディターをベースとした新しい方法でサイト全体を編集します。

ここでは、Twenty Twenty-Two の基本的な使い方とカスタマイズのポイントを説明します。

1. フルサイト編集 (FSE) とは

Twenty Twenty-Two を使う上で最も重要なのが、この フルサイト編集 の概念です。

  • 従来のカスタマイザーの代替: 以前のテーマにあった「カスタマイズ」メニューは Twenty Twenty-Two にはありません。サイト全体のデザインやレイアウトは、すべてブロックエディターを使って行います。
  • サイト全体をブロックで構成: ヘッダー、フッター、投稿テンプレート、固定ページテンプレートなど、サイトのあらゆる要素がブロックとして扱われ、編集できます。
  • グローバルスタイル: サイト全体のフォント、色、レイアウトなどのデザインをまとめて設定できます。

2. Twenty Twenty-Two の主要機能と使い方

2.1. エディター画面へのアクセス

WordPress 管理画面の 「外観」 にある 「エディター」 をクリックします。これが Twenty Twenty-Two のフルサイト編集画面です。

2.2. テンプレートの編集

エディター画面では、サイトの各部分に適用される テンプレート を編集できます。

  • テンプレートの種類: ホームページ、単一投稿ページ、固定ページ、アーカイブページ、404ページなど、様々なテンプレートが用意されています。
  • テンプレートの選択: エディター画面の上部にあるタイトル部分をクリックすると、編集したいテンプレートを選択できます。
  • ブロックの追加・編集: 各テンプレートはブロックの集合体です。テキスト、画像、ボタン、ナビゲーション、投稿ループなどのブロックを追加、移動、削除してレイアウトを自由に作成できます。
  • テンプレートパーツ: ヘッダーやフッターなど、複数のテンプレートで共通して使われる部分は「テンプレートパーツ」として独立して編集できます。これにより、一度変更すればすべての関連するテンプレートに反映されます。

2.3. グローバルスタイルのカスタマイズ

サイト全体の見た目を統一して変更できるのが グローバルスタイル です。

  • スタイルパネルを開く: エディター画面の右上にある「スタイル」アイコン(円の半分が黒いアイコン、または歯車アイコン内にある)をクリックします。
  • 主な設定項目:
    • タイポグラフィ: サイト全体や各ブロックのフォント、文字サイズ、行間などを設定します。
    • : サイトの背景色、テキスト色、リンク色、ブロックの背景色など、カラーパレットを定義し、適用できます。
    • レイアウト: コンテンツの幅や余白などを調整します。
  • ブロックごとのスタイル: グローバルスタイルだけでなく、個々のブロックに対しても個別のスタイル設定を行うことができます。

2.4. ブロックパターンを活用する

Twenty Twenty-Two には、あらかじめデザインされた豊富な ブロックパターン が含まれています。

  • パターンの挿入: ブロックを追加する際に「パターン」タブを選択すると、ヘッダー、フッター、ページレイアウト、ギャラリー、CTA(Call To Action)など、様々な目的のパターンを利用できます。
  • 効率的なデザイン: これらのパターンを使うことで、ゼロからレイアウトを組む手間を省き、プロフェッショナルなデザインを素早く実現できます。

2.5. その他の重要な機能

  • ナビゲーションブロック: サイトのメニューを作成・編集するには、「ナビゲーション」ブロックを使用します。
  • クエリーループブロック: 投稿の一覧(ブログ記事のリストなど)を表示するには、「クエリーループ」ブロックを使います。これにより、表示する投稿の種類、数、並び順などを細かく制御できます。

3. Twenty Twenty-Two を使いこなすためのヒント

  • まずは触ってみる: 実際にエディター画面を操作し、ブロックの追加や移動、スタイルの変更などを試してみるのが一番の近道です。
  • リスト表示を活用する: 複雑なレイアウトを編集する際は、エディター画面の左上にある「リスト表示」アイコン(3本線のリストアイコン)をクリックすると、ブロックの階層構造が一目でわかり、目的のブロックを選択しやすくなります。
  • Undo/Redo (元に戻す/やり直す): 編集を間違えても、エディター画面上部の矢印アイコンで簡単に元に戻したり、やり直したりできます。
  • 公式ドキュメントやチュートリアルを活用する: WordPress.org の公式ドキュメントや、YouTube などで公開されているチュートリアル動画を見ると、より詳細な情報を得られます。
  • 子テーマの検討 (上級者向け): もしテーマファイルを直接編集して大きなカスタマイズを行いたい場合は、将来のアップデートで変更が上書きされないように、子テーマ を作成することをおすすめします。ただし、フルサイト編集ではほとんどのカスタマイズがエディター内で完結するため、子テーマの必要性は以前より低くなっています。

Twenty Twenty-Two は、従来のWordPressテーマとは大きく異なるアプローチをとっていますが、慣れると非常に柔軟でパワフルなサイト構築ツールとなります。ぜひ色々と試して、あなただけのサイトを作り上げてください。

Twenty Twenty-Twoの注意点

このテーマはブロックテーマであり、従来のテーマとは異なる特性を持つため、いくつか留意すべき点があります。

以下に主な注意点を挙げます。

1. ブロックエディター(フルサイト編集)への習熟が必要

  • 従来のテーマとの違い: Twenty Twenty-Twoは、WordPress 5.9で導入されたフルサイト編集(Full Site Editing – FSE)に対応したブロックテーマです。従来のテーマのようにカスタマイザーで細かく設定するのではなく、サイトのヘッダー、フッター、サイドバーなども含め、すべてブロックエディターで編集します。
  • 学習曲線: ブロックエディターでのサイト全体の構築に慣れていない場合、最初は戸惑うかもしれません。ブロックの概念、パターン、テンプレート、スタイルなど、新しい用語や操作方法を学ぶ必要があります。
  • 推奨: WordPressの公式ドキュメントや、FSEに関するチュートリアルなどで事前に学習しておくことをお勧めします。

2. カスタマイズの自由度と複雑さ

  • 高い自由度: FSEの導入により、従来のテーマではPHPコードを編集する必要があった部分も、ブロックエディター上で視覚的に編集できるようになりました。これにより、デザインの自由度は格段に向上しています。
  • どこを編集しているか意識する必要がある: テンプレート、テンプレートパーツ、投稿・固定ページなど、編集している対象がどこなのかを常に意識する必要があります。誤って共通のテンプレートを編集してしまうと、サイト全体に影響が出てしまう可能性があります。
  • CSSの知識も役立つ場面がある: 基本的にはブロックエディターで完結しますが、さらに細かいデザイン調整を行いたい場合は、追加CSSの知識が役立つこともあります。

3. プラグインとの相性

  • FSE対応プラグインの選択: すべてのプラグインがFSEに完全に対応しているわけではありません。特に、従来型のテーマを前提としたページビルダープラグインなどは、Twenty Twenty-Twoとの相性が悪い場合があります。
  • 事前に確認: 導入したいプラグインがTwenty Twenty-TwoやFSEと互換性があるか、事前にプラグインのドキュメントやレビューを確認することをお勧めします。

4. パフォーマンス

  • 最適化の余地: Twenty Twenty-Two自体は軽量に設計されていますが、ブロックを多用したり、画像などのアセットを最適化せずに使用したりすると、サイトの表示速度に影響が出る可能性があります。
  • パフォーマンス最適化の意識: 画像の圧縮、キャッシュプラグインの利用など、一般的なWordPressのパフォーマンス最適化の知識は引き続き重要です。

5. 子テーマの作成

  • カスタマイズの推奨: Twenty Twenty-Twoを直接編集するのではなく、子テーマを作成してカスタマイズを行うことを強くお勧めします。これにより、テーマのアップデート時にカスタマイズが上書きされてしまうのを防ぐことができます。
  • 子テーマの作り方も従来とは異なる場合がある: ブロックテーマの子テーマの作り方やカスタマイズ方法は、従来のテーマとは少し異なる点があるため、関連情報を確認してください。

6. 情報の少なさ(リリース当初と比較して改善傾向)

  • 日本語情報: リリース当初は、FSEやブロックテーマに関する日本語の情報が少なめでしたが、現在は徐々に増えてきています。しかし、まだ従来のテーマに比べると、解決策を見つけるのに時間がかかる場合があるかもしれません。
  • 公式情報やコミュニティの活用: 公式ドキュメントやWordPressのフォーラム、コミュニティなどを積極的に活用することをお勧めします。

これらの注意点を理解した上でTwenty Twenty-Twoを使用することで、WordPressの新しい体験を最大限に活用できるでしょう。

口コミ・評判

WordPress公式テーマのTwenty Twenty-Twoは、フルサイト編集(Full Site Editing、FSE)機能を初めて導入したことで、ユーザーの評価が分かれています。

良い口コミ

  • フルサイト編集の入門に最適: WordPressの新しい編集機能であるFSEを体験するのに、シンプルでわかりやすいテーマとして評価されています。
  • カスタマイズの自由度が高い: ブロックパターンやテンプレートを組み合わせることで、従来のテーマでは難しかったサイト全体のデザインを細かく変更できます。
  • シンプルで軽量: 余分な機能がないため、サイトの表示速度が速いというメリットがあります。

悪い口コミ

  • フルサイト編集への学習コスト: 従来のカスタマイズ方法に慣れている人にとっては、FSEの概念を理解するのに時間がかかります。従来のウィジェットやカスタマイザーが使えないことに戸惑う人も多いようです。
  • デザインのシンプルさ: あくまでもベースとなるテーマなので、最初から凝ったデザインのサイトを作りたい人には物足りないかもしれません。
  • カスタマイズの難易度: ブロックエディターに慣れていないと、思った通りのレイアウトにするのが難しいと感じる人もいます。

まとめ

Twenty Twenty-Twoは、WordPressの新しい機能であるFSEを試したい人や、自分で細かくサイトをカスタマイズしたい人には非常に良いテーマです。しかし、既存のテーマと同じ感覚で簡単に使えると思っていると、戸惑うことがあるかもしれません。

もし、WordPressの新しい編集方法に挑戦してみたいのであれば、まずTwenty Twenty-Twoを触ってみることをおすすめします。

公式テーマや無料テーマのデメリット

WordPressの公式テーマや無料テーマには、いくつかのデメリットがあります。主な点をまとめると以下のようになります。

無料テーマ(公式ディレクトリ含む)の主なデメリット

  1. 機能性やカスタマイズ性の制限
    • 有料テーマに比べて、提供される機能やデザインオプションが限られていることが多く、理想とするウェブサイトを構築するために追加の作業やコーディング知識が必要になる場合があります。
    • デザインのユニークさに欠ける:多くの人が利用するため、他のサイトとデザインが似通ってしまう可能性があります。
  2. サポート体制の不足
    • 公式なサポートデスクがない:問題が発生した場合、テーマ開発者からの直接的なサポートは期待できません。公式フォーラムやコミュニティなどの情報に頼る必要があります。
  3. アップデートの頻度と保証
    • アップデートが不定期または停止するリスク:開発者のモチベーションやリソースに依存するため、テーマの更新が途絶えがちになることがあります。
    • セキュリティリスク:アップデートがされないテーマは、WordPress本体やプラグインの新しいバージョンとの互換性問題や、セキュリティの脆弱性が放置されるリスクがあります。
  4. 全体の完成度や細かい設定の自由度
    • デザインの細かい部分(例:コメント欄、SNSボタンのオン・オフなど)を自由に設定できないなど、痒いところに手が届かないことがあります。
  5. 著作権表示や広告
    • テーマによっては、フッターなどに開発者や提供サービスの著作権表示(クレジット)が消せない、または削除が有料となっている場合があります。

公式テーマ(無料で提供されているもの)に関する追加の留意点

公式テーマはWordPressの基準を満たしており、一定の品質やセキュリティは保たれていますが、無料テーマ全般のデメリットに加え、以下の点も考慮されることがあります。

  • デザインがシンプルで汎用性が高い:多くの公式テーマは、ユーザーが自由にカスタマイズできることを前提に、あえてシンプルな設計になっています。そのため、そのままではデザイン面で物足りなさを感じる場合があります。
  • 海外製が多く日本語情報が少ない:公式ディレクトリには海外製のテーマも多く、日本語に対応していない、または利用情報が少ない場合があります。

まとめ

特に企業サイトや収益化を目指すサイトなど、高い機能性、デザイン性、セキュリティ、手厚いサポートが必要な場合は、有料テーマの検討も視野に入れることが推奨されます。

一方、個人的なブログや小規模なサイトであれば、公式テーマや信頼できる無料テーマでも十分に運用可能です。ただし、その場合、カスタマイズやトラブル解決に必要な知識は自分で調達する必要があります。

WordPressの公式テーマ(無料)と有料テーマを比較すると、主に費用機能・カスタマイズ性サポートデザインなどの点で違いがあります。

以下に主な比較ポイントをまとめます。

あなたの状況推奨されるテーマ
予算をかけたくない個人ブログシンプルなサイトで十分自分でカスタマイズできる知識がある公式テーマ(無料)
ビジネスサイトや本格的なサイトを構築したいデザインの独自性を出したい豊富な機能やカスタマイズ性が欲しい初心者でサポートが必要時間と労力を節約したい有料テーマ

最終的には、あなたのサイトの目的、予算、求める機能、そしてウェブサイト構築のスキルレベルに応じて、最適なテーマを選択することが重要です。有料テーマを選ぶ場合は、評判やサポート体制、アップデートの頻度をしっかり確認することをお勧めします。

おすすめ有料テーマ

テーマ名主な特徴・強み適したサイト
ザ・トール (THE THOR)国内最高クラスのSEO最適化高速表示
プロ仕様の美しいデザインを簡単に実現(着せ替え機能あり)
アフィリエイトに役立つランキング作成機能CTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援
アフィリエイトブログ本格的なメディアサイト集客を重視するビジネスサイト
エマノン (Emanon)Web集客・ビジネス利用に特化した機能が豊富
CTA(行動喚起)、LP(ランディングページ)、メルマガ専用ページなどを簡単に作成
企業サイト、オウンドメディアに適したデザイン
WooCommerce対応でネットショップにも利用可能(Premium)
コーポレートサイト企業ブログオウンドメディアリード獲得を目的としたビジネスサイト
ストークSE (STORK SE)「誰が使っても美しいデザイン」を追求したモバイルファースト設計
シングルカラム(1カラム)レイアウトに特化し、コンテンツへの集中度が高い
ブロックエディタに最適化され、直感的な操作が可能
シンプルかつ洗練されたデザインで、汎用性が高い
商品・サービスのブランディングサイト、ミニマルな企業サイトシンプルで美しいブログ
リキッドプレス (LIQUID PRESS)用途別に豊富なテーマ(マガジン、コーポレートなど)が用意されている
高いSEO対策と構造化データ対応
多言語対応機能(LIQUID CORPORATEなど)
カスタマイザーでの直感的な編集が可能
メディアサイト(ブログ)、多言語対応が必要な企業サイト目的に合わせたテーマを選びたいサイト
有料WordPressテーマ

補足情報

  • ザ・トール: SEOと収益化を最重視する設計で、アフィリエイターやブロガーに人気が高いテーマです。
  • エマノン: 特にBtoBサービス業など、Webからの顧客獲得(リードジェネレーション)を重視するビジネスサイト構築に適しています。
  • ストークSE: モバイルでの見やすさに徹底的にこだわり、余計な装飾を排したデザインが特徴です。商品の魅力を際立たせたいサイトにも向いています。
  • リキッドプレス: 豊富なラインナップの中から目的特化型のテーマを選べるのが大きなメリットです。例えば、ニュースサイトならLIQUID MAGAZINE、企業サイトならLIQUID CORPORATEなどがあります。