WEBデザイン

アイコンで女性好みのWEBサイトを作るコツ

アイコン
(このページはプロモーションが含まれています。)

アイコンってなに?

webデザイン初心者だったときアイコン画像を探すのに「アイコン」という言葉が思い出せなくて困った経験があります。

「アイコン」ではなく「ロゴ」「ボタン」「小さいキャラクター」で検索してました。

WEBデザインで「アイコン」を使うメリット

アイコン・ロゴ

「アイコン」は物事を簡単な記号であらわしたものです。WEBデザインの中でアイコンを使うことはたくさんのメリットがあります。

まず、文字の中に添えられたアイコンはそれだけで目を引きます。

ユーザーにとって注目してほしい場所にアイコンを配置することで、さりげない導線を引くことができます。

次に、アイコンはデザインの一種として機能します。文字情報だけではそっけなさをかんじてしまうメニュー・コンテンツ一覧の横に配置することで、見た目を彩ることができます。

また、アイコンは絵による表現ですので言葉や文字に依存しないという強みがあります。例えば、日本語が読めない外国人、まだ文字を習っていない子供にも意味を伝える力があります。

アイコンをWEBデザインに上手に取り入れることで、WEBページのデザイン性と機能性を同時に引き上げることができるというわけです。

WEBデザインに必要な色と配色の知識とは?

アイコンを使う方法

アイコンを上手に使う方法

WEBデザインでアイコンを使う方法は3つあります。

imgタグ

1つ目は画像としてimgタグでHTMLファイル内に挿入する方法です。アイコンの画像形式としては主にgifかpng形式が多く使われています。

しかし、画像データは色や解像度の変化に柔軟に対応できないため、高画質のPCと小型スマホが乱立する現代にはやや不向きな面があります。

アイコンフォント

2つ目はアイコンフォントを利用する方法です。アイコンフォントとはHTMLファイルの中でフォント(文字)と同じように扱えるイコンのことです。

HTMLファイル内の文字がCSSファイルによって色や大きさを簡単に変更できたのと同じように、アイコンフォントもまたCSSファイルで見た目の設定ができます。

PC版サイトではアイコンフォントをやや小さめに見せ、スマホ版サイトではタップの目印としてアイコンを大きめに表示させる、といった切替もCSSファイルを使って楽にこなせます。

SVGファイル

3つ目はSVGファイルを使う方法です。SVGファイルでは画像のデータを数値や数式で取り扱っています。拡大縮小を行っても画像の劣化が起らず、いつでもきれいに表示できます。

CSSファイルでサイズや色を変更できるフォントアイコン的メリットに加え、Javascriptでアニメーションを表現できるという強みも持ち合わせています。

また、テキストファイルで内容を見ることができ、特別な画像ソフトを持っていない場合でも扱いやすいファイル形式といえるでしょう。

アイコンの主流形式はgif,png画像→アイコンフォント→SVGと移り変わっていますので、それぞれの形式のメリットデメリットを比較しながら時代に合ったものを選んでいきましょう。

⇒GIF、Jpeg、Png、SVG。画像データの形式の違いについてまとめました

無料で使えるアイコンフォント「Font Awesome」とは?

転職・就職に有利なプログラミング教室

無料で使えるアイコンフォントとして広く使われているのが「Font Awesome」です。

WEBフォントの一種で、デバイスに依存せずに多様なアイコンを利用できる人気のサービスです。

https://fontawesome.com/

表記は英語ですが、使い方はとても簡単です。

【使い方】

  1. まずトップ画面から「Start for Free」を選び、Eメールアドレスを入力します。
  2. 「Send Kit Code」をクリックすると、入力したメールアドレス宛に認証メールが届きます。
  3. メール内の「Click to Confirm」をクリックし、パスワードや名前を登録すると、「Font Awesome」を使うためのscriptコードが表示されます。
  4. <script></script>の部分をコピーして、アイコンフォントを使おうとしているHTMLファイルの部分にペーストしてください。
    これでアイコンを呼び出すための準備が整いました。
  5. 次にFont Awesomeサイトヘッダーの検索窓から使いたいアイコンを検索します(キーワードは英語で検索する必要があります)。色の薄いアイコンは有料版でないとつかえませんので、色が濃いアイコンから選びます。
  6. 使いたいアイコンが見つかったらクリック→「Start Using This Icon」を選択します。

<i class=”fas ○○”></i>
のようなiタグが表示されるので、これをHTMLファイルの使いたい場所に貼り付ければOKです。あとはCSSファイルで色やサイズを整えてください。

該当するアイコンが見つからない時

未経験からWEBデザイナー採用

便利に使えるアイコンですが、「ここにアイコンを表示したいのに、ちょうど良いものがない!」という時もあります。

だれにでも通用するアイコンが見つからない

アイコンを選ぶには「だれにでも分かりやすいものを選ぶ」ということが重要です。

しかし、この「だれにでも」という範囲は非常にあいまいです。

例えば、スマホサイトでサイドメニューを表示するための横三本線。いわゆるハンバーガーメニューとよばれるアイコンです。

スマホになれているユーザーにとってはおなじみのアイコンですが、最近スマホを使い始めた人にとっては「この記号は何だろう?」程度にしか思われず、WEBデザインとしての機能を発揮できない可能性があります。

解決策

アイコンに文字を添える

最も分かりやすいのはアイコンの横や上下に文字をいれて何を表しているのか伝えることです。

例えば以下の画像では、「Font Awesome」のアイコンを使用していますが、免責事項やプライバシーポリシーについてのアイコンは文字無しでは何のことか分かりにくいでしょう。

アイコンと文字を一緒に表示することで、デザインとしての見た目を重視しつつ、メニューの内容が分かるようにしています。

アイコン使用例

前述したハンバーガーメニューについても、横三本線のアイコン下にMENUやCONTENTSなど「ここをタップすれば別メニューがみられますよ」という案内を加えて工夫しているサイトもあります。

アイコンを自作する

アイコンサイトでイメージにぴったりのものが見つからない場合は自作するという方法もあります。

とくにサイトのイメージを左右する「ファビコン」(ユーザーがお気に入り登録をしたときに表示されるサイトを表すアイコン)は自分で作りたいところです。

アイコンは画像制作ソフトやアイコン製作サービスで作成することができます。

例えばIllustratorではSVG形式で作成画像を保存することができます。また、フリーソフトのInkscapeをつかってもSVGアイコンを作ることが可能です。

無理にアイコン化するのをやめる

アイコンはWEBデザインにとってメリットのあるものですが、万能ではありません。何を表しているのかわかりにくいアイコンを無理に使う必要はないのです。

また、サイトの雰囲気によってはアイコンのイメージが合わない場合もあるでしょう。

例えば日本料亭の洗練されたサイトにキュートなデザインのアイコンが使われていたら、何だか変な印象を与えますよね。

アイコンはどうしても使わなければならないわけではありません。無理に使うことでWEBデザインに対しデメリットを与えることもあります。使いどころを考えることが大事です。

アイコンのまとめ

IT企業に就職した20代OL

アイコンはサイトの見た目をにぎやかにしてくれます。また、ユーザーが求める情報をイラストで表現してくれるため、サイト訪問者の導線を引くのにも役立ちます。

ただ無理にアイコンを並べると逆効果になることもあります。アイコンの意味は誰にでも通じるのか、サイトのデザインを壊していないかよく考えながら、アイコンをWEBデザインに上手に取り入れていきましょう。