Odoo Website Builder 完全ガイド: デザイン、公開、最適化

Odoo の Website Builder は、ERP を完全な Web プラットフォームに変換します。 eコマース、CRMフォーム、イベント登録に個別の統合を必要とするスタンドアロンのWebサイトビルダーとは異なり、Odooのビルダーはビジネスデータを直接操作します。商品ページは在庫から取得されます。連絡フォームは CRM にフィードします。イベント ページはイベント管理モジュールに接続します。このガイドでは、Odoo を使用した Web サイトの構築、管理、最適化のあらゆる側面を説明します。

重要なポイント

• Odoo Website Builder は、150 を超える事前にデザインされたコンテンツ ブロックを備えたドラッグ アンド ドロップのブロックベースのエディターを使用します
• テーマは、色、フォント、間隔、レイアウトなどのあらゆるレベルでカスタマイズできるデザインの基礎を提供します。
• リアルタイムのメタタグ管理、URL 構造制御、サイトマップ生成を備えた SEO ツールがページ エディターに組み込まれています。
• eコマース統合はネイティブであり、製品データ、価格設定、在庫をOdooデータベースから直接取得します
• ブログ エンジンは、カテゴリ、タグ、SEO に適した URL 構造を使用した複数著者による出版をサポートします。

Odoo Web サイトの入門

Web サイトモジュールの有効化

[アプリ] > [Web サイト] から Web サイト モジュールをインストールします。最初のインストール時に、Odoo はセットアップ ウィザードを表示します。

1. テーマの選択: 全体的なデザイン言語を決定する無料テーマとプレミアム テーマから選択します。
2. 会社情報の構成: 会社名、ロゴ、連絡先の詳細がヘッダーとフッターに自動的に入力されます。
3. 機能の選択: ブログ、eコマース、フォーラム、イベント、その他の Web サイト機能を有効または無効にします。
4. ドメインの設定: 運用環境で使用するカスタム ドメイン名を構成します。

セットアップ後、Web サイト > ダッシュボード に移動して、ページ、トラフィック分析、および e コマース指標を表示する Web サイト管理ハブにアクセスします。

ページエディター

ドラッグ アンド ドロップ エディタは、任意のページで [編集] をクリックするとアクティブになります。エディターのインターフェイスは次のもので構成されます。

ブロック パネル (左側のサイドバー): コンテンツ ブロックを参照してページにドラッグします。ブロックは、ヘッダー、機能、テキスト、画像、お客様の声、価格、行動喚起、フッターなどのカテゴリ別に整理されています。

プロパティ パネル (右側のサイドバー): 間隔、色、アニメーション、表示条件、応答動作など、選択した要素のプロパティを構成します。

インライン編集: テキストをクリックしてページ上で直接編集します。テキスト書式設定ツールはフローティング ツールバーに表示されます。

レイアウト ツール: 正確なレイアウト管理のためのグリッドと列のコントロール。各セクションは、カスタム幅比率で構成可能な列数 (1 ～ 6) をサポートします。

ページのデザインとコンテンツ

コンテンツブロック

Odoo 19 には、次のカテゴリに分類された 150 以上のコンテンツ ブロックが含まれています。

動的コンテンツ

動的コンテンツ ブロックは、Odoo データベースからデータを取得します。

• 製品ショーケース: カタログの製品をリアルタイムの価格と在庫状況とともに表示します。
• ブログ投稿: 最近のブログエントリーまたは注目のブログエントリーを抜粋と画像とともに表示します
• イベント: 登録ボタン付きの今後のイベントをリストします。
• 求人情報: 採用モジュールからの募集中のポジションを表示します。
• お客様の声: 管理されたお客様の声データベースから取得

基礎となるデータが変更されると、ダイナミック ブロックは自動的に更新されます。新しいブログ投稿を追加すると、ブログ ブロックを使用しているページにすぐに反映されます。

カスタム HTML/CSS

ビジュアルエディターを超えた高度なカスタマイズのために、Odoo は以下を提供します。

• HTML ブロック: ページ上の任意の場所にカスタム HTML を挿入します。
• カスタム CSS: Web サイト > 構成 > 設定 > カスタム CSS でページ固有またはサイト全体の CSS を追加します。
• カスタム JavaScript: 追跡スクリプト、ウィジェット、またはインタラクティブ要素を追加します。

ブロックを選択し、コード ビューの切り替えをクリックして、コード エディターにアクセスします。カスタム コードはテーマを変更しても保持されますが、テーマの更新では CSS の調整が必要になる場合があります。

テーマのカスタマイズ

テーマの設定

[Web サイト] > [構成] > [テーマ] でアクティブなテーマをカスタマイズします。

色: プライマリ、セカンダリ、アクセント、および背景の色を定義します。テーマは、これらの色をすべてのブロックと UI 要素に一貫して適用します。 Odoo は、ホバー状態、テキストの色、境界線の色などの選択内容から完全なカラー パレットを生成します。

