アイコンと画像の見極め方

ページ上に存在する画像は、img要素で作りがちですが、ページを飾ったり、タイトルの横に表示したいアイコンやリスト横のアイコンなどはimg要素で作成するのはあまり得策ではありません。
例えば、ペー上にあるタイトルのデザインは同じケースが多いですし、リスト横のアイコンなどはすべて同じ事がほとんどです。

これらをHTML側のimg要素で作成しますと、同じアイコンでありながら、同じソースコードを何度も記述する必要があり、HTMLソースが汚くなってしまいます。
また、メンテナンスが入り、すべてのアイコンを変えないといけなくなったら該当箇所すべてを修正していかなければなりません。
非常に非効率的ですよね。

これらのアイコンをCSSで設定しておけば1か所直すだけで、該当箇所すべてが直ってしまいます。
ですからいろんな意味で画像(img要素)として用意するのか、アイコン(CSS側で設定)として作成するのかでは、大きな違いがあります。

そこで、ページ上の画像をアイコンとして作成したほうがいいのか、画像で作成すべきなのか、判断に迷うなら一度このページを読んでみてください。

1.アイコンとimg要素のどちらを使うべきか

・アイコンは文字の飾りなのでCSS担当になります。
画面上の説明は本来文字があれば伝わるのですが、文字だけだと素気ないですよね?
その為、アクセントとして画像などで文字を飾り、少し華やかにしたい、あるいは文章がどういう意味なのかを解り易くしたい、そういった時に文字に沿える画像、これがアイコンと言われてるものです。

あるいは同一のグループとして同じ画像を配置する事で見た目が解り易くするものもアイコンの類になります。

・ページ内のコンテンツの一部や閲覧者に訴えたい画像、文章の一部や説明に必要な写真などはimg要素で作るべきです。
料理紹介サイトであれば料理に関する画像や写真、お店や立地条件などの情報や画像などはimg要素で作るべきです。

文章を飾ったり目立たせたりする為のアイコン、という考え方と、閲覧者に情報を与えたい、文字の代わりに画像で表現したいという考え方は、目的が大きく違うという事を意識するといいでしょう。

2.アイコンを作る要素を正しく理解する事

アイコンを作る時、大事なのはどの要素のアイコンか、どの文章の纏まり(要素)でアイコンを作ればいいかをよく見極める事です。

例えば、タイトルの横のアイコンなのか、リストの各行のアイコンなのか、それともセクショニングコンテンツとしてのアイコンなのか、どのように対するアイコンなのかをよく考察しましょう。

特に、行単位のアイコンか、BOX単位のアイコンかを見極め、適切なアイコンを作成すると文章の骨格が解り易く、デザインやレイアウトが崩れにくく、比較的簡単に作成する事ができます。

前の記事

marginとpaddingの違い