このたびは、私たちツクロアに興味を持っていただきありがとうございます。
当サイトでは、ユーザーの同意を得た場合に限り、当サイトの訪問・離脱、訪問中の行動に関する統計情報の分析のため、Cookieを使用します。
詳しくはプライバシーポリシーを参照ください。
カードなどを使う場合に背景の色を暗くしますが、この方法はすでに有名なデザイン言語に私たちは従うことにします。
現実世界の太陽や照明などの光源は上にあるものとして、上にあるものほど明るくなり、背景は暗くすることで情報の重ね順を表現します。
カードの使い方を間違えると下図左のようになり、これでは地面が凹んで見えて、地面の上にカードが重なっているように見せるには下図右のシャドウの付け方が正しいと言えます。

このようにカードのほうが明るく、背景が比較的暗くなると自然に見えます。

ライトモードの場合、10レベルあるグレーのうち、原則1番目もしくは2番目に明るいグレーを背景色として使うことにします。

ダークモードの場合も基本的な考え方は同じで上にあるものが明るくなります。
しかし背景となる色が完全な黒であればカードのシャドウが見えなくなるので、10レベルあるグレーのうち一番暗い色を選び階層を感じられやすい配色にしています。

ツクロアでは、UX/UIデザインと開発支援に関する無料相談を受け付けております。
要件が固まっていなくても、お困りごとベースでも構いません。 良い製品開発をご一緒できるように、私たちも親身になってご提案したいと考えております。
このたびは、私たちツクロアに興味を持っていただきありがとうございます。
当サイトでは、ユーザーの同意を得た場合に限り、当サイトの訪問・離脱、訪問中の行動に関する統計情報の分析のため、Cookieを使用します。
詳しくはプライバシーポリシーを参照ください。