DevLog｜らくがき騎士団

2026年1月12日

URL構造の最適化とSEO・サーバー負荷対策：
- パーマリンク設定の変更：今後の運用を考慮し、ブログ記事のURL構造を「日付＋タイトル（日本語）」から、短く管理しやすい「数字ベース（/archives/ID）」へ変更。
- 一括リダイレクト（301転送）の実装：URL変更に伴うリンク切れを防止するため、正規表現を用いた自動転送設定を構築。既存のSNSリンクや検索結果からのアクセスを維持しつつ、新URLへ安全に誘導。
- 正規URL（Canonicalタグ）のクリーンアップ：PHP（functions.php）によるカスタマイズを実施。SNS共有時に付与される余計なURLパラメータをGoogleに無視させ、かつ日本語URLのデコード処理を加えることで「検索エンジンにとって最も綺麗なURL」を提示。
- robots.txtによるクローラー制御：重複コンテンツや不要な変数が付いたURLへの巡回を制限し、Google Search Consoleで検出されたサーバー負荷（5xxエラー）の根本解決を図る。
保守性の向上：
記事作成時に英単語のスラッグを手動入力する手間を排除し、タイトルを入力するだけで「短く・美しく・エラーの出ないURL」が自動生成される環境を構築。

2026年1月11日

ブログシステム（WordPress）の本格実装：
トップページやギャラリーと同じデザインテーマを適用したWordPressオリジナルテーマを開発。記事一覧、個別記事、カテゴリー表示、ページネーション等の基本機能を実装し、サイト全体との統一感を確保。
外部サービス連携機能の強化：
- Note連携：公式RSSを利用し、サイドバーに最新記事を自動表示するウィジェットを開発。また、おすすめ記事を固定表示するカスタムウィジェットも実装。
- YouTube連携：動画URLからIDを自動抽出するロジックを実装し、どのようなURL形式でも確実にサムネイル画像が表示されるよう改良。
独自ウィジェット・サイドバー開発：
プロフィール、SNSリンク（Instagram/X）、アーカイブ（年別・月別件数付き）、タグクラウドなどを網羅した多機能サイドバーを構築。スマホ閲覧時にはアコーディオン開閉式にし、ユーザビリティを向上。
UI/UXの細部調整：
- パンくずリスト：「何ページ目か」や「記事番号（通し番号）」を表示するロジックを追加し、現在地を分かりやすく可視化。
- 記事ナビゲーション：記事上部にシンプルな前後リンク、下部にリッチなナビゲーションを配置し、回遊性を向上。
- 表示崩れ対策：タグ（カテゴリー）の改行崩れ防止、長いURLのはみ出し防止、スマホでの関連記事表示の最適化を実施。
特殊ページの実装：
「全記事一覧リスト」および「Note全記事リスト」を表示する専用の固定ページテンプレートを作成。 1ページあたりの表示件数を切り替えられるフィルタリング機能も搭載。
本番環境へのデプロイ完了：
テスト環境（test.graffitiknights.art）での検証を経て、本番環境（graffitiknights.art）への移行・公開を完了。

2026年1月9日

ギャラリー機能の大幅アップデート：
ラフ画と完成画をスライダーで徐々に切り替えられる「Before/After比較機能」、タイムラプス動画等の「YouTube再生機能」、およびブラウザに依存しない「独自シェアメニュー（X/Facebook/LINE/Copy）」を実装。
スマホ版UI/UXの改善：
操作ボタン（前へ・次へ）を画面下部に完全固定し、縦長のイラストが見切れないよう表示サイズ（高さ50%制限）とコンテナ伸縮ロジックを最適化。作品情報を折りたたみ式に変更し、画像の表示領域を最大化。
PC版レイアウトの最適化：
ウィンドウサイズに合わせてイラストが最適な大きさにリサイズされるオートフィットレイアウトを実装。スクロール制御を見直し、あらゆる画面サイズでの閲覧性を向上。
デザイン刷新と不具合修正：
操作ボタンをSVGアイコンに変更し視認性を向上。タグのデザインを統一（楕円・グレー）。モーダル表示中の「トップへ戻る」ボタン非表示制御や、無効なIDアクセス時のバグ修正、CSS競合の解消を実施。

