Design Guide

デザインガイド

Hoshimado 自身と、Hoshimado が作るすべての作品の、世界・見た目・言葉をそろえるための決まりです。

色や余白の見本は、このサイトが実際に使っている値（tokens.css）をそのまま読んで描いています。ガイドを変えれば、このページも変わります。

01Rules

世界のルール

Hoshimado のすべての表現は、この四つのルールの上に置きます。

  1. 01

    窓に灯りがあるのは、中に誰かがいるしるし。

    中は見えなくても、灯りで分かる。Hoshimado という窓には、いつも作り手がいる。だから作り手の名前を隠さない。

  2. 02

    星の中は、誰にも見えない。届くのは光だけ。

    他者の内側には触れられない。見えるのは振る舞いという光だけ。それでも、その向こうに誰かを感じてしまう。

  3. 03

    価値は星ではなく、星と星を結ぶ線にある。

    星座は線を引いてはじめて生まれる。価値は関係の中にあり、線は時間をかけないと引けない。

  4. 04

    光の消えた星は、なくなったのではない。眠っているだけ。

    作品はひとつひとつが星。止まった作品も終わりではなく眠り。いつでも光をともし直せる。

ブランドの言葉

窓に灯りがある。中に、誰かがいる。

AI が何でも作れるようになった夜に、Hoshimado は、作り手のいる窓から星を灯す。

使わない言葉最先端革新的未来を変える

02Principles

三つの原則

世界のルールを、日々のデザインの判断に落としたものです。迷ったら、この三つに照らして決めます。

透明であること

何をしているかを隠さない。できることも、できないことも、言葉にして見せる。

「ファイルはどこにも送られません」と、画面の目立つ場所に一文で書く（それが事実の作品だけ）。

静けさ

夜空のように落ち着いていて、急かさない。強調は1画面に1か所だけ。

主要ボタンは1つ、glow の光も1つ。カウントダウンや点滅で急かさない。

積み重ね

一度きりの派手さより、毎日ひらきたくなる心地よさ。どの作品も同じ夜空の下に置く。

作品が増えても、フッターの「by Hoshimado」と言葉づかいは同じにする。

03Structure

ブランドの構成

人は作品から Hoshimado へ、Hoshimado から作り手へ辿り着きます。信頼と関係が最後に集まるのは作り手個人で、Hoshimado はその窓口です。

  • 幹：作り手

    例
    takumihiguchi.com、note、X
    役割
    作る過程と考えを書く
    名前・色
    作り手の名前と、作り手のサイトの見た目

  • 枝：Hoshimado

    例
    このサイト
    役割
    作品と世界を見せる窓口
    名前・色
    このガイドの色とロゴ

  • 葉：作品

    例
    ぱぱっと、YUNA
    役割
    使う人の入口
    名前・色
    作品ごとの名前と色。署名に「by Hoshimado」
  • 作品は Hoshimado の色に塗り替えない。新しい作品の色に迷ったら、このガイドの色から始めてよい。
  • どの作品でも、言葉づかいとアクセシビリティはこのガイドに従う。

04Voice

言葉づかい

  • 「です・ます」で話す。丁寧すぎず、友人に説明するくらいの距離感にする。
  • 事実と、守れることだけを書く。根拠のない最上級や、保証できない約束は書かない。
  • 感嘆符と絵文字は UI に使わない。キャラクターが話す場面だけは、その口調を優先する。
  • ボタンは動詞で終える（「保存する」「はじめる」）。エラーは「何が起きたか」と「どうすればいいか」を一文ずつ書く。
  • 数字と英字は半角。日付は「2026年10月28日」、時刻は「6:30」。

この世界の言葉

サイトでは、次の言い方でそろえます。作品の画面の中では、その作品の言葉を優先します。

  • Hoshimado（ブランド・このサイト）

    Hoshimado での言い方
    窓

  • 作品・作品一覧

    Hoshimado での言い方
    星
    英字の見出し
    Works

  • 理念・世界観

    Hoshimado での言い方
    この世界のこと
    英字の見出し
    Rules

  • 作者・運営者

    Hoshimado での言い方
    窓の中の人
    英字の見出し
    Creator

  • ユーザーとの関係・つながり

    Hoshimado での言い方
    線

