Googleサイトで簡単にホームページ作成!おしゃれなレイアウトのコツや活用事例を紹介!

Googleサイトで作ったホームページ サイト 事例

Googleサイトって簡単にホームページや、サイトを作成できるって聞いたのですが、どういったことに活用できるのでしょうか?またレイアウトとか難しいですよね。何か参考になるものありませんか?

こんな悩みを解決します。

Googleサイトは活用方法や、操作方法、レイアウトがある程度わかってくると非常に使えるツールです。

しかし、私もGoogleサイトを使い始めたころは、操作は難しくないですが活用方法や、レイアウトに非常に悩みました。

こんな方向けに記事を書いたのでぜひ参考にしてください。

  • 無料で簡単にホームページを作成したい。
  • 社内ポータルサイトを作成したい。
  • YOUTUBEや、スプレットシートといったGoogleWorkspaceのサービスを1つのサイトにまとめたい。

 

これからGoogleアカウントを作成したいという方は、下記記事の『Googleアカウントの追加方法』を参考にしてください。

スポンサーリンク
記事内広告‐1

Googleサイトとは?

Googleサイトとは、Googleが無料で提供しているホームページ作成ツールです。

専門的な知識などいらず、インターネット上にサイトを作成できるのです。

また、豊富なテンプレートがあり、他のGoogleのサービスとの連携ができるため非常に使いやすいです。

  • Googleアカウントを持って入れば,誰でも無料で使うことができる。
  • HTMLやCSS、JavaScriptなどのプログラミングを一切使用しなくてもサイトが作成できる。
  • GoogleのサービスなのでWorkspace(スプレットシート、ドキュメント、スライド、カレンダー、YOUTUBEなど)、との連携も非常に良い。
  • 他のユーザーとの共同作成が可能。

上手く活用すれば非常にいいツールなんです。

Googleサイトのテンプレート

私が一番困ったのが、サイトのレイアウト(デザイン)でした。

こんなサイトを作りたい、こんな風にするにはどうすればいいのかなど、色々とググりながら作成していたのでかなり時間がかかってしまいますが、こちらのテンプレートを使用してサイトを作成していくと時間の短縮になると思います。

Googleサイトで作ったホームページ サイト 事例

 

Googleサイト上部のテンプレートをクリックすれば使用できます。

これにより質の高いレイアウトが簡単に作成できるようになります。もちろんこちらも無料で使用できます。

また、上部に表示されているもの以外に、右上のテンプレートギャラリー(赤枠)をクリックすれば他のテンプレートがでてきます。

Googleサイトで作ったホームページ サイト 事例

 

仕事・エンタープライズ・小規模ビジネス・パーソナル・教育と分かれており、自分の使用用途にあったテンプレートを探して使用してみてください。

全く初めてからGoogleサイトを作成するよりも断然効率的です。

 

Googleサイトで作ったホームページ(サイト)と作成のコツを紹介

それでは私がGoogleサイトで実際に作成した会社ホームページ、社内進捗管理サイトなどいくつか紹介致します。

会社ホームページを作成したものを紹介

株式会社ヒラノ

 

YOUTUBE動画をメインに、動画を貼り付けて作成しています。先にも説明しましたが、Googleのサービスなので、Workspace関連との連携は本当に良いです。

しかも、下部にインスタグラムも掲載しています。SNSなども貼り付けられるのでとても便利です。

また、こちらのホームページには独自ドメインも付けています。
(ドメインは、他のサービス(お名前.comなど)を使用して取得してます。)

このホームページであれば、素材(ロゴ・画像・動画)がある前提で、1日あれば作成ができてしまうと思います。

 

ホームページをオシャレに見せる6つのコツ

1. テンプレートを活用する

このブログの初めに紹介させて頂きましたが、Googleサイトには多くのテンプレートが用意されております。これらを活用することで、デザインのベースを簡単に整えることができます。テンプレートを選ぶ際には、目的に合ったものを選び、その後でカスタマイズを行うと良いでしょう​ 。

 

2. 色の統一感を持たせる