2026年1月7日

ギャラリーページの高速化・最適化：
画像の存在確認通信（事前チェック）を廃止し、描画ロジックを「遅延読み込み（Lazy Loading）」へ変更。初期表示枚数を制限することで、ページを開いた瞬間のフリーズを解消。
ローディングUIの実装：
ギャラリー等の読み込み時に白い待機画面を表示し、操作不能時間を視覚化。トップページではスライドショー部分のみに黒いローディングを適用し、他のコンテンツを即座に閲覧できるようUXを改善。
スライドショーの機能拡張：
JSONデータに基づく動的生成へ移行。各スライドへのタイトル表示と、ギャラリー詳細ページへのリンク機能を実装。
内部ロジックの修正：
特殊な命名規則（TOP画像・Coming Soon）の画像パス生成処理を適正化。また、Coming Soon画像が全カテゴリで表示されるようフィルタリング処理を修正。

2025年12月29日 (System Update)

システムページのデザイン刷新：
「404エラー」「送信完了」「送信失敗」の各ページを、トップページと共通の「白ベース・カード型デザイン」に統一。ヘッダーやナビゲーションの有無をページ特性に合わせて最適化。
[確認用リンク] 404ページ / 送信完了 / 送信失敗
CSS・ファイルの最適化：
`css/notification.css` を廃止し、スタイル定義を `css/top.css` に統合。また、ルート階層の不要な `contact.js` を削除し、ディレクトリ構成をクリーンアップ。
UI微調整：
フッターの「ポートフォリオPDFダウンロード」ボタンを、他のボタンと同様のカプセル型・立体デザインに変更。
セクションデザイン統一：
トップページの「お知らせ」および「バナーエリア」もカード型デザインにリデザイン。セクションごとにアクセントカラー（赤・金・黒・青）を設定し、視認性を向上。

2025年12月29日

トップページのメインビジュアルを刷新。全画面表示のフェードスライダー（ヒーローヘッダー）を実装し、ファーストビューの没入感を大幅に向上。
スライドショー機能に「Swiper.js」を導入。滑らかなクロスフェード演出と、プログレスバーによるスタイリッシュな進行表示を追加。
自己紹介エリア（Intro）のUIを改善。お問い合わせボタンと「つなぐ」への誘導ボタンを整理し、PC・スマホそれぞれの閲覧環境に合わせて最適化。
サイト更新作業実施中！トップページのイラストをギャラリーページと自動的に連動するように改修。
gallery.php?id=89 のようなURLパラメータに対応し、SNS等で特定の画像を直接共有可能に。
ナビゲーションボタンを画像からCSSテキストベースに変更し、レスポンシブ対応とSEOを強化。

2025年12月21日

お問い合わせフォームに、通常、個人用、法人用を実装。
エラーページへの変遷やreCAPTCHA等のセキュリティ要件を概ねクリアして実装。

2025年12月16日

お問い合わせフォームの内容を追加充実（件名、お問い合わせ種類、禁止ワード設定など詳細化）。

2025年12月3日

プロフィールページ作成。
サービスページ編集中。
お問い合わせページ実装。
サイト内の全画像を次世代フォーマット（WebP）へ置き換え、読み込み速度を改善。

2025年11月27日

プロフィールページ作成中。
サービスページ、お問い合わせは未着手。

2025年11月23日

トップページのデザインがおおよそ完成。
iPhone（iOS Safari）での表示崩れを修正し、正常動作を確認。
プロフィールページ編集開始。

2025年11月22日

ナビゲーションデザイン実装、CSSを調整中。

2024年8月23日

ナビゲーションメニューをデザイン中：現在トップページのみ実装テスト。
ギャラリーの表示修正、作業中：CSSの設定を修正し、カタチだけgalleryとして機能。
トップとお知らせページに進捗状況の記載を開始：CSSで体裁を整える。