Diviで最小限のウェブサイトを作成するための8つのテクニック

最小限のウェブサイトは、過去数年間で本当に人気になるように成長しました。 彼らはあなたがナビゲートするときにあなたの訪問者に新鮮で清潔な感覚を与えることに集中することを可能にします。 最小限のウェブデザインスタイルは、スカンジナビアのインテリアデザインスタイルの影響を受けています。 あなたは確かにインターネットの至る所でスカンジナビアの居間の写真を見ました。 家具を減らし、主に白または灰色を使用することにより、光と静けさが部屋に自由に入ることができます。 それはまさに最小限のウェブサイトが同様に行うことです。 彼らはあなたの訪問者に落ち着いた感じを与えることに焦点を合わせているので、彼らはあなたが持ってきたコンテンツに圧倒されることなく集中することができます。

これは、4つの異なるWebサイトスタイルと、Diviを使用してそれらを実現する方法を扱う投稿シリーズの2番目の投稿です。

1. クリーン＆アブストラクト
2. 最小限
3. フラット
4. 大胆でカラフル

それを手に入れよう！

1.少ないほど多い

最小限のウェブサイトを作成するときに最初に覚えておく必要があるのは、ウェブサイトで使用するデザイン要素を減らすことです。 より多くを使用するのではなく、使用するいくつかの要素を最大限に活用するようにしてください。

デザイン要素を補完するように微調整することで、デザインからどれだけの成果を得ることができるかに驚かれることでしょう。 Webサイトで使用する要素を少なくすることで、概要を維持し、より一貫性のある明確な方法でメッセージを配信することもできます。

2.マージンとパディングはあなたの親友です

最小限のウェブサイトには通常、多くの空白があります。 あなたのページと投稿の空白は、訪問者があなたのウェブサイトへの訪問中に息をすることを可能にします。 彼らは静けさの感覚を与え、あなたが共有したいコンテンツに集中することを可能にします。

Webサイトに空白を追加する最良の方法は、白やライトグレーの背景色を追加のパディングやマージンと組み合わせて使用​​することです。 さまざまな値を試して、そこからどのような結果が得られるかを確認することを恐れないでください。

3.1つのアクセントカラーを使用する

あなたがあなたのウェブサイトをできるだけ最小限に保ちたいならば、あなたはまたあまりにも多くの異なる色を使うことを避けるべきです。 白とグレーを多用して、できるだけニュートラルにします。 書かれたコンテンツには暗い色を使用してください。 また、デザインをもう少しエッジの効いたものにするには、アクセントカラーを1つ選択します。 この色は通常、ロゴで使用する色と同じになります。

4.画像またはイラストのいずれか–両方ではない

一般に、Webサイトを構築するときは、実際の画像またはイラストから選択することをお勧めします。 両方を同時に使用すると、Webサイトが非常に複雑になり、さまざまなWebサイトのスタイルが混同される可能性があります。これは絶対に避けたいことです。

ただし、例外が1つあります。 たとえば、Blurbモジュールのアイコンイラストと組み合わせて画像を自由に使用してください。 それらが最小限であり、ページのコンテンツをサポートしている場合は、問題ありません。

5.CTAにボタンモジュールの代わりにテキストモジュールを使用することを検討してください

ボタンモジュールの代わりにテキストモジュールを使用しようとしたことがありますか？ あなたは間違いなくすべきです。 ボタンモジュールは、Visual Builderで慣れているほとんどのオプションを提供しますが、ボタンのすべての側面に境界線を追加する傾向があります。 テキストモジュールを使用すると、それを回避できます。 下の印刷画面に表示されているように、コピーをクリック可能にして、下の境界線を追加するだけです。

6.ディバイダは空白のバランスをとるのに役立ちます

Webサイトにモダンなタッチを追加したい場合は、Webサイトで複数の仕切りを使用して、残りのレイアウトと一致するようにスタイルを設定する必要があります。

それらは、異なる設計要素を相互に接続し、一貫した結果を生み出す傾向があります。

7.シンプルで微妙な形を使用する

これは私のお気に入りの1つです。 グラデーションの背景など、私たちが最も慣れている機能を無視する傾向がある場合があります。 確かに、背景画像を使用することには魅力がありますが、放射状のグラデーションの背景を微妙に使用しようとしたことがありますか？ それはあなたの訪問者があなたの見出しに集中することを可能にし、あなたが行動を起こすのを助けます。

