1) 新しいウェブサイトを作成し、単に「テーマを切り替える」ことができなかった理由
最初に変更の必要性を認識したとき、タスクは単純に思えました。「トップ ブロックを変更して、行動喚起をより効果的にする」。表面的には、これは簡単な解決策のように見えるかもしれませんが、すぐに、この小さなタスクによって、サイトの構造とデザインに関するはるかに大きな根本的な問題が明らかになったことに気付きました。問題は 1 つのブロックだけではありませんでした。サイトのアーキテクチャ全体を徹底的に見直す必要がありました。
当社の Web サイトは時間をかけて構築され、統一されたテーマやテンプレートはなく、さまざまなデザインやレイアウトを使用してさまざまなページが追加されていました。各ページのデザインはそれぞれ異なっており、クリエイティブに聞こえるかもしれませんが、一貫性がないという重大な問題を引き起こしました。サイトの残りの部分はそのままにして、トップ ブロックのみを新しいデザインにすると、700 を超えるページと投稿のそのブロックを手動で更新することになります。さらに悪いことに、この手動のプロセスは、将来変更を加えたいときに毎回繰り返す必要があります。何百ページものページをくまなく調べて、それぞれが最新の更新になっていることを確認する非効率性を想像してみてください。古いサイトを使い続けることは持続可能ではないことがすぐに明らかになりました。
各ページを更新するロジスティクスだけでなく、全体的なユーザー エクスペリエンスも考慮する必要がありました。今日のユーザーは、Web サイトにアクセスするときにシームレスで一貫性のあるエクスペリエンスを期待しています。ページをスクロールダウンして、デザインに一貫性がなく、各ブロックで異なるスタイルが使用されていることに気付いた場合、まとまりがなくプロフェッショナルではない印象を与えます。さらに悪いことに、ユーザーがあるページから別のページに移動したときに、レイアウトとデザインがまったく異なることに気付いた場合、混乱感が強まります。
不一致はレイアウトだけにとどまりませんでした。サイト上の画像の多くは時代遅れで、スタイルが悪く、ニューラル ネットワークによって不適切に生成されたものでした。これらの画像は現代のデザイン標準に沿うものではなく、置き換えるのも困難な作業でした。質の悪い画像の使用はサイト全体の品質に悪影響を及ぼし、提供している製品やサービスに対してユーザーに悪い印象を与えてしまいます。
Elementor のようなツールを使用してサイトを包括的に更新する簡単な方法はありませんでした。各ページとブロックには独自のインライン スタイルが含まれているため、変更を全体的に行うことはできません。サイトのスタイルを更新したい場合は、すべてのページを調べて各ブロックを手動で更新する必要があり、時間がかかり非効率的です。これを考慮すると、唯一の解決策は新しい Web サイトをゼロから構築することであることが明らかになりました。これにより、同じ URL を維持しながらすべてのコンテンツを転送し、新しい一貫性のある簡単に更新できるデザインにすることができます。
2) Elementorを使わないことにした理由
Elementor は、WordPress で最も人気のあるページ ビルダーの 1 つです。表面的には、すばやく簡単にページを作成できる優れたツールのように見えます。しかし、これを徹底的に使用した後、いくつかの制限に遭遇したため、Elementor から移行し、カスタム構築された Web サイトを選択することにしました。
Elementor の制限と課題:
- バグと不具合: Elementor には多くの便利な機能がありますが、技術的な問題がないわけではありません。たとえば、ページをコピーして編集しようとすると、変更を加える前であっても、新しいページは元のページとは異なって見えることがよくありました。「最大画像幅」プロパティが正しく機能しないなど、要素の表示方法に関するバグが頻繁に発生しました。これらの不具合により、ページ間で一貫したスタイルを確保することが困難でした。
- クリエイティブの自由度が高すぎるため、一貫性がなくなる: Elementor の重要なセールス ポイントの 1 つは、すべてをカスタマイズできることです。ただし、この柔軟性は、特に複数の編集者がサイトで作業している場合、諸刃の剣になる可能性があります。専門家ではない人が意図せずに一貫性のないデザインのページを作成してしまうことはよくあります。たとえば、ピンクのボタンにピンクのテキストを使用したり、背景にオレンジ色の三角形を追加したりして、雑然としたわかりにくいデザインになっている編集者の例がありました。厳格なデザイン システムがなければ、一貫性のあるビジュアル アイデンティティを維持することは不可能になります。
- 高度な機能に対するカスタマイズの制限: Elementor はテキストと画像を使用した基本的なページ構築に優れていますが、カスタム機能を追加する必要がある場合は困難になります。組み込みブロックに制限されることがよくあり、より複雑な機能にカスタマイズするのは困難でした。ニーズが基本的なレイアウトを超えて拡大するにつれて、Elementor の制限がますます明らかになりました。
- コードの肥大化とパフォーマンスの問題: Elementorのページ構築方法により、要素の過剰なネストが発生します。たとえば、Elementorは複数の他のコンテナ内の要素はそれぞれ独自のスタイル セットを持っています。その結果、構造が肥大化し、読み込み速度、ページのパフォーマンス、そして最終的には Web サイトの SEO ランキングに悪影響を及ぼします。速度テストを実行したところ、結果は常に悪く、Elementor によって生成された重いコードが主な原因でした。
- A/B テスト機能がない: 今日のデジタル環境では、ユーザー エクスペリエンスを最適化するために A/B テストが不可欠です。しかし、Elementor では、異なるバージョンのサイトを異なるユーザーに表示する機能が提供されていません。全員が同じサイトを見るため、色、ボタンの形状、背景画像などのデザイン要素をテストして微調整する能力が制限されます。この機能がなければ、実際のユーザー行動に基づいてサイトを最適化することはできません。
- データベースの肥大化: Elementor の最も重大な欠点の 1 つは、スタイルとコンテンツの処理方法でしょう。Elementor は、スタイル、ネストされた構造、その他の不要なタグをコンテンツと混在させてデータベースに保存します。これにより、データベースが肥大化し、Elementor を無効にしたりアンインストールしたりしてもクリーンアップされません。その結果、新しいテーマやフレームワークに切り替えても問題は解決しません。これらのスタイルはページに埋め込まれたままになり、引き続き問題を引き起こします。
これらすべての課題を考慮すると、より堅牢なソリューションが必要であることは明らかでした。そこで、より持続可能で柔軟なアプローチを選択し、Elementor を使用せずに新しい独立した Web サイトを構築することを決定しました。
3) 新しいサイトでページを作成する方法
新しいサイトをゼロから構築することで、ページを作成するための明確で合理化されたプロセスを確立する機会が得られました。新しいシステムでは、ページの作成は簡単です。
- WordPress 管理パネルにログインし、 「ページ」->「新しいページの追加」をクリックします。
- 標準の WordPress エディターが表示され、テキストを入力または貼り付けたり、リンクを追加したり、画像をアップロードしたりできます。
このプロセスはシンプルですが、柔軟性があります。Elementor の複雑なブロック システムに頼るのではなく、WordPress のコンテンツ エディターははるかにクリーンで、迅速な更新と簡単なカスタマイズが可能です。エディターの下には、サイト全体で一貫性を維持するように既に構成されている高度なカスタム フィールド(ACF) の設定があります。
ACF を使用すると、コンテンツ 1…コンテンツ 15などのブロックを使用して柔軟なコンテンツ セクションを作成できます。これらのブロックでは、ページの各セクションのタイトル、テキスト、画像、ボタン ラベルを簡単に設定できます。これらのブロックは、画像とテキストの配置を自動的に切り替えるため、手動で調整しなくても、レイアウトが視覚的に魅力的に保たれます。
画像については、サイトの主な色にグラデーションを自動的に適用するカラーマッチング システムを実装しました。これにより、すべての画像が全体的な美観に一致するようになります。色をそのまま維持する必要があるロゴやスクリーンショットの場合は、グラデーションを上書きする「色を保持」オプションがあります。
このシステムは、すべてのページでデザインの一貫性を維持しながらコンテンツ管理を簡素化します。
4) 新しい投稿を作成する方法
新しいサイトで投稿を作成する手順は、ページを作成する場合と同じ合理化されたプロセスに従いますが、いくつかの重要な違いがあります。
- 投稿の URL には../blog/..が含まれ、ページと区別されます。
- 右側のサイドバーには、最新の記事 3 件が自動的に表示されるブロックがあり、ブログをダイナミックかつ魅力的なものにするのに役立ちます。
すべての投稿のテンプレートは、各ブログ投稿の構造とレイアウトを処理するファイルtemplate-parts/content/content-single.phpにあります。この一貫したテンプレートにより、更新が容易になり、すべての投稿が同じデザイン ガイドラインに準拠することが保証されます。
5) 高度なカスタムフィールド (ACF)
ACF は、新しい Web サイトの開発に不可欠な要素です。これにより、WordPress 管理パネルから簡単に管理できるカスタム フィールドを作成できます。content_1 などのフィールドは PHP コードで参照されるため、各ページや投稿に適切なコンテンツを動的に取り込むことができます。
この柔軟性は、必要に応じてカスタマイズする余地を残しながら、サイトを効率的に管理および更新するために不可欠です。
6) A/Bテスト
新しいサイトで行った最も重要な改善点の 1 つは、A/B テストの実装です。A/B テストでは、サイトの 2 つのバージョンを比較して、どちらがユーザーにとってより効果的かを確認できます。これには、さまざまな色、ボタンの形状、背景、さらにはレイアウトのテストも含まれます。
この機能は、URL のGET パラメータを使用して実装しました。たとえば、異なる URL を持つ 2 つの同一の広告キャンペーンを作成できます。
https://www.conveythis.com/?param=1
https://www.conveythis.com/?param=2
ユーザーがこれらのリンクをクリックすると、パラメータが Cookie に保存されます。パラメータの値に応じて、サイトは異なるボタンの色や背景画像など、ページの異なるバージョンを表示します。これにより、ユーザーの好みや行動に関する貴重なデータを収集できます。
すべてのイベントは .csv ファイルと MySQL データベースに保存されるため、データを分析し、サイトの改善について情報に基づいた決定を下すことができます。
7) functions.php ファイル
- カスタム投稿タイプと分類
functions.phpファイルの主な用途の 1 つは、カスタム投稿タイプと分類法を作成することです。これにより、コンテンツをより効果的に整理できるようになりました。デフォルトの WordPress 構造 (ページと投稿) だけに頼るのではなく、ケース スタディ、お客様の声、製品機能などの特定のコンテンツにカスタム タイプを導入しました。これにより、コンテンツが整理されただけでなく、ナビゲートしやすくなり、関連情報を見つけやすくなり、ユーザー エクスペリエンスも向上しました。
たとえば、ケーススタディ用のカスタム投稿タイプを作成するには、 functions.phpに次のコードを追加します。
関数create_case_study_post_type() {
register_post_type( 'ケーススタディ',
配列（
'ラベル' =>配列（
'name' => __( 'ケーススタディ' ),
'singular_name' => __( 'ケーススタディ' )
'public' => true、
'has_archive' => true、
'rewrite' => 配列('slug' => 'case-studies')、
}
add_action( 'init', 'create_case_study_post_type' );
これにより、「ケーススタディ」という新しい投稿タイプが作成されました。これは通常の投稿と同様に動作しますが、独自のアーカイブと分類構造を備えています。
- 外部スクリプトとスタイルの読み込み
functions.phpのもう 1 つの重要な用途は、外部のスクリプトとスタイルを読み込み、Web サイトに必要なライブラリとフレームワークがすべて揃っていることを確認することでした。たとえば、スライダー用のSlick.jsやスムーズなアニメーション用のAOS (Animate on Scroll) などのライブラリを統合しました。必要なとき (特定のページやテンプレートなど) にのみこれらのアセットを選択的に読み込むことで、不要な肥大化を減らし、ページの読み込み速度を改善しました。
スタイルとスクリプトの読み込みは次のように処理しました。
関数load_custom_scripts() {
// 特定のテンプレートの Slick スライダーをロードする
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'、 配列('jquery')、 '', true );
// サイト全体で AOS アニメーションをロードする
wp_enqueue_style( 'aos-css', get_template_directory_uri() . '/css/aos.css' );
wp_enqueue_script( 'aos-js', get_template_directory_uri() . '/js/aos.js', 配列('jquery'), '', true );
}
アクションを追加します( 'wp_enqueue_scripts', 'load_custom_scripts' );
条件チェック（例： ページテンプレート()）、不要なスクリプトがサイト全体に読み込まれないようにし、パフォーマンスを最適化しました。
- カスタムショートコード
技術に詳しくないユーザーがサイト コンテンツを管理する際の柔軟性を向上させるために、 functions.php経由でカスタム ショートコードを追加しました。これらのショートコードにより、ユーザーはコードに触れることなく、複雑な機能やスタイル設定された要素を簡単に挿入できるようになりました。たとえば、サイト上の任意の場所にカスタム ボタンを追加するためのショートコードを作成しました。
関数 custom_button_shortcode($atts) {
$atts = ショートコード_atts(
配列（
'label' => 'ここをクリック',
'url' => '#',
$atts、
'カスタムボタン'
' ' . esc_html( $atts['label'] ) . ' ' を返します。
}
'custom_button'、'custom_button_shortcode' を追加します。
このショートコードにより、編集者はカスタムテキストと URL を含むボタンを簡単に追加できるようになり、デザインを崩すことなく素早く調整できるようになりました。8) SEOとサイト速度の対応
ウェブサイトの全面改修中の主な焦点は、SEO とサイト全体のパフォーマンスの向上でした。Elementor を使用して構築された元のサイトには、コードの肥大化と画像の最適化されていないことが原因で、読み込み時間が遅く、SEO が最適でないという問題がありました。
SEOの改善
新しいサイトが SEO フレンドリーであることを保証するために、私たちは最初からいくつかのベストプラクティスを実装しました。
-
セマンティックHTML : ヘッダータグを適切に使用してサイトのHTMLを慎重に構造化しました（
、など）、検索エンジンがコンテンツ階層を簡単に解析して理解できるようにします。これは、SEO ランキングとアクセシビリティの両方にとって特に重要です。 - メタタグとオープングラフデータ: Yoast SEOプラグインを活用して、メタタイトル、説明、ソーシャル共有用のオープングラフデータを処理しました。Yoast を使用することで、検索エンジンでの可視性とソーシャル メディア プラットフォームからのクリックスルー率にとって重要な、各ページと投稿のメタデータが最適化されていることを確認しました。
- スキーマ マークアップ: functions.phpファイルを使用して、構造化データ用のカスタム スキーマ マークアップを追加し、検索エンジンが検索結果にページを表示する方法を改善しました。たとえば、記事、ケース スタディ、製品のスキーマを含めて、検索エンジンがコンテンツをより適切に分類できるようにしました。
関数 add_schema_markup() {
エコー '
"@context": "http://schema.org",
"@type": "組織",
"名前": "ConveyThis",
"URL": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
>
';
>
add_action( 'wp_head', 'add_schema_markup' );
サイト速度の最適化
パフォーマンスは、ユーザー エクスペリエンスだけでなく SEO ランキングにとっても重要な要素です。サイト速度を改善するために、いくつかの手順を実行しました。
- 画像の最適化: PNG や JPEG などの従来の形式よりも優れた圧縮率を提供するWebPなどの最新の画像形式を使用しました。すべての画像は、ユーザーの画面解像度に基づいて適切なサイズで提供され、モバイル デバイスでも読み込み時間が短縮されます。
- 遅延読み込み: 画像の遅延読み込みを実装することで、ユーザーの画面に表示される画像のみが最初に読み込まれるようになりました。ユーザーがスクロールすると追加の画像が読み込まれるため、最初のページの読み込み時間が短縮されます。
- キャッシュと縮小: HTML、CSS、JavaScript ファイルのキャッシュ、縮小、圧縮にはWP Rocket を使用しました。WP Rocket は、全体的なファイル サイズを削減し、ページの静的キャッシュ バージョンを繰り返し訪問者に提供することで、読み込み時間を短縮するのに役立ちました。
9) データベースの最適化とクリーンアップ
古いウェブサイトには、Elementor の肥大化と非効率的なデータベース構造が原因で、大量の「ジャンク」データが蓄積されていました。新しいサイトがスムーズに動作するように、徹底的なデータベースのクリーンアップと最適化を実施しました。
- 古いElementorデータの削除
前述のように、Elementor を無効にした後でも、そのスタイルと設定はデータベースに埋め込まれたままでした。カスタム クエリを使用して、この余分なデータを削除し、データベースをクリーンアップしました。さらに、時間の経過とともに蓄積された未使用のメディア ファイル、投稿のリビジョン、期限切れのトランジェントも削除しました。
- データベースのインデックス作成
また、頻繁にクエリされる列にインデックスを追加することでデータベースを最適化し、データベースクエリの高速化と効率化を図りました。たとえば、 投稿日 列により最近の投稿に関連するクエリが高速化され、ブログ ページのパフォーマンスが向上しました。
結論
新しい Web サイトをゼロから構築するという決定は、古いサイトの制限と非効率性が原因でした。デザインの不一致、スタイルの肥大化、Elementor によるパフォーマンスの問題のため、テーマを単純に切り替えることは現実的な選択肢ではありませんでした。カスタム開発と Advanced Custom Fields を使用して新しいサイトを作成することで、より効率的でまとまりのあるプロフェッショナルな Web サイトが実現し、ユーザー エクスペリエンスが向上し、更新と A/B テスト機能が合理化されました。この新しいサイトは、将来の成長と改善のための強固な基盤となります。
始める準備はできましたか?
翻訳は、単に言語を知るということ以上の複雑なプロセスです。
私たちのヒントに従い、ConveyThis を使用すると、翻訳されたページはターゲット言語のネイティブのように読者に伝わり、共感を呼ぶでしょう。
労力はかかりますが、結果は報われます。Web サイトを翻訳する場合、ConveyThis の自動機械翻訳を使用すると、何時間も節約できます。
ConveyThis を 3 日間無料でお試しください!
CONVEYTHIS