DiviでフラットなWebデザインを作成するための6つのDiviテクニック

フラットウェブデザインは、そのコアバリューのために人気があります。 使いやすさに重点を置き、ユーザーエクスペリエンスを最初に優先します。 それは、洗練されたモダンなデザインと組み合わせて、良いフラットなウェブサイトになります。 フラットなウェブサイトのすべてのデザイン要素は、ページに追加する前によく考えておく必要があります。 また、シンプルでありながら美しく、同時に魅力的であることにも焦点を当てる必要があります。 忘れないでください、それはあなたの訪問者の注意を引き付け、あなたの会社が何であるかを知ることに彼らを好奇心をそそらせるべきです。

この投稿では、DiviでフラットなWebデザインを作成するためのいくつかのテクニックを共有します。 これは、4つの異なるWebサイトスタイルと、Diviを使用してそれらを実現する方法を扱う投稿シリーズの3番目の投稿です。

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

それを手に入れよう！

1.ヒーローセクションをクリーンで理解しやすい状態に保つ

この投稿の冒頭で述べたように、使いやすさはフラットウェブデザインスタイルの非常に重要な側面です。 それはあなたが彼らに負担をかけずに要点に到達し、訪問者と関連情報を共有することを可能にします。 同時に、あなたはあなたの会社のブランディングにマッチするゴージャスなレイアウトを利用します。

フラットなウェブデザインを作成する方法はたくさんありますが、ほとんどどこでも気付いたのは、ヒーローセクションのシンプルさです。 そして、シンプルなデザインは間違いなく退屈を意味するものではありません。 それはあなたが茂みの周りを殴る必要がないことを意味します。 作成しているデザインを誇張して訪問者を感動させることなく、要点をつかむことができます。

2.ボックス構造を強調する

フラットウェブデザインスタイルで典型的なもう1つのことは、ボックス構造の使用です。 Diviの周りの方法を知っているなら、基本的にビルダー内のいたるところにボックス構造を見つけることができることを知っています。 彼らはあなたのウェブサイトに特定の構造を与え、あなたが事前にフレームワークを構築することを可能にします。

フラットなデザインでは、通常、ボックス構造が強調されます。 これにより、人々は簡単にナビゲートして、探しているものをほんの時間内に見つけることができます。

3.3つの明るい色を選択します

これまで、ボックス構造と単純なヒーローセクションの使用について説明してきました。 理論的には、それは退屈に聞こえますよね？ Webサイトでのユーザビリティ要素のバランスをとるために、明るいカラーパレットを使用してWebサイトに命を吹き込むことができます。 あなたはあなたのウェブサイトをパーソナライズしてあなたの会社の価値観と一致させる2つまたは3つの明るい色で行くことができます。

4.非常に微妙なグラデーションカラーの組み合わせを使用する

サイクルを壊すのに役立つもう1つのことは、非常に微妙なグラデーションカラーの組み合わせを使用することです。 両方のグラデーションカラーに同じ色を使用しますが、色合いを変えます。 それらの1つはより明るくする必要があり、もう1つはより深い感触を持っています。 彼らはすぐに人々へのグラデーションとして攻撃することはありませんが、それはあなたのウェブサイトにもう少し深みと詳細を与えるのに役立ちます。

5.1つの標準と1つのエレガントなフォントファミリを組み合わせる

通常、多くのWebサイトでは、タイトルによりエレガントなフォントファミリを使用し、本文テキストに標準のフォントファミリを使用しています。 切り替えてみませんか？ これは間違いなく変化をもたらすでしょう。 さらに、人々はしばしば説明をスキップしてタイトルだけを読む傾向があります。 もしそうなら、あなたはあなたのタイトルをできるだけ読みやすくしたいですよね？ フォントファミリの優れた組み合わせは、タイトルにArialを使用し、本文にGeorgiaを使用することです。 ジョージアはまだ非常に読みやすく、少し凝っています。そしてそれはあなたのウェブサイトに必要なコントラストを与えます。

6.ハイツで遊ぶ

ヒントの最後の1つは、ページのデザイン要素の高さをいじることです。 あなたはそれがあなたのウェブサイトの全体的なルックアンドフィールにどれほど貢献できるかに驚くでしょう。 フラットなデザインに推奨されるボックス構造を維持していると同時に、訪問者にインタラクションを提供しています。

プレビュー

