Diviを使用してモバイルデバイスでサービスを美しく紹介する方法（無料ダウンロード！）

モバイルファーストのデザインに焦点を当てている場合は、この投稿が役立つかもしれません。 小さい画面サイズで見栄えのするサービスショーケースの2つの美しい例を作成しました。 さらに、デスクトップで優れたデザインを維持しながら、モバイルで最高の外観を実現するように特別に設計されています。 この投稿では、それらを最初から再作成する方法を段階的に説明します。 このチュートリアルが、構築するWebサイトのサービスセクションを設計するときに創造性を解き放つきっかけになることを願っています。 チュートリアルの最後に、両方のセクションのJSONファイルをダウンロードすることもできます。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、再現する2つのモバイルの例を簡単に見てみましょう。

例1

例2

例1の再現を始めましょう

私たちのYoutubeチャンネルを購読する

新しいセクションを追加

グラデーションの背景

新しいページを作成し、それに通常のセクションを追加します。 セクション設定を開き、グラデーションの背景を追加します。

• 色1：＃ff0f83
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：左
• 開始位置：20％
• 終了位置：20％

行＃1を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

テキストモジュール＃1を追加

コンテンツを追加する

必要な最初のモジュールはテキストモジュールです。 コンテンツボックスにコンテンツを追加します。

テキスト設定

次に、[デザイン]タブに移動し、テキスト設定を変更します。

• テキストフォント：ポピンズ
• テキストフォントの太さ：重い
• テキストの色：#ffffff
• テキストサイズ：20vw
• テキスト行の高さ：1em

• テキストシャドウブラー強度：0.95em
• テキストの影の色：rgba（0,0,0,0.13）
• テキストの向き：中央

テキストモジュール＃2を追加

H2コンテンツを追加する

前のテキストモジュールのすぐ下に別のテキストモジュールを追加します。 お好みのH2コンテンツを入力してください。

H2テキスト設定

次に、[デザイン]タブに移動し、H2テキスト設定を変更します。

• 見出し2フォント：ポピンズ
• 見出し2フォントの太さ：太字
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：＃000000
• 見出し2テキストサイズ：10vw（電話とタブレット）、10vw（デスクトップ）

間隔

負の上部マージンを使用して、両方のテキストモジュール間にオーバーラップを作成します。

• 上マージン：-12vw（電話）、-10vw（タブレット）、-8vw（デスクトップ）

行＃2を追加

カラム構造

次の列構造を使用して、別の行を追加して続行します。

グラデーションの背景

モジュールをまだ追加せずに、行設定を開き、グラデーションの背景を追加します。

• 色1：＃3239ff
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：右
• 開始位置：30％
• 終了位置：30％

サイジング

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

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

間隔

いくつかの間隔値も追加します。 これらの値により、すべての画面サイズですべてが適切に表示されます。

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

カスタムCSS

また、[詳細設定]タブに1行のCSSコードを追加して、2つの列を隣り合わせに配置しています。

display: flex;

列1にテキストモジュールを追加

H3とリンクコンテンツを追加する

これで、モジュールの追加を開始できます。 H3コピーとリンクを含むテキストモジュールを最初の列に追加します。

背景色

次に、モジュールの背景設定に移動し、背景色を追加します。

• 背景色：rgba（255,255,255,0.95）

テキスト設定

モジュールのテキスト設定でテキストの向きを変更して続行します。

• テキストの向き：中央

リンクテキスト設定

リンクテキストの設定も変更します。

• リンクフォント：ポピンズ
• Linkeフォントの太さ：太字
• リンクフォントスタイル：下線
• リンクの下線の色：＃000000
• リンクテキストの色：＃000000
• リンクテキストサイズ：3vw（電話）、2vw（タブレット）、1vw（デスクトップ）

H3テキスト設定

H3テキスト設定と一緒に。

• 見出し3フォント：ポピンズ
• 見出し3フォントの太さ：超軽量
• 見出し3テキストの色：＃000000
• 見出し3テキストサイズ：4vw（電話）、3vw（タブレット）、2vw（デスクトップ）
• 見出し3テキスト行の高さ：円形の場合は1.9em、楕円形の場合は3em

間隔

このモジュールからシェイプを作成するために、間隔設定にカスタムマージンとパディング値を追加します。

• 左マージン：5vw
• 右マージン：-5vw
• トップパディング：17vw（電話）、20vw（タブレット）、15vw（デスクトップ）
• 下部のパディング：17vw（電話）、20vw（タブレット）、15vw（デスクトップ）

