• このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

GoogleのサービスでWEBサイトを作っちゃうよ!

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

こんにちは、プロクラスの渡辺です!
SNSを流してみていた時に、GoogleでWEBサイトが作れるようになった!という文字を見かけたので、ほうほうどんなもんなんだろうな~と思い一つサイトを作ってみました。
簡単に作り方をのせますので、ご興味のある方は参考程度に見ていただければと思います。(スクショ撮るのを忘れていたのですごく端折ってます…)

ちなみにこんなテストサイトを作りました。 😆 
https://sites.google.com/view/proclass-blog-0703/home

GoogleでWEBサイトを作るために

これ、Googleのサービスの一環なので、アカウントがもちろん必要です。アカウントを持っている前提で進めます。
さくさく作っていきましょう!

Chromeを開くと画面の右斜め上にアイコンがたくさん並んでいると思います。
赤まるて囲ったアイコンを押しすとGoogleのサービスがたくさん出てきますが「もっと見る」⇒「さらにもっと」を押してください。
01

すると、新しいページが開くと思いますので、下にしたにスクロールしていくと「サービス一覧」という項目が出てきますので、さらに下にスクロールをしていくと…
02【サイト】のアイコンが出てきました!このサービスを使用していきます!

WEBページをつくる

さっきのアイコンを押したら画像みたいなページが表示されると思います。(私はテストページ作ったのでそれが表示されていますが・・・)

03この青い指のところの、赤い丸をクリック!
これでページの土台完成します!(すごい!!)

04
これが初期のページになります。ここからいろいろいじってサイトを作っていくわけです。
右側のメニューを見ていただくとわかると思うのですが、YouTube・カレンダー等のGoogleサービスの埋め込みがとても簡単にできそうな予感ですね! 😉
基本的には、左側のページ部分と右側のメニュー部分を使います。
文字を打ったりするのは左側ですが、テキストボックス・画像・埋め込み等々左側に必要なものは右側で調達するイメージです。

カスタマイズする

05

さっきのページよりちょっとおしゃれになりました。
私は何もしていないのですが、右側のメニューの「テーマ」を押すと、6種類のテーマが出てきます。
初期設定のではちょっとシンプルすぎるような気がしたので、「Vision」テーマを選んでみました。かわいい。
このテーマを土台にすることにします! 😛 

06

急に変わってますが、いろいろ変えました!
ソフトクリームが好きなので、その想いをのせたサイトです。
「無題のサイト」というところがあったと思いますがそこにはサイトの名前を入れました。
「サイト名を入力」部分にはロゴが挿入できたので、サイトタイトルをいれてみました!

ソフトクリームの画像を存分に堪能してもらいたいので、「ページのタイトル」はあえて無視です。消しました。
ちゃんとページタイトルを入れてもいいと思います◎

08

画像の下にある白い部分にテキストを入れたいと思ったので、右側のメニューにある「テキストボックス」をクリック!
そうすると、青い枠に囲われたものが左側に出現します!
ここにテキストを打っていきます。
画像を入れたいときは、メニューにある「画像」をクリック!

07

下層のページも作っていきます。
メニューの真ん中のページを押すと、ページが増やせます。
下層のページは「ページのタイトル」を活用しました。どんなページかわかりやすくなります。
その下のテキストと画像は、簡単に2分割にできるのでぜひ試してみてください!

こうやってページを増やしたり、テキストを増やしたりしてWEBサイトを作っていきます。(構想から製作まで30分で作り切るとかいう、無謀なことしたので私は3ページが限界でした。)

どんな風に見えるか確認も簡単!

レスポンシブ対応もばっちりしてくれて、ありがたいものですが、どんなふうに見えるのか確認ができない~~!!わけじゃないです!

11

この、目のアイコンを押すと、「パソコン」「タブレット」「スマートフォン」でどんなふうに見えているのかが簡単に確認できます!

09

これはすごくありがたいです。 😳 
ここで確認しながら、おかしなところがないかを見ていきましょう。
それが終わればついに完成、公開です!

完成~!

10

https://sites.google.com/view/proclass-blog-0703/home

完成しました!私は30分でガサガサ作りましたが、もっと時間をかけたらもっといいものができると思います! 😉 
※URLで実際のページが確認できます。

難しい知識がなくても簡単に作れちゃいました。
ただ、URLが変な感じだったりするし、できることが限られてるのが難点…
これからもっといいサービスになれば色々できるようになるんじゃないかと思ったりします!! 😆

 

こんなんじゃ満足できない!

こんなんじゃ満足できない!という方には、もっといろいろできる、ワードプレスもおススメです!
簡単に自分のサイトが作れるのでぜひぜひ挑戦してみてください 😮

プロクラスでも「簡単ホームページ作成!はじめてのWORD PRESS」でイチからワードプレスの使い方がわかって、しかもホームページが作れちゃいます!
ひとりでやるとグダグダしてしまって、なかなか進まない~ 😥 という方には1日で完成できるのでとってもおススメです!
京都・大阪・東京・横浜・名古屋で随時開催していますので、興味があればぜひ! 😯 
おまちしております~!

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
各地で開催中!

【簡単ホームページ制作!はじめてのWordPress講座】
好評につき、大阪会場もスタート!

WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちら