Diviレイアウトを再利用可能なワイヤーフレームに変える方法

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、DiviのFood Catering LayoutPackを使用してレイアウトを再利用可能なワイヤーフレームに変換する方法を紹介します。 ワイヤーフレームは、Webサイト構築の開始プロセスに最適です。 彼らはあなたがウェブサイトの全体的な構造とデザインスタイルを決定するのを助けます。 また、事前にすべてを調整しなくても、デザインスタイルに関するクライアントの意見を得るのに役立ちます。

それを手に入れよう！

プレビュー

それに飛び込む前に、私たちが作成する最終結果を見てみましょう。

レイアウトをワイヤーフレームに変える

VisualBuilderでフードケータリングのランディングページを開く

先に進み、Diviのフードケータリングレイアウトパックを使用して作成したランディングページを開きます。

セクションと全幅ヘッダーの背景画像、背景色、グラデーションの背景を削除します

ワイヤーフレームを作成するための最初のステップは、ページのセクションとヒーローセクションの全幅ヘッダーモジュールのすべての背景画像、グラデーションの背景、背景色を削除することです。

代わりに交互のセクションに灰色の背景色を与える

ページデザインのさまざまなセクションを判別しやすくするために、先に進んで、交互のセクションのそれぞれに「＃f9f9fb」の背景色を付けます。 後で、ワイヤーフレームを使用してページを作成するときに、検索と置換機能を使用して、カラーパレットをページにシームレスに追加できるようになります。

変更されたスタイルフィルターを使用して、デザイン要素のすべての色を削除します

ボタンモジュールで変更されたスタイルフィルターを有効にする

使用されているカラーパレットも削除します。 そうすれば、ページを作成するときに影響を受けることはありません。 ページのボタンモジュールの1つを開き、変更されたスタイルフィルタを有効にして、現在のすべての設定を表示します。

ボタンモジュールに暗い背景と境界線の色を付ける

ボタンの背景色とボタンの境界線の色の両方を「＃2b2b2b」に変更します。

ボタンスタイルをコピーして他のボタンに適用

ボタン設定を右クリックし、[ボタンスタイルのコピー]をクリックして、ボタンスタイルをコピーします。 次に、ページの残りのボタンモジュールのそれぞれにボタンスタイルを追加します。

余分なデザイン設定（ボックスシャドウなど）を削除します

ボタンボックスの影を削除する

BoxShadowなどの追加要素も削除します。 作業していたのと同じボタンモジュールを開き、ボックスの影を完全に削除します。

ボタンモジュールボックスのシャドウ設定をコピー

このボタンモジュールのボックスシャドウスタイルをコピーして、残りのボタンモジュールにも追加します。

Hero＆ContactセクションでBoxShadowを手動で削除する

ボックスシャドウを手動で削除する必要があるボタンは、全幅ヘッダーモジュールと接触モジュールに含まれているボタンの2つだけです。 これらのボタンは、いくつかのデザイン要素を備えたモジュールの一部であるため、手動で削除する必要があります。

ハイライトされたセクションにCTAと同じ背景色を与える

次に、「強調表示された」セクションが表示されるまで下にスクロールします。 ここでは、「＃2b2b2b」セクションの背景色を使用します。 同じ色がCTAに使用されました。

画像のサイズを決定する

メディアライブラリに移動

レイアウトのレイアウトトピックを完全に削除するために、すべての画像モジュールを、必要な画像サイズを含むプレースホルダーに置き換えます。 これらのディメンションを見つけるには、メディアライブラリにアクセスしてください。

使用済み画像を個別に開く

ページに含まれている各画像を個別に開きます。

ページ上の画像のさまざまな寸法を書き留めます

これを行うと、特にその画像のサイズを確認できるようになります。 次のステップに進む前に、ページに必要なすべての寸法をどこかに書き留めて追跡します。

寸法を使用してプレースホルダーを作成する

Photoshopを開く

プレースホルダーを作成する時が来ました！ Photoshopまたはその他の画像編集ソフトウェアを開きます。

