ぱぱっとのデザインガイド

• 広告なし

  バナーも動画広告も置きません。作業の邪魔になるものを画面に出しません。

• アップロードなし

  画像やファイル、入力した文字は、使う人の端末の中だけで処理します。フォントやライブラリも同梱し、使っている間に外のサーバーへ読みに行きません。

• 登録不要

  アカウントもインストールも要りません。開いたらすぐに使えます。

• ぱぱっと終わる

  1つの道具は1つの作業に絞ります。みんなが使う機能は入れ、めったに使わない機能は入れません。

Hoshimado 自身の決まりは、Hoshimado のデザインガイドにあります。

• 「です・ます」で、短い文にします。1つの文には1つのことだけを書きます。
• 専門用語や見慣れないカタカナ語は避け、ふつうの言葉に言い換えます。
• ボタンは、押すと何をするかを動詞で終えます（「ファイルを選ぶ」「PDFをダウンロードする」）。タブや切り替えの選択肢は名詞のままにします（「PNG」「縦向き」）。
• 説明には、画面に出ている言葉をそのまま使います。ボタンの名前と説明の言葉を、一字一句そろえます。
• エラーの文には、何が起きたかと、どうすればいいかを書きます（「その日付はありません。年・月・日を確かめてください。」）。
• 「！」と絵文字は、画面の文言に使いません。
• できないことも隠さずに書きます。根拠のない最上級（「最速」「最高の」）や安心させる言葉より、「どこにも送られません」のような事実を書きます。
• 文言は10言語で書き、日本語を正とします。訳は直訳にせず、その言語で自然な言い方にします。

• 色は変えずに使います。明るい背景には文字が黒に近い版、暗い背景には文字が白に近い版を使います。
• サイトの中では、ロゴを描く部品（Logo）を使います。色はトークンから取るので、ライトとダークで自動で切り替わります。

• --bgページの背景ライト#fffcf6ダーク#17140f
• --surfaceカード・入力欄・手順の箱ライト#ffffffダーク#201c16
• --surface-hoverカーソルを乗せたとき・控えめな面ライト#fff6e6ダーク#2a241b
• --fg本文と見出しライト#26211bダーク#f3eee6
• --muted補足・注記・控えめな文字ライト#6b6157ダーク#aaa093
• --line罫線・カードの枠ライト#ece4d6ダーク#342e25
• --control入力欄・切り替え・線のボタン・色の丸の輪郭ライト#998c7eダーク#776d5f
• --sliderスライダーのつまみと溝ライト#c97a00ダーク#f7b13c
• --accent主なボタン・選んでいる印・完了の印ライト#f5a524ダーク#f7b13c
• --accent-strongフォーカスの輪郭・リンク・オンの印の文字ライト#9c5e00ダーク#f7b13c
• --accent-fgオレンジの上の文字ライト#2b1a00ダーク#2b1a00
• --gain収支のプラスライト#2e7d32ダーク#74d27a
• --loss収支のマイナス・エラーの文（text-danger）ライト#c0392bダーク#f4806f

• オレンジ（accent）で塗るのは、主なボタン・オンのスイッチ・手順の番号・選んでいるものの印です。飾りには塗りません。
• 濃いオレンジ（accent-strong）は、フォーカスの輪郭、フッターの「すべて見る」のようなリンク、オンの印の文字に使います。エラーには使いません。
• エラーの文は赤（text-danger。収支のマイナスと同じ色）にします。
• 入力欄・切り替え・線のボタン・色の丸の輪郭は control、カードや区切り線は line で描きます。
• スライダーだけは slider の色で塗ります（accent-strong だと、まだ動かしていない側の溝が背景と 3:1 に届かないため）。
• オレンジで塗った主なボタンは、1つの手順に1つだけにします。
• 色は CSS のトークンで書きます。トークンで書けば、ライトとダークの両方に効きます。

• M PLUS Rounded 1c見出し（日本語と、ラテン文字・キリル文字の言語）
• Noto Sans JP本文（日本語と、ラテン文字・キリル文字の言語）
• Noto Sans KR・SC・Arabic韓国語・中国語・アラビア語の見出しと本文

