# ヘルプ ## Windmachine とは {#about} Windmachine は、指定した色から Tailwind 互換の11段階の色を組み立てるツールです。 組み立てられたパレットはブラウザの中だけに保存されます。保存は自動で行われ、画面に保存ボタンはありません。アカウントは要らず、パレットがサーバーへ送られることもありません。ブラウザのデータを消すとパレットは失われます。 パレットの内容は共有 URL でほかの人や端末と共有できます。 このヘルプは [Markdown 版](/help.md) でも読めます。 ## 概念 {#concepts} ### パレット パレットは、複数のランプをまとめて1つの名前で保存する単位です。 ### ランプ ランプは1つのキーカラーから生まれた11段階のまとまりです。 段の番号は等間隔ではありません。50 と 100 のあいだ、900 と 950 のあいだだけが 50 刻みで、ほかは 100 刻みです。明度はこの番号にそのまま比例します。この2か所だけ隣り合う段の幅がほかの半分になるのは、そのためです。 ### シェード シェードは、ランプを組む11段階のうち1段階を指します。 キーカラー以外の10段階は、色相と彩度だけを保存しておき、明度と HEX は表示のたびに計算します。 ### キーカラー キーカラーは、ランプの起点として指定する色です。11段階のうち、色を決めるのはこの1つだけです。 500 は、指定したキーカラーそのものです。スペクトルの上では、500 だけが菱形のハンドルで描かれます。ほかの段をどれだけ動かしても 500 は変わりませんが、明度×色相スペクトルで 500 のハンドルそのものを動かすと、キーカラー自体が新しい色に置き換わります。 ### スペクトル スペクトルは、色を2つの軸で並べて見せる面です。軸に使うのは明度・色相・彩度のいずれかで、面の上のハンドルがシェードを表します。 明度を軸に持つスペクトルでは、明度は必ず横軸で、左が明るく右が暗くなります。縦軸に明度を使うスペクトルは1つもありません。明度レンジのスライダーも左が明るい側です。 彩度×色相スペクトルはこの原則の例外ではありません。明度を軸に持たず、選択中のシェードの明度に固定した面を描くためです。 ## パレット一覧 {#palette-list} パレット一覧は、アプリを開いたときに最初に出る画面です。ヘッダーのロゴかアプリ名を押せば、どの画面からでもここへ戻れます。 保存したパレットがカードで並びます。カードは画面の幅に応じて1列か2列になり、2列に変わる幅はパレット詳細より狭い側です。カードは上が色見本で、その下の行に名前とアイコンが並びます。 画面の上端には、どの画面でも同じ帯が出ます。ページをスクロールしても、帯は離れずに残ります。パレット詳細でも同じ帯が出るので、帯の中身はこの章がまとめて扱います。 ### ロゴとアプリ名 帯の左にはパンくずリストが出ます。先頭はロゴとアプリ名で、押すとパレット一覧へ戻ります。パレットを開いているあいだは、右にはそのパレットの名前が続きます。このとき画面が狭いと、名前に幅を譲ってアプリ名が見えなくなります。パレット一覧では、どの幅でもアプリ名が出たままです。 ### ヘルプ ヘルプ アイコンを押すとこのヘルプが開きます。 ### ダークモード ダークモードに切り替え アイコンを押すとダークとライトが入れ替わります。アイコンは押した先を示す形です。 この設定はアプリ全体のもので、ブラウザに保存されます。OS の設定を見るのは、そのブラウザで初めて画面を描くときの1回だけで、以後は OS 側が変わっても追従しません。テーマを切り替えても、パレットの色そのものは変わりません。変わるのは画面の背景や文字の色です。 ### 色見本 カードの上は色見本です。押すとそのパレットが開きます。カードの中でパレットが開くのはここを押したときだけで、下の行のどれを押しても画面は移りません。 ### パレット名を変える パレット名を押しても 名前を変更 アイコンを押しても、その場で書き換える状態になります。 確定するのは、Enter を押したときと、入力欄の外を押したときです。Escape を押すと取り消します。空のまま確定しようとすると、元の名前のまま入力欄が閉じます。エラーは出ません。 ### テーマを書き出す テーマを書き出す アイコンを押すと、パレットのテーマを書き出すシートが開きます。画面は移らず、一覧に重なって開きます。 ### 共有 共有 アイコンを押すと、共有 URL を作るダイアログが開きます。共有 URL そのものは「共有」の章で扱います。 ### 複製 複製 アイコンを押すと、「パレットを複製」のダイアログが開きます。名前の欄には「(元の名前) のコピー」が初めから入っていて、そのまま使っても書き換えてもかまいません。「複製」を押すと確定し、複製されたパレットが一覧に増えます。画面は移りません。 ### 削除 削除 アイコンを押すと確認が出ます。そのパレットのキーカラーもランプも調整結果も失われ、取り消せません。そこで確定すると削除されます。 ### 新規作成 画面の右下には「+」のボタンが固定されています。一覧をスクロールしても同じ位置に残ります。押すと、新しいパレットを作るダイアログが開きます。 ### 何も保存していないとき パレットを1つも保存していないあいだは、カードの代わりに案内が出て、ヘルプへの入口もそこに並びます。新規作成のボタンは、このときも同じ位置に出たままです。 ## パレット詳細 {#palette-detail} パレット詳細は、一覧でカードの色見本を押すと開きます。 パレット詳細には、パレットグリッドと3つのスペクトル、それに明度レンジのスライダーが並びます。 画面が広いときは2列になります。左の列は、上がパレットグリッドで、下が明度×彩度スペクトルです。右の列は、上が明度×色相スペクトルと明度レンジのスライダーで、下が彩度×色相スペクトルです。 狭いときは1列に縦へ積み直されます。位置ではなく名前で探してください。 ### パレット名を変える パレット名を押しても 名前を変更 アイコンを押しても、名前の編集が始まります。 確定と取り消しは一覧と同じです。 ### テーマを書き出す テーマを書き出す アイコンを押すと、パレットのテーマを書き出すシートが開きます。一覧と同じシートです。 ### 共有 共有 アイコンを押すと、共有 URL を作るダイアログが開きます。一覧と同じダイアログです。作った URL の中身は「共有」の章で扱います。 ### コントラストチェック コントラストチェック アイコンを押すと、コントラストチェックが開きます。 ### 複製 複製 アイコンを押すと、一覧と同じ「パレットを複製」のダイアログが開きます。振る舞いも一覧と同じで、「複製」を押すと確定し、複製されたパレットが一覧に増えます。画面は移りません。 ### 初期化と削除 パレット操作メニュー アイコンを押すとメニューが開き、「パレットを初期化」と「パレットを削除」が並びます。 #### パレットを初期化 手を加えた色をまとめて戻す操作です。失われるのは、ドラッグして調整した色相と彩度だけで、キーカラーと明るさの幅とパレット名は変わりません。削除と違って、パレットそのものは残ります。「初期化」ボタンで確定します。この操作は取り消せません。 #### パレットを削除 一覧の 削除 アイコンと同じ操作です。確認の中身も同じです。 ### ランプを選ぶ 色の丸とランプの名前が付いたボタンを押すと、ランプの一覧が開き、選んだランプが3つのスペクトルの調整対象になります。 ### 余白を切り替える 余白なし表示 アイコンを押すとパレットグリッドのマスが隙間なく並び、余白あり表示 アイコンを押すと余白を空けて並びます。 この設定はパレットごとではなくアプリ全体のもので、ブラウザに保存されます。 ### グリッドを書き出す グリッドを書き出す アイコンを押すと、パレットグリッドの見た目を書き出すシートが開きます。 ### キーカラーを編集する キーカラーを編集 アイコンを押すと、キーカラーを編集するダイアログが開きます。 ## パレットを作る {#create-palette} パレットはパレット一覧から作ります。新規作成のボタンを押すと、「新規パレットを作成」のダイアログが開きます。 ダイアログで決めるのは、パレット名とキーカラーの2つです。 ### パレット名 パレット名は必須です。空のまま「作成」を押すと「パレット名を入力してください」と出て、パレットは作られません。 ### キーカラー キーカラーは1行に1つずつ並びます。1行は、カラーピッカーと、HEX の欄と、名前の欄でできています。行の順番は、並べ替え アイコンをドラッグして変えられます。 #### キーカラーの追加 行は「+ キーカラーを追加」で増やします。最大99行までで、上限に達すると「+ キーカラーを追加」が押せなくなります。そのことを告げる文言は出ません。 #### キーカラーの削除 削除 アイコンを押すと、その行が減ります。1行より少なくはできません。 #### カラーピッカー カラーピッカーはブラウザが用意しているものです。見た目も操作も、使っているブラウザによって違います。 #### キーカラーの名前 名前欄が空のままなら、HEX を確定した時点で近い色名が自動で入ります。すでに名前が入っている行は、自動で付いた名前でも手で書いた名前でも上書きされません。付け直すときは 名前を HEX から付け直す アイコンを押します。 ### プリセット 「プリセット」を押すと、Tailwind CSS の有彩色17色で行を丸ごと置き換えます。入力済みの行があれば「入力済みのキーカラーを置き換えますか?」と確認が出ます。プリセットが入れるのは各色の 500 だけで、ほかの段はこのアプリがそのキーカラーから作ります。そのため、オリジナルとは異なる値になります。 ### 作成する ランプができるのは「作成」を押したときです。入力しているあいだにプレビューは出ません。送信できるのは、全ての HEX が有効になってからです。一部の行だけを先に作る方法はありません。 ### ダイアログを閉じる ダイアログを閉じると、入力は確認なしに捨てられます。「キャンセル」も、「×」も、Escape も、ダイアログの外側を押すのも同じです。 ## キーカラーを管理する {#key-colors} キーカラーの編集はパレット詳細から開きます。キーカラーを編集 アイコンを押すと、「キーカラーを編集」のダイアログが開きます。 ここまでの章と違い、このダイアログはすでにあるパレットを書き換えます。反映されるのは「保存」を押したときです。 ### キーカラー キーカラーは1行に1つずつ並びます。1行は、カラーピッカーと、HEX の欄と、名前の欄でできています。末尾の空の行は、キーカラーを足すためのものです。 #### キーカラーの追加 空の行に HEX を入れて、Enter を押すか欄の外を押すと、行が1つ増えます。入力しているだけでは増えません。 キーカラーは99件まで登録できます。それ以上は追加できません。 #### キーカラーの名前 名前は行の名前欄で変更できます。自動で名前が入るのは、新しく足した行の名前欄が空のまま HEX を入れたときだけです。すでにある行の HEX を書き換えても、名前は変わりません。自動の名前を付け直すときは 名前を HEX から付け直す アイコンを押します。 #### キーカラーの HEX HEX は行の HEX 欄かカラーピッカーで変更できます。 HEX を書き換えた行は、保存したときに新しい HEX から11段階を作り直します。そのランプに加えていた調整は、このとき失われます。名前だけを変えた行は作り直されません。 #### 並べ替え 行の順番は、並べ替え アイコンをドラッグして変えられます。この順番が、そのままパレットグリッドでのランプの並びになります。 ### 非表示と削除 キーカラーを減らす方法は2つあり、戻せるかどうかが違います。 #### 非表示 非表示 アイコンを押すと、そのキーカラーを非表示にします。非表示にしたキーカラーは、そのパレットを表示に使うところから外れます。パレットグリッド、スペクトル、コントラストチェック、テーマ書き出し、パレットグリッドの書き出し、共有 URL、一覧の色見本 —— どれも表示中のキーカラーだけを使います。 非表示にしたキーカラーはパレットに残っています。再表示 アイコンを押せば戻ります。 #### 削除 削除 アイコンを押すと、その行を消します。削除したキーカラーは、そのランプに加えた調整ごと失われます。非表示と違って、戻せません。 #### 最後の1つ パレットは、表示中のキーカラーを少なくとも1つ残します。表示中が1つだけになると、その行は非表示にすることも、削除することもできません。 ### 保存する 名前が空の行か、HEX が無効な行が1つでも残っていると保存できません。 ### ダイアログを閉じる ダイアログを閉じると、編集は確認なしに捨てられます。「閉じる」も、「×」も、Escape も、ダイアログの外側を押すのも同じです。 ## 色を調整する {#adjust-colors} スペクトルは3つあり、見る範囲が順に狭まります。 どのスペクトルでも、ハンドルをドラッグしているあいだずっと色が変わります。ハンドルのドラッグで動くのは色相と彩度で、明度は動きません。彩度は、その明度と色相で出せる最大の値が上限です。上限を超えてポインタを動かすことはできません。 手を加えた色は戻せます。戻せる広さは、シェード1つ・ランプ1本・パレット全体の3段階です。いちばん広いパレット全体は、「パレット詳細」の章にある「初期化と削除」の節が扱います。残る2つはこの章の中にあります。 ### 明度×色相スペクトル 表示中の全ランプを一度に描きます。数値の欄はありません。 #### ランプとシェードを選ぶ 見る範囲は選択で決まります。パレットグリッドの下にあるランプ選択のボタンは、ランプだけを変えます。パレットグリッドのセルと、このスペクトルのハンドルは、押すとランプとシェードの両方が決まります。 #### 色相を変える ハンドルをドラッグすると、そのシェードの色相が変わります。 #### キーカラーを動かす 500 のハンドルだけは別です。このハンドルはキーカラーそのものなので、動かすと影響がランプ全体へ及びます。色相は、そのランプの全ての段が同じぶんだけ動きます。明度は 500 を基準に引き直されるので、500 に近い段ほど大きく動きます。彩度は、新しい明度で出せる範囲へ畳まれます。 500 のハンドルを動かせるのは、このスペクトルだけです。 #### 明るさの幅を決める 明度レンジのスライダーで、どのランプでも 50 をどこまで明るくし、950 をどこまで暗くするかを決めます。この設定はパレット全体で1つです。ランプごとの幅はありません。 左のつまみが明るい側、右のつまみが暗い側です。 このスライダーだけは、つまみをドラッグしているあいだ色が変わりません。ただし矢印キーで動かすと、1押しごとに反映されます。 幅を変えると、全てのランプが新しい幅に合わせて調整されます。動くのは明度だけです。色相も、色域に収まっている彩度も、500 もそのままで、ランプが作り直されるわけでもありません。 ただし、新しい明るさでは出せなくなった彩度は上限の値へ抑えられ、元の値は残りません。幅を戻しても、抑えられた彩度は戻りません。 明るさが変われば、そこから出る値も変わります。コントラストチェックの比率も、テーマ書き出しの値も、新しい幅のものになります。 ### 明度×彩度スペクトル 選んだ1つのランプの11段階だけを描きます。下に出る「明度」は読み取り専用の表示です。 #### 彩度を変える ハンドルをドラッグすると、そのシェードの彩度が変わります。500 のハンドルは動かせません。 #### 生成された値と見比べる 破線は、いまのキーカラーと明るさの幅だけから決まる値、つまり手で調整していないときにハンドルが置かれる位置です。ドラッグを始める前の値ではありません。キーカラーや明るさの幅を変えると、この目印自体も動きます。 明度×色相スペクトルにも破線がありますが、別のものです。あちらはランプごとにキーカラーの色相を横へ引いた基準線で、調整の前後とは関係がありません。 #### ランプの初期化 リセット アイコンを押すと、確認のダイアログが表示されます。「リセット」で操作が確定され、そのランプでドラッグして調整した色相と彩度が失われます。ほかのランプ、キーカラー・明るさの幅は変更されません。この操作は取り消せません。 ### 彩度×色相スペクトル 選んだ1つのシェードだけを描きます。500 を選んでいるあいだは、ハンドルも数値の欄も戻すボタンも使えません。 #### 色相と彩度を同時に変える ハンドルをドラッグすると、色相と彩度の両方が動きます。破線の丸は、明度×彩度スペクトルの破線と同じものを示します。 #### 数値で入れる 下にある「色相」と「彩度」の欄は書き換えられます。入力は、入力欄を離れた時点で反映されます。 #### シェードの初期化 リセット アイコンを押すと、選択中のシェードでドラッグして調整した色相と彩度が失われます。この操作は即時に反映され、取り消せません。 ## コントラストを確認する {#contrast} コントラストチェックは、パレット詳細の コントラストチェック アイコンから開きます。「ペア比較」は、任意のシェード2つを前景・背景に指定して、WCAG 2.1 の判定を確認します。「一括比較」は、1シェードを固定し、全ランプ横断で組み合わせを一覧します。 判定は WCAG 2.1 によります。比率が 7.0 以上なら「AAA」、4.5 以上なら「AA」、3.0 以上なら「AA-L」、それに満たなければ「FAIL」がバッジに出ます。 「AA-L」は、大きな文字に向けた区分です。WCAG 2.1 が大きな文字に求める比率は 3.0 で、この区分はそれを満たしたことしか意味しません。本文の大きさの文字には足りていません。 ### ペア比較 「ペア比較」タブを開くと、最初に表示されているランプの 950 を前景、50 を背景に置いたペアが1枚用意されています。 ペアは積み上がります。「＋ ペアを追加」を押すとダイアログが開き、前景と背景のシェードを選ぶボタンが1つずつ並びます。どちらのボタンも、押すとパレットの色が表になって開きます。1行が1本のランプで、左から右へ11段階が並びます。使いたい色を押すと、その場で決まり、ボタンの表示がその色の名前に変わります。どのランプにも属さない色を試すときは、表の上の欄に HEX を直接入れて「適用」を押します。前景と背景の両方を選ぶと「追加」が押せるようになります。押すとダイアログが閉じ、カードが1枚増えます。 積んだあとのカードは編集できません。組み合わせを変えるときは、カードの 削除 アイコンで消してから選び直します。最初から用意されているペアも同じで、一度消すと開き直しても戻りません。 非表示にしたキーカラーは、前景と背景の候補に出ません。ただし、すでに積んだペアに非表示のシェードが含まれている場合は消えずに残り、非表示であることを示す印が付きます。 ### 一括比較 「一括比較」タブは、シェードを1つ固定し、表示中の全ランプの11段階と組み合わせて一覧します。固定したシェードを背景に置くか前景に置くかは、「背景」と「前景」で切り替えます。 非表示にしたキーカラーは、こちらでも固定するシェードの候補にも一覧にも出ません。 ## 書き出し {#export} この章で扱うのは、画面の「テーマ書き出し」と「パレットグリッドの書き出し」です。「テーマ書き出し」は Tailwind の設定コードを作り、「パレットグリッドの書き出し」はパレットグリッドの見た目をコードにします。 ### テーマ書き出し 「テーマ書き出し」は、パレット一覧のカードからも、パレット詳細からも テーマを書き出す アイコンで開きます。 「Tailwind v3」と「Tailwind v4」のどちらの書き方にするかと、色を「HEX」で出すか「OKLCH」で出すかを、それぞれ選びます。出力はクリップボードへのコピーだけで、ファイルにはなりません。 ### パレットグリッドの書き出し 「パレットグリッドの書き出し」は、パレット詳細の グリッドを書き出す アイコンから開きます。 書き出す形は「HTML」と「React」から選びます。出てくるのは画像ではなく、そのまま貼って使えるコードです。 こちらにはコピーに加えて「ダウンロード」があります。押すとファイルとして保存されます。ここが「テーマ書き出し」との違いです。 見た目のプレビューも付きます。プレビューのセルを押すと、そのセルの HEX がコピーされます。色の無いセルは押せません。 ## 共有 {#share} 共有 URL は、パレット一覧のカードからも、パレット詳細からも作れます。共有 アイコンを押すと「パレットを共有」のダイアログが開き、「URLをコピー」でその URL がコピーされます。 受け取った側がその URL を開くと、パレット一覧の上に「パレットをインポート」のダイアログが開きます。中身のプレビューを見て「保存」を押すと、自分のパレットとして加わり、そのままパレット詳細へ移ります。 このとき名前を変えることはできず、共有元の名前がそのまま入ります。変えたいときは、移った先のパレット詳細で変更できます。 取り込んだパレットは、共有元とつながっていません。どちらを直しても、もう一方は変わりません。 読み取れない URL を開いた場合は、その旨と「リンクが途中で切れていないか、送り主に確認してください。」という促しが出ます。プレビューも「保存」のボタンも出ません。 非表示にしたキーカラーは共有 URL に含まれません。