7okenmの顔を作る。
7okenm.comは、作ったもの、試したもの、気に入ったものを残す場所。その入口になるサイト自体も、ひとつの制作物として整えている。今回は、その顔となる 7OKENM Logo の構成とサイトへの展開をまとめる。
ロゴ一式をサイトへ適用したのは、2026年9月7日の「Apply 7okenm logo system across site」というコミット。ToolsやLearnの記録と並べて、このロゴもDESIGNのBuild Noteとして残す。
シンボルとワードマークを組み合わせる。
シンボルは、太い横線から斜めに下りる部分と、内側に空きを持つ丸いアーチを組み合わせた形になっている。角に丸みを持たせ、濃色の面と背景の抜きで形を見せる。SVGでは輪郭をパスとして持ち、文字フォントを読み込まずに表示できる。
OGP画像では、左にシンボル、右に大文字の「7OKENM」を置き、その下に「Things I make, test and like.」を添えた。シンボルで印を、ワードマークで名前を、タグラインでサイトに残すものの範囲を伝える構成になっている。
このタグラインはHomeの見出しにも使っている。ロゴ画像の中とサイトの入口で、同じ言葉を共有する形にした。
色をそろえる。
現行の favicon.svg は、背景がオフホワイトの #F1F0EB、シンボルが濃色の #202D45。ヘッダーのロゴ文字も #202d45 を指定している。Web manifestの背景色とテーマ色には #f1f0eb を使う。
サイトのリンクや操作に使うアクセントブルー #2457FF は、ロゴ本体の濃色とは別の色。ロゴはオフホワイトと濃色を基本にし、操作を示す青とは役割を分けている。
小さい場所ではシンボルを使う。
faviconとApple Touch Icon、Android Chrome Iconにはシンボル単体を使っている。名前とタグラインを含むOGPとは、情報量を分けた。
サイトには favicon.svg と favicon.ico、180 × 180のApple Touch Icon、192 × 192と512 × 512のAndroid Chrome Iconを用意している。SVGは拡大縮小できる形で保持し、PNGは用途に合わせた大きさで持つ。
サイトの中へ展開する。
共通のSiteHeaderでは /brand/7okenm-symbol.svg とテキストの「7OKENM」を横に並べ、Homeへ戻るリンクにしている。ヘッダーの文字にはInter Tightを指定し、日本語用のフォールバックにNoto Sans JPを置く。OGP画像のワードマークについては、元の編集データやフォント指定が残っていないため、同じフォントだとは断定しない。
共通SEOコンポーネントからfavicon、Apple Touch Icon、Web manifestを参照し、OGPには ogp.png を使う。manifestには2種類のAndroid Chrome Iconを登録した。Homeでも共通ヘッダーとタグラインを使い、ページを移動してもサイトの名前と印を共有する。
サイトの外へ広げるなら。
現在サイトで使っているのは、ヘッダー、ブラウザや端末向けのアイコン、共有時のOGP画像。SNSのプロフィール画像、名刺、ステッカー、刺繍や衣服への展開は、今後の用途として考えられる。
これらの印刷物や衣服を制作済みという記録ではない。小さく使うときはシンボル、名前まで伝えたいときはワードマークと組み合わせるという使い分けを、サイトの外でも検討していきたい。
DESIGNも7okenmの中身にする。
CODE、TOOLS、LEARNに加えて、DESIGNも作ったものとして残す。HomeのABOUTにあるDESIGNからこの記事へ進めるようにし、SELECTEDにも7OKENM Logoを候補として加えた。
使うためのツールと、その設計や実装を読むNotes。ロゴも同じように、見た目だけでなく、どんな形でサイトに組み込んだかまで記録していく。