![見出し画像](https://assets.st-note.com/production/uploads/images/152170618/rectangle_large_type_2_11419b681503275f5f81652ef9b2464d.png?width=1200)
Googleサイトでポートフォリオサイトを3時間で無償かつノーコードで作った方法
概要
今回作ったポートフォリオサイト
今回Googleサイトでポートフォリオサイトを制作したので、制作方法の備忘録です
![](https://assets.st-note.com/img/1724752414741-1425JOEEsy.png?width=1200)
Googleサイト
Googleサイトでテンプレートを選ぶ
![](https://assets.st-note.com/img/1724752596643-cymOOQ2xdb.png?width=1200)
たくさんあるので良さそうなものを選びます
今回は下の右から3番目、赤い四角で囲った物を選びました
![](https://assets.st-note.com/img/1724752530316-t8e9IXeFl8.png?width=1200)
テンプレートの編集
画像関係の設定
![](https://assets.st-note.com/img/1724752801418-hI0V3NhhSB.png?width=1200)
ヘッダーの画像を好きなものに差し替えます
![](https://assets.st-note.com/img/1724755125577-yf1HIsZHYS.png?width=1200)
名刺にも採用しているイラストにヘッダー画像を差し替え
![](https://assets.st-note.com/img/1724753060698-bh2CPIJsL1.png?width=1200)
ロゴや差し込み画像など、画像関係はおそらくすべて差し替えが可能なので、自分の画像に変更します
![](https://assets.st-note.com/img/1724755177387-jk1Q2TjHtU.png?width=1200)
例では、BANDCAMPの要素では私の一番新しいアルバムのJourney's Paletteのアルバムカバーに変更しました
サイトの要素の変更
![](https://assets.st-note.com/img/1724753267183-Jc0y7QvSe3.png?width=1200)
左のタブ→テーマから、セクションの色も変えられます
![](https://assets.st-note.com/img/1724755431575-bIXBFvpuF3.png?width=1200)
セクションを黒く変更
![](https://assets.st-note.com/img/1724753443976-Y3x7roTAZp.png?width=1200)
真ん中の黒い長方形がセクション
要素にリンクの設定
![](https://assets.st-note.com/img/1724753589555-9op2ScLfoK.png?width=1200)
画像、文字などにリンクの設定ができます
![](https://assets.st-note.com/img/1724753643779-MllOHhhVQv.png?width=1200)
今回の私のサイトでは、画像とタイトルにリンクを設定しました
要素のブロックを作る
![](https://assets.st-note.com/img/1724753795915-L7pixmsmdg.png?width=1200)
わかりにくいですが、要素をドラッグ・アンド・ドロップで重ねればグループ化できます
![](https://assets.st-note.com/img/1724753879114-UjaOEJy2tf.png?width=1200)
![](https://assets.st-note.com/img/1724753958441-ZfIuihlV8U.png)
要素のグループの中にさらにグループがあり、上に出てくる2*5の長方形をダブルクリックすると、それらを動かせます
![](https://assets.st-note.com/img/1724754130879-SRBk9JtUOv.png?width=1200)
上からテキスト→画像→テキスト→説明文テキストの順番に重ねました
![](https://assets.st-note.com/img/1724754231323-5CxTUxIMgz.png?width=1200)
要素のテンプレートができたら、使う数だけ複製します
![](https://assets.st-note.com/img/1724754418489-06MG1IMVaZ.png?width=1200)
ついでに重要度の低いリンクは下にまとめて掲載しました
完成
ページの完成
完成サイト(再掲)です
![](https://assets.st-note.com/img/1724754323149-nx9nx4XqLp.png?width=1200)
ページの公開
![](https://assets.st-note.com/img/1724754524381-msY4Fy2BzZ.png?width=1200)
"https://sites.google.com/view/xxx"という形式で自由にアドレスを設定できます。また今回は行いませんでしたが、独自ドメインの設定もできるようです
今回はわかりやすく”https://sites.google.com/view/soenarecords”に設定
Googleアナリティクス
![](https://assets.st-note.com/img/1724754600684-uOUc9KyM7d.png?width=1200)
設定からGoogleアナリティクスの設定もできます
Googleアナリティクスも無償で使用できます
GoogleアナリティクスのトラッキングIDの取得方法
感想
無償かつ簡単に広告無しで自分のWebサイトを作れて、アナリティクスも無償で確認できるのは本当にいい時代だと思いました。
アナリティクスを設定してみたところ意外にも見ている方存在したので、自分のWebサイトをとりあえず作っておくといいことがあるかもしれません。
また自分の紹介をするときにも便利ですね。