部品ギャラリー
このブログを組み立てている部品を、実物のまま並べたページです。色・文字・間隔といった土台の決まりは スタイルガイド が持ちます。
要素
それ以上分けられない最小の部品です。
アイコン
線画で統一し、文字の色を継ぎます。見出し・ナビ・チップ・ボタンの中に置きます。
カテゴリのアイコン
カテゴリごとに絵柄が決まっています。パンくず・サイドバー・ヘッダーのどこで見ても同じ絵が出ます。
表彰のメダル
受賞の回数で色が変わります（銅 → 銀 → 金。3回目の金だけ円を塗ります）。回数はメダルの中の数字が持ちます。記事に添えるときは、数字が何を指すか読み取れないので色だけにします。
部品
要素を組んだ、1つの役を持つまとまりです。記事にまつわる見本は スケジューリングをAIに任せてみたら、仕事の進め方ごと変わった話 の実データで描いています。
群の見出し
節の中で一覧を年・月・群に束ねます。節見出しの1つ下の段で、右に件数の添えを置けます。左にラベルを置いて横に並べる「ラベル付きの行」とは役が違い、こちらは縦に積む一覧を区切ります。
群の見出し
2026年
パンくず
上の階層への道筋だけを出します。現在地は真下の見出しが名乗るので出しません（ページを繰っているときだけ「Nページ目」が現在地として残ります）。1項目しか無いときはパンくず自体を出しません。
タブ
クリックでも矢印キーでも切り替えられます。矢印キーが使えることは、選んでいるタブの真下に出ます（キーボードで操作しているときだけ）。
統計
数値が主役で、ラベルは小さく添えます。内訳（総シェア数に対する X・はてブなど）は一段下げます。数値の下にラベルを置く形と、右に並べる形があります。
- 1481
投稿 - 25599
総シェア数 - 12345
X - 678
はてブ
統計の枠
サイドバーで使う形です。累計と直近1年を1つの枠に積み、数字の桁をそろえてラベルの開始位置を合わせます。
目次
記事と特設ページのサイドバーに出ます。読んでいる節の行に面が付きます。
タグのチップ
タグは丸い枠のチップで表します。右肩の数字はそのタグの記事の総数で、数を出さずに名前だけにすることもできます。
ラベル付きの行
左のラベルが群を名乗り、右にその群のチップを並べます。群の範囲は行の上下の罫線が示します。著者一覧の受賞年と、タグ一覧の頭文字の索引が同じ形です。頭文字などの飛び先から着地した行は、面が付いて着地点を名乗ります。
- A
- B
関連の一覧
関連するカテゴリ・タグを、右に本数を添えて並べます。何を数えた本数かは節の見出しが名乗ります。カテゴリはチップにせずテキストのリンクにして、タグと見分けが付くようにします。
- Programming 327本
- Frontend 134本
- Mobile 57本
記事の行
ランキング・関連記事・参照している記事など、記事を1行で並べるところに出ます。左に小さなサムネイル、題の下に年月と反応の数を置きます。順位の丸が付くのはランキングだけで、1位は数字を王冠に置き換えます。
- 1
- 2
共有ボタン
アイコンだけで、サービス名は書きません。数はボタンの下に小さく出し、0のときは出しません。
かたまり
部品を組んで、そのまま画面の一区画になるものです。
一覧のカード
記事一覧の1件です。サムネイル・題・概要・カテゴリ・共有の数を持ちます。画像と題は同じ行き先なので、キーボードで止まるのは題の1回だけです。
強調したパネル
トップページの「特集」で、旬のものを2枚だけ選んで出すときの形です。枚数を絞って強調する枠なので、パネルの既定とは違って枠線を持ちます。サムネイルが無いときは同じ大きさの空き枠を置いて、題の頭をそろえます。種別の名札と、全件への行き先を添えられます。
パネルの並び
連載一覧や特設ページで、記事へのパネルを3列で並べます。パネルの既定の形で、囲みは持ちません。1枚のまとまりは、隣の列との間（48px）がサムネイルと文字の間（12px）より十分大きいことが作ります。
著者紹介
記事の末尾に出ます。紹介文が登録されていて、3本以上書いている著者にだけ出ます。
カテゴリの枠
よく読まれているカテゴリを上限8件で並べます。行の右の数字はそのカテゴリの記事の総数です。以下3つはサイドバーの列の幅で描いているので、本文の幅で見るより細くなっています。
連載の枠
よく読まれている連載を3件。連載名は長いのでチップにせず、カテゴリと同じ行の並びにします。
タグの枠
よく読まれているタグを10件。ここだけチップで並べます。名前が短く、数が多いためです。