おいしそうです

TailwindCSSには角丸(CSSのborder-radiusプロパティ)がデフォルトで用意されています。 そのいくつかのバリエーションだけでもカードの形状に違った印象を与えることが簡単にできます。

ちょっとここで食べ物、例にラーメンのカードUIで一番おいしそうな形状は?について考えてみます。

おいしそうです 上図の左はまったく角丸がない状態、これは食品などとは関係なくお固い印象を与えます。

と、言ってしまうとネガティブな意味に捉えられがちですがそうではなく、堅実で冷静でとても真面目な印象を受ける、と言ったほうがよいかもしれません。

上図の真ん中は border-radius: 0.75rem の角丸、さらに右側は border-radius: 1.5rem;となり、一般的な印象としては右に行けば行くほど柔らかい印象を持たれやすいのは多くの意見から一般的な認識とされています。

このように食品を扱うことで大切な「おいしそう」を伝えるための思考をめぐらせてみましょう。

保守や運用面で懸念されること

このようなアイデアは個性的ではあります。どんぶりが丸いという着想から写真を丸くしてみたという試みはおもしろいですが、実用には少し注意が必要です。 おいしそうです

こういった表現だと以下のような理由で再利用が難しいコンポーネントとなる可能性があります。

  1. 今後も丸い領域で収まりの良い商品の写真ばかりを取り扱うかはわからない、つまり不確実性が高い
  2. 個性的な形状なのでコンポーネントの管理コストが発生する
  3. 閲覧者に対し個性的な形状に特別な意図を感じさせてしまう

1.に関しては例えば焼き魚のような横長の写真が使いづらいという点です、正方形には収まりにくい写真には適さないコンポーネントです。
2.や3.はこのような個性ある形状は他のジャンルの製品のカード(例えば定食など)のバリエーションも検討しなければならない可能性があり将来の運用面での不安要素が生まれてしまいます。個性が強ければ再利用が目的のコンポーネントにしにくくなります。

無意味な色使いは禁物

おいしそうです

たまにカードUIの上部に色のついた枠を設けることがありますが、色の持つ意味が情報を遮ってしまう可能性があり、このような装飾はかなり紛らわしさの原因になる可能性があります。

例えば危険色である赤が装飾されていると、まるで品切れのように感じる人もいるようです。
それでも「赤は食欲をそそる色だ」と主張する人もいますので、リスクと一緒に判断することになるでしょう。