自分のウェブサイトを作りたいけど、HTMLがわからない？Googleサイトを使えば、誰でも驚くほど簡単に、プロ並みのウェブサイトを無料で作ることができます。必要なのはGoogleアカウントだけです。このWikiHowでは、Googleサイトを使ってウェブサイトを作成、編集、公開する方法をご紹介します。
知っておくべきこと
- で無料のウェブサイトを作成しましょう。
- 空白のページから始めることも、Google サイトからレスポンシブ レイアウトのテンプレートを選ぶこともできます。
- ウェブサイトを編集すると、変更が自動的に保存されます。ただし、公開をクリックするまで変更は反映されません。
パート1
ウェブサイトの作成
-
ウェブブラウザにアクセスします。Googleアカウントにログインしている場合は、Googleサイトに移動します。ログインしていない場合は、ログインするよう促されます。
- Googleアカウントをお持ちでない場合は、.
-
テンプレートを選択するか、ゼロから始めます。ページ上部の "新しいサイトを始める "セクションに、ブランクサイトを作成するオプションといくつかのテンプレートが表示されます。テンプレートギャラリーをクリックすると、他のテンプレートを見ることができます。
- 気に入ったテンプレートが見つかったら、クリックして選択します。これで新しいウェブサイトの構造が作成され、編集用に開きます。
- 要素を移動したり、画像を追加または削除したり、色を変更したり、サンプルテキストを独自のテキストに置き換えたりして、テンプレートを変更することができます。
-
ウェブサイトに名前を付けます。エディタの左上に、選択したテンプレートの名前が表示されます（ブランクテンプレートを選択した場合は「無題のサイト」）。名前をクリックし、サイトの新しい名前を入力します。
- 入力した名前は、Google Sitesにログインしたときに表示されます。この名前は、あなた以外には表示されません。
- ウェブサイトに変更を加えると、自動的に保存されます。今すぐウェブブラウザを閉じても、Google Sitesに再びログインしてウェブサイトの名前をクリックすれば、再びアクセスできるようになります。ただし、ウェブサイトを公開するまでは、変更内容はインターネット上の人々には表示されません。
-
ウェブサイトのタイトルを作成します。エディタでテーマを開いたら、ウェブサイトのタイトルを作成できます。このタイトルは、ウェブサイトの上部（ヘッダー）とウェブブラウザのタイトルバーの両方に表示されます。
- 空白のテンプレートを選択した場合は、左上のサイト名を入力するをクリックし、タイトルを入力し、EnterキーまたはReturnキーを押します。
- テンプレートによっては、すでにサンプルタイトルが用意されているものもあります。その場合は、現在のタイトルをダブルクリックし、自分のタイトルに置き換えてください。
- シングルページのテンプレートを選択した場合、タイトルは表示されません。タイトルを設定できるのは、ウェブサイトが2ページ以上ある場合のみです。しかし、ご心配なく。
- Google、Bing、その他の検索エンジンにもタイトルが表示されます。
-
テーマを選択します。テーマはウェブサイトの配色やフォントを変更します。編集スペースの右上にある[テーマ]タブをクリックし、ビルトインテーマのいずれかを選択します。
- フォントスタイルと色を選択することで、各テーマをカスタマイズできます。
- カスタムカラーを選択するには、サンプルカラーの隣にあるペイントバケツアイコンをクリックし、パレットから色を選択します。
- 作成した別のGoogleサイトからテーマをインポートしたい場合は、テーマのインポートを選択してインポートします。
-
編集作業を誰かと共有する（オプション）。自分のGoogleサイトを他のGoogleユーザーと共同編集したい場合は、サイトを共有することができます。
- エディタの上部にあるプラスマークのアイコンをクリックし、共同作成者の名前またはメールアドレスを追加します。
- その人にコンテンツの編集や追加をさせたい場合は「編集者」に、下書きだけを閲覧させたい場合は「公開閲覧者」にします。送信]をクリックして招待状を送信します。
-
プレビューアイコンをクリックして、サイトの外観を確認します。このアイコンはノートパソコンに携帯電話が重なったような形で、ページの上部に表示されます。重要な変更（色の変更やテキストボックスの追加など）を行う場合は、ウェブサイトを公開する前に必ずプレビューを行うことができます。
- サイトをプレビューするときは、ページの下部にあるさまざまな画面サイズをクリックして、ページが携帯電話、タブレット、またはコンピュータの画面でどのように表示されるかを確認できます。
- Xをクリックしてプレビューを終了し、エディタに戻ります。
パート2
ページとナビゲーションの追加
-
ページタブをクリックします。ウィンドウの右側に表示されます。テンプレートによっては、すでにいくつかのページがここにリストされているかもしれません。
- まだ編集していない場合は、編集するためにウェブサイトを開いてクリックする必要があります。
-
新しいページを追加する。新しいページを追加するには、右のパネルの一番下にある＋にマウスカーソルを合わせ、「新しいページ」をクリックします。新規ページ」ウィンドウで、ページの名前を入力し、「完了」をクリックします。
- 既存のページの外観が気に入ったら、それを複製することができます。ページ名の横にある3つの点のメニューをクリックし、「ページを複製」を選択し、新しいページに名前を付け、「完了」をクリックします。
-
ナビゲーションバーのカスタマイズすべてのGoogle Sitesテンプレートには、訪問者が探しているものを簡単に見つけることができるナビゲーションバーが付属しています。テンプレートによっては、ナビゲーションバーがページの上部に表示されたり、左側の「ハンバーガー」メニューに表示されたりします☝。ナビゲーションバーを変更するには
- エディター上部の歯車アイコンをクリックします。
- ナビゲーションタブをクリックします。
- Mode "セクションで "Top "または "Left "を選択します。
- ナビゲーションバーを透明にしたり、「色」メニューから色を選択することもできます。
- ナビゲーションバーに追加するには、「ブランドイメージ」タブをクリックし、「アップロード」をクリックしてロゴファイルを選択します。
-
ナビゲーションバー上のページの表示方法を変更します。ページに付ける名前によって、ナビゲーションバーでのリンク方法が決まります。ウェブサイトのページ数が多い場合は、サブページを作成して、ナビゲーションエリアが混雑しないようにすることができます。サブページを追加すると、ナビゲーションバーの親ページにドロップダウンメニューが追加されます。
- ページの名前を変更するには、ページパネルで現在の名前をダブルクリックし、名前を編集してからEnterまたはReturnキーを押します。
- サブページを追加するには、ページ名の横にある3つの点をクリックし、サブページの追加を選択して名前を入力し、EnterまたはReturnキーを押します。
- 既存のページを他のページの下にドラッグして、サブページを作成することもできます。
- ページをナビゲーション・バーに表示させたくない場合は、ページ名の横にある縦に並んだ3つの点をクリックし、「ナビゲーションから隠す」を選択します。
- ページを削除するには、3つの点のメニューをクリックし、削除を選択します。
- 新しいナビゲーションバーがどのように表示されるかを確認するには、プレビューアイコンをクリックするのをお忘れなく。
パート3
コンテンツの追加と編集
-
右パネルのページタブをクリックします。Googleサイトに追加したページのリストが表示されます。
-
編集したいページをクリックします。選択したページが編集用に開きます。
- 1つのページに加えた変更は、他のページには影響しません。
-
テキストを追加または編集します。テンプレートから始めた場合は、すでに編集可能なサンプルテキストがあります。また、ページの任意の場所に新しいテキストボックスを挿入して、カスタムテキストを追加することもできます。
- テキストボックスを追加するには、右側の「挿入」タブをクリックし、「テキストボックス」を選択します。
- テキストを入力します。または、既存のテキストを変更するには、テキストをクリックしてカーソルを置き、変更します。
- テキストをマウスでハイライトして選択します。
- テキストの上にある最初のドロップダウンメニューから、選択したテキストをページのタイトルにするには「タイトル」、セクションヘッダーには「見出し」または「小見出し」、通常のコンテンツには「通常のテキスト」、キャプションやノートには「小さなテキスト」を選択します。
- 対応するメニューからフォントフェイスとサイズを選択します。
- また、テキストを太字にしたり、下線を引いたり、色を変えたり、配置やインデントを調整することもできます。
-
セクションレイアウトを追加します。テンプレートから始めた場合、ページにはすでにセクションがあります。空白のテンプレートにテキストを追加した場合は、少なくとも1つのセクションがあります。しかし、コンテンツブロックを追加することもできます。コンテンツブロックはあらかじめフォーマットされたレイアウトで、独自のテキストや画像を簡単に挿入することができます。
- 挿入タブをクリックしてください。コンテンツブロック」の下に6つのレイアウトオプションが表示されます。
- コンテンツブロックをクリックすると、そのレイアウトがページに追加されます。
- セクション内のテキストボックスや写真のプレースホルダーをクリックすると、そのレイアウトに置き換えることができます。
-
セクションの編集と移動画像、テキスト、またはその両方を含むセクション（コンテンツブロックを含む）の上にマウスを置くと、エディターの左側にいくつかのアイコンと、10個のドットが付いたハンドルが表示されます。これらのセクションは、これらのツールを使って編集したり移動したりすることができます。
- セクションを移動するには、左側にある10個のドットのハンドルからセクションをドラッグします。セクションはページの上下どこにでも移動できます。
- セクションの背景色を変更するには、パレットアイコンをクリックします。セクションの背景に画像を使用する場合は、[画像]をクリックしてコンピュータから画像をアップロードするか、ストック画像を選択するか、Googleフォトまたは.NETに追加した画像を選択します。
- テキスト、画像、その他の要素は、ドラッグしてセクションの内外に移動できます。
- 画像やテキストブロックなど、セクションの一部を削除するには、オブジェクトをクリックし、その上にあるゴミ箱をクリックします。
-
画像を追加する。ストック画像またはウェブサイト上の任意の場所に挿入できます。
- 挿入]タブの[画像]をクリックします。
- アップロード]を選択してコンピュータから画像をアップロードするか、[選択]を選択してGoogleフォトまたはウェブから画像を選択します。
- 画像を追加したら、セクションなど好きな場所にドラッグできます。
- 画像を囲む青い点を任意の方向にドラッグして画像のサイズを変更したり、トリミングアイコン（画像ツールバーの1番目）をクリックして画像を切り抜くことができます。
- 画像をウェブサイトの他のページにリンクさせるには、リンクアイコンをクリックし、リンク先のページを選択します。
- 既存の画像を置き換えるには、画像をクリックし、その右側にある3つの点のメニューをクリックし、「置き換える」を選択します。
- 画像カルーセルを追加するには、挿入タブの画像カルーセルをクリックし、画像を選択します。
-
スペースと仕切りを追加する。セクション間に見えないスペースを追加するには、スペーサー要素を挿入します。2つのセクションを水平線で区切りたい場合は、仕切りを挿入します。
- 挿入タブをクリックします。
- スペースを追加するには、スペーサーをクリックします。スペーサーのサイズは、スペーサーの端にある大きな円のいずれかをドラッグして調整できます。
- セクション間に水平方向の罫線を追加するには、「仕切り」をクリックします。
- 仕切りやスペーサーは、どのセクションの中にも外にもドラッグできます。
-
他のコンテンツを挿入して埋め込む挿入]タブの下部には、折りたたみ可能なグループ、目次、ソーシャルリンクなど、ウェブサイトに追加できるその他の要素が表示されます。また、Googleマップ、ビデオ、Googleカレンダー、フォーム、ドキュメントなどのアイテムを埋め込むこともできます。
パート4
ウェブサイトを公開する
-
すべてのページにタイトルを付けてください。ページ]タブで、ウェブサイトの各ページをクリックし、各ページの上部にタイトルがあることを確認します。これは、訪問者の方向性を保つためにも重要です。
-
ファビコンを追加する（オプション）。ファビコンは、人々がウェブブラウザであなたのウェブサイトを表示するときに、あなたのウェブサイトを表す小さな画像です。パソコンで閲覧する場合はウェブブラウザのタブに、モバイルの場合はウェブブラウザのさまざまな場所にファビコンが表示されます。ファビコンを表示するには、コンピュータのソフトウェアを使用するか、.NETなどのサイトから無料のファビコンをダウンロードするか、.NETのようなファビコンジェネレーターを使用します。
- ファビコンは、.NETのあなたのウェブサイトの横にも表示されます。
- ファビコンを追加するには、Google Sitesエディタの上部にある歯車アイコンをクリックし、ブランドイメージのタブをクリックし、アップロードをクリックします。
- または、[選択] をクリックして、Google ドライブまたは Google フォトにアップロードしたファビコンを選択することもできます。
-
プレビューアイコンをクリックすると、ウェブサイトがどのように表示されるかを確認できます。ページ上部のパソコン画面と携帯電話のアイコンです。
- プレビューを終了するには、右下のXをクリックします。
-
公開をクリックします。エディターの右上にこのボタンがあります。
-
カスタムウェブアドレスを入力します。あなたのウェブサイトアドレスがない場合、https://sites.google.com/view/<yourpreferredname>となります。あなたのウェブサイトを説明する名前を入力します-これは、あなたのビジネスの名前、フルネーム、またはあなたが望むもの（それが取られない限り）であることができます。
- 小文字、数字、ダッシュ（ハイフン）は使用できますが、それ以外の文字やスペースは使用できません。
- 独自ドメイン名をお持ちの場合は、[管理] をクリックして、Google ウェブサイトへのリンク方法をご確認ください。
-
ウェブサイトを閲覧できるユーザーを選択します。デフォルトでは、あなたのウェブサイトは誰でも見ることができます。特定の人にしか見せたくない場合は、アクセスを制限することができます。
- "誰が私のサイトを見ることができますか？"の下にある管理をクリックします。
- 公開サイト "の下で、サイトを公開したい場合は "公開 "を、特定の人に公開したい場合は "制限付き "を選択します。
- サイトを制限する場合は、サイトを閲覧できる連絡先の名前（またはメールアドレス）を入力します。
- 入力が終わったら、[完了]をクリックします。
-
公開]をクリックしてウェブサイトを公開します。これでウェブサイトが公開されました。公開されたウェブサイトを表示するには、「公開」ボタンの横にあるドロップダウンメニューをクリックし、「公開されたサイトを表示」を選択します。
- 次にウェブサイトに変更を加える場合は、再度「公開」をクリックして、変更をインターネットにプッシュする必要があります。
コメント
最新を表示する
NG表示方式
NGID一覧