【Googleサイト】営業部のページを作成する方法〜実践編

作りながら学ぶ

シリーズ連載を通して、ポータルサイトを作りながらGoogleサイトを体系的に学ぶ方法を解説。


今回は「第7回:営業部のページを作成する方法」について説明していきます。

営業成績のグラフや、よくある質問をまとめたページを作成しましょう。

タマ

全シリーズは以下のページにまとめてます


※目次をクリックすると
タイトルの先頭まで移動します(↓)

目次



前回のおさらい

googleサイト006

作成するサンプルサイトはこちら

シリーズ連載を通して上図サンプルサイトを作成しています。

前回の記事では、Googleドライブに保存しているフォルダやPDFを共有するページを作成しました。

今回は、その続きで営業成績の【グラフ】や【よくある質問】をまとめたページを作成します。

前回の記事はこちら


営業ページを作成する

営業部の専用ページを作成しましょう。


ページを追加する

ページメニューからボタンをクリックすると小さいウィンドウが表示されますので「営業」と入力し完了をクリックしてください。

googlesites-study701

見出しのタイプを変更する

ヘッダー背景の画像を非表示にして、タイトルのみ表示されるシンプルなヘッダーに変更しましょう。

背景画像にカーソルを合わせ見出しのタイプボタンをクリックしてください。

googlesites-study702

タイトルのみボタンをクリックしてください。

googlesites-study703

画像が非表示になりタイトルのみが表示されました。

googlesites-study704

営業成績の共有

営業成績をグラフで共有しましょう。

下図サンプルのスプレッドシートをコピーし、スプレッドシート名を【営業成績】に変更してください。

googlesites-study709

サンプルシート


見出しを作成する

空白欄をダブルクリックし【テキストボックス】を追加してください。

googlesites-study705

【テキストボックス】に「営業成績」と入力し【スタイル】を見出しに変更してください。

googlesites-study706

【セクションの背景】を強調1に変更してください。

googlesites-study707

配置ボタンをクリックし、テキストの配置を【中央】に変更してください。

googlesites-study745

グラフを挿入する

挿入メニューよりグラフを選択してください。

スプレッドシートの【営業成績】シートを選択し挿入ボタンをクリックしてください。

googlesites-study710

挿入する【スプレッドシート】を選択し追加ボタンをクリックしてください。

googlesites-study711

挿入したい【グラフ】を選択し追加ボタンをクリックしてください。

googlesites-study712

【グラフ】が挿入されました。

googlesites-study713

青枠をドラッグし【グラフ】のサイズを調整してください。

googlesites-study714

【グラフ】のサイズが調整されました。

googlesites-study715

プロフィール作成

営業担当のプロフィールを作成しましょう。

営業.zipファイルをダウンロードして解凍してください。

営業.zip


見出しを作成する

空白欄をダブルクリックし【テキストボックス】を追加してください。

googlesites-study716

【テキストボックス】に「営業担当」と入力し【スタイル】を見出しに変更してください。

googlesites-study717

【セクションの背景】を強調1に変更してください。

googlesites-study718

配置ボタンをクリックし、テキストの配置を【中央】に変更してください。

googlesites-study719

画像を挿入する

挿入メニューのレイアウトより、4つの枠の【レイアウト】を選択してください。

googlesites-study720

レイアウト枠のボタンをクリックしアップロードを選択してください。

googlesites-study721

解凍した【営業】フォルダから【ムギ】の画像を選択してください。

googlesites-study722

アンクロップボタンをクリックし画像のバランスや大きさを調整してください。

googlesites-study723

【テキストボックス】に「ムギ」と入力してください。

googlesites-study724

同じ手順で、残り3つの枠にも画像を挿入し、担当者名を入力してください。

googlesites-study725

営業資料の共有

営業資料の共有をしましょう。

営業資料.zipファイルをダウンロードして解凍してください。

営業資料.zip


見出しを作成する

空白欄をダブルクリックし【テキストボックス】を追加してください。

googlesites-study726

【テキストボックス】に「資料」と入力し【スタイル】を見出しに変更してください。

googlesites-study727

【セクションの背景】を強調1に変更してください。

googlesites-study728

配置ボタンをクリックし、テキストの配置を【中央】に変更してください。

googlesites-study729

画像を挿入する

挿入メニューのレイアウトより、3つの枠の【レイアウト】を選択してください。

googlesites-study730

レイアウト枠のボタンをクリックしアップロードを選択してください。

googlesites-study731

先ほど解凍した【営業資料】フォルダから【媒体資料】の画像を選択してください。

googlesites-study732

アンクロップボタンをクリックし画像のバランスや大きさを調整してください。

googlesites-study733

ゴミ箱ボタンをクリックし2つの【テキストボックス】を削除してください。

googlesites-study734

同じ手順で、残りの枠に画像を挿入してください。

googlesites-study735

タマ

画像に資料のリンクを挿入

すれば完成です


よくある質問を作成する

営業チーム内で【よくある質問】をまとめておきましょう。


見出しを作成する

空白欄をダブルクリックし【テキストボックス】を追加してください。

googlesites-study736

【テキストボックス】に「よくある質問」と入力し【スタイル】を見出しに変更してください。

googlesites-study737

【セクションの背景】を強調2に変更してください。

googlesites-study738

配置ボタンをクリックし、テキストの配置を【中央】に変更してください。

googlesites-study739

テキストの折りたたみ

テキストを折りたたみ、クリックで【よくある質問】が表示/非表示ができるようにしましょう。

挿入メニューの折りたたみ可能なテキストを選択してください。

googlesites-study740

上部の入力欄に「Q1. 質問:※質問内容を入力してください」と入力してください。

googlesites-study741

下部の折りたたみで隠れる箇所となります。

googlesites-study742

セクションを複製する

セクションのコピーを作成をクリックすると、【折りたたみ可能なテキスト】のコピーできます。

googlesites-study743

複数の 【折りたたみ可能なテキスト】 が必要な場合はコピー機能活用しましょう。

googlesites-study744

ボタンを設置する

トップページに、クリック1つで営業ページへ移動できる【ボタン】を設置しましょう。


ボタンを挿入する

トップページに戻り挿入メニューからボタンをクリックしてください。

googlesites-study746

【名前】の入力欄に「営業」と入力し、【リンク】の入力欄で【営業】ページを選択して挿入ボタンをクリックしてください。

googlesites-study747

ボタンが挿入されました。

googlesites-study748

ボタンの配置と大きさを変更する

【ボタン】をドラッグし配置を変更してください。

googlesites-study749

【ボタン】の青外枠をフォラッグし、大きさを変更してください。

googlesites-study753

セクションを移動する

【セクション】の左端の中央部分をドラッグし、上部のGoogleアイコンの下へ【セクション】を移動してください。

googlesites-study751

【セクション】が移動されました。

googlesites-study752

まとめ

Googleサイトで「営業成績のグラフや、よくある質問をまとめたページを作成する方法」についてお伝えしました。

1つのページに全ての情報をまとめるのではなく、部署ごとにページを分けることで目的のページを探しやすく見やすいサイトになります。

閲覧者が求めている情報をわかりやすく提示することを心がけていきましょう。


ココ

用途に合わせてページを

作っていきます

タマ

次回は、研修用のページを作成

しましょう