「にじみ」のないアイコンの作り方

こんにちは。フェノメナエンターテインメント・デザインチームの新人、トウミヤです。

皆さんは「見やすいアイコンの条件」というと、どのような条件を思い浮かべるでしょうか。
「視認性の高い配色になっている」「画面のサイズに対して適切な大きさになっている」…これらももちろん重要な条件ですが、私は「にじんでおらず、はっきりしている」という条件も挙げられると考えています。

「にじみ」とは 

ここでは100%表示の時点で図形がクリアに見えておらず、少しぼやけている状態のことを指しています。
「にじみ」は画面全体を囲む線など、大きなデザインの場合は影響は少ないですが、アイコンなど小さなデザインの場合は影響は大きく、クオリティの高低に繋がります。
また、アイコンに「にじみ」が多いと、ユーザーにとってやや認識しづらいアイコンになってしまうので、UXの質に影響を及ぼすことも考えられます。

img1 左がにじんでいるアイコン、右がにじんでいないアイコン

 

では、「にじみ」のないアイコンはどのように作れるのか。
以下で私なりの手順を紹介します。

続きを読む

CSSの@supports宣言でクロスブラウザに対応する方法

css-supports

フェノメナの技術担当のレミです!

「flexboxを使いたいけど、ユーザのブラウザが果たして、それに対応しているのだろうか」と心配する開発者は少なくないでしょう。
flexboxだけでなく、あらゆる新しいCSSプロパティも全て同じ問題を抱えていて、「新しい技術は便利だし使いたいなー」という思いと、使えるユーザが制限されるのではないかという心配が共存しています。
それはもちろん、「なるべく多くのユーザに、リッチでかつ一貫性のある体験を届ける」という志し、ミッションをもつプロフェッショナルならば、少なくともそう思うでしょう。 続きを読む