くぁー公式ホームページ　技術 / kubobeem.tech

1技術仕様

使用技術

HTML5（セマンティック要素を使用）
CSS3（Flexbox / Grid / メディアクエリ）
JavaScript: 不使用
画像・動画・音声: 不使用
外部ライブラリ・フレームワーク: 不使用
外部フォント: 不使用（システムフォントに依存）
ビルドツール: 不使用（手書きのHTMLファイル）

対応環境（想定）

モダンブラウザ（Chrome / Firefox / Safari / Edge の直近数バージョン）
スマートフォン・タブレットの標準ブラウザ
JavaScript無効環境でも全文が読める
画像読み込みがブロックされていても問題なし（画像がないため）

ファイル構成

index.html     … 要点（トップ）
about.html     … 理念・沿革・ステータス
policy.html    … 運用方針・FAQ
tech.html      … 技術仕様・付録
notes.html     … 考察
appendix.html  … 補足・用語集・あとがき
links.html     … 相互リンク
style.css      … 共通スタイル

ページを分割し、スタイルは style.css に共通化しています。このディレクトリをそのまま置くだけで動作します。

デザイン方針の詳細

カラー: メインカラーは青系（#3a7bd5 および関連色）。背景は明るいグレー系でコントラストを確保。
タイポグラフィ: 日本語環境で一般的に利用可能なゴシック体を指定。行間を広めに取り、長文でも読みやすくしている。
レイアウト: 最大幅を制限し、行長が極端に長くならないようにしている。モバイルでは1カラムに切り替わる。
装飾: 影や角丸は最小限。情報の階層が分かる程度の視覚的手がかりを残している。

パフォーマンスに関する考え方

阿部寛のホームページと比較すると明らかに重い。しかし「重い」の基準は相対的である。画像やスクリプトを大量に読み込む現代的なサイトと比較すれば、依然として軽い部類に入る。テキストとスタイルシートのみで構成されている点は共通している。

2デザイン決定の記録

このページの見た目について、どのような判断をしたかを残しておきます。将来の自分や、似たページを作ろうとする人の参考になれば幸いです。

なぜ青系の色を選んだか

特に深い理由はありません。落ち着いた印象を与えやすく、長文を読む際の疲労感が比較的少ないと感じたためです。赤やオレンジを基調にすると、攻撃的・警告的な印象が強くなりすぎると判断しました。

なぜ角丸や影を使ったか

完全にフラットなデザインも検討しましたが、セクションの区切りが視覚的に分かりにくくなる懸念がありました。ごく弱い影と角丸で「カード」としてのまとまりを出し、情報の塊を認識しやすくしています。

なぜナビゲーションを上部に固定しなかったか

position: sticky や fixed を使うと、スクロール時の挙動やモバイルでの占有領域が気になりました。単純なページ内リンクの並びで十分だと判断し、固定ナビゲーションは採用していません。

フォントサイズと行間

本文はブラウザのデフォルトに近いサイズを基にし、行間を1.75程度に広げています。モバイルでも読みやすいことを優先しました。見出しは階層が分かるように段階的にサイズを変えています。

3付録

A. 用語集

サブ垢: 本アカウント（本垢）とは別に運用する、補助的・実験的・匿名性の高いアカウントのこと。用途は人によって大きく異なる。
本垢: 主に使用する、あるいは身元が比較的明らかなアカウント。このページでは詳細を公開していない。
静的サイト: サーバー側で動的に内容を生成せず、あらかじめ作られたHTMLファイルをそのまま返す形式のウェブサイト。
セマンティックHTML: 見出し・段落・リストなどの意味を適切にマークアップしたHTML。検索エンジンや支援技術にとって理解しやすくなる。
レスポンシブデザイン: 画面幅に応じてレイアウトが変化し、デスクトップでもスマートフォンでも使いやすくする設計手法。

B. このページを読む人へのお願い

記載内容を過度に深読みしないでください。
運営者の意図しない解釈で拡散しないでください。
批判は自由ですが、人格否定や嫌がらせは控えてください。
このページを「公式見解」として扱う必要はありません。

C. 将来の可能性（未確定）

以下は現時点で決まっていない事項です。実現する保証はありません。

独自ドメインの取得
より詳細なプロフィールの追加
過去のポストのアーカイブ的なまとめ
テーマカラーの変更やレイアウトの刷新
完全に別の形式（テキストファイルのみなど）への移行

D. ライセンス的な考え方

このページの文章・構造は、個人的な利用や学習目的での参照を妨げません。ただし、以下の点に留意してください。

「くぁーの公式ホームページ」としてそのまま再公開しない
営利目的で大幅に流用する場合は事前に確認を
引用する場合は出典が分かるようにする

この付録は必要に応じて今後拡充される可能性があります。