8.微妙なアニメーションを使用する（必要な場合）

大事なことを言い忘れましたが、微妙なアニメーションを使用すると、通常、最小限のWebサイトがさらに良くなります。 そして、私たちが微妙と言うとき、私たちは本当に微妙を意味します。 アニメーションの強度を大幅に下げるだけで、効果がどれほど滑らかに見えるかに驚かれることでしょう。 アニメーションが微妙である限り、任意の要素に追加でき、Webサイトの読みやすさやユーザーエクスペリエンスに影響を与えることはありません。

プレビュー

すべてのテクニックを試したので、それらを実践してみましょう。 次の例を段階的に再作成します。

作成を始めましょう：新しい標準セクションを追加します

セクション設定

間隔

上記の例を作成するには、合計2つのセクションが必要です。 最初のページを新規または既存のページに追加し、それに次の間隔を追加することから始めましょう。

• トップ＆ボトムパディング：50px

新しい行を追加する

カラム構造

1つの列を含む新しい行を追加して続行します。

カラムグラジエントの背景

この行の設定を開き、次の列グラデーションの背景を追加します。

• 色＃1：#ffffff
• 色＃2：#efefef
• カラムグラジエントタイプ：ラジアル
• 柱の半径方向：中心
• カラム開始位置：40％
• カラムの終了位置：40％

サイジング

次に、サイズ設定に次の変更を加えて、行の幅を広げます。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：2

間隔

最後に、次の間隔も行に追加します。

• トップ＆ボトムパディング：0px
• 列の上部と下部のパディング：250px
• 列の左パディング：150px（デスクトップ）、20px（タブレット）、0px（電話）

最初のテキストモジュール

テキスト設定

行設定を変更したら、必要なモジュールの追加を開始できます。 次のテキスト設定を使用して、簡単な説明のテキストモジュールから始めます。

• テキストフォントの太さ：半太字
• テキストフォントスタイル：大文字
• テキスト文字の間隔：8px

アニメーション

このテキストモジュールから始めて、このレイアウトにも非常に微妙なアニメーションを追加しています。 アニメーション設定を開き、次のアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーション強度：5％

2番目のテキストモジュール

H1テキスト設定

前のテキストモジュールのすぐ下に、次のH2テキスト設定を含むH1テキストモジュールを追加します。

• 見出しフォント：Georgia
• 見出しのテキストの色：＃666666
• 見出しのテキストサイズ：78px（デスクトップ）、50px（タブレット）、40px（電話）
• 見出し文字の間隔：3px

間隔

次の間隔設定を使用して、このモジュールの周囲にスペースを作成します。

• 上マージンと下マージン：100px
• 左マージン：100px（デスクトップとタブレット）、20px（電話）
• 左パディング：40px

国境

左の境界線も必要になるので、次の設定で左の境界線を追加します。

• 左ボーダー幅：6px
• 左ボーダーの色：＃d67787

ボタンテキストモジュール

リンクを追加

ボタンモジュールを使用する代わりに、リンクを追加するテキストモジュールを使用しています。 コンテンツボックス内にCTAとリンクを追加します。

リンクテキスト設定

次に、次のリンクテキスト設定をテキストモジュールに適用します。

• リンクフォントの太さ：半太字
• リンクフォントスタイル：斜体と大文字
• リンクテキストの配置：左
• リンクテキストの色：＃666666
• リンク文字の間隔：8px

サイジング

下の境界線を使用するので、後で、このテキストモジュールの幅も縮小します。

• 幅：46％
• モジュールの配置：左

間隔

また、下の境界線がテキストに近すぎないようにするために、「10px」の下のパディングも追加します。

• ボトムパディング：10px

国境

これで、次の設定を使用して下の境界線を追加できます。

• 下の境界線の幅：1px
• 下の境界線の色：＃666666

アニメーション

微妙なアニメーションも追加しています。

• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーションの遅延：100ms
• アニメーション強度：5％

仕切りモジュールを追加

可視性

この行で必要になる最後のモジュールは、ディバイダーモジュールです。 [仕切りを表示]オプションを有効のままにしてください。

色

この仕切りには、タイトルのテキストモジュールの左側の境界線に使用したのと同じ色を使用しています： '＃d67787'。

サイジング

次にサイズ設定を開き、除算器の重みを「2px」に変更します。

間隔

次の間隔設定を使用して、ディバイダーモジュールを右に押します。