書く・書かない

プライバシー

書く

ファイルはどこにも送られません。処理はすべてこのブラウザの中で終わります。

書かない

最高峰のセキュリティであなたのデータを完全に守ります！

エラー

書く

保存できませんでした。通信が切れているかもしれません。もう一度お試しください。

書かない

エラーが発生しました（コード 500）

作品の休止

書く

ぱぱっとは、しばらく休止しています。再開するときはお知らせします。

書かない

サービスを終了しました。

名前の書き方

  • 文中は Hoshimado（頭文字だけ大文字）。日本語では 星窓 または ほしまど。
  • 全部を大文字にするのは、caption の英字の小見出しだけ。

06Endorsement

by Hoshimado

作品のサイトやアプリに入れる、Hoshimado の署名です。作品の世界を壊さず、それでいて同じ作り手だと分かることを目指します。

ぱぱっとのフッター。著作権表示の行の右端に、ぱぱっとの控えめな文字色で by Hoshimado が入っている
ぱぱっとでの置き方。色はぱぱっとの控えめな文字色（muted）
  • ロゴの中で、色を変えてよいのはこの署名だけ。作品側の「控えめな文字色」1色で塗り、Hoshimado の紺や作品のアクセント色は持ち込まない。
  • フッターの一番下の行（著作権表示の行）の右端に置く。署名の文字の高さを、隣の著作権表示の文字にそろえる（目安は高さ 16〜20px）。本文より大きくしない。
  • Hoshimado のサイトへリンクし、新しいタブで開く。
  • ヘッダーに置く、作品のロゴより大きくする、共同ロゴのように並べることはしない。

署名のファイル（SVG）

07Color

色

夜の紺と星明かりの白がブランドの顔で、そこに窓の灯り、操作の青、星の金を少しだけ足します。Hoshimado のサイトは夜の面だけで組み、トークンはいつも Dark の値を使います。Light は、昼が主役の作品（ぱぱっとなど）で使います。

夜

ファーストビューの夜空、暗い全面、ロゴと明るい面の文字、大きな色面。

  • brand-void#03050d
  • brand-deep#070c1f
  • brand-night#101a3a
  • brand-twilight#22346e

星明かり・灯り・星の光

starlight は暗い面のロゴと文字。lamp は灯りのある窓のガラスだけ。glow は1画面に1か所の強調。

  • brand-starlight#f6f1e4
  • lamp#f2c879
  • glow#e8c277
  • glow-inkLight#8a6417背景と 4.9:1Dark#e8c277背景と 11.1:1

背景

ページ／カード・ダイアログ／帯・コード。

  • surfaceLight#f7f5efDark#0b1024
  • surface-raisedLight#ffffffDark#141c3a
  • surface-sunkenLight#efece3Dark#070c1f

文字

本文と見出し／補足／注記。どれも3つの背景の上で 4.5:1 以上。

  • inkLight#101a3a背景と 15.6:1Dark#f6f1e4背景と 16.7:1
  • ink-secondaryLight#4a5578背景と 6.7:1Dark#b7bccf背景と 10:1
  • ink-mutedLight#5f6784背景と 5.1:1Dark#8a93ad背景と 6.2:1

罫と操作

罫は飾りの区切りと、入力欄・ボタンの輪郭。accent はリンク・主要ボタン・選択・フォーカスだけ。

  • borderLight#d9d5caDark#262f57
  • border-controlLight#7e869eDark#66709b
  • accentLight#3d5bd9背景と 5.2:1Dark#8fa6ff背景と 8.1:1
  • on-accentLight#ffffffDark#0b1024

状態

完了／注意／エラー。必ず言葉かアイコンを添える。

  • successLight#1c7049背景と 5.6:1Dark#5cc593背景と 8.9:1
  • warningLight#8f5c0e背景と 5.2:1Dark#e8b04b背景と 9.6:1
  • dangerLight#b93a36背景と 5.2:1Dark#f07c76背景と 7:1

