ニューモーフィズムジェネレーター

背景色を選ぶだけで、ライト・ダークシャドウを自動計算。距離・ぼかし・強度・形状を自由に調整して、CSSをワンクリックでコピーできます。登録不要・完全無料。

設定

<label class="nm-label">背景色</label>
<div class="nm-color-row">
  <input type="color" id="nm-bg" value="#e0e5ec" oninput="nmUpdate()">
  <span class="nm-color-hex" id="nm-bg-hex">#e0e5ec</span>
</div>

<div class="nm-divider"></div>

<label class="nm-label">シャドウタイプ</label>
<div class="nm-seg" id="nm-shape-seg">
  <button class="active" onclick="nmShape('flat',this)">フラット</button>
  <button onclick="nmShape('concave',this)">凹面</button>
  <button onclick="nmShape('convex',this)">凸面</button>
  <button onclick="nmShape('pressed',this)">押下</button>
</div>

<label class="nm-label">要素の形</label>
<div class="nm-seg" id="nm-el-seg">
  <button class="active" onclick="nmElShape('card',this)">カード</button>
  <button onclick="nmElShape('button',this)">ボタン</button>
  <button onclick="nmElShape('circle',this)">サークル</button>
</div>

<div class="nm-divider"></div>

<label class="nm-label">サイズ <span class="nm-val" id="v-size">160px</span></label>
<input type="range" id="nm-size" min="60" max="300" value="160" oninput="nmUpdate()">

<label class="nm-label">シャドウ距離 <span class="nm-val" id="v-dist">10px</span></label>
<input type="range" id="nm-dist" min="1" max="50" value="10" oninput="nmUpdate()">

<label class="nm-label">ぼかし <span class="nm-val" id="v-blur">20px</span></label>
<input type="range" id="nm-blur" min="1" max="100" value="20" oninput="nmUpdate()">

<label class="nm-label">強度 <span class="nm-val" id="v-int">0.25</span></label>
<input type="range" id="nm-int" min="1" max="50" value="25" oninput="nmUpdate()">

<label class="nm-label">角丸 <span class="nm-val" id="v-rad">16px</span></label>
<input type="range" id="nm-rad" min="0" max="60" value="16" oninput="nmUpdate()">

プレビュー

ニューモーフィズムの仕組み

ニューモーフィズム（ソフトUI）は、1つの要素から2方向のシャドウを投影することで奥行きを表現します。背景色より明るいシャドウを左上に、暗いシャドウを右下に配置するのが基本です。要素の背景色とコンテナの背景色を必ず同じ色にすることがポイントです。

設計のコツ：

背景色は中間的な明度が最適（極端に暗い・明るい色は不向き）
強度は 0.15〜0.30 が自然に見えるベスト範囲
押下タイプはクリック時・フォーカス時の状態に活用
凹面・凸面はグラデーションで立体感を強調
小さな要素にはニューモーフィズムの効果が出にくいため、ある程度のサイズが必要

Web制作の経費管理もかんたんに

freee会計なら、デザインツール・サーバー費用の経費精算もクラウドで一元管理。 freeeを無料で試す →

設定

ニューモーフィズムの仕組み#

関連ツール#

ニューモーフィズムの仕組み

関連ツール