サイト全体で統一感のあるカラーを使用することで、プロフェッショナルで一貫性のあるデザインになります。ブランドカラーやテーマカラーを決めて、ヘッダー、テキスト、リンクなどに一貫して使用することが重要です​ 。

 

3. フォントの選択

読みやすく、おしゃれなフォントを選ぶことも重要です。Googleサイトでは、数種類のフォントが用意されておりサイトに合ったものを選ぶことができます。特に見出しと本文で異なるフォントを使い分けると、視覚的なメリハリが出ます​ 。

 

4. レスポンシブデザイン

Googleサイトは自動的にレスポンシブデザインに対応していますが、配置や画像サイズに注意を払って、どのデバイスから見ても見やすいサイトを作成することが大切です。特にスマートフォンでの表示をチェックして、テキストやボタンが小さくなりすぎないようにしましょう​ 。

 

5. 画像とグラフィックの活用

高品質な画像やグラフィックを使用することで、サイトの見栄えが格段に良くなります。無料の画像素材サイトや自分で撮影した写真を使用し、適切なサイズに調整して配置します。また、画像の上にテキストを重ねる場合は、読みやすいように半透明のオーバーレイを追加すると良いでしょう。

 

6. ホワイトスペース(空白)の利用

ホワイトスペース(空白)を効果的に使用することで、情報が整理され、読みやすいデザインになります。各セクション間や要素間に十分なスペースを設けることで、サイトが窮屈にならず、見やすくなります​。

このホワイトスペースがオシャレなホームページを作る上で一番重要です。

右側のメニューバーのスペーサーを上手に活用することで、各段に見栄えが変わりますのでぜひ試してみてください。

 

 

これら6つのコツを押さえてデザインをすることで、Googleサイトをよりおしゃれで機能的なものにすることができます。

 

Youtube動画の貼り方

今回紹介したようなYoutube動画をGoogleサイトに貼り付ける方法をご紹介いたします。

まずはGoogleサイトを開いたら、右側のメニューバーの『YouTube』をクリックしてください。

 

クリック後、下の画面が出てくるので、赤枠の中に検索キーワードを入力してください。

今回の紹介した株式会社ヒラノの場合は、YouTubeチャンネル『ヒラノTV』があるのでこのキーワードを入力します。

 

キーワードを入力すると、『ファイルの選択』が開き検索された動画がでてくるので貼り付けたい動画を選びクリックしてください。

 

下の画像のようになれば成功です。画像の大きさは調整できるのでお好みで変えてみてください。

今回説明した方法の他にも右側メニューバーの『レイアウト』からもできます。基本的な操作は変わらないので試してみてください。

会社ホームページにブランディング(商品紹介)ページを作成

株式会社ヒラノで『PAGE-ONE CRAFTER’S』というキャンプ用品ブランドの販売を始めたので、商品紹介のブランディングページをデザインし作成しました。

PAGE-ONE CRAFTER’S ブランディングページ

画像や動画の素材が揃っていれば、こんなWEBページもデザインし簡単に作成できます。

また、このPAGE-ONEは商品をネット上で販売するECサイトがあるため、リンクボタンの設置や、商品画像にリンクを貼っておけばクリック後、購入画面に遷移することができます。

活用方法 進捗管理サイト(社内共有用)

こちらは社内用で使用しているオーダー管理シートサイトです。スプレットシートで作成している各顧客ごとのオーダー管理シートを貼り付けてあるサイトとなります。

社内で使用しているため、皆さんにお見せすることができずすみませんが、正直こちらのサイトこそ皆さんに詳しく紹介したいです。次回仕事とは別で自作で作成して公開しようと思っております。

こちらの管理シートサイトは下記利点があり使用しております。

  • 顧客ごとのスプレットシートの管理表を一元管理できる。
  • 社内共有ができる。会社の拠点が離れている場合でも共有が容易。(海外でも)
  • デスクトップにショートカットを作れば、ワンクリックで全体を見ることができる。
  • スプレットシートなので、共同作業が可能。

