Mikanbako Docs

GSAP
HTML/CSS
JavaScript
WordPress

「Mikanbako Docs」は、Web制作に関する技術情報（主にフロントエンド領域）を発信・記録するための技術ブログです。
WordPressをベースにフルスクラッチでオリジナルテーマを構築しており、記事の閲覧・カテゴリー検索・目次の自動生成からお問い合わせ機能まで、ブログメディアとして必要な基本機能を網羅しています。

WEB SITE

POINT: ・ユーザー体験（UX）を向上させる記事ページの動的機能
技術ブログとしての利便性を高めるため、記事本文（h2〜h4）から自動生成される「目次（TOC）機能」を自作しました。PC表示時はサイドバーに追従し、スマートフォン・タブレット表示時は専用モーダルで開閉するレスポンシブな設計にしています。また、記事末尾の「関連記事」は、「同じタグ」を持つ記事をランダム取得し、指定件数（4件）に満たない場合は「同じカテゴリー」の記事で補完するという、独自のフォールバック処理をPHPで実装し、関連性の高い記事を途切れることなく提示できるように工夫しています。

・運用者目線に立ったGutenberg（ブロックエディタ）のカスタマイズ
「記事の書きやすさ」も重要な要件と捉え、管理画面側のUI向上にもこだわりました。functions.phpでの「段落（警告・ヒント等）」や「リスト」「テーブル」のカスタムブロックスタイルの登録に加え、WordPressのFormat APIを活用し、ツールバーに独自のインライン装飾（黄色マーカー、赤文字など）を追加しています。これにより、HTML/CSSの知識がない運用者でも、直感的かつ統一されたデザインで記事を執筆できる環境を構築しました。

・外部ライブラリを安全に動作させる「デモページ」専用アーキテクチャ
GSAPなどのJavaScriptライブラリを使用した複雑なデモ動作を記事内で安全に紹介するため、専用のカスタム投稿タイプ（demo）を作成しました。ヘッダーやフッターを排除した専用テンプレートを用意し、カスタムHTMLブロックとカスタムフィールドを組み合わせることで、グローバルなサイト環境を汚染することなく、CodePenのように独立した環境でCDNライブラリを読み込み・実行できるセキュアな設計にしています。

・BEM設計とSCSSによる高い保守性の実現
サイト全体のCSSは、FLOCSSベースのディレクトリ構造にて、BEMの命名規則に則り、SCSSを用いてコンポーネントごとに細かく分割して管理しています。モディファイアによる状態管理や、変数・mixinを活用した一元管理を徹底することで、デザイン変更や機能拡張にも柔軟に対応できる、破綻しにくいCSSアーキテクチャを実現しています。
ページ数: 6 ページ
使用技術: WordPress / GSAP / JavaScript / HTML/CSS
URL: https://docs.mikanbako.jp/
GitHub: https://github.com/y-nagai0725/docs
デザイン: Figmaページ（閲覧のみ可能です）