面積の目安

夜の面では、おおよそ 8 割を brand-void と brand-deep、2 割弱を文字（ink 系）、1 割以下を accent にします。lamp と glow は面ではなく点として、1画面に1か所だけ使います。

使わないもの

  • accent を飾りに使う

  • lamp や glow を広い面に塗る

  • 青紫のグラデーション、ネオン、派手な星雲のイラスト

08Typography

文字

欧文は Manrope、和文は Noto Sans JP。大きさと行送りは、次の 12 のスタイルだけを使います。

  • statement52 / 72px、600世界を語る一文。Rules の冒頭

    窓に灯りがある。

  • display48 / 56px、600英字の大見出し

    Works

  • title-132 / 44px、600ページの見出し

    ぱぱっと

  • title-224 / 34px、600セクションの見出し

    92 の道具を、ひとつの手ざわりに

  • title-318 / 28px、600カードや小さなまとまりの見出し

    Information

  • body16 / 28px、400本文

    画像の変換や文章の整形を、ブラウザの中だけで終わらせる。

  • body-sm14 / 24px、400補足、表、メタ情報

    ファイルはどこにも送られません。

  • label14 / 20px、600ボタン、タブ、フォームのラベル

    保存する

  • caption12 / 18px、500注記、バッジ、英字の小見出し

    準備中

  • code14 / 22px、400コード、ファイル名、ID

    src/styles/tokens.css

  • phrase22〜32 / 1.9（画面の幅で伸び縮み）、500場面を語る一文（サイトの Rules・Creator）

    選んだ星を結んで、あなただけの星座を描く

  • prose14 / 2.1、400読み物の段落。和文が読みやすいよう行送りを広げる

    安心できる星を自分で選び、つなげていく。そうしてできた星座が、あなたの毎日にとっての「便利」と「好み」のかたちになります。

  • 欧文は Manrope、和文は Noto Sans JP。数字は Manrope のまま使う。
  • 語るときは大きな一文で語り、説明は短く添える。見出しと説明とボタンを毎回セットにしない。
  • 本文の行間は広め（body で 1.75、読み物の段落は prose で 2.1）。1行は全角 35〜40 字（measure）に収める。
  • 大きさと行送りは、この 12 のスタイルだけで決める。ページの中で個別に上書きしない。
  • 強調は太字の多用ではなく、大きさと余白で作る。

09Layout

レイアウト・余白・角丸

余白は 4px 単位で、使う段を絞ります。左右の余白はスマートフォンで space-4、広い画面で space-12 です。

余白の段

部品の内側は space-2〜4、部品どうしは space-4〜6、セクションどうしは space-16 以上。迷ったら一段広くします。

  • space-14px
  • space-28px部品の内側。ラベルと欄
  • space-312px部品の内側
  • space-416px部品の内側・部品どうし。スマホの左右の余白
  • space-624px部品どうし。フォームの項目どうし
  • space-832pxフォームの最後の項目と主要ボタン
  • space-1248px広い画面の左右の余白
  • space-1664pxセクションどうし（これ以上）

角丸

ボタンと入力欄は radius-md。写真や映像の枠は角を丸めません。

  • radius-sm6px小さな印
  • radius-md10pxボタン、入力欄
  • radius-lg16px大きな部品
  • radius-xl24pxダイアログ
  • radius-window22%アイコン型のタイル（ロゴの窓枠と同じ）
  • radius-pill999px検索欄だけ

組み方

  • 作品の一覧は、作品の映像を隙間なく敷き詰めたタイルで見せる。名前はタイルの左下に重ね、下を暗くして読めるようにする。カードの枠や影で囲まない。
  • 作品の詳細ページの写真と映像は 16:10 の枠に、冒頭の映像は横いっぱいに置く。
  • セクションの区切りは、上に border の 1px の線を1本だけ引く。線のあとは space-16 以上空ける。
  • 本文の幅は content-max（1120px）を上限に、読み物は measure で折り返す。
  • 写真や映像の枠は角を丸めない。迷ったら余白を一段広くする。

10Motion

光と動き