国境

角のそれぞれに「100vw」を追加することにより、丸い角を使用して正方形を円に変えています。

ボックスシャドウ

そして、ある程度の深さを作成するために、微妙なボックスシャドウを追加します。

• ボックスシャドウブラー強度：100px
• 影の色：rgba（0,0,0,0.12）

テキストモジュールを4回複製する

最初のテキストモジュールの変更が完了したので、先に進んで4回クローンを作成できます。 複製の2つを2番目の列に配置します。

重複＃1を変更する

間隔

最初の複製の間隔設定を変更して続行します。

• トップマージン：20vw
• 左マージン：-5vw
• 右マージン：5vw

重複＃2を変更する

背景色

次に2番目の複製を開き、背景色を変更します。

• 背景色：rgba（255,248,209,0.92）

間隔

間隔の設定も変更します。

• トップマージン：-5vw

重複＃3を変更する

背景色

次に、3番目の複製を開き、背景色を変更します。

• 背景色：rgba（219,255,223,0.95）

間隔

次に間隔設定を変更します。

• トップマージン：-5vw
• 左マージン：-5vw
• 右マージン：5vw

重複＃4を変更する

間隔

最後の複製も開き、負の上部マージンを追加してデザインを完成させます。

• トップマージン：-5vw

例2の再現を始めましょう

新しいセクションを追加

2番目の例に移ります！ ページに新しいセクションを追加します。

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

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

H2コンテンツを追加する

必要な最初のモジュールはテキストモジュールです。 お好みのH2コンテンツを入力してください。

H2テキスト設定

次に、[デザイン]タブに移動し、H2テキスト設定を変更します。

• 見出し2フォント：ポピンズ
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：＃333333
• 見出し2テキストサイズ：7vw（電話とタブレット）、4vw（デスクトップ）

仕切りモジュールを追加

可視性

テキストモジュールのすぐ下にディバイダーモジュールを追加します。 [仕切りを表示]オプションが有効になっていることを確認してください。

色

次に、[デザイン]タブに移動し、仕切りの色を変更します。

• 色：＃333333

サイジング

サイズ設定も試してみてください。

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

行＃2を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

背景色

モジュールをまだ追加せずに、行設定を開き、白い背景色を追加します。

• 背景色：#ffffff

サイジング

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

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

間隔

すべての画面サイズのデザインを最適化するために、いくつかのカスタムマージンとパディング値を隣に追加します。

• トップマージン：2vw
• 下マージン：2vw
• トップパディング：10vw（電話とタブレット）、5vw（デスクトップ）
• 下部のパディング：10vw（電話とタブレット）、5vw（デスクトップ）
• 左パディング：2vw（電話とタブレット）、20vw（デスクトップ）
• 右パディング：2vw（電話とタブレット）、20vw（デスクトップ）

ボックスシャドウ

微妙なボックスシャドウも使用しています。

• ボックスシャドウブラー強度：50px
• 影の色：rgba（0,0,0,0.07）

カスタムCSS

最後になりましたが、[詳細設定]タブのメイン要素に1つのCSSコード行を追加して、両方の列を並べて配置します。

display: flex;

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

アイコンを選択

これでモジュールの追加を開始できます！ 列1に必要なモジュールは、宣伝文モジュールだけです。 お好みのアイコンを選択してください。

グラデーションの背景

次に、グラデーションの背景を追加します。

• 色1：＃7b28ef
• 色2：＃29b6e5
• 勾配方向：142度

アイコン設定

次にアイコン設定を変更します。

• アイコンの色：#ffffff
• アイコンの配置：上
• アイコンのフォントサイズを使用：はい
• アイコンのフォントサイズ：5vw（電話とタブレット）、4vw（デスクトップ）

サイジング

そして、サイズ設定を変更します。

• 幅：48％（電話とタブレット）、78％（デスクトップ）

間隔

また、すべての画面サイズでデザインを最適化するために、いくつかのカスタムマージンとパディング値を追加しています。

• トップマージン：2vw（電話）
• トップパディング：8.5vw（電話）、9vw（タブレット）、6vw（デスクトップ）
• 下部のパディング：3vw（電話）、5vw（タブレット）、4vw（デスクトップ）

国境

次に、境界線設定の各コーナーに「100vw」を追加して、モジュールを円に変えます。

ボックスシャドウ

ボックスシャドウも追加しています。

• ボックスシャドウの垂直位置：10px
• ボックスシャドウスプレッド強度：5px
• 影の色：rgba（2,185,252,0.35）

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

