WORDPRESS.
Webデザイン分析ブログ
※ 新しいタブで開きます
WordPressオリジナルテーマを自作し構築した、Webデザイン分析ブログ。サイト名「うえぶ、ひゃっくり」には、一度見たら止まらない「ひゃっくり（しゃっくり）」・100事例（ひゃく）の分析・「栗（くり）」のモチーフを掛け合わせています。
サイトコンセプト
デザインへの
「止まらない」探究心
自身の学習プロセスを楽しみながら、技術を定着させるためのアーカイブサイトとして、WordPressオリジナルテーマを自作し構築しました。優れたWebデザインの意図を言語化・アーカイブし、初学者にも直感的に伝わるよう平易な表現を心がけています。
実装のポイント
オリジナルテーマ自作 & ギミック実装
既存のテーマを使用せず、PHPを用いたオリジナルテーマを一から作成。ネーミング（ひゃっ「くり」）と連動し、背景に「栗」が降り注ぐJavaScriptアニメーションを実装しました。
タグ構造まで意識したSEO内部対策
記事投稿時のHTMLタグ（見出し構造 h1〜h4 など）の適切な使い分けを徹底。SEO内部対策をコーディング段階から意識し、可読性と検索親和性の両立を図っています。
「分析力」を届けるためのアクセシビリティ
専門用語を噛み砕いた平易な表現を心がけ、見やすく整ったマークアップを実践。初学者や学習中の方にも直感的に伝わるコンテンツ設計を意識しています。
実務レベルの運用・解析環境の構築
Google Search Consoleを連携し、インデックス管理や検索キーワードの分析を実施。蓄積データに基づき継続的にサイトを改善・運用する「育てるサイト」を目指しています。
ユーザー体験を支える機能実装
「1分で読めます」という読了目安時間の自動表示や、モバイル対応のレスポンシブデザインなど、WordPressのテンプレートタグや関数を活用し、細部のUIまで自作しました。
使用ツール
Adobe Photoshop
画像編集
Adobe Illustrator
グラフィック
VSCode
コードエディタ
ChatGPT
AIアシスト
Gemini
AIアシスト
Claude AI
AIアシスト