新しい Web サイトをゼロから構築した理由: 必要な進化

この投稿を次のように要約します: 14分で読めます

チャットGPT 困惑 グロック Google AI

1) 新しいウェブサイトを作成しても“テーマを切り替える”ことができなかった理由

最初に変更の必要性を認識したとき、タスクは単純に思えました。“上部のブロックを変更し、行動喚起をより効果的にします。” 額面どおりには、これは即効性のある解決策のように思えるかもしれませんが、この小さな作業により、サイトの構造と設計に関するはるかに大きな根本的な問題が明らかになったことにすぐに気づきました。問題は 1 つのブロックだけではなく、サイトのアーキテクチャ全体の見直しが必要でした。

当社の Web サイトは時間の経過とともに構築され、統一されたテーマやテンプレートなしで、さまざまなデザインやレイアウトを使用してさまざまなページが追加されました。各ページのデザインはユニークで、創造的に聞こえるかもしれませんが、不一致という重大な問題を引き起こしました。サイトの残りの部分をそのままにして、上部ブロックのみの新しいデザインを作成すると、700 を超えるページと投稿でそのブロックを手動で更新することになります。さらに悪いことに、この手動プロセスは、将来の変更を加えるたびに繰り返す必要があります。何百ものページをくまなく調べて、それぞれに最新の更新情報があることを確認しなければならないことの非効率性を想像してみてください。古いサイトとの協力を続けることは持続可能ではないことがすぐに明らかになりました。

各ページを更新するロジスティクスだけでなく、全体的なユーザー エクスペリエンスを考慮する必要がありました。今日のユーザーは、Web サイトにアクセスするとシームレスで一貫したエクスペリエンスを期待しています。ページを下にスクロールして、デザインに一貫性がない – 各ブロックが異なるスタイルを使用している – ことが確認されると、支離滅裂でプロフェッショナルではない印象が生じます。さらに悪いことに、ユーザーがあるページから別のページに移動して、レイアウトとデザインがまったく異なることに気づくと、無秩序な感覚が強化されます。

不一致はレイアウトを超えて広がりました。サイト上の画像の多くは古くなっていたり、スタイルが不十分であったり、ニューラル ネットワークによって不適切に生成されていたりしました。これらの画像は現代のデザイン基準に準拠しておらず、置き換えることも困難な作業でした。悪い画像の使用はサイト全体の品質にあまり反映されず、ユーザーは私たちが提供していた製品やサービスに対して否定的な印象を抱くようになりました。

Elementor のようなツールを使用してサイトを包括的に更新する簡単な方法はありませんでした。各ページとブロックには独自のインライン スタイルが含まれていたため、グローバルに変更を加えることはできませんでした。サイトのスタイルを更新したい場合は、すべてのページを調べて各ブロックを手動で更新する必要があり、時間がかかり、非効率的です。これを念頭に置いて、私たちの唯一の解決策は新しい Web サイトをゼロから構築することであることが明らかになりました。これにより、同じ URL を維持しながら、新しく一貫性があり、簡単に更新できるデザインですべてのコンテンツを転送できるようになります。

2) 使用しないことにした理由 Elementor

Elementor は、最も人気のあるページ ビルダーの 1 つです WordPress。表面的には、迅速かつ簡単なページ作成を可能にする優れたツールのようです。しかし、広範囲に取り組んだ結果、いくつかの制限に遭遇し、Elementor から離れ、代わりにカスタム構築された Web サイトを選択することにしました。

Elementor’s 制限と課題:

