こんにちは、現場の最前線で「情報の流れ」をデザインしているシニアエンジニアです。
皆さんのチームでは、Confluence（コンフルエンス）をどのように使っていますか？「ただのドキュメント置き場」になってはいませんか？
せっかく素晴らしい知見が集まっているのに、標準のデザインのままだと、どこに何があるか直感的に分からなかったり、情報の優先順位がボヤけてしまったりすることがあります。実は、Confluenceの「カスタムCSS」と「レイアウト調整」を少しマスターするだけで、Wikiは「読みづらい書類束」から「チームの思考を加速させるコックピット」へと劇的に進化するのです。
今日は、初心者の方でも今日から実践できる、ConfluenceのUIを劇的にブラッシュアップする極限のカスタマイズ術を伝授します。これをマスターすれば、チームのベロシティ（開発速度）は間違いなく向上しますよ。
—
1. なぜ「見た目」を整えることが重要なのか？
技術者の中には「中身が正しければ、デザインなんて二の次だ」と考える人もいるかもしれません。しかし、それは大きな誤解です。
- 認知負荷の低減: 適切な余白や強調があれば、脳は一瞬で情報の重要度を判断できます。
- 心理的安全性の向上: 整理された美しいドキュメントは「この場所は大切に管理されている」という安心感を与え、アウトプットの質を底上げします。
- 情報のサイロ化防止: 読みやすいWikiには自然と人が集まり、ナレッジの共有が自発的に加速します。
では、さっそく「標準機能の枠」を超えていきましょう。
—
2. 最初の一歩：カスタムCSSの適用場所を確認する
まずは、魔法をかける場所を知る必要があります。Confluence（特にServer版やData Center版、またはCloud版で特定のアプリを使用している場合）には、スペース全体に適用できるスタイルシートの設定があります。
1. 対象のスペースに移動します。
2. 左下の [スペース設定] (Space Tools) をクリックします。
3. [ルック＆フィール] (Look and Feel) タブを選択します。
4. [スタイルシート] (Stylesheet) をクリックします。
ここにCSSを記述することで、そのスペース内の全ページの見た目を一括で制御できます。
—
3. 【実践】見出し（Heading）をモダンにデザインする
標準の見出しは少し控えめすぎて、セクションの区切りが分かりにくいですよね。まずはここを劇的に変えてみましょう。
以下のコードをスタイルシートに貼り付けてみてください。
/ — 見出しのカスタマイズ — /
/ H1: ページ全体のテーマを象徴する力強いデザイン /
.wiki-content h1 {
color: #172b4d; / Atlassianネイビー /
border-left: 6px solid #0052cc; / 左側にアクセントライン /
padding: 10px 15px;
background-color: #f4f5f7; / 薄いグレーの背景で領域を明確化 /
border-bottom: 1px solid #dfe1e6;
margin-top: 40px;
border-radius: 4px;
}
/ H2: セクションの境界をはっきりさせる /
.wiki-content h2 {
color: #253858;
border-bottom: 2px solid #4c9aff; / 下線でリズムを作る /
padding-bottom: 8px;
margin-top: 30px;
}
/ H3: 補足的な見出しにアイコン的な装飾を /
.wiki-content h3 {
color: #42526e;
display: flex;
align-items: center;
}
.wiki-content h3::before {
content: “▹”; / 控えめなドットで視線を誘導 /
color: #0052cc;
margin-right: 8px;
font-weight: bold;
}
ポイント: `border-left`（左線）や `background-color` を使うことで、スクロールしていても「ここから新しいセクションだ」と直感的に理解できるようになります。
—
4. 【応用】自作の「コールアウトボックス」で注目を集める
Confluence標準の「情報マクロ」や「注釈マクロ」も便利ですが、CSSを使えばさらに目立たせたい「秘伝のタレ」や「要注意事項」を際立たせることができます。
HTMLマクロ（またはユーザーマクロ）が使える環境なら、以下のようなクラスを定義しておくと便利です。
/ — カスタム・コールアウトボックス — /
.custom-callout {
padding: 20px;
margin: 20px 0;
border-radius: 8px;
border-left: 10px solid;
box-shadow: 0 4px 6px rgba(0,0,0,0.05); / 軽い影で浮かせる /
}
/ 成功・Tips用（緑） /
.callout-success {
background-color: #e3fcef;
border-color: #36b37e;
color: #006644;
}
/ 警告・重要用（赤） /
.callout-danger {
background-color: #ffebe6;
border-color: #ff5630;
color: #bf2600;
}
使い方は、ページの編集画面で `div` タグにこれらのクラスを指定するだけです（※HTMLマクロを使用）。「ここだけは絶対に読んでほしい！」というエンジニアの魂を視覚化しましょう。
—
5. レイアウトの極意：情報の「密度」をコントロールする
CSSだけでなく、標準の「セクション（Layouts）」機能の使い方も見直してみましょう。
多くの人が「1カラム」でダラダラと長い文章を書いてしまいがちですが、おすすめは「2カラム（左広め、右狭め）」の活用です。
- 左側（メイン）: 手順書、コード、ロジックの解説
- 右側（サイドバー）: 担当者、関連リンク、ステータス、目次（Table of Contentsマクロ）
このように情報の役割を左右で分けるだけで、ドキュメントの「スキャン性（流し読みのしやすさ）」が飛躍的に高まります。
—
6. Hello World的動作確認：まずはここから変えてみよう
「色々ありすぎて何から手をつければいいか分からない」という方は、まず「リンクの色」と「フォントサイズ」だけ変えてみてください。
/ 全体のフォントを少し読みやすく、リンクを強調する /
body {
font-family: “Helvetica Neue”, Arial, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, Meiryo, sans-serif;
line-height: 1.8; / 行間を広げて可読性アップ /
}
.wiki-content a {
color: #0052cc;
text-decoration: none;
border-bottom: 1px dashed #0052cc; / リンクにさりげない下線を /
transition: all 0.2s;
}
.wiki-content a:hover {
background-color: #deebff; / ホバー時にふわっと色を変える /
border-bottom-style: solid;
}
これを適用するだけで、ページ全体が「モダンなWebサービス」のような手触りに変わります。この「おっ、ちょっと使いやすくなったぞ」という感覚こそが、チームのナレッジ共有を文化にする第一歩です。
—
おわりに：道具を研ぐことは、仕事を愛すること
ConfluenceのUI調整は、単なる「飾り付け」ではありません。チームが毎日向き合う「情報の広場」を、より心地よく、より機能的に整えるエンジニアリングそのものです。
「標準のままでいいや」と妥協せず、ほんの少しのCSSと工夫で、チームの生産性を最大化させてみてください。あなたが整えたその1ページが、誰かの「あ、分かった！」という閃きを生むきっかけになるはずです。
さあ、あなたのConfluenceを、世界で一番クリエイティブな場所に変えていきましょう。応援していますよ！