タイポグラフィ: Google Fonts から見出しと本文のフォント ファミリーを選択するか、カスタム フォントをアップロードします。ベースのサイズ、行の高さ、文字間隔を設定します。

レイアウト: コンテンツの幅、セクションの間隔、境界線の半径、およびグローバルに適用される影のスタイルを構成します。

ボタン: カスタムの色、境界線の半径、パディング、ホバー効果を使用して、主ボタンと副ボタンのスタイルを設定します。

レスポンシブデザイン

Odoo のすべてのブロックはデフォルトで応答します。エディターには 3 つのプレビュー モードが用意されています。

• デスクトップ: 1200 ピクセルを超える画面の全幅表示
• タブレット: 画面 768 ～ 1199 ピクセルの中程度の表示
• モバイル: 768 ピクセル未満の画面では表示が狭くなります

プロパティ パネルの表示/非表示切り替えを使用して、特定のブレークポイントで要素を非表示にすることができます。列レイアウトは、上書きされない限り、モバイル上で自動的に垂直方向にスタックされます。

SEO 設定

ページレベルの SEO

各ページには、ページ エディターの [宣伝] タブからアクセスできる SEO コントロールがあります。

• メタ タイトル: 検索結果に表示されるタイトル タグ (50 ～ 60 文字を推奨)
• メタ説明: 検索結果に表示される説明 (150 ～ 160 文字を推奨)
• URL slug: ページの URL パス (タイトルから自動生成、編集可能)
• 正規 URL: 複数の URL を持つページの正規バージョンを指定します。
• インデックス作成: ページを検索エンジンのインデックスに表示するかどうかを切り替えます。

テクニカルSEO

Odoo は、いくつかの技術的な SEO 要件を自動的に処理します。

• Sitemap.xml: すべてのインデックス付きページを使用して /sitemap.xml で自動的に生成されます
• Robots.txt: デフォルトの robots.txt ではすべてのクローラが許可されます。 ウェブサイト > 設定 > SEO でカスタマイズします。
• 構造化データ: 製品ページには JSON-LD スキーマ マークアップが自動的に含まれます
• クリーンな URL: 設定可能なスラッグを備えた SEO に適した URL 構造
• 301 リダイレクト: Web サイト > 設定 > リダイレクト でリダイレクトを設定します。
• Hreflang タグ: 多言語 Web サイト用に自動的に生成されます

画像の最適化

Odoo 19 は画像を自動的に最適化します。

• WebP 変換: アップロードされた画像は、サポートされているブラウザに WebP として提供されます。
• レスポンシブ画像: srcset 属性は、デバイスごとに適切なサイズの画像を提供します
• 遅延読み込み: スクロールしないと見えない範囲にある画像がスクロール時に読み込まれます
• 代替テキスト: 画像プロパティ パネルには、アクセシビリティと SEO のための代替テキスト フィールドが含まれています

eコマースの統合

製品ページ

Odoo Web サイトの製品ページは、製品カタログからデータを直接取得します。主な特徴:

• 製品バリエーション: バリエーション固有の画像と価格を備えた色、サイズ、その他のバリエーション セレクター
• 在庫表示: リアルタイムの在庫状況 (在庫あり、在庫少、在庫切れ)
• 動的な価格設定: 価格表、プロモーション、顧客グループに基づいて価格が更新されます
• 製品比較: 最大 4 つの製品を並べて比較します。
• レビューと評価: モデレーション付きの顧客レビュー システム

ショッピングカートとチェックアウト

チェックアウト フローは、Odoo の販売、会計、出荷モジュールと統合されています。

1. カート: Ajax を利用したミニカート ドロップダウン付きのカートへの追加
2. 配送: 設定された配送業者からのリアルタイムの配送料計算
3. 支払い: 複数の支払いプロバイダー (Stripe、PayPal、Authorize.net、銀行振込)
4. 注文確認: 販売モジュールでの自動注文作成
5. 請求書: 会計モジュールでの請求書の自動生成

カタログ管理

Web サイト > e コマース > 製品 でオンライン カタログを管理します。

• 公開/非公開: Web サイトに表示される製品を制御します
• カテゴリ: ナビゲーションのために製品を階層カテゴリに整理します。
• 属性とフィルター: 製品属性によるファセット フィルターを有効にします
• 並べ替えオプション: デフォルトの並べ替え (価格、名前、最新、ベストセラー) を設定します。
• 製品テンプレート: 製品カテゴリごとのコントロール レイアウトと情報表示

ブログ管理

ブログ投稿の作成

ウェブサイト > ブログ のブログ エンジンは、複数著者による出版をサポートしています。

1. ブログインデックスページまたはバックエンドから新しい投稿を作成します
2. 通常のページと同じドラッグ アンド ドロップ エディターを使用してコンテンツを作成します
3. メタデータを設定します: 著者、カテゴリ、タグ、発行日
4. プレビューと公開

