個人サイト制作ツールに目がない人間、きじなごです。
とあるブログ記事で「Googleサイト、わりとええで」という内容のものを見かけたので、簡易サイトを作ってみました。
今ある本家サイトの情報をちょっと入れて作った「仮のきみまち」。
めちゃくちゃ中身適当ですが一日でそれっぽい感じにはなりました。
コードを書かずに作れるのでわりと手軽。あと広告がない。
慣れればサクッと簡易サイトを作れるので、個人サイトの仮ページを非公開で作るのとかアリ寄りのアリだなと思いました。
無論、本家サイトとして運用するのも全然アリですね。ただGoogleさんの利用規約とかはしっかり確認して、諸々設定しとく必要はありそう。
制作の流れとか
- サイトに入れたい情報を考える
- 自分用のテーマを設定する
- 子ページを作る
- 情報をひたすら流し込む
- いろいろ設定して公開
そんな感じです。PixivとかXfolioとかやってる人だったらできると思う。
Xfolio、コンセプトはすごくいいんだけど全体的にもっさりしてるのとマジで重いのが気になりポイントなんですよね。
編集するたびにロード待ちする時間があるのが耐えられんかった。おま環だったらすみません。
Googleサイトは比較的軽いです。自分の地獄スペックPCでもするっと開けるので嬉しい。
あとGoogleサイトで作ったサイトは検索エンジンに載らないようにしたり、閲覧者を制限することもできるみたいです。
AI学習に関しては……少なくとも完全に防ぐことは難しいと思います。まあそれに関しては条件はどこも一緒だと思います。時代ですね。
詳しいことはあんまりわかりませんが、私はここのWikiを参考にしてます。
どのみちなんやかんやでAI自体は身近な存在になっていくと思います。
でも悪用されるのは嫌なので対策しときたいって気持ちも超わかる。悪いことをする人間が一番悪い。
…なんにせよ、自分の世界観を全面に押し出した本拠地を作るのは超楽しいので、最初は非公開でいじいじしてみてほしいですね。
いやわかんない…私はもう個人サイト制作ジャンキーになってしまっているから…。
1．サイトに入れたい情報を考える
情報の洗い出しは、正直何を使ってもいいです。
Googleドキュメントでもメモ帳でもEvernoteでもいい。
私はNotionに魂を持ってかれた人間なのでNotionでいろんなことを管理しています。
サイト制作もご多分に漏れず。
こんな感じで箇条書きで書くだけでもいいんで、とりあえず全体的にどれくらいの情報になるのか洗い出しましょう。
ちゃんとした個人サイトとして使いたい場合は他の方の個人サイトを見て回るのもいいですね。
同人で使いそうな情報を一通り揃えているNotionテンプレートを使ってみてもいいかもしれません（ダイマ）。
私が作りました。正直これだけでサイトとしても使えます。
でもNotionサイトも重い。
2．自分用のテーマを設定する
では早速Googleサイトを使っていきましょう。
導入についてはこの記事が詳しいので見てください（丸投げ）。
で、最初にテーマ（見た目を変えるやつ）を作っとくといいです。
なぜなら私がそれをやらずに見た目を作っており、あとで存在に気づいてやり直したからです（反省）。
Googleさんが用意しているテンプレートもあるのでそっちを使ってもいいです。
1.右上に出てるタブから「テーマ」を選択。
2.でっかい「＋」マークを選択。
3.テーマの名前、ロゴ、ファビコン画像があれば追加。なくても大丈夫。
4.サイトで使うカラーを選択。プリセットから選ぶも良し、カラーコードを参考に自分で決めるも良し。あとで色は追加できます。
5.サイトに使うフォントを選択。これだけでもだいぶ雰囲気変わるのでテンションが上がる。
基本これでOKです。
詳細設定や設定の変更がしたい時は選択しているテーマの右上の点々→「編集」で色々出てきます。
いろいろあるのでウッとなりますが、基本触らなくてもそれっぽい感じになるので大丈夫です。
3．子ページを作る
サイト内で子ページが欲しい時、ありますよね。
トップページから概要ページとか、作品ページに飛ばしたりとか。
それをやります。
1.右のタブから「ページ」を選択。
2.右下の「＋」を選択。
3.ページ名を入力。おわり。簡単ですね。
ちなみにナビゲーションメニュー（上か左横から出てくるやつ）には子ページの項目しか出てこないので、そこは注意ですね。
4．ひたすら情報を流し込む
ここまで来たらあとは情報を入れていくだけでそれっぽいサイトができます。
反映されるのも一瞬だしやり直しもすぐできるので、とりあえず色々いじってみるのが一番早いと思います。
Googleフォームをサクッと挿入できるのはいいですね。
つまづいたポイント・気になったところとか
- ボタンを挿入しようとしたらブロックが切り離されて出てくる（ドラッグ＆ドロップでブロック内に入れることはできる）
- SNSリンクは「ソーシャルリンク」から（アイコンは自分で用意する必要あり）
- 画像は普通に右クリックできるので注意
- ギャラリー機能はない（ドライブを使ってそれっぽくはできるけど超イマイチ）
- 逆に言うとドライブが使えるのでゲームとか素材の配布はわりと便利そう
- プレビューは右下の×で解除できる（間違えて何回もタブ閉じた）
5．いろいろ設定して公開
「公開」を選択するとドメインを設定したり公開範囲を指定できます。
他のちょっとした設定は右上の歯車からできます。
アクセス解析がしたい人はアナリティクスをサッと入れられるのもわりと良き。
力技編：HTML埋め込みで画像ギャラリーを作る
ここから先は好みとやる気の問題です。
画像をクリックしたら大きい画像がポップアップで出てくるアレを実装します。
ぶっちゃけ超めんどくさい。キレかけた。
すんごい探してこちらの神記事を見つけました。神。
※2025年6月22日 手違いでリンク紛失しました………（苦悩）
こちらの記事のコードを調整させていただいて、レスポンシブで列が変化するようにしたコードがこちらです。軽い解説付き。
<head>
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js>"></script>
<link href="<https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css>" rel="stylesheet">
<script src="<https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js>" type="text/javascript"></script>
<style>
* {
padding: 0;
margin: 0;
}
/*全体の余白調整*/
.gallery__list {
list-style-type: none;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
/*画像をリスト化していい感じに並べる*/
.gallery__item {
width: calc(95% / 3);
}
/*PCで見たら3列になる*/
.gallery__item:not(:nth-child(-n+3)) {
margin-top: 20px;
}
/*画像リストの上に余白*/
.gallery__item img {
width: 100%;
height: auto;
}
/*画像を開いた時の画像の大きさ*/
.gallery__item a {
transition: .5s;
}
/*ふんわり開くアニメーション（sは秒数）*/
.gallery__item a:hover {
filter: opacity(0.7);
}
/*画像にカーソルを合わせると画像の透明度が下がる（1が最大）*/
.gallery__item a:hover img {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}
/*画像にカーソルを合わせると画像周りにうっすら影ができる*/
@media (max-width: 768px) {
.gallery__item {
width: 100%;
margin-top: 20px;
}
}
/*768px以下の画面幅で画像を1列にする*/
</style>
</head>
<body>
<section class="gallery">
<ul class="gallery__list">
<li class="gallery__item">
<a href="<https://1枚目の画像リンク>"
data-lightbox="group1" data-title="1枚目の画像タイトル">
<img src="<https://1枚目の画像リンク>" alt="">
</a>
</li>
<li class="gallery__item">
<a href="<https://2枚目の画像リンク>"
data-lightbox="group1" data-title="2枚目の画像タイトル">
<img src="<https://2枚目の画像リンク>" alt="">
</a>
</li>
<li class="gallery__item">
<a href="<https://3枚目の画像リンク>"
data-lightbox="group1" data-title="3枚目の画像タイトル"><img
src="<https://3枚目の画像リンク>" alt="">
</a>
</li>
<li class="gallery__item">
<a href="<https://4枚目の画像リンク>"
data-lightbox="group1" data-title="4枚目の画像タイトル"><img
src="<https://4枚目の画像リンク>" alt="">
</a>
</li>
</ul>
</section>
</body>このコードを、画像ギャラリーを置きたいところにHTMLで埋め込めばOKです。
どういう風になるかは元の記事にデモがあるので参考にしてください。
画像を増やしたいときは以下のコードを</ul>タグの直前に追加していく感じです。
めんどくさいのでVScodeとかメモ帳とかで色々書き換えてからサイトに貼るのが安牌。
<li class="gallery__item">
<a href="<https://n枚目の画像リンク>"
data-lightbox="group1" data-title="n枚目の画像タイトル"><img
src="<https://n枚目の画像リンク>" alt="">
</a>
</li>しかしここでまた一つ障害が。
画像リンク…どこから引っ張ってくるの？
ネットのどこかに画像を置いてないと画像リンク持ってこれないぜ、というやつです。
これを解決しようとして一日潰れました。ガハハ！！
今回自分の中で出した結論は以下の通りです。
- Googleフォトにサイトに載せる用の画像フォルダを作る
- フォルダを共有状態にする（重要）
- 右上の…（その他のオプション）→オプションで設定を変更
- 共有状態のフォルダに入ってる画像を右クリックして「画像アドレス（激長い）」をコピー
- 上記コードに画像リンクを貼るところに画像アドレスをペースト
…うん。めんどくさい。
半分力尽きているので後日もうちょっと詳しく書きます。
Googleフォトの共有リンクをそのまま埋め込むってのもまあなくはないんですが…。
あれ、あくまで共有ツールなのでダウンロードの項目を消せないんですよね。
めっちゃ簡単に画像ダウンロードできます。めっちゃ嫌～～～～！！！
あ、でも気にならなければ全然OK。むしろ超ラク。
Googleドライブの共有リンクを貼る作戦も試したんですが、そしたら上記の埋め込みコードで画像が表示されない。
もっといい方法があれば…マジで教えてほしいです。私の屍を越えて行け…。
他にも調整できそうなところがあれば追記していきます。
いいねボタンもやる気があれば実装できるみたいですが、GASを使うのでウワ！って感じです。
おわり：疲れた
とりあえずそんなこんなでそれっぽいのができます。
力技を使わなければですが、かなり気軽にサイトを作ることができます。
その代わりこだわりが発生すると、急にめっちゃめんどくさいツールになります。
ノーコードツールあるあるですね。
画像に関しては、どこに置くにもネットで公開する場合はウォーターマークを徹底した方が良さそうです。気になるならね！
過去に他にもCanvaとかSTUDIOとかWixとかJimdoとかNotionとか触ってるんですが、Googleサイトはそれなりに制約がある分それなりにいい感じのができやすいというのが大きいですね。
あと他のツールに比べると軽いし、深く考えなくてもレスポンシブデザインになってくれる。
画像の置き方が一番ネックですね〜。
個人サイト作りたい人イラスト勢多いだろうし。なんなら小説とか漫画も見せ方ど〜なのって感じですよね。
もうちょっといい感じになってくれればガチ推しできるんだけど…。
あとすけべコンテンツも下手したら規制されるかもしれないので、気をつけた方が良さそうです。
ただ、今自分がもし完全無料で創作をやるとしたらGoogleサイトはマストですね。
そこにプロフィール、ガイドライン、作品ページ、お問い合わせを置いて、ブログとか応援はOFUSEかnoteを使う感じになりそう。
画像はGoogleフォト、小説はGoogleドキュメントに突っ込んで、ドライブにまとめていく。
そう考えるとGoogleさんやっぱ強いな………。
各コンテンツの置き方については、もうちょっと模索したいところですね。あるいは改善要望を送るか。
お金出して個人サイト作る場合のガチ推しはてがろぐなので、また折を見て当サイトのメイキングとかやりたいです。
そんな感じです。