Pit Stop Studios

Pit-inする

Headless vs. WordPress

Mitchell Christ
読了時間: 11
  • Headless

デジタル化が進む現代で、ウェブサイト無しでのビジネス展開は手ぶらで戦場に行くに等しい。今やネット上にある全てのサイトの約4割に使用され、比較的簡単にサイト構築が可能なWordPressを検討している、あるいはすでに使っているこの記事の読者へ、果たしてWordPressは本当にあなたのニーズにあった最適なソリューションなのだろうか…?

そこで今回は、ウェブ制作における新しい技術「Headlessヘッドレス」を、より開発者・非開発者たちに広めたい気持ちで、紹介していきたいと思う。

そしてHeadlessは、ビジネスという戦場において、あなたの強力な武器となり得ることと信じている。

a Japanese medieval warrior, wearing a kabuto helmet with the text decoration "Headless" across his headdress and wearing samurai armor, holding a Macbook laptop, in the middle of battlefield with hundreds of other soldiers, with slight fog, IMAX 4k, Hasselblad

Headlessとは🔗

Headlessの特徴は、従来型の設計方法と根本的に異なり、フロントエンド(サイトの見た目)とバックエンド(サイトのコンテンツ)の隔離が可能となる。(”Headless(ヘッドレス)”は頭と胴体の乖離を意味する。)

WordPress vs Headless — それぞれのメリットとデメリット🔗

WordPress🔗

メリット

  • WYSIWYG (What You See Is What You Get)
    • コンテンツがウェブ上の画面の通りに編集できる・表示される
  • テーマやプラグインが豊富(ただし有料のものもある)
  • スピーディーにサイト構築が可能

デメリット

  • プラグイン地獄
    • 数や設定によってはページスピードやパフォーマンスに影響を与えてしまう
  • フロントエンドが固定。テーマに依存した構築になってしまう
    • カスタマイズには開発やコーディングが必要な場合がある
  • データによっては移行・マイグレーションが複雑

Headless🔗

メリット

  • 自由にフロントエンドを開発・構築可能
  • コンテンツの設計・整理が自由
  • 拡張性・再利用性
    • コンテンツは一つのページに限らず、複数のフロントエンドに配信・表示可能

デメリット

  • Learning curve
    • CMS(コンテンツ管理サービス)によっては使用や設定方法の学習が必要
  • API連携が多いため、開発・コーディングが必要(初期セットアップのみ)
  • CMS(管理画面)やデータの構成は開発者次第
  • フロントエンドは別に構築されるため、設定によってはコンテンツのプレビューが完全でない可能性がある

よくあるクライアントリクエスト🔗

新規のページ・テンプレート🔗

WordPress、Headless共に、比較的容易に実装が可能。

WordPressにはテンプレート機能が備われていないため、共通のレイアウトの調整は、使用されているページそれぞれを調整する必要がある(ページ作成ツールなどのプラグインで代行可能)。

Headlessの場合、新規ページ用のコンテンツを構成し、そのデータ構成の形に伴ったレイアウトをフロントエンドで実装する、至ってシンプルなプロセスで解決可能。

テーマ付属の機能の変更🔗

例えば、「このヘッダーメニュー、気に入らないから丸ごと変えて」という地獄のような依頼が来たとしよう。

WordPressの場合、おそらく使用しているテーマに問題があるので、結局はコードの調整が必要になる。他人のコードを読む・書き直すのは、誰も好む作業ではない。涙目になりながら、デベロッパーはコード調整作業に苦戦するであろう。

Headlessでも、要は同じ作業になるが、あくまでも調整するのは自分が書いたコード。

新規のカスタムのデータ🔗

例えば、「社員を紹介するcarouselスライドショーを作って」という依頼が来たとしよう。

WordPressには「社員」などのカスタムデータを登録する機能がないため、データはカルーセルが実装されるページ自体に保存することになる。他ページにも同じカルーセルを実装したいとなると、丸ごとコピペするハメに。そこで後日クライアントから変更が来たとして、、、さて、面倒なことになりましたね🥲

Headlessの場合、「社員」データタイプを作成し、社員データを引用する「社員カルーセル」モジュールを作成。実装したいページそれぞれに「社員カルーセル」モジュールを挿入するだけのこと。クライアントから変更の依頼が来たとしても、一度だけ調整を行い、それが全ページに反映さる。あゝ、いとラクし。

まとめ🔗

WordPressという一般的なCMSに代わる新たな技術として「Headless」が登場。WordPressとHeadless、それぞれにメリットとデメリットがあるが、筆者はHeadlessの柔軟性や効率性を見て大いに可能性を感じている。読者には、ビジネス展開において最適な選択肢を検討する上で、Headlessがどのような利点を持つかを考慮することが重要であると考えている。

Headlessに魅力を感じ、ビジネスを飛躍したいと思ったあなた。Pit Stop Studiosと共に、素晴らしいウェブを築いていこうではないか。

a green F1 racecar with the text "Headless", angled posed next to a boring 2014 lightblue Toyota Prius, at the startline of an F1 racetrack, IMAX 4k,film still,low-angle photography

Recent articles on PitHub