心に留めておくべき7つのDiviUXのベストプラクティス

Diviは非常に用途が広いという事実に私たちは皆同意できると思います。 あなたが構築しているウェブサイトをカスタマイズしてパーソナライズするための非常に多くの可能性があります。 仕事の生産性を向上させたいのであれば、これはあなたにとって理想的な投稿かもしれません。 慣れているかどうかわからない7つのDiviUXのベストプラクティスについて説明します。 私が共有する7つのヒントは、私が個人的に頻繁に使用し、Diviを日常的に使用しているときに恩恵を受けるものです。

それを手に入れよう！

1.マイクロアニメーションの使用

覚えておきたい最初のDiviUXのベストプラクティスは、過度のアニメーションではなくマイクロアニメーションを使用することです。 かつては、ウェブサイトのアニメーションが多ければ多いほど、「よりカスタマイズされた」または「高度な」ものが一般に公開されているように見えた時代がありました。 しかし、それらの時代は終わりました。 本当に派手に見えることに加えて、過度のアニメーションは、人々があなたのウェブサイトで持っている全体的なユーザーエクスペリエンスに貢献しません。 実際のところ、彼らはしばしば訪問者を本当に重要なことからそらすことができます。 代わりにマイクロアニメーションを選択するのが道です。 Diviのアニメーションオプションを使用すると、追加するアニメーションの速度と強度をカスタマイズできます。 マイクロアニメーションを作成するための鍵は、アニメーションの強度を低くし、アニメーションの長さを少し長くすることです。

デザイン要素の[デザイン]タブに移動します

選択したデザイン要素を開き、[詳細設定]タブに移動します。 そこに、アニメーションオプションがあります。

少量のアニメーション強度を使用する

任意のアニメーションタイプを選択して、アニメーションの強度を下げることができます。 下に行くほど、アニメーションはより繊細になります。 アニメーションの長さを長くすることで、アニメーションが見過ごされないようにすることができます。

2.応答性を手動で最適化する

Diviの最大の利点の1つは、作成しているレイアウトも応答性の高いものにするのが簡単であるという事実です。 実際のところ、Diviはすでにほとんどの作業を行っています。 作成したものはすべて、追加した瞬間からレスポンシブになります。 その時点から、あとは設計要素を手動で変更するだけです。 これには、たとえば、画面サイズに応じて共有するコピーのテキストサイズを変更することも含まれます。

現在、行と列には、画面サイズに応じて変化する事前定義されたマージン値が組み込まれています。 ただし、必ずしもこれらのデフォルト値を使用する必要はありません。 たとえば、人気のあるWebサイトの多くは、画面サイズが小さいほど左右の余白が少なくなることがわかりました。 そうすれば、より多くのコンテンツを水平方向に収めることができます。つまり、垂直方向のスクロールが少なくて済みます。

小さい画面サイズで使用されるデフォルトの左右の余白は40pxです。 小さい画面サイズの幅全体を利用するには、この値を25pxに置き換えることをお勧めします。

プロセスを段階的に見ていきましょう。

行のサイズを変更する

最初に行う必要があるのは、行のサイズ設定で次のオプションを有効にして、セクション、行、およびモジュール間のすべてのスペースを削除することです。

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

セクションまたは行のパディングを追加

ここでも、セクションと行の間に十分なスペースが必要です。 作業中の行またはセクションに左右のカスタムパディングを追加するかどうかを選択できます。 行に追加しても、セクション内の他の行には影響しません。 ただし、一方で、セクションに適用すると、追加する行数に関係なく、セクション全体でこれらのマージンが同じままになります。

• 左パディング：23vw（デスクトップ）、30px（タブレット）、25px（電話）
• 右パディング：23vw（デスクトップ）、30px（タブレット）、25px（電話）

列のパディングを追加する

列とモジュールの間のスペースも重要です。 これらの値は、さまざまな画面サイズに応じてカスタマイズできます。

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

テキストサイズを小さくする

小さい画面サイズで得られる水平方向の幅を100％利用したいですか？ ラップトップの観点からは、本文のテキストサイズの13pxは小さいように見えるかもしれませんが、通常、モバイルデバイスには十分すぎるほどです。 上記の手順と組み合わせて、携帯電話から13pxの本文テキストサイズを表示してみてください。そうすれば、私が話していることがわかります。

3.ピクセルの代わりにビューポートユニットを使用する

これは、前のステップでも行ったことの1つです。 すべてのデスクトップ画面サイズでWebサイトの応答性を維持するには、ピクセルではなくビューポート単位を使用することをお勧めします。 これにより、27インチのデスクトップモニターでも、Webサイトの見栄えが良く、設計どおりになります。

一方、小さい画面サイズは、15インチと27インチのデスクトップ画面ほどの違いはありません。 垂直方向のオーバーラップを作成するときにビューポートユニットを使用すると役立つ場合がありますが、左右のパディング/マージンにピクセルを使用しても害はありません。