• 左マージン：200px
• 右マージン：-100px

アニメーション

最後になりましたが、次のアニメーションを含めます。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーションの遅延：150ms
• アニメーション強度：5％

2番目の標準セクションを追加します

セクション設定

間隔

最初のセクションが完了したので、先に進んで前のセクションのすぐ下に新しいセクションを追加できます。 セクション設定を開き、次のマージンを追加します。

• 上マージンと下マージン：80px

新しい行を追加する

カラム構造

次の列構造で行を追加して続行します。

サイジング

次に、行の設定を開き、次の設定を使用して行の幅を広げます。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：2

間隔

列2のパディングも追加する必要があります。

• 列2の左パディング：100px（デスクトップ）、0px（タブレットと電話）

列1に画像モジュールを追加

画像をアップロード

これで、2つの列にモジュールを追加し始めることができます。 最初の列に画像モジュールを追加することから始めて、選択した画像をアップロードします。

間隔

負の右マージンを追加して、画像モジュールの幅を広げます。

• 右マージン：-100px

ボックスシャドウ

また、次のボックスシャドウを使用して、ページに追加のデザイン要素を作成します。

• ボックスシャドウの水平位置：100px
• ボックスシャドウの垂直位置：100px
• ボックスシャドウスプレッド強度：-14px
• 影の色：#efefef

クローンボタンテキストモジュールと画像モジュールの下に配置

ボタンテキストモジュールの検索と複製

[テキストモジュール]ボタンで始まる最初のセクションの3つのテキストモジュールすべてを再利用します。 先に進んで、それを複製します。

画像の下に配置

次に、最初の列のイメージモジュールのすぐ下に配置します。

最初のセクションで最初のテキストモジュールのクローンを作成し、列2に配置します

テキストモジュールの検索と複製

次に必要なテキストモジュールは、セクションの最初のモジュールです。 先に進んで、これもクローンします。

列2に配置

最初の列に配置する代わりに、2番目の列にドロップします。

タイトルテキストモジュールのクローンを作成し、列2に配置します

テキストモジュールの検索と複製

最後に、タイトルのテキストモジュールも再利用します。

列2に配置

クローンを作成したら、新しい行の2番目の列に配置します。

コンテンツをH2に変更する

コンテンツボックスのコンテンツをH2に変更します。

H2テキスト設定

次に、H2テキスト設定に次の設定を追加します。

• 見出し2フォント：Georgia
• 見出し2のテキストの色：＃666666
• 見出し2テキストサイズ：58px
• 見出し2文字の間隔：3px

説明テキストモジュールを追加

テキスト設定

タイトルのテキストモジュールの下に、次のテキスト設定で説明テキストモジュールを追加します。

• テキストフォントの太さ：軽い
• テキスト文字の間隔：1px

サイジング

先に進み、このテキストモジュールのサイズを変更します。

• 幅：70％
• モジュールの配置：右

Divider Module＃1を追加します

可視性

次に必要なモジュールはディバイダーモジュールです。 [仕切りを表示]オプションが有効になっていることを確認します。

色

仕切りの色を「＃666666」に変更します。

間隔

次に間隔を追加します。

• トップマージン：100px
• 左マージン：400px（デスクトップ）、300px（タブレット）、200px（電話）
• 右マージン：-100px

アニメーション

そしてもちろん、微妙なアニメーションも使用します。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーション強度：5％

Divider Module＃2を追加します

可視性

最後になりましたが、別のDividerモジュールを追加します。 ここでも、[仕切りの表示]オプションが有効になっていることを確認してください。

色

仕切りの色を「＃d67787」に変更します。

サイジング

除算器の重みには「2px」を使用します。

間隔

そして、次の間隔設定を追加します。

• 左マージン：200px（デスクトップとタブレット）、150px（電話）
• 右マージン：-100px

アニメーション

最後に、仕切りに微妙なアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーションの遅延：100ms
• アニメーション強度：5％

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。

最終的な考え

この投稿では、最小限のWebサイトを作成する方法に関するいくつかの優れたDiviテクニックを紹介しました。 これは、あなたの創造性とDiviの最高の組み込みオプションのいくつかを使用して、美しいデザインスタイルを実現する方法に関するシリーズの2番目の投稿です。 次の投稿では、より魅力的なデザインスタイルを実現する方法についてのテクニックを共有します。 ご質問やご提案がございましたら、下にコメント欄を残してください！