さっそくWebサイトを作ってみる

ではGoogle Sitesの利用方法について順に説明していこう。まずはGoogleアカウントの取得から。Google Sitesにアクセスすると、ログイン画面が表示される。Googleアカウントを取得済みの場合は必要事項を入力し、取得していない場合はその下部のリンク「Get started」からユーザ登録を行う。登録の細かい手順についてはここでは割愛させていただく。

ログインまたは新規登録を選択する

ログインすると、自分が作ったサイトが一覧表示される。まだ作成したことがなければ、<Create new site>ボタンを押して、サイト作りを開始しよう。入力項目はそれほど多くなく、サイトのタイトル/URLのディレクトリ名/サイトの説明文/アクセス制限/テーマとなっている。URLは「http://sites.google.com/site/ディレクトリ名/」となるが、ディレクトリ名は全ユーザで共通であり、早い者勝ちで取得されている。あまり短いもの、分かりやすいものは他のユーザに取得されている可能性がある。

「Google Sites」のトップページ。既存サイトの一覧か新規作成を選ぶ

新規登録フォーム。ディレクトリ名はすでに取られてしまっている場合もある

これだけ数多くのサイトデザイン用テーマがある

サイトへのアクセス制限設定(Share with)では、"パブリック(Everyone in the World~)"なのか"許可した人だけ(Only people I specify~)"なのかを指定する。これはサイトの内容にあわせて選択してほしい。サイトデザイン用テーマはデフォルトで3つ表示されているが、「More themes」をクリックすると20個まで表示される。この中から好きなものを選択し、<Create site>ボタンを押せばサイト作りを開始できる。

基本的な編集方法
サイトを編集するときは、<Edit page>ボタンをクリックしよう。見た目はほとんど変わらないが、入力エリアの背景色が黄色になり、ツールバーが表示される。これが編集画面だ。文字を自由に書き、色を変えたり太字にしたりと装飾を施すことができる。編集が終わったら、<Save>ボタンをクリックしてサイトに反映させる。

サイト作成直後。<Edit page>ボタンを押して編集を開始

編集画面。見たまま編集できる

主な編集機能は、文字装飾/テーブル組み/段組み(1カラムまたは2カラム)/画像や添付ファイルの追加/各種オブジェクトの挿入となっている。オブジェクトの挿入については後述するとして、画像の追加方法を説明しよう。挿入したいところをフォーカスして、<Insert>メニュー→<Image>を選択。するとアップロードフォームが表示されるので、ファイルやURLを指定すれば画像がアップロードできる。

画像のアップロードフォーム

ファイルをアップロードする場合は、「Attachments」欄でファイルを指定するだけだ。バージョン管理機能があり、同名ファイルをアップロードするとリビジョンが繰り上がる。これをうまく使えばプロジェクトのファイル管理にも利用できるだろう。

ファイルの履歴管理

なお、編集スタイルはWYSIWYGだけでなく、編集モードの<HTML>ボタンをクリックすれば、HTMLソースを直に変更することもできるようになっている。こちらは上級者向けの機能だろうが、細かな編集をともなう場合はHTMLソースの編集で対応してほしい。

HTMLソースを直接編集しているところ

リンクを設定する
次はリンクの作成だ。リンクは全部で3パターンある。一つ目は外部リンク、二つ目がサイト内部のリンクだ。サイト内部のリンクは、ルート(サイトトップ)に追加する場合と、階層を意識して作る場合だ。つまりルートに作った「ページ」とページの下層に作った「ページ」は別物になる(後者は"ページ/ページ"になる)。同名のページであっても階層が異なれば、別のページとして管理されるので注意が必要だ。

新しいページの作り方は簡単で、リンクにしたい文字列を選択して、ツールバーにある「Link」をクリックする。既存のページ一覧が表示されるので、そこからリンク先を選択するか、<Create new page>ボタンをクリックする。ページタイトルを入力する画面が開くので、新しいページのタイトル(日本語可)を決め、親になるページを選択する。これで新たなページが作成され、リンクも貼られる。あとはこれまでのページ作成と同じ方法を行えばいい。

リンクを追加、設定するウィンドウ。新しく追加する場合は<Create new page>ボタンを押す

追加するページ名を決める。日本語利用可能

新しいリンク先を選択した画面

ページの種類を選択可能
新しいページを作るときに気付かれたと思うが、ページの種類を5つの中から選択することができる。「Web page」はトップページのような通常のページ、ウィジェットを貼り付けるための「Dashboard」、ファイル管理する「File Cabinet」、バグ管理やToDo登録などを行なう「List」、さらにアナウンス用の「Announcements」がある。それぞれに特徴があるので、必要に応じて使い分けてみてほしい。

「List」の例

「File Cabinet」の例

「Dashboard」の例

「Announcements」の例。ブログのようにポストしていく