フラットアイコンとは
フラットアイコンとはどのような特徴があるもので、他のアイコンと何が違うのでしょうか。似たものや反対の意味で使われるものと比較しながら紹介します。
フラットデザインで作られたアイコン
『フラット』とは英語で『flat』、つまり平面という意味があります。3Dではなく、シンプルな2Dのデザインのことを指しています。2012年頃からWebデザインではフラットデザインが台頭し、iPhoneやiOSにも使われたことで一躍主流となりました。
陰影などをなくして立体感がなくなったために、アイコンがより見やすく、コンテンツを探しやすくなっています。余分な装飾を極力減らすことで、洗練されたイメージのデザインが実現できるのです。
同義語や対義語
フラットデザインの同義語に、『ミニマルデザイン』（Minimal Design）があります。『フラット&ミニマルデザイン』と言うこともあり、簡略化したシンプルなデザインという意味です。
一方『スキューモーフィズム』（Skeuomorphism）は、フラットデザインの対比としてよく使われています。スキューモーフィズムは、見た目を本物のようなリアルな3Dで装飾したデザインのことです。例えばカレンダーで次のページへ移動する時、まるで本物のカレンダーをめくったようなビジュアルになるデザインなどです。
両者のデザインの良し悪しは賛否両論ありますが、現在のトレンドは明らかにフラットデザインであると言えます。
フラットデザインの特徴
フラットデザインの特徴を紹介するために、メリットとデメリットをあげていきます。これらを比較することで、フラットデザインの特徴が見えてきます。
フラットデザインのメリット
立体感をなくし、線や色、文字だけで表現するフラットデザインは、文字のフォント表現を活かしやすいというメリットがあります。色使いも、テーマカラーのみならず、さまざまなパターンを配色できるので、華やかなイメージのデザインが可能です。
シンプルなのでスッキリと見やすく、装飾の多いスキューモーフィズムよりアイコンを大きくすることもできます。以下にメリットをまとめました。
- シンプルで見やすく、分かりやすい
- 色のコントラストがはっきりして文字がよく見える
- ボタンが大きくなり、使いやすい
- 作る上でもレイアウトが簡単
フラットデザインのデメリット
iPhoneやWindowsがフラットデザインを採用した時、違和感を覚えた記憶はありませんか？立体感があったアイコンから平面的なデザインになったことで、ボタンやアイコンが認識しにくくなったという意見もあります。
デザインをシンプルにしたことで色を多用し、目が疲れたりコンテンツを見逃したりしやすいという面もあります。特に日本語のフォントはさまざまな文字の種類を組み合わせるため、きれいに揃えにくく、フラットデザインに合わないこともあるのです。
主なデメリットは以下のとおりです。
- アイコンやリンクがわかりにくい
- 色が多く、コンテンツを見逃す
- 日本語フォントがフラットデザインに合わない
フリーDLや商用利用可能なサイト
フラットデザインで作るアイコンが主流になりつつあります。いくらシンプルなアイコンとはいえ、それを自分で作るのは、手間がかかりますし、センスが求められます。
そこで、フリー素材を積極的に活用しましょう。フラットアイコンを無料でダウンロード可能で、商用利用ができるサイト紹介します。
モノクロで数が多いiconmonstr
モノクロのアイコンが豊富にある海外のサイトです。ストックの量は3500以上もあり、イメージに合うものを見つけやすくなっています。
ただし、海外のサイトなので検索は英語で行わなければなりません。それでも、視覚的に非常に見やすく直感的にわかりやすいフラットデザインが多く配布されていることが特徴です。
背景色が選択できるFLAT ICON DESIGN
クオリティの高いデザインの上、背景色をつけたり、色を変えたりできるサイトです。無料ダウンロードのアイコンは種類も豊富で、背景色を変更することにより他との差別化が図りやすいなどのメリットがあります。
また、ファイル形式もPNG、JPG、SVGなど豊富に揃っていて、とても使いやすいサイトです。
人型で人気のヒューマンピクトグラム2.0
グリーン一色で表現された、さまざまなパターンの人型ピクトグラムアイコンがダウンロードできるサイトです。非常口の人型をモデルにしており、誰もが馴染みやすくユニークなものがたくさんあります。
中には、ニッチな需要に応えたデザインもあり、思わず笑ってしまうような楽しいサイトです。
フラットアイコンの作り方
自分でフラットアイコンを作る場合、どのようにすればいいのでしょうか。デザインの流れを見ていきましょう。
デザインの決定
どのようなデザインにしようかと考える際、まずは何のアイコンを作りたいか、意図と方向性を明確にしましょう。サイトアイコンを作るのか、アプリのアイコンを作るのかによっても方向性は大きく変わってきます。
意図と方向性が決まったら、ルールを設定します。これは、コンセプトからずれないようにする決まりごとで、複数のデザインやサイト全体の雰囲気を壊さないようにする重要なポイントです。
具体的なコンセプトとルールが決まったら、ラフを描き、デザインを決定していきましょう。
Flat Icon Generatorの利用
Flat Icon Generatorとは、フラットアイコンを簡単に作れるWebサービスです。ベースの画像、背景色、陰影の度合いなどをパラメータで調整するだけなので、デザインを起こすことができなくてもフラットアイコンが作れます。
プレビューが出ているので、パラメータを動かすとその場で変化が見られ、直感的に作ることも可能です。英語表記ではありますが、誰でも簡単に操作できます。
iconionの利用
こちらもフラットアイコンを簡単に作成できる、WindowsとMac対応のデスクトップアプリです。アプリをダウンロードし、使いたいアイコンを選び、さらに目的に沿ったスタイルを選んでいきます。
スタイルはそれぞれ微調整が可能ですので、プレビューを見ながら調整してください。デザインが完成したらサイズや形式を選んで保存します。デザイン初心者でも手軽にフラットアイコンを作れるアプリです。
作り方のポイント
細かく美しい3D加工など、複雑なデザインのないフラットアイコンですが、うまく作るにはそれなりのコツが必要です。ここではフラットアイコンをデザインする上で、押さえるべきポイントを紹介します。
オプティカルグリッドとピクセルグリッド
円や四角といった幾何学の形を組み合わせた補助線のことを、オプティカルグリッドと言います。
オプティカルグリッドを使用することで、さまざまな形状のアイコンの位置を微調整できるのです。このオプティカルグリッドに作りたいアイコンの形状を当てはめることで、バランスのよいシンプルなアイコンが作成しやすくなります。
ただし、グリッド線にこだわりすぎると、良いデザインにならない場合もあるので、あくまでも補助線として使いましょう。
ピクセルグリッドは、ピクセル単位の方眼の補助線です。シャープな形状で、垂直方向や水平方向の調整が重要な場合などに利用されます。
サイズとシルエット
ほとんどのインターフェースで、24ピクセルか48ピクセルのアイコンエリアが標準となっています。アイコンを作る際には、このサイズを基準にしてデザインしていきましょう。
美しいシルエットのアイコンを作るためには、線を操作するためのアンカーポイントを最小限に抑えましょう。最小限にすることで、不自然な歪みやブレがなくなり、美しい線を引くことができます。
また、隣接している要素との間にずれがないかもよくチェックしてください。シンプルなアイコンであるからこそ、細部のこだわりが仕上がりに大きく影響します。
情報のシンプル化
フラットアイコンはシンプルであることが特徴ですから、情報は常にシンプルになるよう心がけましょう。情報の重複や、すでにわかりきっている情報を入れる必要はありません。
例えば、メールソフトに『返信』『削除』などのアイコンを作る場合、わざわざメールであることを示す情報は要らないということです。矢印や、×だけで十分に伝わります。
データにもシンプル化は必要で、デザインの見た目はシンプルにできていても、データには不要なレイヤーやグループ、クリッピングマスクなどが残らないようにする必要があります。
Illustratorなどで開いてみるとわかりやすいので、できたデザインは一度、別のエディタで開いてください。そして、不要なレイヤーやグループなどは破棄します。
これらの手順を行うことで、他の人がこのアイコンを使ったり、Webページで使用したりなどの場合に、不具合が起きることを防げます。
まとめ
フラットアイコンは最近の主流であり、視認性が高くて使いやすいことが特徴です。Webデザイナーはもちろん、デザインを起こせなくても作ることができるアプリケーションやWebサイトがあります。
フラットアイコンで大切なのは、『伝える』ためにデザインを練り、考えることです。そして、フラットデザインのシンプルさを活かして、できるだけ無駄を排除した伝わるデザインにすることです。
ポイントを把握していれば、ユーザーが分かりやすくて使いやすいフラットアイコンを作ることができるようになります。