不自然、居心地の悪い awkward

気まずいデザイン

デザイナー同士の会話では、レイアウトやインタフェースの操作性について「なんとなく変だな」と感じるときに awkward がよく使われます。具体的にどこが問題かを指摘するより前に、直感した違和感を表すのに便利な言葉です。

辞書を引くと「気まずい」「ぎこちない」などの意味が出てくる通り、人との会話で沈黙が気まずいときなどに使われる言葉です。その意味から、意図を越えてネガティブすぎるニュアンスとして伝わるのが怖く、私にとっては使うのを避けがちな言葉でもありました。

しかし、形容する対象をデザインの要素にして、ウェブサイトの見出しにコピーがきれいに収まらなかったり、ボタンのアイコンがしっくりこなかったりするのを指すときに同僚が使っているのに気づき、膝を打ちました。

例文

The spacing between these elements looks awkward.
これらの要素間の余白が不自然に見えます。

The bright red text feels awkward against the pink background.
ピンクの背景に明るい赤の文字が違和感を与えています。

The rounded icon feels awkward in the sharp, angular interface.
丸いアイコンが鋭角的なインターフェースの中では浮いて見えます。

This font choice is a little awkward for the headline.
この見出しに使うフォントとしては、少し場違いな印象です。

The navigation menu feels awkward on mobile devices.
モバイルデバイスでは、ナビゲーションメニューが使いにくそうに感じます。

---

FEATURE

awkward なデザイン

awkward （気まずい、違和感のある）なデザインは、もちろんデザイナーとしては避けたい成果物の状態です。

明らかに致命的な間違いをしているものよりも見逃しやすく、個人の感覚や経験に大きく左右されやすいため、どのようなパターンがあるのかを知っておき、作業時に注意を払うことが重要です。

不明瞭な視覚的階層