目次
- サイト作成の動機と経緯
- ドメインの取得（ホスティングサービスの決定）
- Ver.1：プロフィールサイト作成（2025/08/01）
- Ver.2：ブログサイト作成（2025/11/05）
- Ver.2.1：トップページのデザイン変更（2025/11）
- Ver.2.2：記事ページの改修（2025/12）
- Ver.3.1：全般的なパフォーマンス・UX改善（2026/07）
- Ver.3.2：記事ページにおけるタイトルセクションの刷新（2026/07）
- Ver.3.3：Toolsページの新設（2026/07）
- Ver.3.4：お問い合わせフォームの刷新（2026/07）
- Ver.3.5：記事ページの表現力・モバイルUX改善（2026/08）
サイト作成の動機と経緯
この度，以下のような動機により，プロフィール・ブログサイトを作成してみることにしました。
- Google Workspace Businessの契約により
okuyamaleo.comを手にし，せっかくであればメールアドレス以外にもWebサイトを作って活用したいと考えた。 - Webサイトをコードをちゃんと書いて作ったことがなかったので，一度経験してみたかった。
- 従前，各種SNS等に外部サイトを用いてリンク集を掲載していたが，自分好みにカスタマイズできない・外部のサイトを経由させるのが嫌で，管理上手の届くサイトに作り替えたかった。
とはいえ，ブロガーになりたいわけでもないので，なるべくお安く。ある程度お勉強したいとはいえ，過度に難しすぎない構成で作ろう。と頑張った結果，本ページのような経緯・構成に辿り着きました。作成にあたってはさまざまなWebページを参照したため，感謝・自分用メモということで以下にまとめておきます。
ドメインの取得（ホスティングサービスの決定）
まず初めに，ドメインを取得します。
実は，iCloud+でカスタムメールドメインが使えるようになったタイミングで，重要度の高いメールだけ分けられるといいなと思い，お名前.comでドメインを購入し2年ほど使用していました。ところが
- 契約更新を迫るメールがしつこい
- 同じくレンタルサーバー等関連サービスの営業メールがしつこい
- 管理ページの動線がわかりにくい
- ドメインの維持コストがよくわかりにくい・変わる
等の課題を感じ，Google Workspaceを契約したタイミングでCloudflare Registrarでドメインを新たに契約しました。
安くて（今日時点で$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」に変更し，コンタクトページを追加しました。
- 投稿のフィルタリングなどに関するユーティリティ関数をリファクタリングしました。
新機能の追加
astro-embedを統合し，ブログ記事内にYouTube，Twitter，Vimeoなどのコンテンツを埋め込めるようにしました。これに伴い，.mdxファイル形式のサポートを追加しました。
試行錯誤の結果，以下のような形に辿り着きました。
以下，ブログ作成時の参考サイトです。
Ver.2.1：トップページのデザイン変更（2025/11）
ブログサイトを作ってから，トップページに関して何点か気になった点があった & 新しく出たGoogle Antigravityを試してみたかったため，以下のような点で変更を加えました。
- レイアウトを，フローティングカードを用いたものから，2カラム（左に写真，右にメニュー）で分割する形に変更。
- グラスモーフィズムを用いたデザインに刷新
- プロフィール情報を整理
- SNSリンクを小さくまとめ直す
- プロフィール画像を形成
- 趣味のハッシュタグのデザインを見直し
- おすすめ投稿と最近の投稿をリストレイアウトから，カードレイアウトに変更
- 識別性を保つためにコントラストを調整
- ロード時間を短くするため，画像の読み込みを最適化
これまた，デザイン案をAntigravityに投げ込んだらものの見事に作ってくれました。私がしたことといえば，デザインを考え，出てきたコードを「ほぇー」と眺め，微妙な修正を加えるくらいです。
Ver.2.2：記事ページの改修（2025/12）
従来記事ページでは，Markdown記法の見出し機能やURLの挿入などはできていたのですが，ローカル環境・記事執筆時のMarkdown編集ソフトと使える機能に差異があり不便だったので，いくつか機能を追加しました。 またスマートフォンで，トップページを表示した際に，幸か不幸かキリの良いところで見切れてしまっており下のコンテンツが読まれなくなってしまうのではという懸念があったため，スクロールインジケーターを追加しました。
- スクロールインジケーターを実装
- ブログ記事ページにおいて，画像の下に注釈文を表示できるような機能を追加
- ブログ記事ページにおいて，注釈機能を追加
- Google Analytics 4 (GA4) を導入し，サイトのパフォーマンス追跡を行えるように変更
- それに伴ってプライバシーポリシーページをヘッダーに追加
Ver.3.1：全般的なパフォーマンス・UX改善（2026/07）
これまでそこそこ形にはなったものの，パフォーマンスやアクセシビリティ，コードの保守性といった観点で本当に問題がないのか，一度きちんと点検したくなりました。
そこで，出たばかりのClaude Fable 5にリポジトリ全体を読み込ませ，シニアフロントエンドエンジニア兼UXデザイナーの視点で忖度なくレビューしてもらうことにしました。
返ってきたレポートでは改善点が出るわ出るわ。これまで使ってきたAIモデルの中でダントツで精度が高くしかもクリティカルな指摘が多かったです。 このレポートを起点に，指摘された4観点を一つずつ潰していったのが今回の更新です。
パフォーマンス
- 画像・SVGの読み込みを全体的に見直し高速化
Astro設計・保守性
- 長すぎるコードを適宜分割し保守性を向上。
- 同等の機能・デザインのコンポーネントのコードを共通化
アクセシビリティ
- スライドショーに一時停止/再生ボタンを追加し，
prefers-reduced-motionをサイト全体で尊重（WCAG対応）。 - グレーのテキストや404ページの文字色を，コントラスト基準に合わせて調整。
デザイン/UX
- ダークモードに対応。
- 記事一覧ページを，タイトルだけの簡素なリストから，サムネイル付きのカードグリッドに変更（トップページと視覚的に統一）。
- 記事ページに，画面左端のホバーで開くサイド目次を追加。現在地の見出しをハイライト。
- 記事末に関連記事・ホームページへの動線を整備。
- 英語・日本語の表記揺れを統一。（Ex：パンくずリスト・日付表示等）
- 読了目安時間の表示機能を追加。
Ver.3.2：記事ページにおけるタイトルセクションの刷新（2026/07）
これまでの記事ページは，イラストレーターで作ったサムネイル（画像にタイトルを焼き込んだもの）を，記事冒頭に額装風のカードとして表示していました。ただ，記事一覧のカードと見た目が重複していたり，記事への没入感がもう一歩だったりと，気になる点がありました。
そこで，記事冒頭のタイトルセクションを，画面幅いっぱいに画像を敷いた没入型のヒーローに刷新しました。
- 記事画像を画面幅いっぱいに全面表示し，その上にタイトル・タグ・公開日・読了時間を重ねて表示。
- タイトル文字は，英数字を「Jost」，日本語を「Zen Kaku Gothic New」で描画。
- 背景画像の明るさに応じて，タイトル文字色（白／黒）と画像に重ねる暗幕の濃さを記事ごとに設定できるように変更。
- ヒーローに馴染むよう，記事ページのヘッダーを画像に重なる半透明仕様にし，スクロールするとすりガラス状に切り替わるように調整。
あわせて，これまでイラストレーターで手作業していたOGP画像（SNSシェア時に表示される画像）を，ビルド時に自動生成するようにしました。記事画像の上に，ヒーローと同じデザインでタイトル・タグ・公開日を合成しており，記事ごとに画像を用意する手間がなくなりました。
Ver.3.3：Toolsページの新設（2026/07）
これまで趣味で作ったちょっとしたツールを，各所に散らばったまま置いていました。そこで，それらをまとめて紹介するToolsページを新設しました。ヘッダーに「Tools」を追加し，/tools/でカード形式の一覧を，カードをクリックすると各ツールの説明と使い方を確認できる構造にしています。
- ヘッダー（トップページ・各サブページ）にToolsナビゲーションを追加。
/tools/にツールをカードレイアウトで一覧表示。カードには説明・サムネイル・ツールを直接開くボタンを配置。- カードをクリックすると，
/tools/<ツール名>/で詳しい使い方を表示。
現時点では「Gradient Blur Generator」と「AutoCite Chrome」の2つを掲載しています。作成の経緯や各ツールの詳細については，別記事にまとめました。
Ver.3.4：お問い合わせフォームの刷新（2026/07）
お問い合わせフォームを，埋め込み型のTallyから，HTMLを自前で書けるSSGformに移行しました。iframe埋め込みのTallyはサイトのライト/ダークに追従できず浮いて見えていたため，マークアップを自分で書けるSSGformに変えることで，フォームもTurnstileの認証ウィジェットも両テーマにきれいに馴染むようにしました。
- Tally（iframe埋め込み）から，デザインを自作できるSSGformへ置き換え。
- サイトのデザイン（配色・角丸・フォント）に合わせ，ライト/ダーク両対応のフォームを実装。Turnstileの認証ウィジェットもテーマに同期。
- メール通知・記入者への自動返信（控え）メール・Cloudflare Turnstileによるスパム対策を導入。
移行の詳しい経緯や実装コードは，別記事にまとめました。
Ver.3.5：記事ページの表現力・モバイルUX改善（2026/08）
記事を書く中で，引用と執筆者による補足を見た目で区別したい，レビュー記事の商品情報を読みやすくまとめたい，画像を細部まで見てもらいたい，スマートフォンでも記事全体を見渡しやすくしたい，という課題が出てきました。
そこで，記事ページに引用ブロック，コールアウトブロック，商品カード，画像ライトボックス，スマートフォン向け目次を追加しました。
引用ブロック
Markdown標準の引用記法を，本文と区別しやすいカード状のデザインに刷新しました。引用符とアクセントカラーを表示し，cite要素を使うと引用元を右下に添えられます。引用元にはリンクも設定できます。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
宮沢賢治『ポラーノの広場』
コールアウトブロック
執筆者による補足や注意を引用と混同しないよう，専用のコールアウトコンポーネントを追加しました。用途に応じて「情報」「ヒント」「注意」「重要」「例」の5種類を使い分けられ，タイトルの変更や，本文内でのMarkdown記法にも対応しています。
商品カード
ガジェットや日用品のレビューで，メーカー，商品名，型番，仕様，価格，購入先，主要スペックをひとまとまりに表示できる商品カードを追加しました。公式サイトへのリンクを設けたほか，公式ページのOGP画像を取得し，取得できない場合はローカル画像へ切り替える仕組みにしています。
画像ライトボックス
記事内の画像をクリックまたはタップすると，画面いっぱいに拡大表示できるようにしました。画像本来の縦横比を保ちながら画面内に収め，背景部分，閉じるボタン，Escキーのいずれからでも記事へ戻れます。
スマートフォン向け目次
PCでは従来どおり画面左端のホバー式目次を使い，スマートフォンでは記事を少しスクロールすると右下に目次ボタンを表示するようにしました。ボタンを押すと目次がボトムシートとして開き，現在読んでいる見出しが強調されます。項目を選ぶと該当箇所へ移動し，目次は自動で閉じます。
これらの機能を含め，このブログの記事で利用できる記法と設定方法は，「【参考】このブログで使える投稿記事の記法・仕様」にまとめました。
今後も継続的にアップデート予定です……！