Open2

Web・アプリデザイン覚え書き

Neumorphism

  • 外側の影: 左上を明るく、右上を暗く(左上から右下にかけて光が当たるイメージ)
  • 内側の影: 左上を暗く、右下を明るく(同上)
  • 背景が明るすぎたり、暗すぎたりすると影が目立たないのでNG
  • border-radiusを設定しないと、角の部分の影の表現がおかしくなり不自然
  • react-native(特にandroid)ではbox-shadowの細かい設定ができないため、背面に明るい領域と暗い領域を置くことで影を表現

  • 内側の影の表現は難しそう

  • 影の表現をAdobe XDで設定するのがおそろしく面倒だった。Figma最高

アンチパターン①
「ログイン / 登録」ではなく「全編視聴する」などの文言の方が良い。ユーザはログインしたいわけではなく、コンテンツを見たいと思っているので、その要望に応える文字列の方が親切

作成者以外のコメントは許可されていません