ウェブサイトデザインの作成

デザインは、Web ページの全体的な形式を決定します。Web サイトのデザインを構築するには、ゼロから作成する方法、あらかじめ構築されたコンポーネントを使用する方法、ライブラリから再利用可能なデザインを使用する方法など、さまざまな方法があります。さらに、スタイル設定を使用してサイトのデザインをさらに強化することもできます。

このガイドでは、次の内容について説明します。

1. デザインコンポーネント
2. スタイルパネルでデザインをカスタマイズする
3. 最適なアプローチ

デザインコンポーネント

サイトのデザインを始めるときは、デザインコンポーネントを利用して作品を整理する必要があります。 パネルを追加:

• セグメント
• ストレージ
• 垂直方向の配置
• 水平方向の配置
• クイックスタック

ゼロからデザインを作りたいのであれば、 セグメント そして ストレージ 追加のコンポーネントを含めることができる基本構造を確立できます。

垂直方向の配置 そして 水平方向の配置 取り入れるべき有益な要素 内で セグメントとストレージ。垂直配置は、事前構成された垂直フレックスボックス表示設定を使用する div ブロックであり、水平配置は、事前構成された水平フレックスボックス表示設定を使用する div ブロックです。これにより、フレックスボックスベースのデザインをより効率的に作成できます。

よりすぐに使えるデザインには、 クイックスタック コンポーネント。クイック スタック コンポーネントは CSS グリッドを使用し、事前設定された垂直フレックスボックス表示設定を使用する div ブロックで構成されたセルで構成されます。サイトにクイック スタックを追加するときは、8 つのプリセットから選択し、必要に応じてコンポーネントとそのセルをカスタマイズできます。これにより、構築プロセスが簡素化され、個々のコンポーネントから構築する場合に比べて、より迅速にデザインを構築できます。

さらに、コンポーネントやCSSスタイルまでを網羅した既成のデザインをご希望の場合は、ライブラリのデザインを利用できます。ライブラリには、 Webflow マーケットプレイス またはスターター ライブラリから。

デザイン プロセスを効率化するために、ほとんどのデザインで Quick Stack を使用することをお勧めします。ただし、基本的なコンポーネントを使用してデザインを構築する場合 (たとえば、デザインで flexbox を自動的に使用したり、CSS グリッドで構造化したりしたくない場合)、セグメント、ストレージ、div ブロックのみを使用してデザインできます。

スタイルパネルでデザインをカスタマイズする

コンポーネントのデザインは、 スタイルパネル > レイアウト セクション。ここでは、コンポーネントの表示設定 (フレックスボックス、グリッドなど) を調整して、デザインをさらにカスタマイズできます。

選択した表示設定（ブロック、フレックスボックス、グリッド、インラインブロック、インライン、なしなど）に応じて、追加の書式設定オプションが レイアウト セクション。たとえば、flexbox を選択すると、コンポーネントを水平に配置するか垂直に配置するかを決定できます。

最適なアプローチ

最終的には、デザインに関する決定はあなたの裁量に委ねられます。さまざまな方法を試してみることで、好みのアプローチを決定することをお勧めします。追加のガイダンスとして、レイアウトを効率的に設計するためのヒントとコツをいくつかまとめました。

• ほとんどのレイアウトでは、クイックスタックコンポーネントを使用してデザインを開始します。このコンポーネントは汎用性が高く、すぐに適用でき、最も一般的な表示設定（フレックスボックスやCSSグリッドなど）がすでに配置されています。
• 2次元にわたる構造化されたデザインがあり、セルに位置設定を設定したり、コンテンツが他のコンテンツと重なるようにしたい場合にグリッドを実装します。
• 親要素にフレックスボックスを適用して、1次元にわたる流動的なデザインを実現します。
• 事前に構築されたスタイル付きレイアウトを求める場合は、ライブラリデザインを組み込む