こちらのサイトもすでに使っていたスプレットシートで作成したオーダー管理シートを貼り付けてあるだけなので、簡単に作成することがでました。

簡単に作成できた割には、非常に活用できるサイトです。

また、共同作業ができるので、拠点が離れていても同時に編集が可能なためとても便利です。

私の会社もグループ会社の拠点が、国内・国外と分かれているためこのサイトは非常に役だっています。

ちなみにこちらのサイトでは、GoogleDriveを活用してお客様とデータのやり取りもしております。クラウドでのやり取りなので、非常にスムーズに仕事ができます。

*Googleドライブについて知りたい方はこちらの記事を参考にしてみてください。

またサイトなので、下記のように別ページに顧客別の受注グラフを掲載し、チーム全員が閲覧できるようにしています。

こちらもグラフと表ともに、スプレットシートで作成しGoogleサイトに掲載しています。これによって顧客ごとのオーダー数の推移がすぐに確認できるようになり大変便利です。

 

まとめ

皆さん、Googleサイトの活用事例や、レイアウト等参考になりましたでしょうか?

今回紹介したサイト以外にまだまだたくさん活用方法はあると思います。(正直レイアウトについては他の人がもっと上手に作成していると思います。)

特に、このGoogleサイトは社内サイトとして活用するのが大変適しています。他のWorkspaceのサービスを駆使しながら作成すれば、もっと面白いサイトができると思いますね。

やはり見た目については、きちんとした制作会社には敵いませんが、その分簡単に作成でき、カスタマイズもすぐできるため非常に便利です。そのため、費用面はもちろんのこと、ちょっとした社内・社外の共有に適しています。

今後ビジネスのデジタル化がどんどん進んでいき、社内の情報もあふれていくと思います。その情報の整理についてもこのツールはかなり使えると思います。

最後に、今回紹介したサイトとは別に、今後Googleサイトで面白いサイトや、便利なサイトを作成できたら、第2弾の記事を書きたいと思っております。

それでは最後まで読んでいただきありがとうございました。

コメント

  1. jiro より:

    ranoさんこんにちは。私もこの2年ほどグーグルサイトでいくつかHPを作って活用しています。ひとつ聞きたいのですが、グーグルサイトで使った写真や画像って、グーグルやYahooの画像検索で表示されないですよね?
    ranoさんの記事内の会社ホームページも拝見しましたが、たとえばその会社名さんで検索すると、サイト内に貼られているYoutubeのサムネ画像は検索結果に出てくるのに、トップ画像の会社ロゴは出てきません。私のグーグルサイトも同じで、オリジナルの写真をいくら使っても、画像は1枚も表示されません。それ以外はグーグルサイトに不満はないのに、一体なぜだろうと思っています。グーグルのサポートにも問い合わせたのですが、検索の仕組みについては答えられない、の一点張りでした。

    同じ状態にあって困ってる方がいらっしゃれば、自分だけの症状ではないとサポート側に伝えられるのでコメントしてみました。

    • rano rano より:

      jiroさん
      初めまして。コメントありがとうございます。

      正直、コメントを頂くまで画像検索について全く気付いていませんでした。
      株式会社ヒラノのホームページの画像検索を行いましたが同じ症状のようです。
      おっしゃる通りグーグルサイトの画像は表示されないようですね。
      (ちなみにWordPressで作ったホームページについては画像検索で表示されていました。)

      もしこちら側で何かわかりましたら連絡させて頂きますが、できれば進展等あれば
      教えて頂けると幸いです。

      よろしくお願いいたします。

  2. ゆうと より:

    こんにちは。ゆうとです。画像にスプレッドシートなどがあるのですが追加するとどのように表示されますか?

  3. N8 より:

    ranoさんこんにちは。
    現在、Googleサイトで自社ポータルサイトを制作しておりますが、
    自身で保有しているドメインをカスタムドメインとして登録しました。

    登録は完了しているものの、公開へ進むと自身の登録したドメインから公開ボタンが現れず、
    Googleサイトのドメインの最後を入力させられます。

    これは普通ですか?

タイトルとURLをコピーしました