実際の作成手順

１．準備手順

HPの目的＝団体を紹介する広報する、団体の事業広報と参加者募集、など目的に合わせて、コンテンツの準備と構成（メニュー）を行います。

1. コンテンツの準備では、文章（テキスト）・画像（図・写真）・PDF・動画など必要なものを準備します。

PDF・動画は、ドライブにアップロードが必要です。画像は手元からコピペできるので、アップロードは必須ではありませんが、タイトル（ヘッダー）画像とロゴ・ファビコン画像はアップロードしておくと便利です。特にタイトル（ヘッダー）画像は作成されたものが上手くフィットするかがあるので、数点用意してアップロードすると入れ替えが簡単になります。

アップロード点数が多い場合はフォルダーを分けておくと便利ですが、フォルダーの階層は深くしないように注意しましょう。（操作に手間がかかるため）

テキスト（文章）がワードデータなどの場合は、直接コピペするとフォントが適合しません。ワード文書は「名前を付けて保存」から「ファイル種類」を「書式なし（.TXT）として保存して準備してください。

注：写真はサイズを事前に確認し必要あれば（スマホなど通常で撮影したものは画像が大きくデータ量多い）、縮小（下記画像サイズと容量を参照）や整形をしておきます。

2. トップページのタイトルとメニュー構成・構造を検討します。（この段階では、アバウト十分です。後からの修正は簡単です。）

3. HPのレイアウト（ナビゲーションメニューを上か左側）とテーマ編集のフォント種類と間隔にスタイルの色をぐらいを決めておきます。

ここまでの準備が出来れば、作成開始です。

２．最初の作成手順

1. 編集概要に従って、「２の新しいサイトを作成」します。

2. ページタイトルを入れます。

3. ページタイトル画像（ヘッダー）を準備したものに変更します。

4. テーマを作成し、テキストと色の設定ぐらいの編集を行いますが、理解できている範囲で一端編集設定します。

ここまでの設定が出来れば、コンテンツを入れていきます。

①ページの作成手順

コンテンツエリアのレイアウト

コンテンツエリアの使い方として、このHPから採用しているのが、左右12ブロックの内中央8ブロックだけを使った編集を行っています。

閲覧者がスマホ利用が多くなってきているためです。編集したものをプレビューで見ればわかりますが、横幅一杯に編集したものでも、スマホでは縦に長く表示されます。編集画面が左右に広いと、どうしても文章左半分として右半分に図や写真を入れたレイアウトを使ってしまうことがあります。縦長編集を意識するためにも左右を少し狭くたコンテンツエリアで編集することをお勧めします。

②文章の入力

テキストボックスを作成して直接文字を入力していくこともありますが、準備したデータ（書式無し）として文章があれば、それをコピペして入力すると簡単です。

ワードなどそのままの場合は、Windowsアクセサリーのメモ帳などプレーンテキストで編集できるもを介して貼り付けます。

ワードからメモ帳にペーストしメモ帳内をコピーしてテキストボックスに貼り付けします。新しいテキストボックスにする場合は、テキストボックスを作成しなくてもコンテンツエリアにペーストするだけで文章の入ったテキストボックスが作成されます。

③画像（図や写真）の挿入

画像をコンテンツエリアのセクション内に１個だけの場合は、画像挿入やパソコン内からのコピペでも貼り付けてサイズ調整も難しくありません。

拡大縮小にはシフトキーを押しながらです。

セクション内に２個以上の場合は、画像サイズが同じものでないと調整が難しくなります。数に合わせたコンテンツブロックを利用が便利です。説明用の文枠が不要であれば削除できます。

横並びの画像で大小があれば、プレースホルダーを使ってサイズ調整後（12ブロック単位で調整できる）に画像をプレースホルダーへ移動させると調整が簡単です。

2個以上の画像を横並べや上下左右に並べることが思うようにいかない場合は、パソコン内で画像編集を編集して並んだ画像を準備します。

これには、パソコンで画像編集ソフト（ペイントなど）やワードなどオフィスソフトでもトリミングと合体はグループ化で可能です。

注：画像の縮小やちょっとした編集にお勧めなのが、「Jtrim」無料のソフトです。また、HPのための画像をパワーポイントで編集して保管するようにしています。ちょっとした画像内に〇や□の枠や文字入れに便利です。パワポ内の画像をコピペでGoogleサイトへ貼り付けしています。パワポが無いくてもワード・エクセルで可能です。無料で使えるGoogleのスライドを使う方法あります。

３．補足情報

①画像のサイズと容量

最近のスマホで撮った画像は1,000万画素から2,000万画素と高画質になってきています。一方で、パソコンの解像度はFHDの1,920×1,080ピクセルのもが主流です。そのままだと表示速度にも影響します。

「Googleサイト学習会」のページで詳細に説明しています。

HPで使う場合は、1,280×960ぐらいでも十分です。ちょっと小さいくてよいものは、640×480でも大丈夫です。

Googleでは、ページ表示係る時間を1.8秒～3秒では「要改善」として、3秒以上は「不十分」と分析しています。

②編集操作

編集中に画像を誤って削除したり、画像編集作業のやり直しは頻発します。「元に戻す」や「やり直し」はよく利用します。元に戻すは「ctrl+ｚ」のWindowsの操作でもできます。

文章のセクションで同じテキストボック枠を利用する場合やテキストボックを分割したい場合には、セクションのコピーを使います。同様に画像枠のセクション（レイアウト）をセクションのコピーで複製して画像を置換などで変更すると操作が早くできます。