Diviでモバイルファーストのデザインを作成する方法
公開: 2019-02-22多くのウェブサイトは、モバイルデバイスから大量の訪問者を獲得しています。 これは、デザインが小さい画面サイズに対して十分に最適化されているかどうかという問題につながります。 Diviを使用すると、デスクトップエクスペリエンス用に構築されたデザインも、即座に応答するようになります。 しかし、何かが反応するからといって、それが最適化されているとは限りません。
モバイルが主な訪問者のソースである場合、デスクトップではなくモバイルの観点から設計と構築を開始することが非常に役立ちます。 この投稿では、その方法を正確に説明します。 覚えておくべきいくつかのヒントとコツを確認した後、これらのヒントを考慮した例を最初から再作成します。
それを手に入れよう！
プレビュー
前に述べたように、私たちはいくつかのヒントとコツを調べることから始めます。 その後、これらのヒントを利用して、最初から例を再作成します。 結果を見てみましょう。
モバイル
デスクトップ
アプローチ
私たちのYoutubeチャンネルを購読する
1.新しいページを追加した直後にモバイルビューに切り替えます
新しいページを追加した後、最初に行う必要があるのは、すぐにモバイルビューに切り替えることです。 これにより、モバイル指向で正確なデザインを作成できます。
2.各デザイン要素のレスポンシブオプションを有効にし、最初にモバイル値を変更します
目的のデザインのデザインを開始したら、デザイン要素のレスポンシブオプションを有効にする必要があります。 これには、テキストサイズ、パディング、マージンが含まれますが、これらに限定されません。 追加する最初の値は、デザインが最初にモバイル向けに最適化されていることを確認するために、（デスクトップの値ではなく）モバイルの値になります。
3.列間のデフォルトのスペースを削除し、必要に応じて手動でパディングを追加します
より多くの水平方向のスペースを作成するには、列間のデフォルトのカスタムパディングをすべて削除することもお勧めします。 必要に応じて、いつでも各列またはデザイン要素に手動でパディングを追加し、必要な距離を自分で選択できます。
4. 2列または3列を並べて配置し、水平方向のデザインを作成します
Diviのレスポンシブ構造は垂直方向です。 これは、モジュールと列が互いに下に表示されることを意味します。 ただし、これにはさらに垂直方向のスクロールが必要です。 作業中の設計によっては、より水平な流れを作成することで実際に違いが生じる可能性があります。
5.途中または後でデスクトップとタブレットのビューを変更する
モバイルファーストの目的で設計している場合でも、他のビューも順番に維持することが重要です。 各デザイン要素に含まれているレスポンシブオプションは、それを達成するのに役立ちます。 これらの値は、後で変更するか、設計プロセス全体で変更するかを選択できます。
例の再現を始めましょう！
新しいセクションを追加
新しいページを開き、モバイルビューに切り替えて、新しいセクションを追加して開始します。
行＃1を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
行にテキストモジュールを追加
H2コンテンツを追加する
行の列にテキストモジュールを追加し、H2タイトルのコンテンツを入力します。
H2テキスト設定
次に、見出しのテキスト設定に移動して、タイトルの外観を変更します。
- 見出し2フォント：Didact Gothic
- 見出し2テキストの配置：中央
- 見出し2のテキストの色：＃333333
- 見出し2テキストサイズ：5.5vw（電話）、5vw（タブレット）、2vw（デスクトップ）
行に分周器モジュールを追加
可視性
追加したテキストモジュールのすぐ下に、ディバイダーモジュールを追加します。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
色
次に、[デザイン]タブに移動し、仕切りの色を変更します。
- 色：＃333333
サイジング
サイズ設定も変更します。
- 幅：48％
- モジュールの配置：中央
行＃2を追加
カラム構造
次の列構造を使用して、セクションに別の行を追加して続行します。
背景色
モジュールをまだ追加せずに、行の設定を開き、行に背景色を追加します。
- 背景色：＃ffe69e
列2の背景色
行の2番目の列にも背景色を追加します。
- 列2の背景色：＃ffd65b
配置
次に、行の配置を変更します。
- 行の配置：左
サイジング
次にサイズ設定を開きます。 ここでは、列間のデフォルトのスペースをすべて削除します。 また、デスクトップで見栄えを良くするために、列にカスタム幅を使用しています。
- カスタム幅を使用：はい
- ユニット：PX
- カスタム幅：700px
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
間隔
間隔設定に移動して続行し、カスタムマージンとパディング値を手動で追加します。
- トップマージン：5vw
- 下マージン：5vw
- トップパディング：0px
- ボトムパディング：0px
- 列1の上部パディング：10vw（電話）、8vw（タブレット）、4vw（デスクトップ）
- 列1の下部パディング：10vw（電話）、8vw（タブレット）、4vw（デスクトップ）
国境
行にいくつかの丸い角も追加します。
- 右上：10px
- 右下：10px
ボックスシャドウ
そして、それに微妙なボックスシャドウも与えます。
- ボックスシャドウブラー強度：50px
- 影の色：rgba（0,0,0,0.16）
カスタムCSS
最後になりましたが、水平方向のスペースを最大限に活用できるように、小さい画面サイズで列を並べて配置します。 [詳細設定]タブに移動し、CSSコードを1行メイン要素に追加します。
display: flex;
列1にテキストモジュールを追加
H3コンテンツを追加する
モジュールの追加を開始する時が来ました！ タイトルのテキストモジュールを最初の列に追加し、H3コンテンツを入力します。
H3テキスト設定
次に、[デザイン]タブに移動し、見出しのテキスト設定を変更します。
- 見出し3フォント：Didact Gothic
- 見出し3フォントの太さ：太字
- 見出し3テキストの配置：中央
- 見出し3テキストの色：＃ee6f49
- 見出し3テキストサイズ：4vw（電話）、3vw（タブレット）、1.5vw（デスクトップ）
Dividerモジュールを列1に追加します
可視性
次に、ディバイダーモジュールを追加します。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
色
次に、仕切りの色を変更します。
- 色：#ffffff
サイジング
サイズ設定と一緒に。
- 仕切りの重量：4px
- 幅：30％
- モジュールの配置：中央
間隔
モジュールにもカスタムトップマージンを追加します。
- トップマージン：4vw（電話）、2vw（タブレット）、1.5vw（電話）
ボタンモジュールを列1に追加
コピーを追加
最初の列に必要な次の最後のモジュールはボタンモジュールです。 コピーを入力してください。
配置
次に、[デザイン]タブに移動し、ボタンの配置を変更します。
- ボタンの配置：中央
ボタンの設定
ボタン設定でもボタンの外観を変更します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：3vw（電話）、2vw（タブレット）、1.5vw（デスクトップ）
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃ee6f49
- ボタンの境界線の幅：0px
- ボタンフォント：Didact Gothic
- フォントの太さ：太字
列2に画像モジュールを追加します
アップロードアイコン
2列目に必要なモジュールは画像モジュールだけです。 任意の画像を使用できますが、この例で使用したものとまったく同じアイコンを使用する場合は、Furniture Store Layout Packにアクセスして、投稿の最後にダウンロードできます。
配置
次に、[デザイン]タブに移動し、画像の配置を変更します。
- 画像の配置：中央
行＃2のクローン
行の変更が完了したら、先に進んでクローンを作成できます。
行の背景色を変更する
行の背景色から始めて、この複製にいくつかの変更を加える必要があります。
- 背景色：＃8ee5cf
列2の背景色を削除します
列2の背景色を削除して続行します。
列1の背景色を追加
代わりに、最初の列に背景色を追加しています。
- 列1の背景色：＃47e5bd
列のモジュールを変更する
モジュールの列も切り替えています。
画像モジュールのアイコンを変更する
次に、画像モジュールのアイコンを変更します。
画像モジュールにフィルターを追加
また、フィルター設定で色相を変更して、新しい行と列の背景色と一致させます。
- 色相：65度
行の配置を変更する
次に、行の配置を変更します。
- 行の配置：右
行の境界線を変更する
丸みを帯びた角と一緒に。
- 左上：10px
- 左下：10px
列2のテキストモジュールのテキストの色を変更する
また、列2のテキストモジュールに別のテキストの色を使用しています。
- 見出し3テキストの色：＃7b9710
ボタンの背景色を変更する
また、ボタンの背景にも同じ色を使用しています。
- ボタンの背景色：＃7b9710
両方の行のクローンを作成する
行の両側ができたので、必要な回数だけ両方のクローンを作成し、順番に配置できます。
重複＃1を変更する
行の背景色を変更する
最初の複製の行の背景色を変更することから始めます。
- 背景色：＃ffc9cf
列の色を変更する
次に、列2の背景色も変更します。
- 列2の背景色：＃ffadb6
画像モジュールのアイコンを変更する
イメージモジュールのアイコンを別のアイコンに変更します。
画像モジュールにフィルターを追加
また、フィルター設定の色相を変更して、新しい行と列の背景色と一致させます。
- 色相：309度
テキストの色を変更する
テキストの色も変更します。
- 見出し3テキストの色：＃f862b0
ボタンの背景色を変更する
また、ボタンの背景にも同じ色を使用しています。
- ボタンの背景色：＃f862b0
重複＃2を変更する
行の背景色を変更する
次の最後の複製に！ 行の背景色を変更します。
- 背景色：＃b2c4ff
列の色を変更する
列1の背景色についても同じことを行います。
- 列1の背景色：＃9eb4ff
画像モジュールのアイコンを変更する
次に、使用しているアイコンを変更します。
画像モジュールにフィルターを追加
イメージモジュールのフィルター設定の色相とともに。
- 色相：221度
テキストの色を変更する
次に、画像モジュールのテキストの色を変更します。
- 見出し3テキストの色：＃6287f9
ボタンの背景色を変更する
そして、ボタンの背景にも同じ色を使用します。
- ボタンの背景色：＃6287f9
プレビュー
すべての手順を完了したので、最後に結果を見てみましょう。
モバイル
デスクトップ
最終的な考え
訪問者の主なソースがモバイルデバイスから来ている場合は、その特定の画面サイズに合わせてすべてを最適化することが重要です。 Diviを使用すると、すべてが即座に応答するようになります。 しかし、何かが反応するからといって、それがその特定の画面サイズにも最適化されているわけではありません。 モバイル向けの設計に取り組むもう1つの方法は、モバイルファーストの観点から設計を開始することです。 この投稿では、その方法に関するヒントとコツをいくつか紹介しました。 その後、これらのルールに準拠し、驚くべき結果を生み出すことができる例を再作成しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！