はじめに、
こんにちは、tukumolog管理人 lumenheroです。
実は、このサイトのUI、ほぼ全部スクラッチして(自分で書いて)ます。今時、テンプレートとか、ブロックで要素を追加できるエディタで作れたりしますので、サイトを公開するだけならそれを使った方が賢い選択ではあります。
しかし、やはり自分で作るなら自由帳のように自由につくりたい。
ということで、php,js,サーバ回り etc… (nginxなどのフレームワークは利用しています(初期案ではこの辺も全部作る構想があったが時間がかかりすぎる+SEO対策が弱いのでやめておきました)）をぺちぺち書いて作ってきました。
UIやサイトの改善したら、更新履歴に書き加えていくだけでもいいのですが、作るならいっそのこと記事化してしまおうということで、今回から、“tukumolog ぺちぺち改修記”1というシリーズで、UI更新や改善中に考えていることなどを、いつもの技術的記事よりもっとブログに近い(口語的な)形態で書いていくことにします。
だいぶゆるめ（サムネもあまり凝らない）で書いていくため、ほとんどX(旧Twitter)みたいな記事シリーズになる予定です、適当に流し見していっていただけると幸いです。
本題：Linuxサブホームの構築案
さて、新シリーズ「ぺちぺち改修記」の第1回は、現在絶賛設計中のLinuxサブホーム（Linux Academy）についてです。
最近の投稿（2026年4月現在）を振り返ると、全体の半分近くがLinux関連記事になっています。今後はさらに踏み込んで、サーバー構築などの実践的な記事も増やしていきたいと考えています。
しかし、ここで一つ大きな課題にぶつかりました。
ターゲット層の再定義：誰のための「技術記事」か？
サーバー構築の記事を書く際、いきなり「××を実行して▲▲を導入して……」と手順だけを書いても、いわゆる「わかっている人」には伝わります。しかし、そうした玄人層は、キーワードさえあれば公式ドキュメントを読んで自力で完結できてしまうため、私のブログが提供できる付加価値はそれほど高くありません。
私が届けたいのは、「プログラムの基礎はわかるし、Excelなども使いこなせるけれど、Linuxは初めて」という層です。
そうした方々が、このサイト内で知識体系を完結して理解できるようにしたい。そのための「基礎兼入門編」として、昨年11月からコツコツと「Linuxコマンド入門」シリーズを投稿してきました。
課題：迷子を量産する「情報の平積み」
先日、入門編のパート4が完結し、記事数もかなり揃ってきました。そこで顕在化したのが、UI（ユーザーインターフェース）の限界です。
シリーズの第1回から追ってくれている方は良いのですが、検索から特定の記事に飛んできた方にとっては、「次に何を読めばいいのか」が全くわからない「迷子量産UI」になっていました。
サイト構築初期はスピードを優先し、個別記事の体裁は整えたものの、トップページやカテゴリ一覧は「とりあえずの仮組み」の状態。サイドバーの絞り込み機能はあるものの、基本的には全カテゴリが雑多に積み重なった「記事置き場」と化していたのです。
ちょうどDockerなどの新しいトピックに触れ始めるこのタイミングで、しっかりと導線を整えるための「サブホーム」を実装することに決めました。
コンセプト：教科書を超えた「実戦的なリファレンス」へ
サブホームの設計にあたり、最初は「初心者向け」「中級者向け」といった、よくある学習サイト形式も検討しました。しかし、それだけでは他の優れた教科書や公式ドキュメントには勝てません。
そこで、今回構築するLinux Academyでは、以下の3つをゴールに設定しました。
- 実用性： ほぼゼロ知識の状態から、コピペでも最低限のサーバーを立てられること。
- 即応性： 手元に置いておける「ちょっとしたリファレンスサイト」になること。
- 独自性： ここを見れば、他にはないニッチな機能や構成のサーバーが立てられること。
「学びに来た人」、「調べに来た人」が迷わないサブホームが目標です。
UIの構想
学ぶ(manabu)は、まねぶ（manebu)から転じているといわれています(諸説あり)。
ひとまず、自分が見ていてわかりやすいなと感じるサイトを１０個程度並べてみて、そのUIの構造をコンセプト３つを実現するために、調査してみました。
サイト名を上げるのはやめておきますが、某有名な土管工の会社のuiとか、有料学習サイトとかの中で有名どころ、ウェブデザインの個人ブログ～でわかるとか系を見て回ると、どうやら共通して、
コンテンツ別にサブヘッダがあること、一瞬で大まかなカテゴリの記事一覧への移行ができること、サブホームの一番上にはとりあえずこれを見たらいいよという記事のカードがある。主なタグでフィルタ出来るボタンがあることなどの機能があるようでした。
これらを参考にUI・機能設計を考えていった結果、暫定的には以下のような設計に落ち着きました。
UI・機能設計のアイデア
「学びに来た人」と「使いに来た人」を迷わせないために、以下のような機能を盛り込む予定です。
1. サイドバーの機能設計
サイドバーは「記事を読みながら / 探し物をしている時」に最も活躍する場所と定義し、優先順位をつけて配置します。
- Lab Home への帰還と検索： AcademyのTOPへ戻る大きなボタンと、カテゴリ内専用の検索窓を最上部に。
- 目的別ハブ（Intent-based Hubs）： 単なるカテゴリ分けではなく、「自宅サーバーを立てたい」「Dockerを極めたい」といった、ユーザーの具体的な動機に基づいたポータルページへ誘導します。
- パーソナライズ・ログ（閲覧履歴）： 「さっき読んでいたあのコマンドの記事、どれだっけ？」を即座に解決。JavaScriptの
localStorageを活用し、ブラウザ側に直近3〜5件の履歴を保存・表示します。DB負荷をかけない、個人開発らしいハックです。 - 探求のためのタグ・グリッド：
#networking#security#vimなど、細かい粒度のタグで非同期（AJAX）フィルタリングができる仕組みを検討中。 - (独自要素)横断的コンテンツ（Cross-cutting Section）： 「Linux × 電子工作（ラズパイ等）」「Linux × AI（GPU環境構築）」など、tukumologの他のカテゴリ（Lab）とLinuxがどう繋がっているかを示すポータル。
2. ヘッダーとの役割分担
- サブヘッダー（Top）： カテゴリ全体（インストール、コマンド、サーバー等）のマクロな移動。
- サイドバー（Left）： 履歴、タグ、具体的目的といったミクロな移動。
おわりに
「学びに来た人」がロードマップを迷わず進め、かつ「使いに来た人」が必要な情報をすぐに見つけられる。そんな構造を目指して、バックエンドの実装とUIの調整を進めています。
単なる「記事の集合体」から、一つの「学習プラットフォーム」へ。 ぺちぺちとキーボードを叩きながら、少しずつ形にしていきたいと思います。
公開まで、今しばらくお待ちください！
開発記録本編予定 : 技術ブログの回遊率を改善するためにやったこと【linuxAcademy(仮称)-開発記録1】
ここまで読んでいただきありがとうございます。
では、次の記事で。 lumenHero
- 備考 -
- tukumologのサイトUIなどの改善を行った記録集の名称。ぺちぺち(気負わずにキーボードを叩いて、一歩ずつ手作りでサイトを育てている感）がある更新記録なのでほとんどX(旧ツイッター)です。 ↩︎
