Table of contents
- サイト作成の動機と経緯
- ドメインの取得（ホスティングサービスの決定）
- Ver.1：プロフィールサイト作成（2025/08/01）
- Ver.2：ブログサイト作成（2025/11/05）
- Ver.2.1：トップページのデザイン変更（2025/11/20）
サイト作成の動機と経緯
この度，以下のような動機により，プロフィール・ブログサイトを作成してみることにしました。
- Google Workspace Businessの契約により
okuyamaleo.comを手にし，せっかくであればメールアドレス以外にもWebサイトを作って活用したいと考えた。 - Webサイトをコードをちゃんと書いて作ったことがなかったので，一度経験してみたかった。
- 従前，各種SNS等に外部サイトを用いてリンク集を掲載していたが，自分好みにカスタマイズできない・外部のサイトを経由させるのが嫌で，管理上手の届くサイトに作り替えたかった。
とはいえ，ブロガーになりたいわけでもないので，なるべくお安く。ある程度お勉強したいとはいえ，過度に難しすぎない構成で作ろう。と頑張った結果，本ページのような経緯・構成に辿り着きました。作成にあたってはさまざまなWebページを参照したため，感謝・自分用メモということで以下にまとめておきます。
ドメインの取得（ホスティングサービスの決定）
まず初めに，ドメインを取得します。
実は，iCloud+でカスタムメールドメインが使えるようになったタイミングで，重要度の高いメールだけ分けられるといいなと思い，お名前.comでドメインを購入し2年ほど使用していました。ところが
- 契約更新を迫るメールがしつこい
- 同じくレンタルサーバー等関連サービスの営業メールがしつこい
- 管理ページの動線がわかりにくい
- ドメインの維持コストがよくわかりにくい・変わる
等の課題を感じ，Google Workspaceを契約したタイミングでCloudflare Pagesでドメインを新たに契約しました。
安くて（今日時点で$10.46/年），信頼性も高くていいなくらいの気持ちで選択しましたが，後にサイトを作ることを考えるとCloudflare Pagesが使えるので，良い選択だったと感じます。あえて短所を挙げるとすれば，.jpドメインが取れないことくらいでしょうか。いろいろ管理しやすく，使えこなせないくらい多機能で気に入っています。
ここで簡単にCloudflare Pagesに触れておくと，Cloudflareが提供する静的ウェブサイトやフルスタックアプリケーション向けのホスティングサービスです。無料プランでは月間500ビルド（書き換え）という制限はありますが，現在の私の用途では十分過ぎるほどの回数です。ファイルサイズは無制限なので頭を悩ます必要はありません。Githubと連携してコードをプッシュすると自動でビルド・デプロイしてくれるので，とっても楽に運用できています。
Ver.1：プロフィールサイト作成（2025/08/01）
まずは8月ごろ，プロフィールサイトの作成に着手しました。当時，企図としていたのは
- SNSなどのリンク集として使いたい
- SNSのBio欄等から，本サイトをみてくださった方に，どんな趣味・関心を持っているかを簡単に表現できると良い。
- 一応，問い合わせフォームをおいておきたい。
- デザイン的には，趣味である写真を前面に押し出して作成したい。
あたりの希望がありました。
そこでまずは，手元のデザインツールに投げ込んで，デザインカンプらしきものを作成しました。
それをGeminiに投げ込んで出てきたものが…… なんということでしょう。
当時のコードが残っていないのですが，ほぼほぼイメージ図通りのものが一発で出力されてびっくりした記憶があります。特に背景画像のスライドショーにおいて，Ken Burnsエフェクトなるイカしたトランジションを適用してくれ，見栄えが良く感動しました。出てきたコードから，
- 過剰な装飾を取り除く
- メインカードのサイズ感等をちょっと直す
- Google Fonts（NotoSans JP・Jost）を適用する
- Tally（無料&多機能で好み）で作ったフォームを埋め込む
程度の手直しを経て完成しました。ちなみにこのプロフィールサイトでも，次に作るブログサイトでもTailwind CSSを使用していますが，初見の概念だったのでほんのちょっとだけ勉強しました。確かに使ってみると，文字色・余白などをクラス単位で指定していけるので便利だなと感じます。
その後できたHTMLコードをGithubのレポジトリに挙げ，Cloudflare Pagesで設定，公開しました。
ここまでのステップで参考にしたサイトを以下に記載しておきます。
Ver.2：ブログサイト作成（2025/11/05）
プロフィールサイトを作って，しばらくほったらかしていましたが，腰を上げてブログサイトへの作り替えに着手しました。
それほど手の込んだブログにしたいわけではありませんでしたが
- 引き続きCloudflare Pagesでホスティングできる静的な構造で作ること
- 記事の更新が簡単にできること
- 当初はCMSを利用しようかと考えていましたが，いろいろうまくいかず挫折……
- 作っていく中で情報を得やすい
といったことを考え，Astroを用いて作成することにしました。
日本語ドキュメントあり，優れたテンプレートあり，Markdownで記事の更新可能，とかなり良かったです。
テンプレート探し
さすがにブログのデザインを0から考えて作るのは大変なのでテンプレートを探しました。そこで見つけたのが，以下のAstroPaperというテンプレートです。
テンプレート元はこんな感じ↓
テンプレートからの改変
素敵なシンプルデザインで，必要な機能が全て揃っていたため，大きく改変する手間を経ることなく公開にたどり着くことができました。日本語化を中心に，以下の改変を行なっています。
🎨 スタイリングとレイアウトの調整
- フォントとタイポグラフィ：
- イタリック（斜体）スタイルを削除しました。
Noto Sans JP・Jostフォントを追加しました。
- コンポーネントのレイアウト：
Headerコンポーネントのレイアウトを調整し，ナビゲーションを改善しました。Footerコンポーネントのスタイルを更新し，区切り線（hr）の可視性やテキストの可読性を向上させました。Tagコンポーネントのスタイルをリファクタリングし，レイアウトを改善しました。- トップページの
Header，Footer，名前表示部分のレイアウトやマージンを調整しました。
- カラーテーマの変更：global.cssのカラー変数を修正し，カラーテーマを変更しました。
🌐 日本語化とローカライゼーション
- 各種コンポーネントの表記を日本語に変更しました。
🔧 コンテンツと設定の更新
- トップページに，Ver1のプロフィールコンテンツを移植しました。
- トップページ（
index.astro）に表示される「最近の投稿」のフィルタリングロジックを更新しました。 - ナビゲーションを「About」から「Contact」に変更し，コンタクトページを追加しました。
- 投稿のフィルタリングなどに関するユーティリティ関数をリファクタリングしました。
🚀 新機能の追加
- Google Analytics 4 (GA4) を導入し，サイトのパフォーマンス追跡を可能にしました。
astro-embedを統合し，ブログ記事内にYouTube，Twitter，Vimeoなどのコンテンツを埋め込めるようにしました。これに伴い，.mdxファイル形式のサポートを追加しました。
試行錯誤の結果，以下のような形に辿り着きました。
以下，ブログ作成時の参考サイトです。
https://github.com/satnaing/astro-paper Licensed under the MIT License, Copyright © 2025 Made with 🤍 by Sat Naing 👨🏻💻 and contributors.
Ver.2.1：トップページのデザイン変更（2025/11/20）
ブログサイトを作ってから，トップページに関して何点か気になった点があった & 新しく出たGoogle Antigravityを試してみたかったため，以下のような点で変更を加えました。
- レイアウトを，フローティングカードを用いたものから，2カラム（左に写真，右にメニュー）で分割する形に変更。
- グラスモーフィズムを用いたデザインに刷新
- プロフィール情報を整理
- SNSリンクを小さくまとめ直す
- プロフィール画像を形成
- 趣味のハッシュタグのデザインを見直し
- おすすめ投稿と最近の投稿をリストレイアウトから，カードレイアウトに変更
- 識別性を保つためにコントラストを調整
- ロード時間を短くするため，画像の読み込みを最適化
これまた，デザインをAntigravityに投げ込んだらものの見事に作ってくれました。私がしたことといえば，デザインを考え，出てきたコードを「ほぇー」と眺め，微妙な修正を加えるくらいです。
機能的で見栄えも良く，満足の出来になりました。しっかりとした箱を作ったので，気が向いた時にコンテンツを増やしていければと思います。