サイトのデザインの方針について
サイトデザインを行う際の基本的な考え方として、以下のステップに沿って進めると、より分かりやすくなると思います。
まず、構成と装飾を分けて考えることが重要です。構成とは、書籍でいうと目次や章立てのように、内容をどのように整理・分類するかという部分です。言い換えれば、サイトのトポロジー（骨組み・全体構造）です。一方、装飾とは、ページの配置や背景、文字の色、フォント、サイズなどの見た目に関わる部分で、これをジオメトリ（形や見た目のデザイン）と考えることができます。
具体的には、サイトのトポロジー（構成）はサイトの目的や役割に基づいてデザインします。その後、装飾については、見た目の印象やブランドイメージに基づいてデザインを行います。このように、構成と装飾を別々に考えることで、全体の目的に沿った、使いやすく魅力的なサイトを作ることができます。
最初はラフな段階で全体の構成（トポロジー）を考え、徐々に細かい部分（ジオメトリ）を作り込んでいくのが効果的です。また、スタイルについては、まず全体的な設定（グローバル設定）を行い、その上で必要に応じて個別の要素を細かく調整（ローカル設定）するという流れにすると、管理がしやすくなります。
Diviを使ったサイトの再現手順
以下に、Divi環境で行ったことを手順としてまとめました。
- 固定ページの作成
- WordPressダッシュボードから「固定ページ」→「新規追加」を選び、「About」ページを作成します。
- ページのパーマリンクを設定し、「https://mypage.com/about」でアクセスできるようにします。
- スラッグをaboutに設定し、親ページを「なし」に設定しました。
- オリジナル内容の反映
- インターネットブラウザーでオリジナルのAboutページを開き、ページ内のbodyの内容をコピーします。
- 作成した「About」固定ページに、コピーした内容を貼り付けます。
- ページレイアウトの設定
- Diviビルダーを使用して、オリジナルのページレイアウトに近づけます。
- 「リストビュー」から各要素を選び、必要に応じてグループ化、横並び・縦並び、ブロック化の設定を行います。
- セクション、行、モジュールなどを用いて、レイアウトを元のページと同じ見た目に調整します。
- フォントや背景のスタイル設定
- 外観 > カスタマイズ > 一般設定 > 書式に移動し、オリジナルサイトに合わせて全体のスタイルを変更します。
- 具体的には、以下の設定を行います：
- 見出しと本文のフォントサイズや文字色を調整。
- 背景色もオリジナルと一致させるように設定。
- グローバルなヘッダー、ボディ、フッター部分の背景色を黒に設定するには、以下の手順を行います：
- 外観 > カスタマイズ > 一般設定 > 背景から、ヘッダー、ボディ、フッターの背景色をそれぞれ黒に設定します。
- 必要に応じて、追加のCSSを使って特定の部分の背景色を個別に設定することも可能です。
- 追加のCSSクラス設定
- Diviの各モジュールに対して、特定のCSSクラスを追加することでスタイルをカスタマイズします。
- 追加CSSクラスは、Diviの各要素の「詳細設定」タブ内で指定可能です。このクラス名を記憶して、スタイルシートでそのクラスに対応するスタイルを定義することで、特定の要素にのみ適用されるスタイルを設定できます。
- 子テーマの利用
- サイトのカスタマイズを進める際には、Diviの子テーマを作成し、カスタマイズ内容を保持するようにしました。
- 子テーマを利用することで、Diviテーマのアップデートによる影響を最小限に抑えることができます。functions.php ファイルを作成し、wp_enqueue_scripts フックを使ってカスタムCSSを読み込みました。
- 特に、add_action(‘wp_enqueue_scripts’, ‘coreform_child_enqueue_styles’); のような関数を使って、親テーマと子テーマのCSSを正しい順序で読み込むように設定しました。
この手順を使うことで、オリジナルサイトのデザインをDiviを用いて再現し、全体的な統一感を持たせることができます。全体的なレイアウト設定とグローバルなスタイル設定を最初に行うことで、その後の個別ページの調整が効率的に進められます。
Twenty-Twenty-Fourを使ったサイトの再現手順
次に、無料のデフォルトテーマ「Twenty-Twenty-Four」を使ってサイトを再現する手順をまとめました。
- 固定ページの作成
- WordPressダッシュボードから「固定ページ」→「新規追加」を選び、「About」ページを作成します。
- ページのパーマリンクを設定し、「https://mypage.com/about」でアクセスできるようにします。
- スラッグをaboutに設定し、親ページを「なし」に設定しました。
- オリジナル内容の反映
- インターネットブラウザーでオリジナルのAboutページを開き、ページ内のbodyの内容をコピーします。
- 作成した「About」固定ページに、コピーした内容を貼り付けます。
- ページレイアウトの設定
- **ブロックエディタ（Gutenberg）**を使用して、オリジナルのページレイアウトに近づけます。
- ブロックエディタでは、各要素をブロックとして追加し、段落ブロック、画像ブロック、カラムブロックなどを使用して、オリジナルのレイアウトに似せて調整します。
- 必要に応じて、カラムを利用して横並びに配置したり、ブロックを追加・移動して縦並びに整えます。
- フォントや背景のスタイル設定
- 外観 > カスタマイズに移動し、全体のスタイル設定を行います。
- カラー設定でサイト全体の背景色、テキストカラー、リンクカラーなどを調整し、オリジナルサイトに近い見た目を再現します。
- スタイル設定で設定するスタイルを選択し、スタイルの編集を行います。このメニューでは、タイポグラフ、色、影、レイアウト（ページ設定、段落設定のようなもの）の設定を変更できます。ここで、テキスト、リンク、キャプション、ボタンのタイポグラフや色、背景なども変更できます。
- グローバル設定として、ヘッダー、ボディ、フッター部分の背景色を黒に設定する場合は、カスタマイザーの「カラーオプション」から各セクションごとに背景色を変更します。
- 追加のカスタムCSS設定
- 特定のスタイルを適用したい場合は、外観 > カスタマイズ > 追加CSSで直接CSSを記述します。
- 例えば、特定の見出しや段落のスタイルをカスタマイズしたい場合、適切なセレクタを使ってCSSを定義し、全体に適用されるように設定します。
- プラグインの利用
- 必要に応じて、ページレイアウトの調整やスタイルの追加に役立つ無料のプラグインをインストールします。
- 例えば、「Advanced Gutenberg Blocks」や「Stackable」などのプラグインを使うことで、ブロックエディタでのカスタマイズがより柔軟に行えます。
この手順を通じて、無料テーマである「Twenty-Twenty-Four」を使用しても、Diviと同様にオリジナルサイトに近いレイアウトとデザインを再現することが可能です。グローバルなスタイル設定を初めに行い、その後個別のブロックやページをカスタマイズすることで、効果的なデザインと使いやすさを両立させることができます。
補足：有料テーマ（Divi）と無料テーマ（Twenty-Twenty-Four）では、カスタマイズの自由度に差がありますが、どちらを使用する場合でも、まずは全体の構造（トポロジー）をしっかりと設計し、その後で装飾（ジオメトリ）を行うというアプローチが重要です。この考え方により、統一感と目的に沿ったウェブサイトを効率的に作成できます。
より一般的な説明
上記の説明をより具体的にすると以下のようになります．
サイトデザインを進めるときには、まず全体の構造と見た目のデザインを分けて考えると、理解しやすくなります。
まず、全体の構造についてです。これは、サイトがどのようなページで構成されているかを決める部分で、書籍でいえば目次のような役割です。たとえば「ホームページ」「お問い合わせ」「サービス紹介」など、それぞれのページのつながりを整理することが重要です。
次に、見た目のデザインです。ページの配置や背景の色、文字の色やフォントなど、訪問者にどう見えるかという部分をデザインします。この見た目の部分は、ブランドのイメージや、訪問者に伝えたい印象に基づいて決めていきます。
最初は全体の骨組みをラフに考えて、その後で細かい部分をしっかり作り込むことで、効率的に進めることができます。また、デザインのスタイルは全体で共通する部分をまず設定して、その後で必要に応じて細かく調整するようにすると、あとで管理がしやすくなります。
この考え方をもとに、まずは「Aboutページ」を作成してみましょう。
オリジナルの考え
サイトのデザインを行うときの考え方ですが以下のステップで行うのがよりわかりやすいかと思います．
構成（書籍でいうと目次目録など．カテゴライズなど．トポロジー構造ですね．）と装飾（ページ配置，背景や文字の色，フォント，サイズなど．いわゆるスタイルやテンプレート．なんと言えばよいのか？ジオメトリ構造ですね）は別々に考える．すなわちサイトのトポロジー（構成）は，サイトの役割に従いデザインし，装飾は見え方，サイトイメージに従いデザインすればよいと思います．
まずはラフに（トポロジー構造）考えて，徐々に細部（ジオメトリ構造）を作り込めば良いかと思います．
更に，スタイルに関しては，グローバルな設定を行っておき，必要に応じローカルな設定を調整する仕組みにしておけば良いかと思います．
この視点で，Aboutページを作成していきたいと思います．