投稿の前の部分でいくつかのテクニックを見てきましたが、今度はヒントを実践する時が来ました。 次の素晴らしい結果を段階的に作成します。

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

セクション設定

グラデーションの背景

新しいページを作成し、そのページのセクションを追加することから始めます。 まだ行を追加せずに、セクション設定を開きます。 次の設定で微妙なグラデーションの背景を使用しています。

• カラー1：＃5214ff
• カラー2：＃420fc1
• グラデーションタイプ：線形
• グラデーション方向：146度
• 開始位置：30％

間隔

セクションにも上部と下部のパディングを追加しています。

• トップパディング：55px
• ボトムパディング：130px

行＃1を追加

行設定

カラム構造

最初の行を追加して続行します。 このセクションは、合計で3つの異なる行で構成されます。 最初の行には、次の列構造を使用しています。

サイジング

行設定をすぐに開き、サイズ設定で[この行を全幅にする]オプションを有効にします。

タイトルテキストモジュールを追加する

H1テキスト設定

この行に追加する必要があるのは、H1テキストモジュールを1つだけです。 コンテンツを追加したら（そしてそれがH1であることを確認したら）、H1テキスト設定を開き、次の変更を適用します。

• 見出しフォント：Arial
• 見出しテキストの配置：左
• 見出しのテキストの色：#FFFFFF
• 見出しのテキストサイズ：86px（デスクトップ）、65px（タブレット）、45px（電話）
• 見出し線の高さ：1.2em

行＃2を追加

行設定

カラム構造

次の行に移りましょう。 ここでも、1列のみの行を使用しています。

サイジング

モジュールを追加する前に、行設定を開き、次のサイズ設定を適用します。

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

仕切りモジュールを追加する

色

DividerModuleを列に追加して続行します。 仕切りの色として「＃edf000」を使用しています。

サイジング

次に、Dividerモジュールのサイズ設定を調整します。

• 仕切りの重量：10px
• 幅：64％
• モジュールの配置：右

行＃3を追加

行設定

カラム構造

最後になりましたが、2列の行を追加します。

サイジング

行設定を開き、サイズ設定で[この行を全幅にする]オプションを有効にします。

間隔

上部と下部のパディングに「0px」を追加して、行のカスタムパディングを削除します。

説明テキストモジュールを列2に追加します

テキスト設定

次のテキスト設定を使用して、説明テキストモジュールを2番目の列に追加します。

• テキストフォント：Georgia
• テキストの色：#FFFFFF
• テキストサイズ：27px（デスクトップ）、22px（タブレット）、18px（電話）
• テキスト行の高さ：1.9em
• テキストの配置：右

ボタンモジュールを列2に追加します

ボタンの配置

テキストモジュールの配置設定内でも、行を右に配置します。

ボタンの設定

ヒーローセクションに追加する必要がある次の最後のモジュールは、ボタンモジュールです。 コピーを追加したら、次のボタン設定を適用します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：27px
• ボタンのテキストの色：＃303030
• ボタンの背景色：＃edf000
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• ボタンフォント：Georgia

標準セクション＃2を追加

セクション設定

間隔

2番目のセクションに進むことができます！ セクション設定を開き、次のパディングを使用します。

• トップパディング：155px
• ボトムパディング：200px

行＃1を追加

行設定

カラム構造

追加する最初の行には、赤い円が含まれます。 行に次の列構造を選択します。

列1のグラジエントバックグラウンド

画像モジュールをアップロードする代わりに、列1の放射状グラデーションの背景を使用します。 カラーパレットの赤色を完全に透明な色と組み合わせて使用​​しています。

• 色1：＃ff3233
• 色2：rgba（255,255,255,0）
• 列1グラデーションタイプ：ラジアル
• 列1の開始位置：45％
• 列1の終了位置：45％

サイジング

サイズ設定を変更して続行します。

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

仕切りモジュールを追加する

仕切りを隠す

列の背景が表示されるようにするために、最初の列にディバイダーモジュールを追加します。 ただし、仕切りを表示したくありません。 そのため、「ディバイダーを表示」オプションを無効にします。

間隔

また、柱のグラデーションの背景が透けて見えるように、Dividerモジュールに次のマージンを追加します。

• 上：150px（デスクトップ）、200px（タブレットと電話）
• 下：150px（デスクトップ）、200px（タブレットと電話）

行設定に戻る

間隔を追加する

この赤い円をページの両方のセクションに重ねます。 これを行うには、行の設定を再度開き、負のマージンを追加します。