動きは、この世界の時間の流れ方を表します。ゆっくり、減速しながら、跳ねずに。

Hoshimado の三つの動き

灯りがともる約 3 秒、ease-out。ページで一度だけ
線が結ばれる星から星へ、一本ずつ。線が届くと次の星が灯る
星が瞬く6〜8 秒の周期で、ばらばらに

時間

  • duration-fast

    長さ
    120ms
    使いどころ
    ホバーと押下

  • duration-base

    長さ
    220ms
    使いどころ
    開閉とフェード

  • duration-slow

    長さ
    480ms
    使いどころ
    ブランドの演出だけ

  • duration-lamp

    長さ
    3200ms
    使いどころ
    灯りがともる（ページで一度）

  • duration-line

    長さ
    1400ms
    使いどころ
    星座の線を一本引く

  • duration-twinkle

    長さ
    7000ms
    使いどころ
    星が瞬く周期

光

昼は shadow-sm（カード）と shadow-lg（ダイアログ、メニュー）で浮かせます。夜は同じトークンが淡い輪郭と光に切り替わります。

Light（昼の窓）

shadow-sm
shadow-lg
shadow-glow

Dark（夜の窓）

shadow-sm
shadow-lg
shadow-glow
  • ゆっくり、減速しながら、跳ねずに。跳ねる・揺れる・回る動き、点滅で注意を引く動きは使わない。
  • 例外は、ファーストビューで作品の映像を覗く演出だけ。モザイクと、横に走るノイズの帯で「窓越しに見ている」ことを表す。
  • 動きを減らす設定のときは、すべての演出を止め、灯りと線が最初から出ている状態で見せる。
  • shadow-glow は glow と同じく1画面に1か所だけ。shadow-lamp は灯りのある窓だけ。

11Forms

フォーム

入力欄はすべて同じ見た目の約束で作ります。ラベル・欄・エラーの形と間隔をそろえます。

Light（昼の窓）

URL の形になっていません。https:// から入れてください。

Dark（夜の窓）

URL の形になっていません。https:// から入れてください。

  • ラベルは欄の上に必ず置く。プレースホルダーはラベルの代わりにせず、入力の例を書く。
  • 入力欄と選択欄は高さ 44px、角丸 radius-md、背景 surface-raised、輪郭 border-control。文字は 16px。
  • 必須が多いので、「任意」の方に印を付ける。赤い「*」は使わない。
  • エラーは入力し終えてから、欄の下にアイコン付きの一文で出す。何が足りないかと、どう直すかを書く。
  • すぐ反映される設定はトグル、2〜4個から1つはラジオボタン、5個以上なら選択欄。

12Buttons

ボタン

ボタンは、種類（主要・副次・控えめ）と大きさの段の組み合わせで作ります。共通の部品だけを使い、作品の中で見た目を書きません。

種類

  • 主要

    その画面でいちばん押してほしい操作。accent で塗り、1画面に1つだけ置く。

  • 副次

    主要と並ぶ、ほかの操作。輪郭だけで描く。

  • 控えめ

    そばに置く小さな操作や、取り消し。文字だけで描き、ホバーで地をうっすら出す。

Light（昼の窓）

Dark（夜の窓）

大きさの段

高さで決めます。迷ったら標準の 44px にします。

  • lg

    高さ
    48px
    使いどころ
    手順の最後の主なボタン（保存する・送る）

  • md

    高さ
    44px
    使いどころ
    標準。入力欄・選択欄と同じ高さ

  • sm

    高さ
    36px
    使いどころ
    そばに置く小さな操作（コピー・元に戻す・今日にする）。副次（輪郭）でも控えめ（文字だけ）でもよく、作品の中ではどちらかにそろえる

  • icon

    高さ
    44px
    使いどころ
    アイコンだけ。指でよく押す所（行を消す・全画面を閉じる）

  • icon-sm

    高さ
    36px
    使いどころ
    アイコンだけ。結果の横のコピーなど

  • icon-xs

    高さ
    32px
    使いどころ
    入力欄の中の × だけ