1. バグとグリッチ: Elementorは多くの便利な機能を提供していますが、技術的な問題がないわけではありません。たとえば、ページをコピーして編集しようとすると、変更を加える前であっても、新しいページが元のページとは異なるように見えることがよくありました。“最大画像幅” プロパティが正しく機能しないなど、要素の表示方法に頻繁にバグが発生しました。これらの不具合により、ページ全体で一貫したスタイルを確保することが困難になりました。
2. 創造の自由が多すぎると、一貫性が失われます: Elementor’ の主なセールスポイントの 1 つは、すべてをカスタマイズできることです。ただし、特に複数の編集者がサイトで作業している場合、この柔軟性は諸刃の剣となる可能性があります。専門家でない人が意図せず一貫性のないデザインのページを作成してしまうことはよくあります。たとえば、編集者がピンクのボタンにピンクのテキストを使用したり、背景にオレンジ色の三角形を追加したりして、乱雑でわかりにくいデザインになっている例を見ました。厳格なデザインシステムが整備されていなければ、一貫したビジュアルアイデンティティを維持することは不可能でした。
3. 高度な機能のための限定的なカスタマイズ: Elementor はテキストと画像を使用した基本的なページ構築に優れていますが、カスタム機能を追加する必要がある場合はさらに困難になります。多くの場合、組み込みブロックに限定されており、より複雑な機能に合わせてカスタマイズするのは困難でした。基本的なレイアウトを超えてニーズが高まるにつれて、Elementor’ の限界がますます明らかになりました。
4. コードの肥大化とパフォーマンスの問題: Elementor’ページを構築する方法では、要素の過剰なネストが発生します。例えば、Elementorは自動的に複数を生成する <div> 他のコンテナ内のコンテナ <div> 要素にはそれぞれ独自のスタイル セットがあります。その結果、構造が肥大化し、読み込み速度、ページのパフォーマンス、そして最終的には Web サイトの SEO ランキングに悪影響を及ぼします。速度テストを実行したところ、結果は一貫して悪く、Elementor によって生成された重いコードが主な原因でした。
5. A/B テスト機能はありません: 今日のデジタル環境では、ユーザーエクスペリエンスを最適化するためにA/Bテストが不可欠です。ただし、Elementor では、異なるバージョンのサイトを異なるユーザーに表示する機能は提供されません。誰もが同じサイトを見るため、色、ボタンの形状、背景画像などのデザイン要素をテストして微調整する能力が制限されます。この機能がなければ、実際のユーザーの行動に基づいてサイトを最適化することはできません。
6. データベースブロート: おそらく、Elementor の最も重大な欠点の 1 つは、スタイルとコンテンツの処理方法です。Elementor スタイル、ネストされた構造、およびその他の不要なタグをデータベース内のコンテンツに混ぜて保存します。これにより、データベースが肥大化し、Elementor が無効またはアンインストールされてもクリーンアップされません。その結果、新しいテーマやフレームワークに切り替えても問題は解決しません – これらのスタイルはページに埋め込まれたままであり、引き続き問題を引き起こします。

これらすべての課題を念頭に置いて、より堅牢なソリューションが必要であることが明らかになりました。私たちは、Elementor を使用せずに、より持続可能で柔軟なアプローチを選択して、新しい独立した Web サイトを構築することを決定しました。

3) 新しいサイトにページを作成する方法

新しいサイトをゼロから構築することで、ページを作成するためのクリーンで合理化されたプロセスを確立する機会が得られました。新しいシステムでは、ページの作成は簡単です:

1. WordPress管理パネルにログインしてクリックします ページ -> 新しいページを追加.
2. 標準の WordPress エディターが表示され、テキストを書いたり貼り付けたり、リンクを追加したり、画像をアップロードしたりできます。

このプロセスはシンプルですが柔軟です。WordPress のコンテンツ エディターは、Elementor’ の複雑なブロック システムに依存する代わりに、はるかにクリーンになり、迅速な更新と簡単なカスタマイズが可能になります。エディタの下には、 の設定があります 高度なカスタムフィールド （ACF）は、サイト全体で一貫性を維持するようにすでに構成されています。

ACF を使用すると、次のようなブロックを使用して柔軟なコンテンツ セクションを作成できます コンテンツ1…コンテンツ15ページの各セクションのタイトル、テキスト、画像、ボタンのラベルを簡単に設定できます。これらのブロックは画像とテキストの位置を自動的に交互に配置するため、手動で調整することなくレイアウトが視覚的に魅力的なままになります。

画像の場合、サイトのメインカラーにグラデーションを自動的に適用するカラーマッチングシステムを実装しました。これにより、すべての画像が全体的な美観と一致することが保証されます。色がそのまま残る必要があるロゴやスクリーンショットの場合は、グラデーションをオーバーライドする “keep colors” オプションがあります。

このシステムは、すべてのページにわたるデザインの一貫性を維持しながら、コンテンツ管理を簡素化します。

4) 新しい投稿を作成する方法

新しいサイトでの投稿の作成は、ページの作成と同じ合理化されたプロセスに従いますが、いくつかの重要な違いがあります:

• 投稿には次のような URL があります ../ブログ/..ページと区別する。
• 右側のサイドバーには、ブロックに 3 つの最新記事が自動的に表示され、ブログをダイナミックで魅力的な状態に保つのに役立ちます。

すべての投稿のテンプレートはファイル内にあります テンプレートパーツ/コンテンツ/コンテンツシングル。php各ブログ投稿の構造とレイアウトを処理します。この一貫したテンプレートにより、簡単に更新でき、すべての投稿が同じデザイン ガイドラインに準拠していることが保証されます。

5) 高度なカスタムフィールド（ACF）

ACF は、当社の新しい Web サイトの開発に不可欠な部分でした。これにより、WordPress 管理パネルを通じて簡単に管理できるカスタム フィールドを作成できます。のような分野 コンテンツ_1 PHP コードで参照されているため、ページや投稿ごとに正しいコンテンツを動的に取り込むことができます。