• 上マージン：-350px（デスクトップ）、-400px（タブレットと電話）
• 左マージン：-250px（デスクトップと電話）、-400px（タブレット）

行＃2を追加

行設定

カラム構造

2行目に移りましょう。 この行には、タイトルのテキストモジュールと仕切りが含まれます。 次の列構造を選択します。

間隔

上部のパディングに「0px」を使用して、この行が作成するスペースを減らします。

タイトルテキストモジュールを追加する

H2テキスト設定

これで、モジュールを追加できます。 次のテキスト設定で新しいH2テキストモジュールを追加することから始めます。

• 見出し2フォント：Arial
• 見出し2テキストの配置：中央
• 見出しのテキストの色：＃303030
• 見出し2テキストサイズ：50px（デスクトップ）、45px（タブレット）、32px（電話）
• 見出し2行の高さ：1.3em

仕切りモジュールを追加する

色

テキストモジュールのすぐ下に、ディバイダーモジュールを追加します。 今回は、仕切りを表示したいと思います。 '＃5214ff'カラーコードを付けます。

サイジング

次に、Dividerモジュールのサイズ設定を変更します。

• 仕切りの重量：10px
• 幅：30％
• モジュールの配置：中央

行＃3を追加

行設定

カラム構造

4つの列を使用して最終行を作成するときが来ました。

セクションのグラデーションの背景をコピーする

ヒーローセクションで使用したのと同じグラデーションの背景を使用します。 したがって、時間を節約するために、これらの設定をコピーするだけです。

列1と3にグラデーションの背景を貼り付けます

そして、それらを1列目と3列目に貼り付けます。

サイジング

次にサイズ設定に移動し、行が画面の幅全体を占めるようにします。

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

間隔

間隔設定も変更します。

• トップマージン：100px
• トップ＆ボトムパディング：0px

宣伝文モジュールを追加する

アイコンを選択

行の設定が完了したので、モジュールの追加を開始できます。 各列に1つずつ、合計4つの宣伝文モジュールが必要です。 個別に作成するのではなく、作成して後で複製します。 宣伝文のコンテンツを追加したら、先に進んで、選択したアイコンを選択します。

アイコン設定

次にアイコン設定を開き、「＃edf000」アイコンの色を使用します。

テキスト設定

次のテキスト設定を使用して続行します。

• テキストの向き：中央
• テキストの色：明るい

タイトルテキスト設定

次にタイトルテキスト設定を開き、いくつかの変更を加えます。

• タイトルフォント：Arial
• タイトルテキストサイズ：31px
• タイトル行の高さ：2.6em

本文の設定

同様に、本文テキストを作成中のレイアウトと一致させます。

• ボディフォント：Georgia
• 本文サイズ：18px
• ボディラインの高さ：2.2em

間隔

最後に、Blurb Moduleに呼吸するためのスペースを与えるために、次のカスタムパディングを追加します。

• トップ＆ボトムパディング：50px
• 左右のパディング：20px

宣伝文の複製と変更モジュール

宣伝文句モジュールのクローンを作成し、列2に配置します

作成した宣伝文モジュールのクローンを作成し、複製を2番目の列に配置します。

アイコンの変更

最初に変更する必要があるのはアイコンです。

アイコンの色を変更する

アイコンの色も「＃ff3233」に変更します。

テキストの色を変更する

白の背景色を扱っているので、テキスト設定内でテキストの色を「濃い」に変更する必要があります。

間隔

宣伝文句モジュールの高さをいじって、すべてがもう少し飛び出すようにしています。 これを行うには、間隔設定を開き、次の上部マージン値を使用します。

• 上マージン：100px（デスクトップ）、0px（タブレットと電話）

ボックスシャドウ

さらに、非常に微妙な影も追加します。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-10px
• 影の色：rgba（0,0,0,0.11）

両方の宣伝文句モジュールのクローンを作成し、残りの列に配置します

クローンモジュール

これで、残りの列に再利用する2つの宣伝文モジュールができました。 それらのそれぞれを一度クローンします。

3列目と4列目に配置

複製した宣伝文モジュールを対応する列に配置すれば完了です。

プレビュー

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

最終的な考え

この投稿では、Diviを使用してフラットなWebデザインを作成するためのヒントとテクニックをいくつか紹介しました。 フラットウェブデザインは、訪問者がページを簡単にナビゲートし、情報をより迅速に処理できるため、最近非常に人気があります。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！