Web図を作成する方法

ウェブサイトのコンポーネントを書く若いビジネスウーマン

Webダイアグラムは、複雑なシステムの鳥瞰図を提供します。

画像クレジット: ferlistockphoto / iStock /ゲッティイメージズ

Webダイアグラムは、一歩下がって全体像を見る必要がある場合に便利なツールです。 Webサイト、Webアプリ、その他の複雑なシステム、または一連のアイデアを計画している場合でも、Webダイアグラムはオブジェクト間の関係を示し、計画の欠点を示すことができます。 高価なアプリに投資するのではなく、Microsoft Office2013を使用してプロフェッショナルなWebダイアグラムを作成できます。 Webダイアグラムは主に視覚的な補助であるため、ダイアグラムのラベルを2〜3語に制限し、図形と色を使用してダイアグラムのコンポーネントを識別します。

ステップ1

MicrosoftWordで空白のドキュメントを開きます。 [挿入]タブをクリックし、[イラスト]グループから[形状]を選択します。 ExcelまたはPowerPointでWeb図を描画することもできます。

今日のビデオ

ステップ2

最初のオブジェクトの形状を選択します。 すべてのオブジェクトに同じ形状を使用することも、さまざまなタイプのオブジェクトに異なる形状を使用することもできます。 たとえば、図がWebサイトの図である場合、Webページには長方形を使用し、に丸みを帯びた長方形を使用できます。 メールリンク、ソーシャルメディア、その他など、さまざまな種類のトラフィックソースの販売ページとサークル ウェブサイト。

ステップ3

最初のオブジェクトを表示するページにカーソルをドラッグします。 「Shift」キーを押しながらカーソルをドラッグして、完全な正方形または円を作成します。 Webサイトの図の場合、これはWebサイトのホームページであり、ページの上部近くに配置されている必要があります。 他のプロセスを示すために図を描いている場合は、メインオブジェクトをページの中央に配置して、その周りに接続オブジェクトを描画できるようにすることをお勧めします。

ステップ4

ツールバーの[図形​​のスタイル]セクションのオプションをクリックして、図形の色と境界線を変更します。 図形を右クリックしてコピーし、ページ上の他の場所を右クリックして複製を貼り付けます。

ステップ5

必要に応じて形状を追加します。 図形をドラッグして、ページ上で移動します。 Webサイトの図は通常、ホームページが上にあるピラミッドのように見えます。 メインカテゴリページをホームページの下に配置し、コンテンツページを各カテゴリの下に配置します。 着信トラフィックソースをホームページの上、またはホームページの右側または左側に配置します。

ステップ6

図形をクリックし、そのエッジのアンカーポイントのいずれかをドラッグして、図形のサイズを変更します。 図形のアスペクト比を維持する場合は、「Shift」キーを押しながらドラッグします。

ステップ7

各図形を右クリックし、[テキストの追加]を選択して、オブジェクトの名前を入力します。 テキストスタイルを変更するには、テキストを強調表示して右クリックし、ポップアップメニューに表示される書式設定オプションを使用します。 または、ツールバーの[スタイル]セクションに表示されるスタイルを使用します。

ステップ8

[挿入]メニューをクリックし、[形状]を選択して、[線]セクションから線を選択します。 作成した最初のオブジェクトをクリックし、カーソルを他のオブジェクトにドラッグして、それらの間にコネクタラインを作成します。 コネクタライン(直角のコネクタライン)を選択した場合は、中央のアンカーポイントをドラッグしてラインの形状を調整できます。 ツールバーの[図形​​のスタイル]セクションにある[図形のアウトライン]メニューをクリックして、線の色を変更します。

ステップ9

必要に応じて、ページ上の図形の間に追加の線を引きます。 最近使用した図形や線はツールバーの右側に表示されるため、新しい線を追加するたびに[挿入]メニューをクリックするのではなく、そこから選択できます。

ヒント

完成したWebサイトの図を作成する場合は、一般的な形状ではなく、図の各ページのサムネイルを使用してください。 ブラウザでページを開き、25パーセントにズームアウトします。 「Alt-PrtScn」を押してブラウザウィンドウの画像をクリップボードにコピーし、フォトエディタに貼り付けてトリミングします。 図形を挿入する代わりに、挿入メニューから「画像」を選択して、これらの画像を挿入します。 各画像にラベルを追加するには、サムネイルの上にテキストボックスを挿入します。

PowerPointOnlineを使用して基本的なWeb図を作成することもできます。 Office OnlineバージョンのWordおよびExcelには、図形を作成するオプションがありません。