コンテンツレイアウトガイド

Webにコンテンツをマウントしたいとき、私たちが見つけた大きな問題の1つは、受け取った提案がWebにうまく組み込まれるとは考えられないことです。 一般的に問題は、適切な構造がなければ、設計とレイアウトが通常あまり良く見えず、満足のいく結果が得られないことです。

そのため、作業を最大限に簡素化し、結果が最適になるように、コンテンツレイアウトを条件でどのように考慮する必要があるかについて、非常に基本的な説明を行います。

このガイドの目的は、プログラミングやWeb開発の知識がなくても、質の高いレイアウトを提供できることと、結論に達するまで何度も会話を繰り返してアイデアを抽出しようとする必要がないことです。

ステップ1：テンプレート

提案を「描く」ことができるテンプレートを作成するために、A4の用紙を取り、縦にXNUMX分のXNUMXに折ります。

ステップ2：コンテンツブロック

ビデオ、画像、テキストなど、いくつかのタイプのコンテンツがあることを想像してみましょう。 各コンテンツは、長方形または正方形のブロックです。 選択したテンプレートの上部から下部にブロックを合わせる必要があります。 3種類のコンテンツを説明します。

ビデオブロック

ビデオは一般にYouTubeビデオであると想定し、テンプレートで次のように表します。

画像ブロック

同意するように、画像が横長か縦長かによって異なります。

テキストブロック

テキストをどのように使用するかに応じて、画像ブロックと同じように、ブロックなどを配置します。 平行線で表します。

テキストブロックは、段落を含むテキストブロックにすることもできます。 テキスト項目リスト

2つの例を挙げます。横長の画像の横にあるテキストのブロックと、縦長の画像の横にある別のテキストです。

タイトルブロック

タイトルは個別のブロックに配置され、通常は行全体を占める細長いブロックです。

ボタンブロック

ユーザーがクリックしてWebの別の部分に移動するためのボタンを配置する場合、または情報（またはフォーム）を含むウィンドウのみが表示される場合

その他のブロック

考え方は似ています。 ブロックがどのように機能するかを理解していれば、前のブロックと同様に、正方形または長方形に適合する別のタイプのブロックを明確に配置できると思います。 たとえば、コンテンツに組み込まれたフォームを配置する場合。 これは通常最も一般的ではありませんが、上記のタイプではない新しいブロックを使用する前に確認することをお勧めします。 誰もが興味を持つかもしれない新しいブロックのアイデアが出てきたら、私はこのリストを更新しようとします。

最後に、上記のすべてのタイプのブロックを含むテンプレートの例を次に示します。

ブロックを拡大する

さらにスペースが必要な場合は、下部のブロックデザインにページを追加するだけです。 すべてを埋める必要はありませんが、各ブロックの中央に上から下に空の隙間を残さないことが重要です。 このようにして、ページを展開できます。

ステップ3：コンテンツの作成

ブロックとブロックの種類ごとにコンテンツをレイアウトしたので、これらのブロックに配置するコンテンツを作成する必要があります。 3ステップは、2ステップと交換可能です。 つまり、前にコンテンツを作成してから、組み込むコンテンツの量を把握してレイアウトすることができます。 何らかの方法でそれを行うことは不明確ですが、コンテンツがレイアウト内に正確に収まらなければならないことに注意する必要があります

前の例に従います。 4イメージでは、次のブロックを確認できます。

• 2タイトルブロック
• 4テキストブロック
• 1ビデオブロック
• 2イメージブロック
• 1ボタンブロック
• トータル：10ブロック

したがって、これらのブロックに完全に収まるようにコンテンツを調整する必要があります。フォントサイズはすべてのブロックでまったく同じです。 そのために 可能です それだけの価値がある 最初にコンテンツを作成してからブロックします。 それはすでに人に大きく依存しています。

ステップ4：コンテンツをブロックに合わせる

すでに紙にデザインが描かれ、すべてのコンテンツブロックが作成されていると仮定しましょう。 最後のステップは、それを結合することです。 このため、いくつかのツールを使用してすべてを組み合わせ、 ウェブデザイナーに送る.

ビデオブロック

ビデオは2つの方法で渡すことができます。

1. MP4ビデオ形式では、次のようなツールを使用します WeTransfer.
2. 優先オプション：YouTube 3月チャンネルにアップロードし、YouTubeリンクを動画に渡します。

レイアウトにビデオが1つしかない場合、問題はありません。 しかし、いくつかのビデオがある場合は、それらを何らかの方法で紙の上で行ったレイアウトに関連付ける必要があります。

たとえば。 3つのビデオがあると想像してください。 レイアウトでは、最初のビデオに1番号、2番目のビデオに2番号、3番目のビデオに3番号を描画します。 そして、すべてのドキュメントを送信するときに、次のようなものを配置します。

• ビデオ1：「非暴力の最も重要なフレーズ」というタイトルの非暴力のフレーズを扱ったビデオ
• ビデオ2：「非暴力の旗」というタイトルの旗の色を扱ったビデオ
• ビデオ3：「アルゼンチンのベースチーム」というタイトルでアルゼンチンで行進するグループを扱ったビデオ

これにより、各セクションに対応するビデオが簡単にわかります。

画像ブロック

この場合、すべての画像をIMGURプラットフォームにアップロードする必要があります。 https://imgur.com/upload

そして、それらの画像へのリンクを渡します。 理想的なのは、画像をビデオと同じように配置し、1、2、3などのマークを付けることです。 たとえば、南アフリカに4つの画像がその場であると想像してみましょう。 XNUMXつすべてが同じ名前「sudafrica.jpg」を持っています。 さて、私たちはそれらがレイアウトにあるところまで連続した名前を付け、それらが対応する紙に番号を描きます。 例：

• sudafrica-1.jpg
• sudafrica-2.jpg
• sudafrica-3.jpg
• sudafrica-4.jpg

ボタン、タイトル、テキストブロック

最後に、これらのブロックは、できればWord文書、またはGoogleドキュメントに記述する必要があります。

形式は非常に単純です。Word文書では、ブロックの種類（タイトル、ボタン、またはテキスト）の後にレイアウトで対応する番号を付けます。

Ejemplos：

• タイトル1：…。
• タイトル2：…
• テキスト1：…
• テキスト2：…
• ボタン1：…
• ボタン2：…

次に、4イメージの例に従って、完全にランダムなテキストを含むサンプルドキュメントを配置して、これがどのように構成されるかを確認します。

各セクションに対応する番号を入力すると、レイアウトは次のようになります。

4ステップ：すべて送信

すべて完了したら、レイアウトの担当者に送信するだけです

それは単にかかるだろう

1. レイアウトを使用した紙上のスケッチ
2. 内容
   • YouTubeまたはWeTransferへのビデオリンク
   • 画像のIMGURリンク
   • Googleドキュメント内のドキュメントまたはWordファイルへのリンク

公証人の重要な決勝

最終的には、ページのタイトル1ヘッダーに付随する優れた画像を含めることが理想です。 これが、タイトル1が常に先頭に表示される理由です。

ヘッダー画像のサイズは960 x 540ピクセルである必要があります。 この画像は、IMGURが他の画像と同様に送信できます。

最終結果

最後に、このすべての情報を使用して、ページが設定されます。 この例に従って、この例を終了するために、前に挙げたすべてのパラメーターに続く最終結果のページは次のようになります。

最終ページ