FigmaからOdooへのデザインワークフロー
デザインワークフローの方法論
1. ANALYZE DESIGN → Extract colors, fonts, layout, components
2. COMPARE TO ODOO TEMPLATES → Match header, footer, page layouts
3. CHOOSE CLOSEST TEMPLATE → Select best matching built-in template
4. CONFIGURE VIA VARIABLES → Set $o-website-values-palettes
5. ENHANCE WITH CUSTOM CSS → Only what templates can't provide
6. CREATE CUSTOM SNIPPETS → Components not available in Odoo
Figma抽出パイプライン
Figma MCPを使用する
1. Use Figma MCP with prompt:
"Convert this Figma design to HTML for Odoo <version> website theme.
Use Bootstrap v5.1.3 classes (not Tailwind).
Apply proper Odoo theme structure with sections and containers."
2. Extract Color Palette:
"Extract the color palette and map to o-color-1 through o-color-5."
3. Extract Typography:
"Convert text styling to Bootstrap typography classes."
Chrome MCPを使用する（ブラウザー自動化）
- FigmaのURLに移動 → Pagesを開きます（コンポーネントではありません！）
- ページ要素をクリックして、以下を抽出します：
- ヘッダー／ナビゲーションバー → プライマリカラー
- CTAボタン → セカンダリカラー
- セクションの背景 → o-color-3
- 本文テキスト → テキストカラー、フォントファミリー
- 見出し（H1-H6） → 見出しフォント、サイズ
確認するページ：ホームページ、About／サービス、問い合わせ、フッター領域
カラーマッピング
| デザイン要素 | 対応先 |
|---|
| ブランドのプライマリカラー（ボタン、リンク） | o-color-1 |
| アクセント／CTAカラー | o-color-2 |
| 明るいセクションの背景 | o-color-3 |
| メインコンテンツの背景 | o-color-4 |
| 暗いテキスト／見出し | o-color-5 |
ヘッダーテンプレート（主要11種類＋バリエーション）
| XML ID | 名前 | 最適な用途 |
|---|
website.template_header_default | デフォルト | ほとんどのウェブサイト |
website.template_header_hamburger | ハンバーガー | ミニマルなデザイン |
website.template_header_stretch | ストレッチ | 幅の広いレイアウト |
website.template_header_vertical | 縦型 | アプリのようなサイト |
website.template_header_search | 検索 | Eコマース、ディレクトリ |
website.template_header_sales_one | セールス 1 | オンラインストア |
website.template_header_sales_two | セールス 2 | 大規模なカタログ |
website.template_header_sales_three | セールス 3 | 製品重視 |
website.template_header_sales_four | セールス 4 | ファッション、小売 |
website.template_header_sidebar | サイドバー | ダッシュボードサイト |
website.template_header_boxed | ボックス型 | モダンなブランド |
ヘッダーの配置バリエーション
..._align_center / ..._align_right — デスクトップでの配置..._mobile_align_center / ..._mobile_align_right — モバイルでの配置
ヘッダーの表示設定（相互排他的）
| XML ID | 効果 |
|---|
website.header_visibility_standard | ページと一緒にスクロールします |
website.header_visibility_fixed | 上部に固定されます |
website.header_visibility_disappears | 下にスクロールすると非表示になります |
website.header_visibility_fade_out | フェードアウトします |
ヘッダーコンポーネント（組み合わせ可能）
| XML ID | コンポーネント | デフォルト |
|---|
website.option_header_brand_logo | ロゴ画像 | 有効 |
website.option_header_brand_name | テキスト名 | 無効 |
website.header_call_to_action | CTAボタン | 有効 |
website.header_search_box | 検索バー | 有効 |
website.header_social_links | ソーシャルアイコン | 無効 |
ヘッダーの決定フローチャート
Is navigation hidden? → YES → template_header_hamburger
→ NO → Vertical sidebar? → YES → Full page? → sidebar / vertical
→ NO → E-commerce? → YES → Categories? → sales_two / sales_one
→ NO → Search prominent? → template_header_search
→ Boxed? → boxed / stretch / default
フッターテンプレート（9種類）
| XML ID | 名前 | 最適な用途 |
|---|
website.footer_custom | デフォルト | 一般用途 |
website.template_footer_descriptive | 説明型 | コーポレートサイト |
website.template_footer_centered | 中央揃え | ランディングページ |
website.template_footer_links | リンク | 大規模サイト |
website.template_footer_minimalist | ミニマリスト | すっきりしたデザイン |
website.template_footer_contact | 問い合わせ | サービス業 |
website.template_footer_call_to_action | CTA | マーケティングサイト |
website.template_footer_headline | ヘッドライン | ブランドメッセージ |
website.template_footer_slideout | スライドアウト | モダン／トレンド重視 |
フッターの決定フローチャート
Minimal (just copyright)? → YES → template_footer_minimalist
→ NO → Center-aligned? → template_footer_centered
Newsletter/CTA? → template_footer_call_to_action
Contact info? → template_footer_contact
Primarily links? → template_footer_links
Detailed description? → template_footer_descriptive
Default → footer_custom
ショップページテンプレート（website_sale）
レイアウトオプション
| XML ID | 機能 |
|---|
website_sale.products_design_card | カードレイアウト |
website_sale.products_design_grid | グリッドレイアウト |
website_sale.products_thumb_4_3 | 4:3の画像比率 |
website_sale.products_thumb_cover | 画像がコンテナー全体を埋めます（デフォルト） |
カテゴリーとフィルター
| XML ID | 機能 | デフォルト |
|---|
website_sale.products_categories | 左サイドバー | 無効 |
website_sale.products_categories_top | 上部ナビゲーション | 有効 |
website_sale.products_attributes | 属性フィルター | 有効 |
website_sale.filter_products_price | 価格フィルター | 無効 |
website_sale.search | 検索ボックス | 有効 |
website_sale.sort | 並べ替えドロップダウン | 有効 |
商品詳細オプション
| XML ID | 機能 | デフォルト |
|---|
website_sale.product_comment | レビュー | 無効 |
website_sale.product_buy_now | 「今すぐ購入」ボタン | 無効 |
website_sale.alternative_products | 代替商品 | 有効 |
ブログテンプレート（website_blog）
ブログ一覧
| XML ID | 機能 | デフォルト |
|---|
website_blog.opt_blog_cover_post | 注目バナー | 有効 |
website_blog.opt_blog_list_view | リスト表示 | 無効 |
website_blog.opt_blog_cards_design | カードコンポーネント | 無効 |
website_blog.opt_blog_sidebar_show | サイドバー | 無効 |
ブログ記事詳細
| XML ID | 機能 | デフォルト |
|---|
website_blog.opt_blog_post_breadcrumb | パンくずリスト | 有効 |
website_blog.opt_blog_post_read_next | 次の記事を読む | 有効 |
website_blog.opt_blog_post_comment | コメント | 無効 |
カートとチェックアウト
| XML ID | 機能 | デフォルト |
|---|
website_sale.suggested_products_list | おすすめ商品 | 有効 |
website_sale.reduction_code | プロモーションコード | 有効 |
website_sale.accept_terms_and_conditions | 利用規約のチェックボックス | 無効 |
デザインからテーマ設定を生成する
デザインを分析し、テンプレートを照合した後：
// primary_variables.scss — Generated from Design Analysis
$o-theme-font-configs: (
'Poppins': (
'family': ('Poppins', sans-serif),
'url': 'Poppins:300,400,500,600,700',
),
);
$o-website-values-palettes: (
(
'color-palettes-name': 'default-1',
'font': 'Poppins',
'headings-font': 'Poppins',
'header-template': 'hamburger',
'header-links-style': 'pills',
'logo-height': 48px,
'footer-template': 'contact',
'footer-scrolltop': true,
'btn-padding-y': 0.75rem,
'btn-border-radius': 8px,
'link-underline': 'never',
)
);
次に、照合したテンプレートをプログラムで有効化するためにtheme.utilsを作成します：
def _theme_yourtheme_post_copy(self, mod):
self.enable_view('website.template_header_hamburger')
self.enable_view('website.template_footer_contact')
self.enable_view('website.option_header_brand_logo')
self.disable_view('website.header_visibility_standard')
self.enable_view('website.header_visibility_fixed')
