サイトデザインを、色で着せ替える

できること

「配色は決まったけれど、実際のサイトに乗るとどう見えるのか」——そこを埋めるのが Themebox です。ジャンル別に作り込んだ18種類のサイトデザイン（UI・アニメーション込み）を、配色プリセットをタップするだけで即座に着せ替えてプレビューできます。すべての色はCSS変数で管理しているため、レイアウトはそのままに配色だけを差し替えられます。デスクトップ／モバイルの表示も切り替えられ、レスポンシブの見え方をその場で確認できます。

気に入った配色になったら、「HTMLをダウンロード」で単体ファイルとして保存できます。書き出されるのは外部依存のないHTMLで、ブラウザで開けばそのまま表示・アニメーションします。自作サイトやLPのたたき台としてそのまま使えます。プレビューも書き出しも、すべてブラウザ内で完結します。

配色そのものを作りたいときは、姉妹ツールの配色ガチャやカラー設計ツールで作った色を、そのままThemeboxで実際のデザインに乗せて確認できます。

デザインの種類

数を並べるより、一つひとつを作り込む方針で18種類、それぞれ4配色ずつ（合計72通り）を用意しています。写真を使うデザインは、ダウンロード時に画像もHTMLへ埋め込むため、単体ファイルのままオフラインで表示できます。

• 実写＋モーション：太陽系（実際の公転周期比で八惑星が巡る）、日の出（雲海がなびき、夜明けが進む）、オーロラ（リボンが揺らぐ夜空）、海と月（潮が満ち引きする）、雨の森（雨と霧が流れる）、火山観測（火の粉が舞い、微動を記録する）。いずれも写真の上にcanvasの動きを重ねています。
• ジャンル系：SaaSランディング、ポートフォリオ、カフェ、マガジン、ホテル、キッズ。
• スタイル系：和モダン、モノトーン、サイバーパンク、サイケデリック、派手めネオン、ミニマル。

それぞれに、そのスタイルに合った動きを組み込んでいます。派手な演出とおとなしい佇まいを混ぜ、全体が一色に偏らないように配分しています。

使う場面

• サイト・LPの雰囲気づくり：ジャンルに合ったデザインを選び、配色を当てて完成イメージを掴みたいとき。
• 配色の実地確認：決めた配色が、実際のUIに乗るとどう見えるかを確かめたいとき。
• クライアントへの提案・比較：同じデザインで配色違いを並べて見せたいとき。
• コーディングのたたき台：CSS変数で色を整理したHTMLを出発点にしたいとき。

使う流れ

ジャンルを選び、配色プリセットをタップするとプレビューが着せ替わります。デスクトップ／モバイルを切り替えて見え方を確認し、気に入った配色のまま「HTMLをダウンロード」で単体ファイルを保存します。?d=付きのURLで、特定のデザインと配色を直接共有することもできます。

確認事項

掲載しているデザインは、実際のサービスやブランドとは無関係のオリジナルのモックです。ダウンロードしたHTMLは自由に改変してお使いいただけますが、公開・配布の際はご自身の内容に差し替えてご利用ください。読みやすさが重要な用途では、文字色と背景色のコントラストを実際の画面で確認することをおすすめします。