4.テキストの向きのスタイルを拡張する

無意識のうちにさえ、人々があなたのウェブサイトですぐに気付くものの1つは、あなたが構築したデザインにどれほど一貫しているかということです。 これには、ページ全体で使用するテキストの向きが含まれますが、これに限定されません。 DiviのUXのベストプラクティスの1つは、テキストの向きを確認してデザインを仕上げることです。 よく考えられて実行されている場合は、ページ内でさまざまなテキストの向きを組み合わせることができます。 ただし、1つの特定のセクションで異なるテキストの向きを組み合わせると、さらに難しくなります。 最良のシナリオ。 ページ全体で1つのテキストの向きを維持します。 ただし、もっと実験したい場合は、セクションごとに少なくとも1種類のテキストの向きを維持するようにしてください。 さまざまなデザイン要素をすべて確認するだけでそれを行うことができます。または、Diviの効率機能の1つを使用して作業を行うこともできます。

ほんの数ステップで、ページ全体またはセクション全体で同じテキストの向きと一貫性を使用していることを確認できます。

それらのステップを実行してみましょう。

テキストを含むモジュールを開く

テキストを含むページ上のモジュールを開き、テキスト設定に移動します。

右クリックのテキストの向きのオプション

テキスト設定にある[テキストの向き]オプションを右クリックし、[スタイルの拡張]オプションを選択します。

セクション全体またはページ全体で選択したテキストの向きを拡張する

これで、ページ全体でテキストの向きをどの程度一貫させるかに応じて、レイアウト全体または特定のセクション全体で選択したテキストの向きを拡張することを選択できます。

5. VisualBuilderモードとWireframeモードを切り替える

DiviのVisualBuilderの優れた点の1つは、バックエンドとフロントエンドのどちらで編集するかを選択する必要がないことです。 両方を切り替えるのにかかる時間は文字通り1秒未満です。 両方を組み合わせると、最高レベルの生産性と概要を得ることができると思います。 特に、レイアウトで複数のオーバーラップを処理している場合は、ワイヤーフレームモードに切り替えると、すばやく変更を加えることができます。 または、特定のデザイン要素をページの他の場所にドラッグアンドドロップする場合は、ワイヤーフレームモードに切り替えて、その特定の要素を無限にスクロールせずにドラッグすることで、簡単に行うことができます。

また、モーダルを開いたまま、デザイン要素のモーダルを開いてVisual Builderモードとワイヤーフレームモードを切り替えることができることをご存知ですか？ これにより、デザインのバックエンドに変更を加えたり、新しいデザイン設定がいつでも適切に配置されるのを確認したりできます。

6.ページ上で直接レイアウトをインポート/エクスポートします

これまでに、事前に作成されたレイアウト、保存されたレイアウト、およびDiviライブラリ全般に慣れてきました。 ただし、ローカルホストの特定のページで作業していて、完了したら、次のような手間をかけずに、ライブWebサイトにアップロードしたいとします。

• レイアウトをDiviライブラリに保存する
• Diviライブラリに移動してJSONファイルをエクスポートする
• ライブWebサイトのDiviライブラリにアクセスする
• JSONファイルのアップロード
• ライブWebサイトのページに移動します
• 保存したレイアウトからJSONファイルをアップロードする

次に、ページにあるインポート/エクスポートオプションを使用するだけです。 これにより、DiviライブラリにまったくアクセスせずにJSONファイルを作成できます。

レイアウトをエクスポートしたのと同じ方法で、レイアウトを新しいページにインポートできます。 ただし、このアプローチを選択すると、ライブWebサイトのDiviライブラリにレイアウトをインポートできなくなることに注意してください。 ページに直接のみ。

7.「ズームアウト」オプションを定期的に使用して見通しを保つ

これはおそらく私のお気に入りのDiviUX機能の1つです。 私たちは以前にそれをすべて行ったことがあると確信しています。 新しい通常のタブまたはシークレットウィンドウを開いて、作成したページの結果を確認します。 次に、Chrome拡張機能またはFirefoxアドオンを使用してページ全体の印刷画面を撮影しました。 これらすべてにより、作業中のレイアウトを新鮮に把握し、すべてがページ構造全体に収まるかどうかを確認できます。

それでも時々行うことをお勧めしますが、短時間に何度も行う必要はありません。 代わりに、VisualBuilderですぐそこにあるズームアウトオプションを使用してください。 これにより、探していた視点が得られるだけでなく、ページを離れることなくすばやく変更を加えることができます。

最終的な考え

この投稿では、Diviを使用してWebサイトを作成する際の生産性を向上させるのに役立つ7つの異なるDiviのベストプラクティスを紹介しました。 これらのヒントは、あらゆる種類のWebサイトを作成するときに必ず役立ちます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

aurielaki /shutterstock.comによる注目の画像