道具の作品では、舞台のいちばん大事な操作（回す・始める）に限って、56px の段を足してよい。

並べ方

  • ひとまとまりの操作の中は 8px（space-2）空ける。部品どうしは space-4〜6 という決まりの、ここだけの例外。
  • 入りきらないときは次の行へ折り返す。横にスクロールさせるのは、チップの列のように続きがあると分かるときだけ。
  • 主要ボタンは、手順の最後か右の端に置く。副次と控えめはその手前に並べる。

押して切り替えるボタン

押すたびにオンとオフが変わるボタンです。オンの間は accent の輪郭と淡い地で示し、状態は aria-pressed で伝えます。

Light（昼の窓）

Dark（夜の窓）

  • 文言は変えない（「太字」は押しても「太字」のまま）。状態は形と色で見せる。
  • すぐ反映される設定はトグル（スイッチ）にする。押して切り替えるボタンは、道具の表示の切り替え（太字・グリッド・ミュートなど）に使う。
  • 大きさはボタンの段に合わせる（ふつうは sm か icon-sm）。並べるときは 8px 空ける。

色を選ぶ丸い選択肢

色を一つ選ぶ部品です。直径 32px の丸を 8px 空けて並べ、ラジオボタンとして作ります。

Light（昼の窓）

カードの色

Dark（夜の窓）

カードの色
  • 見た目は 32px でも、となりと 8px 以上空けて、押し間違えないようにする。
  • 選んでいる色は、2px の輪を 2px 離して描く。どの丸にも 1px の輪郭（border-control）を付け、地に近い色（夜の面の紺、昼の面の白など）でも形が分かるようにする。
  • 色の名前を読み上げられるようにする。色だけで見分けさせない。
  • キーボードでは矢印キーで選べるようにする（ラジオボタンのふるまい）。

13Imagery

写真・映像・アイコン

checkxalertsearchdownloadlockmooncopy操作は accent
  • 作品は、実際の画面や配信を録った映像で見せる。作り込んだ広告用の映像より、使っているところをそのまま。
  • 写真は、本物の夜空、窓、部屋の明かりなど、静かで実在するもの。人物の顔を大きく出す素材写真は避ける。
  • イラストは、角丸の四角と円弧、点としての星、1px の線（星座）だけで描く。星は四芒星か小さな点だけ。
  • アイコンは線幅 1.75px、端と角を丸め、24px の枠で描く（Lucide の形にそろえる）。絵文字はアイコンの代わりに使わない。

14Accessibility

アクセシビリティ

状態には、印と一緒に言葉を添える

公開中準備中休止中

フォーカスは 2px の実線を、2px 離して

保存する
  • 文字は 4.5:1、24px 以上の大きな文字・アイコン・操作部品の輪郭は 3:1 以上。
  • キーボードのフォーカスは、focus-ring の 2px の実線を、要素から 2px 離して描く。
  • 状態は色だけで伝えない。「公開中」などの印にも必ず言葉を添える。
  • 画像には内容が分かる代替テキストを付ける。ロゴは「Hoshimado」。飾りの星や線は読み上げから外す。
  • 押せる部品は 44px 以上を基本にする。小さくするときも 24px 以上（WCAG 2.2 の 2.5.8）にし、となりの部品と押し間違えない間隔をとる。
  • 見た目が小さくても、押せる範囲は余白で広げてよい。文の中のリンクはこの限りではない。

15Checklist

公開前のチェック

作品やページを公開する前に、ひとつずつ確かめます。

  1. 世界のルールと矛盾していないか（作り手の名前が隠れていないか、保証できない約束を書いていないか）
  2. 作品の状態を「公開中／準備中／休止中」で書いているか
  3. 主要ボタン、glow、灯りのある窓は、それぞれ1画面に1つずつか
  4. 文字色はすべてトークンから選び、Light と Dark の両方でコントラストを満たしているか
  5. 入力欄にはすべてラベルがあり、エラーは色だけでなく一文で説明しているか
  6. 作品なら、フッターに「by Hoshimado」が作品の控えめな文字色で入っているか
  7. 動きを減らす設定で、演出が止まることを確かめたか