デザインの方向性
デザインの方向性のステップでは、Theme Builderがテーマ全体を生成する前に、テーマのビジュアルデザインをレビュー、洗練、最終決定することができます。
概要
ディスカバリーインタビューを完了すると、Theme Builderがデスクトップとモバイルのプレビューレンダリングを用いて、デザインの方向性を示します。これにより、テーマを確定する前に、デザインがどのデバイスでどのように見えるかを正確に確認できます。
デザインの方向性の構成要素
1. カラーパレット
テーマの配色スキームには、以下が含まれます。
- メインカラー (Primary color) — ボタン、リンク、アクセントに使用する主要なブランドカラー
- セカンダリカラー (Secondary color) — バリエーションのための補色
- アクセントカラー (Accent color) — 重要な要素を際立たせるハイライトカラー
- ニュートラルカラー (Neutral colors) — 背景やテキストに使用するグレーや白
- テキストカラー (Text color) — 可読性のための主要なテキストカラー
2. タイポグラフィ
以下の要素のフォント選択を行います。
- 見出しフォント (Heading font) — ページタイトルやセクションヘッダーに使用
- 本文フォント (Body font) — 段落テキストやコンテンツに使用
- フォントサイズ (Font sizes) — 異なる画面サイズに対応するレスポンシブなサイズ設定
- 行間 (Line height) — 可読性のための行間の間隔
- フォントウェイト (Font weights) — ボールド、レギュラー、ライトなどの太さのバリエーション
3. レイアウトと余白
- コンテナ幅 (Container width) — コンテンツの最大幅
- パディングとマージン (Padding and margins) — 要素の周りの余白
- グリッドシステム (Grid system) — レスポンシブデザインのためのカラムレイアウト
- コンポーネントの余白 (Component spacing) — UI要素間の距離
4. ビジュアル要素
- ボタンのスタイル (Button styles) — プライマリー、セカンダリー、ターシャリーボタンのデザイン
- カードデザイン (Card designs) — コンテンツブロックのレイアウト
- アイコン (Icons) — アイコンのスタイルとサイズ
- ボーダーとシャドウ (Borders and shadows) — 控えめな視覚的な奥行き
- ホバーエフェクト (Hover effects) — インタラクティブな状態のスタイリング
プレビューレンダリング
デスクトッププレビュー
デスクトッププレビューでは、フル幅（通常1200px以上）でデザインが表示されます。
- 完全なナビゲーションメニュー
- すべてのカラムを含む完全なレイアウト
- 大きなタイポグラフィと余白
- すべてのビジュアル要素がフルサイズで表示される
モバイルプレビュー
モバイルプレビューでは、モバイル幅（通常375px）でデザインが表示されます。
- レスポンシブなナビゲーション（ハンバーガーメニュー）
- シングルカラムレイアウト
- 調整されたタイポグラフィと余白
- タッチ操作に適したボタンサイズ
レスポンシブブレークポイント
Theme Builderは、以下のブレークポイントでプレビューをレンダリングします。
| デバイス | 幅 | プレビュー |
|---|---|---|
| モバイル | 375px | 縦向きのスマートフォン |
| タブレット | 768px | 横向きのタブレット |
| デスクトップ | 1200px | フル幅のデスクトップ |
| 大型デスクトップ | 1920px | ウルトラワイドディスプレイ |
デザインの洗練
調整を行う方法
以下の方法でデザインの方向性を洗練させることができます。
- 色の調整 — パレット内の任意の色の変更
- フォントの変更 — 異なる書体の選択
- 余白の修正 — パディングとマージンの調整
- レイアウトの更新 — コンテナ幅やグリッドカラムの変更
- 要素のカスタマイズ — ボタンのスタイル、カードデザインなどの修正
プレビューの更新
変更はリアルタイムで反映されます。
- デスクトッププレビューは即座に更新されます
- モバイルプレビューは即座に更新されます
- すべてのレスポンシブブレークポイントが更新されます
- プレビューを切り替えて変更を確認できます
比較ビュー
以下のものと比較して、デザインの方向性を確認できます。
- オリジナルデザイン — 何が変更されたかを確認
- 競合サイトのデザイン — 参考サイトと比較
- 以前のバージョン — より前のデザインの方向性に戻す
デザインの方向性の承認
デザインに満足したら、以下の手順に進みます。
- 両方のプレビューを確認 — デスクトップとモバイルの両方が適切か確認
- すべての色を確認 — コントラストとアクセシビリティが確保されているか確認
- タイポグラフィをテスト — すべてのサイズで可読性が保たれているか確認
- レイアウトを確定 — 余白と配置が適切か確認
- デザインを承認 — テーマ生成に進む
次のステップ
デザインの方向性を承認した後：
- Theme Builderがテーマ全体を生成 します
- テーマがWordPressサイトにインストールされます
- WordPressカスタムライザーを使用してさらにカスタマイズできます
- Hospitality Menus またはその他の機能に進みます
ベストプラクティス
- 実機でのテスト — 可能であれば、実際のスマートフォンやタブレットを使用してください
- 可読性の確認 — すべてのサイズでテキストが読みやすいことを確認してください
- コントラストの検証 — アクセシビリティのためにValidate Palette Contrastを使用してください
- パフォーマンスの考慮 — 速度のために画像やフォントを最適化してください
- コンテンツの計画 — レイアウトが実際のコンテンツに対応できるか確認してください
トラブルシューティング
プレビューが更新されない場合
- ページをリロードする
- ブラウザのキャッシュをクリアする
- 別のブラウザを試す
- インターネット接続を確認する
色が異なって見える場合
- モニターの色設定を確認する
- 異なるデバイスで試す
- アクセシビリティツールで色のコントラストを検証する
- 色覚異常シミュレーターを検討する
タイポグラフィの問題
- フォントファイルが読み込まれているか確認する
- 異なるブレークポイントでのフォントサイズを確認する
- 実際のコンテンツでテストする
- 可読性のために行の長さを考慮する
関連ドキュメント
- Discovery Interview — デザイン情報を収集する
- Hospitality Menus — 構造化されたメニューページを作成する
- Validate Palette Contrast — 色のアクセシビリティをチェックする
- Generate Logo SVG — カスタムロゴを作成する