ブログSEO

ブログ投稿には追加の SEO コントロールが含まれています。

• 著者マークアップ: 著者ページの Schema.org 人物マークアップ
• 記事スキーマ: datePublished、dateModified、および author を含む BlogPosting 構造化データ
• Open Graph タグ: Facebook、Twitter、LinkedIn のソーシャル共有メタデータ
• 抜粋コントロール: 検索結果およびソーシャルシェアに表示される抜粋を定義します

コンテンツ戦略

Odoo のブログは、コンテンツ マーケティング ワークフローをサポートしています。

• 下書き/公開ステータス: 公開する前に投稿を作成およびレビューします
• 公開予定: 将来の公開日を設定します
• カテゴリとタグ: ナビゲーションと SEO のためにコンテンツを整理します。
• 関連投稿: タグとカテゴリに基づいて関連コンテンツを自動的に提案します

多言語 Web サイト

言語設定

Web サイト > 構成 > 言語 で Web サイトの言語を構成します。

1. 言語リストから希望の言語をインストールします
2. Web サイトのフロントエンドの言語を有効にする
3. デフォルトの言語を設定する
4. URL 戦略の構成 (サブディレクトリ /fr/ またはサブドメイン fr.example.com)

翻訳ワークフロー

フロントエンド エディターを使用して Web サイトのコンテンツを翻訳します。

1. 言語セレクターを使用してターゲット言語に切り替えます。
2. [翻訳] をクリックして翻訳モードに入ります。
3. 翻訳可能なテキスト ブロックが黄色でハイライト表示されます
4. 各ブロックをクリックして翻訳を入力します
5. ページごとに翻訳を保存する

バックエンドは、[設定] > [翻訳] で一括翻訳ワークフロー用の翻訳エクスポート/インポート機能を提供します。

パフォーマンスの最適化

組み込みの最適化

Odoo 19 には、いくつかのパフォーマンス機能が含まれています。

• CDN サポート: 静的アセット配信用に Web サイト > 構成 > 設定 で CDN を構成します。
• アセットの縮小: CSS と JavaScript は運用環境で自動的に縮小されます。
• ページ キャッシュ: 匿名訪問者向けのフルページ キャッシュ
• データベース クエリの最適化: Web サイト ページは、ORM を通じて最適化されたクエリを生成します。

パフォーマンスのベストプラクティス

• アップロード前に画像を最適化します (ほとんどのコンテンツ画像は 200KB 未満)
• カスタム JavaScript を重要な機能に制限する
• 可能な場合はカスタム HTML ではなく Odoo の組み込みブロックを使用します
• 国際トラフィックのあるサイトの CDN を有効にする
• [Webサイト] > [レポート] > [分析] を通じてページの読み込み時間を監視します。

ECOSIRE ウェブサイトサービス

Odoo 内で効果的な Web サイトを構築するには、デザインの専門知識と ERP の知識の両方が必要です。 ECOSIRE の Odoo カスタマイズ サービス には、カスタム テーマの開発、ブロックの作成、および e コマースの最適化が含まれます。当社の 実装チーム は、設計から立ち上げまで完全な Web サイトのセットアップを処理し、Web サイトがビジネス運営とシームレスに統合されるようにします。

関連書籍

• Odoo ウェブサイトと e コマース SEO ガイド
• ファッションとアパレルの Odoo e コマース
• Odoo を使用したマルチチャネル販売
• eコマース向けOdoo返品管理
• Odoo Shopify 統合ガイド

Odoo の Web サイト ビルダーでカスタム ドメインを使用できますか?

はい。 [Web サイト] > [構成] > [設定] でカスタム ドメインを構成します。ドメインの DNS レコードを Odoo サーバーにポイントします (自己ホスト型のレコード、Odoo.sh の CNAME)。 SSL 証明書は Odoo.sh 上で自動的に処理されます。また、セルフホスト展開用に手動で構成することもできます。

Odoo Web サイト ビルダーはメンバーシップやゲート付きコンテンツをサポートしていますか?

Odoo は、ポータル アクセス システムを通じてゲート付きコンテンツをサポートします。ページをログイン ユーザーに制限したり、ユーザー グループに基づいて特定のコンテンツ ブロックを条件付きで表示したりできます。メンバーシップ サイトの完全な機能 (有料アクセス、階層型コンテンツ) については、カスタム開発モジュールまたはコミュニティ モジュールによって基本機能が拡張されます。

Odoo Web サイトのパフォーマンスは、WordPress などのスタンドアロン ビルダーと比較してどうですか?

Odoo Web サイトは、コンテンツの複雑さが同様の WordPress サイトと同等に読み込まれます。利点は、すべてが同じデータベース内に存在するため、Odoo は外部 API 呼び出しを行わずに動的なビジネス データ (製品、在庫、価格設定) を提供できることです。コンテンツの多いサイトの場合、読み込み時間を競うためには CDN 構成と画像の最適化が不可欠です。