ADR-0065: 全てのページに、イントロの署名をロゴにしたヘッダーを置き、ナビに記事とプレイグラウンドを並べる¶

Status¶

承認

Context¶

サイトのヘッダーに何を置くかと、イントロの署名をどこに出すかを決める必要がある。

• トップの最初の訪問で、左下に「Fukuemon」の署名を筆記体で書き、署名はイントロの間だけ出すと決めている。
  • ADR-0026: トップの最初の訪問で水墨の門を描き、門をくぐった立体の庭にプロフィールを置く
• about は独立したページを作らず、ヘッダーの「筆者について」が / を指すと決めている。
  • ADR-0026: トップの最初の訪問で水墨の門を描き、門をくぐった立体の庭にプロフィールを置く
• fukuemon.dev に置くページは、トップ、記事、シリーズ、プレイグラウンドの一覧である。プレイグラウンドのツールは play.fukuemon.dev に置く。
  • ADR-0031: サブドメインに分ける規則を決め、1 つのアプリを 1 つの Worker とホスト名に割り当てる
• ページの間で移る先は、トップ、記事の一覧（/articles）、プレイグラウンドの一覧（/playground）の 3 つである。
• プレイグラウンドの一覧へのリンクをどこに置くかは、どの文書にも書かれていない。
• 本文の検索は、記事が増えて一覧とシリーズから辿れなくなったときに作ると決めている。
  • ADR-0030: 種別を記事の 1 つにし、構成を記事の形式で、シリーズをディレクトリで表す
• デザインシステムの Design Doc は、ヘッダーの外枠を 68rem にしてロゴの左端と本文の左端をそろえ、ヘッダーの下を 2px の墨の罫にすると決めている。
  • 出典: デザインシステム（packages/ui）の Design Doc
• ナビの今いるページの印を、錆の筆の線にすると決めている。
  • ADR-0028: 操作できる要素と重なる面の角を 2px で丸め、重なる面にずらした影を付け、罫を引く動きを筆の線にする
• 運営者は、ヘッダーを置く案、パンくずと末尾のリンクで移る案、フッターだけに置く案を比べ、ヘッダーを置く案を選んだ。
• 運営者は、ヘッダーのロゴを「fukuemon.dev」の文字ではなく、イントロの署名にすると決めた。署名の高さを 24px、32px、40px で比べ、40px を選んだ。
• 署名の SVG は、運営者の自筆に差し替えられる作りにしている。

Decision¶

全てのページに、イントロと同じ署名をロゴにしたヘッダーを置く。 ナビには「記事」と「プレイグラウンド」の 2 つを並べる。

• ヘッダーの左に、イントロと同じ署名の SVG を、高さ 40px のロゴとして置く。ロゴは / へリンクし、読み上げの名前は「Fukuemon」にする。
  • 署名の SVG のファイルは、イントロとヘッダーで 1 つにする。自筆の署名に替えると、両方が替わる。
  • 最初の訪問の左下の署名は、イントロの間だけ出す。ヘッダーのロゴは、全てのページで出す。
  • 最初の訪問のトップでは、イントロが終わってからヘッダーを出す。イントロは画面の全体を使い、ほかの内容と並ばないためである。
• ヘッダーの右のナビに、「記事」（/articles）と「プレイグラウンド」（/playground）を置く。
  • トップがプロフィールで、ロゴがトップを指すので、「筆者について」の項目は置かない。
  • 検索の欄は置かない。
• ナビの今いるページの印は、リンク先そのもののページと、その下のページ（記事の一覧の下の記事など）に付ける。
  • 読み上げには、リンク先そのものでは aria-current="page"、その下のページでは aria-current="true" を渡す。記事のページで、「記事」を今のページと伝えないためである。
  • トップでは、ロゴに aria-current="page" を付ける。

Considered Options¶

Consequences¶

Positive¶

• どのページからも、トップ、記事の一覧、プレイグラウンドの一覧に移れる。
• 自筆の署名に替えると、イントロとヘッダーのロゴが同時に替わる。

Negative¶

• トップの庭の上にヘッダーが重なる。
• 欧文の筆記体のロゴは、明朝の見出しと墨の罫の版面の中で、ここだけ洋風に見える。
• 幅 360px 以下では、ナビがロゴの下の 2 段目に折り返す。