この柔軟性は、必要に応じてカスタマイズの余地を提供しながら、サイトを効率的に管理および更新できるようにするために重要です。

6) A/Bテスト

新しいサイトで行った最も重要な改善の 1 つは、A/B テストの実装でした。A/B テストにより、サイトの 2 つのバージョンを比較して、どちらがユーザーにとってパフォーマンスが優れているかを確認できます。これには、さまざまな色、ボタンの形状、背景、さらにはレイアウトのテストが含まれる場合があります。

を用いてこの機能を実装した パラメータを取得する URL に。たとえば、異なる URL を使用して 2 つの同一の広告キャンペーンを作成できます

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

ユーザーがこれらのリンクをクリックすると、パラメータは Cookie に保存されます。パラメータの値に応じて、サイトにはボタンの色や背景画像など、さまざまなバージョンのページが表示されます。これにより、ユーザーの好みや行動に関する貴重なデータを収集できます。

すべてのイベントは a に記録されます .csv ファイルと MySQL データベースにより、データを分析し、サイトの改善について十分な情報に基づいた意思決定を行うことができます。

7) functions。phpファイル

の 関数。php WordPress のファイルは、ブログ関連のタスクに限定されていると誤解されることがよくあります。ただし、このファイルは投稿やブログ機能を管理するための単なるユーティリティではありません。サイト上のすべてのカスタム機能のバックボーンとして機能します。私たちの場合、を利用しました 関数。php 高度な機能を追加し、パフォーマンスを最適化し、サイト全体のスクリプトと設定を管理するためのファイル。

その方法の概要は次のとおりです 関数。php ファイルは私たちの開発において重要な役割を果たしました:

• カスタム投稿の種類と分類

の重要な用途の 1 つ 関数。php ファイルは、カスタム投稿タイプと分類法を作成することであり、これによりコンテンツをより効果的に整理できるようになりました。デフォルトの WordPress 構造（ページと投稿）のみに依存するのではなく、ケーススタディ、体験談、製品機能など、特定のコンテンツにカスタム タイプを導入しました。これにより、コンテンツがより適切に整理された状態に保たれただけでなく、ナビゲートして関連情報を見つけやすくなり、ユーザー エクスペリエンスが向上しました。

たとえば、ケーススタディ用のカスタム投稿タイプを作成するために、次のコードを追加しました 関数。php:

function create_case_study_post_type() {

  register_post_type( 'case_studies',

    array(

           'labels' =>``array(

              'name' => __( 'Case Studies' ),

          'singular_name' => __( 'Case Study' )

        ),

            'public' => true,

           'has_archive' => true,

           'rewrite' => array('slug' => 'case-studies'),

       )

  );

}

add_action( 'init', 'create_case_study_post_type' );これにより、通常の投稿と同様に動作しますが、独自のアーカイブと分類構造を持つ “Case Studies” と呼ばれる新しい投稿タイプが作成されました。

• 外部スクリプトとスタイルを読み込み中

のもう 1 つの重要な使用法 関数。php 外部スクリプトとスタイルをロードし、当社の Web サイトに必要なライブラリとフレームワークがすべて揃っていることを確認することでした。たとえば、次のようなライブラリを統合しました スリック。js スライダー用と AOS （スクロール時にアニメーション）スムーズなアニメーションを実現します。これらのアセットを必要な場合にのみ選択的にロードすることで（特定のページやテンプレートなど）、不必要な肥大化を減らし、ページのロード速度を改善しました。

スタイルとスクリプトの読み込みを処理する方法は次のとおりです:

function load_custom_scripts() {

  // Load Slick slider for specific templates

   if( is_page_template('template-slider.php') ) {

    wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/css/slick.css' );

        wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '', true );

   }

   // Load AOS animations site-wide

   wp_enqueue_style( 'aos-css', get_template_directory_uri() . '/css/aos.css' );

   wp_enqueue_script( 'aos-js', get_template_directory_uri() . '/js/aos.js', array('jquery'), '', true );

}

add_action( 'wp_enqueue_scripts', 'load_custom_scripts' );条件付きチェック（例: is_page_template())、不要なスクリプトがサイト全体にロードされないようにすることで、パフォーマンスを最適化しました。

• カスタムショートコード

サイト コンテンツを管理する非技術者ユーザーの柔軟性を向上させるために、カスタム ショートコードを追加しました 関数。php。これらのショートコードにより、ユーザーはコードに触れることなく、複雑な機能やスタイル設定された要素を簡単に挿入できるようになりました。たとえば、サイト上の任意の場所にカスタム ボタンを追加するためのショートコードを作成しました