• 数字と英字は半角で書きます。数を並べる表やカウンターは、桁がそろう数字（tabular-nums）にします。
• スマホの入力欄の文字は 16px にします（iPhone で、入力のたびに画面が拡大されないように）。

• 4・8・16・24・32・48px の段は、要素どうしの間と、箱の内側の余白に使います。迷ったら「近い = 16、まとまり = 32」。
• 部品の中の小さな余白（札の上下、ボタンの左右など）は例外で、2・6・10・12px などの段の外の値も使っています。
• ページの幅は最大 1152px、読み物は 672px で折り返します。左右の余白はスマホで 16px です。
• 360px（できれば 320px）の幅でも、横にはみ出さないようにします。

• ページを移るときは、中身が横から少しスライドしながら出ます（0.2〜0.3 秒）。戻るときは反対側から出ます。
• 画面の色を切り替えるときは、前と後の画面を 0.3 秒で重ねて入れ替えます。
• 保存したときのお知らせは、下から出て、下へ消えます。
• 使い方の動画は、画面に見えている間だけ再生し、外れたら止めます。
• 端末で「視差効果を減らす」を選んでいるときは、動きを止め、すぐに結果を出します。

• PrimaryButton手順の大事なボタン。オレンジは1つの手順に1つだけ
  ファイルを選ぶ
• SecondaryButton主なボタンの下に置く、線のボタン
  まとめてコピーする
• SmallButtonそばに置く小さな操作（コピー・元に戻す）
  元に戻す元に戻す
• IconButtonアイコンだけの丸いボタン。読み上げの名前を必ず付ける
• SegmentedControl2〜4個から1つを選ぶ切り替え

  形式

  PNGJPGWebP
• Switchすぐに効くオン・オフ
  元の大きさのまま保存
• ToggleButton狭い帯に並べるオン・オフ。オンはオレンジの枠と印
  キーを名前順に並べる
• TextField1行の入力欄。見出しは欄の上に置く
  名前
• ColorSwatchesよく使う色の丸と、ほかの色を選ぶ虹色の丸

  色

  ほかの色#e53935
• CardButton・CardLink全体を押せる小さなカード
  アプリとして使うホーム画面からすぐ開けます
• Badge状態を短く伝える、押せない札
  期限内期限切れ

• ツールのアイコンは、角の丸い四角の中の線の絵です。色は文字と同じで、オレンジは使いません（並べたときにうるさくならないように）。
• 変換のツールは、アイコンの中に仕上がりの形式（PNG など）を小さく添えます。
• 使い方は、手順ごとに実際の画面を撮った短い動画で見せます。PC はブラウザの枠、スマホはスマホの枠に入れます。
• 動画では、触る場所をオレンジの枠で囲みます。
• 手順の文には画面に出ている言葉をそのまま使い、どこを押すと何が起きるかを書きます。

• 文字は、どちらのテーマでも背景に対して 4.5:1 以上、操作部品の輪郭は 3:1 以上のコントラストにします。
• キーボードで操作できるようにし、フォーカスは、どの部品でも濃いオレンジの 2px の輪郭を、要素から 2px 離して描きます。
• 主な操作は 44px 以上にします。そばに置く小さな操作は 36px で（WCAG 2.2 の 2.5.8 の 24px 以上）、となりとは 8px 以上あけます。入力欄の中の × と色を選ぶ丸は 32px です。
• アラビア語など右から左に書く言語では、並びと矢印を左右反転します。
• アイコンだけのボタンには読み上げの名前を付け、状態は色だけで伝えません。
• ダークモードと「視差効果を減らす」の設定でも崩れないようにします。

• 広告・アップロード・外のサーバーへの通信が入っていない
• PC とスマホ、ライトとダーク、日本語・英語・アラビア語で見て、360px で横にはみ出さない
• オレンジの主なボタンが、1つの手順に1つだけ
• 要素どうしの間と箱の内側の余白が決まりの段で、部品は共通のものを使っている
• ボタンは動詞で終わり、「！」と絵文字がない。エラーの文は赤で、どうすればいいかが書いてある
• 10言語の文言がそろい、ボタンの名前と説明の言葉が一致している
• 使い方の手順の文を、初めての人のつもりで読んで迷わない