H3コンテンツを追加する

2列目へ！ 最初に必要なモジュールは、タイトルのテキストモジュールです。 H3コンテンツを追加します。

H3テキスト設定

次に、[デザイン]タブに移動し、H3テキスト設定を変更します。

• 見出し3フォント：ポピンズ
• 見出し3テキストサイズ：4vw（電話）、3vw（タブレット）、2vw（デスクトップ）

間隔

次に、いくつかのカスタム間隔値を追加します。

• トップマージン：0vw（電話）、3vw（タブレットとデスクトップ）
• 左マージン：-20vw（電話とタブレット）、0vw（デスクトップ）
• 右マージン：0vw
• 下部のパディング：2vw（電話とタブレット）、1vw（デスクトップ）
• 左パディング：5vw（電話とタブレット）、2vw（デスクトップ）

国境

左の境界線と一緒に。

• 左ボーダー幅：5px
• 左の境界線の色：＃f4f4f4
• 左ボーダースタイル：ダブル

Dividerモジュールを列2に追加します

仕切りを表示

必要な2番目のモジュールはDividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

色

次に、[デザイン]タブに移動し、仕切りの色を変更します。

• 色：＃f4f4f4

スタイル

次に、スタイル設定で仕切りスタイルを変更します。

• 仕切りスタイル：ダブル

サイジング

サイズ設定のさまざまなオプションを変更して続行します。

• 仕切りの重量：5px
• 高さ：0px

間隔

また、間隔の値も試してみてください。

• 左マージン：-20vw（電話とタブレット）、0vw（デスクトップ）

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

コンテンツを追加する

2番目の列に必要な次のモジュールは別のテキストモジュールです。 選択したボディコンテンツを追加します。

テキスト設定

次に、[デザイン]タブに移動し、テキスト設定を変更します。

• テキストサイズ：2vw（電話）、1.7vw（タブレット）、0.8vw（デスクトップ）
• テキストの向き：左

間隔

間隔の値も試してみてください。

• トップマージン：0vw
• 左マージン：-20vw（電話とタブレット）、0vw（デスクトップ）
• 右マージン：0vw
• トップパディング：3vw（電話とタブレット）、2vw（デスクトップ）
• 左パディング：5vw（電話とタブレット）、2vw（デスクトップ）

国境

そして、左の境界線を追加します。

• 左ボーダー幅：5px
• 左の境界線の色：＃f4f4f4
• 左ボーダースタイル：ダブル

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

コピーを追加

2番目の列に必要な次の最後のモジュールはボタンモジュールです。 コピーを追加します。

ボタンの設定

次に、[デザイン]タブに移動し、ボタンの設定を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：2.5vw（電話）、2vw（タブレット）、1vw（デスクトップ）
• ボタンのテキストの色：＃4f77e8
• ボタンの境界線の幅：1px
• ボタンの境界線の色：＃4f77e8

• ボタンの境界線半径：1px
• ボタンフォント：ポピン

間隔

間隔の値も変更します。

• トップマージン：4vw（電話とタブレット）、2vw（デスクトップ）
• 左マージン：-20vw（電話とタブレット）、0vw（デスクトップ）

行を2回クローンする

行とそのすべてのモジュールの変更が完了したので、2回クローンを作成できます。

アイコンを変更する

両方の宣伝文モジュールのアイコンを必ず変更してください。

グラデーションの背景を変更する

グラデーションの背景も変更します。

• 色1：＃ff2885
• 色2：＃d6ac24

• 色1：＃70ff1e
• カラー2：＃2699ff

ボックスの影の色を変更する

ボックスの影の色を新しいグラデーションの背景と一致させます。

• 影の色：rgba（255,208,2,0.37）

• 影の色：rgba（42,255,0,0.37）

ボタンの境界線とテキストの色を変更する

そして、ボタンの境界線とテキストの色を変更して、デザインを完成させます。

• ボタンのテキストの色：＃e96c54
• ボタンの境界線の色：＃e96c54

• ボタンのテキストの色：＃4dcb93
• ボタンの境界線の色：＃4dcb93

モバイルサービスセクションを無料でダウンロード

無料のモバイルサービスセクションを利用するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

プレビュー

すべての手順を完了したので、両方の例のモバイルの結果を最後に見てみましょう。

例1

例2

最終的な考え

この投稿では、Diviの組み込みオプションのみを使用してモバイルデバイスでサービスを紹介する2つの創造的な方法を紹介しました。 このモバイルファーストのアプローチが、あなたにもクリエイティブになるきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！