01
dark.design
dark.design
黒を基調にしたWebサイトを、Agency や Software などの分類で眺められるギャラリーです。余白、写真、細い文字が暗い画面でどう置かれているかを、実装の前にまとめて見られます。色や背景を作る道具ではなく、黒背景のお手本を探すときに開きます。
サイトを見る（新しいタブで開きます）RESOURCES
参考ツール
06件
配色、背景、グラデーションを、自分の画面に載せる前に試す道具を集めています。色は見本の上で決め、背景は書き出して置き、動きはプレビューかコンポーネントで見ます。
デザイン参考のアーカイブとは別の棚です。黒背景のお手本、配色を当てた見本、波やグリッド、動くグラデーション、粒子のあるグラデーション、Reactに置く背景、の順に並びます。
02
happyhues.co
Happy Hues
配色を、見出し、ボタン、カード、イラストに当てたサンプルのまま切り替えられます。色のヘックスはクリックでコピーできます。スウォッチだけを見て決めず、背景と文字とボタンの関係まで確認したいときに使います。
サイトを見る（新しいタブで開きます）
03
haikei.app
Haikei
波、積層した波、低いポリゴンのグリッド、ブロブ、段差、ぼかしたグラデーションなどを、ブラウザ上で形と色を変えて作れます。今の無料プランは登録もクレジットカードも不要で、15種類のジェネレーターから SVG と PNG を書き出せます。ヒーローや区切りの背景を、その場でファイルにして置きたいときに向いています。
サイトを見る（新しいタブで開きます）
04
shadergradient.co
Shader Gradient
動くグラデーションを、立体のプレビューで作れます。形、色、ノイズ、速度、粒子、ライト、位置、回転を変えられ、Web上で試すほか、Figma、Framer、React コンポーネントとしても用意されています。ヒーローを静止画のグラデーションで終わらせたくないときに使います。
サイトを見る（新しいタブで開きます）
05
grainient.supply
Grainient
/粒子を乗せたグラデーション、なめらかなグラデーション、抽象的な動くグラデーション、AIで作った背景を、種類ごとに選べるカタログです。トップの件数は、ノイズ／グレインが387、スムースが466、抽象アニメーションが90、AI背景が556です。自分で描く前に、近い質感を一覧から拾うときに使います。カタログの全体は Pro として案内されています。
サイトを見る（新しいタブで開きます）
06
reactbits.dev
React Bits
React に置ける、動く背景のコンポーネントです。背景の一覧には63種が並び、ソースをコピーするか、CLI でプロジェクトに追加します。JavaScript と TypeScript、CSS と Tailwind から実装を選べます。シェーダーを書かずに、ランディングの背景を動かしたいときに開きます。
サイトを見る（新しいタブで開きます）