[編集済み]

このショートコードにより、編集者はカスタム テキストと URL を含むボタンを簡単に追加できるようになり、デザインを壊すことなく迅速に調整できるようになりました。

8) SEOとサイト速度の処理

Web サイトの全面見直しでは、SEO とサイト全体のパフォーマンスの向上に主な焦点が当てられました。Elementor を使用して構築された元のサイトでは、コードの肥大化と最適化されていない画像により、読み込み時間が遅く、SEO 慣行が最適ではないという問題がありました。

SEOの改善

新しいサイトが SEO に優しいものであることを保証するために、私たちは最初からいくつかのベスト プラクティスを実装しました

• セマンティックHTML: ヘッダータグを適切に使用してサイトのHTMLを慎重に構造化しました(<h1>, <h2>、 など）、検索エンジンがコンテンツ階層を簡単に解析して理解できるようにします。これは、SEO ランキングとアクセシビリティの両方にとって特に重要です。
• メタタグとオープングラフデータ: を活用しました ヨーストSEO ソーシャル共有用のメタ タイトル、説明、Open Graph データを処理するプラグイン。Yoast を使用することで、各ページと投稿に最適化されたメタデータがあることを確認しました。これは、検索エンジンの可視性とソーシャル メディア プラットフォームからのクリックスルー率にとって非常に重要です。
• スキーママークアップ: を使って 関数。php ファイルでは、構造化データのカスタム スキーマ マークアップを追加し、検索エンジンが検索結果にページを表示する方法を改善しました。たとえば、記事、ケーススタディ、製品のスキーマを含め、検索エンジンがコンテンツをより適切に分類できるようにしました。

function add_schema_markup() {
  echo '<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "ConveyThis",
    "url": "https://www.conveythis.com",
    "logo": "https://www.conveythis.com/logo.png", "sameAs": [ "https://www.facebook.com/conveythis", "https://twitter.com/conveythis" ] } </script>'; } add_action( 'wp_head', 'add_schema_markup' );

サイト速度の最適化

パフォーマンスは、ユーザー エクスペリエンスだけでなく、SEO ランキングにとっても重要な要素です。サイトの速度を向上させるために、いくつかの手順を実行しました

• 画像の最適化: などの最新の画像形式を利用しました ウェブPPNGやJPEGなどの従来のフォーマットよりも優れた圧縮率を提供します。すべての画像はユーザーの画面解像度に基づいて適切なサイズで提供され、モバイルデバイスでも高速な読み込み時間を実現します。
• 遅延読み込み: 画像の遅延読み込みを実装することで、ユーザーの画面に表示されている画像のみが最初に読み込まれるようにしました。ユーザーがスクロールすると追加の画像が読み込まれ、最初のページの読み込み時間が短縮されます。
• キャッシュと縮小: 使用しました WPロケット HTML、CSS、およびのキャッシュ、縮小、圧縮用 JavaScript ファイル。WP Rocket は、ファイル全体のサイズを縮小し、静的キャッシュされたバージョンのページをリピーターに提供することで、読み込み時間を短縮するのに役立ちました。

9) データベースの最適化とクリーンアップ

古い Web サイトには、Elementor の肥大化と非効率なデータベース構造により、大量の “ジャンク” データが蓄積されていました。新しいサイトがスムーズに実行されるように、データベースの徹底的なクリーンアップと最適化を実行しました。

• 古い Elementor データの削除

前述したように、Elementor を無効にした後でも、そのスタイルと設定は依然としてデータベースに埋め込まれていました。カスタム クエリを使用して、この余分なデータを削除し、データベースをクリーンアップしました。さらに、時間の経過とともに蓄積された未使用のメディア ファイル、ポスト リビジョン、期限切れのトランジェントも削除しました。

• データベースのインデックス作成

また、頻繁にクエリされる列にインデックスを追加することでデータベースを最適化し、データベース クエリがより高速かつ効率的になるようにしました。たとえば、にインデックスを追加します post_date 列により最近の投稿に関連するクエリが高速化され、ブログ ページのパフォーマンスが向上しました。

結論

新しい Web サイトをゼロから構築するという決定は、古いサイトの制限と非効率性によって推進されました。テーマを切り替えるだけでは、デザインの不一致、スタイルの肥大化、Elementor によるパフォーマンスの問題のため、実行可能な選択肢ではありませんでした。カスタム開発と高度なカスタム フィールドを備えた新しいサイトを作成することで、合理化されたアップデートと A/B テスト機能を可能にしながらユーザー エクスペリエンスを向上させる、より効率的で一貫性のあるプロフェッショナルな Web サイトを実現しました。この新しいサイトは、将来の成長と改善のための強固な基盤を提供します。