ディメンションの新しいプロジェクトを作成する

ページにあるディメンションのセットごとに新しいプロジェクトを作成します。 この場合、次のディメンションごとに個別のプロジェクトが必要になります。

• 800 x 1029
• 400 x 400
• 48 x 48

灰色を選ぶ

色として「＃e7e8ed」を選択します。

背景レイヤーのロックを解除する

背景レイヤーのロックも解除します。

[バケットツールをペイント]を選択し、レイヤーに色を追加します

次に、ペイントバケットツールを使用して、キャンバスを灰色に着色します。

寸法付きのテキストを追加

画像のサイズを追跡しやすくするために、プレースホルダーの中央にサイズを追加することもできます。 そうすれば、置き換える画像を編集した後、ページに必要な画像のサイズを知ることができます。

Web用に保存

完了したら、画像プレースホルダーをWeb用に保存します。

ページ上の画像の寸法ごとに繰り返します

ページ上の一連のディメンションごとに、これらの手順を繰り返します。 このページでは、合計3つの異なるセットが必要です。

• 800 x 1029（会社概要セクション
• 400 x 400（ギャラリーセクション）
• 48 x 48（アイコン）

画像をプレースホルダーに置き換える

すべての画像プレースホルダーをエクスポートしたら、先に進んで画像を置き換えます。

ワイヤーフレームを簡単に再利用可能にする

コンピューターでワイヤーフレームマップを作成する

ワイヤーフレームの作成が完了したら、その外観をどこかに保存することをお勧めします。 コンピューターのどこかに新しいフォルダーを作成します。

スクリーンキャプチャのレイアウトとローカル保存

次に、選択したスクリーンキャプチャアドオン/拡張機能を使用してページをキャプチャします。 以下の画像では、MozillaFirefox用のFireShotアドオンを使用しています。 スクリーンショットを保存するときは、適切な名前を付けてください。

同じ名前でレイアウトをライブラリに保存

スクリーンショットに使用したのと同じ名前を使用して、ワイヤーフレームレイアウトをDiviライブラリに保存します。 これにより、ページの1つにアップロードする前に、コンピューター上のワイヤーフレームを確認できます。

パーソナライズされたワイヤーフレームのデザイン設定を変更する

セクションディバイダーを追加

ページごとに1つのワイヤーフレームを作成することに限定されません。 デザイン設定を簡単に調整して、新しいワイヤーフレームを作成できます。 たとえば、セクションの仕切りをいじって、ユニークなデザインを作成することができます。

タイポグラフィで遊んでください

見出しフォントで検索と置換を有効にする

または、タイポグラフィをいじることもできます。 ヒーローセクションで全幅ヘッダーモジュールを開き、タイトルフォントを右クリックします。 検索と置換機能を有効にして続行します。

フォントを変更する

ページで使用されているフォントを別のフォントに変更すると、まったく新しいワイヤーフレームが作成されます。

カテゴリを使用して個別の設計要素を保存する

「ライブラリに追加」アイコンをクリックします

もう1つできることは、特定のデザイン要素をページに個別に保存することです。 たとえば、ヒーローセクションのコレクションを作成したい場合、ヒーローセクションをDiviライブラリに簡単に追加できます。

新しいカテゴリを追加し、デザイン要素に名前を付けます

より整理された構造にするために、「ヒーローセクション」と呼ばれるセクションの新しいカテゴリを追加して続行します。これにより、選択したヒーローセクションを簡単に見つけて、ストアにあるすべてのデザインを探索できます。

プレビュー

すべての手順を完了したので、最終結果を最後に見てみましょう。

最終的な考え

このユースケースのブログ投稿では、Diviレイアウトを再利用可能なワイヤーフレームに変換する方法を紹介しました。 レイアウトをワイヤーフレームに変えると、Webサイトの構造をどのように見せたいかについての全体的なビューを維持するのに役立ちます。 また、ウェブサイト構築プロセスの最初の段階でクライアントにデザインスタイルを説明するのにも優れています。 ご質問やご提案がございましたら、コメント欄にコメントを残してください！