flaticonの使い方解説!商用利用のクレジット表記はどうやる?

フラットにデザインされたアイコンはサイト内、アプリへのボタン、プレゼン資料など様々なところで活用できますが、自分好みなものを探すのは結構大変。

そんな方にお勧めなのがflaticonというサイトです。

flaticonのアイコンの一例

flaticonには、このようなデザイン性がよく、センスにあふれたかっこいいアイコンが580万以上も掲載されています。

そこでこの記事では、無料で商用でも利用可能なフラットデザインアイコンサイトであるflaticonの使い方をまとめました。

この記事を読むことでflaticonの使い方をマスターし、自分好みで用途にマッチする画像を検索・編集・保存することができるようになります。

flaticonの使い方1:アイコンを探す

flaticonのサイトトップ画面

flatcionは海外のサイトなので基本的にすべて英語です。以下URLからアクセスできます。

URL:https://www.flaticon.com/

フラットアイコン系のサイトはicons8など色々ありますが、flaticonはどれもクオリティが高く掲載されている画像数も膨大なのがメリットの反面、自分好みのアイコンを探すのは大変です。

そこで大事なのが、flaticonの使い方としてメインとなる検索パターンを押さえるということです。

キーワードを指定して探す

flaticonのメインの使い方はキーワード検索です。

flaticonを日本語で検索した場合

例えば家のアイコンを探したい場合、次のように検索窓に「家」と入力して検索をすると、次のように家に関連する画像が結果として表示されます。

flaticonを家で検索した結果

この例では「家」というキーワードを元にflaticons内で自動的に「home」に変換して検索した結果が表示されたためうまく検索できましたが、このようなケースは稀です。

ほとんどの場合は日本語でキーワードを入れても結果無しと表示されますので、基本的にキーワードは英語で入力するようにしましょう。

アイコンパック(Icons packs)から探す

flaticonにはアイコンパック(Icons packs)という、画像を種類やカテゴリーごとにグループ化したものが用意されています。

自分の求める画像を探す方法の2つ目としては、アイコンパックから検索するという使い方があります。

アイコンパックで検索をするには、まず以下のURLにアクセスします。

https://www.flaticon.com/packs

アイコンパックでの検索画面

すると上記のような画面が表示されますので、ここから目的のファイルを探していきます。

検索窓の左側が「Icons packs」となっているのがポイントで、この状態で検索窓にキーワードを入れるとアイコンパックに対して検索が行われます。

flaticonの検索窓左側のIcons packs

アイコンの色や形のタイプから探す

flaticonの検索結果画面では、より簡単に検索できるようにアイコンの色や形のタイプで絞り込めるオプション機能が用意されています。

ここをうまく活用することで、キーワードを入れることなく自分が欲しいデザインのアイコンパックを一覧表示することができ、目的に近い画像を見つけやすくなります。

Icons packs検索時のオプション

<色指定>
Black(黒ベース)、Color(カラフルなもの)、Gradient(グラデーションなもの)

<形指定>
Outline(枠線)、Fill(塗りつぶし)、Lineal color(線形色)、Hand Drown(手書き)

<Flaticon's Choise>
flaticonオススメかどうか

<表示順>
Popular(人気)、Recent(最近)

まず色や形で大まかに自分の求める画像の傾向を絞り、そのうえでキーワードを指定して検索するといった使い方をするとよいのではないでしょうか?

stickersから探す

flaticonで用意されている画像は、おおきく「icons」と「stickers」の2種類に分かれています。

これまでご紹介した使い方はiconsに対して検索する方法でしたが、ここでご紹介するのは「stickers」に対して検索をするという使い方です。

iconsとstickersの違いは画像を見ればわかるのですが、大まかにいうとstickersのほうがiconsより細かく、動きがある画像となっています。

flaticonのStickersの例
Stickersの例

stickersに対して検索する場合は以下URLをクリックします。

https://www.flaticon.com/stickers

flaticonのstickersの検索画面

ポイントは検索窓の左側が「stickers」となっている部分です。こうなっていることでstickersに対して検索が行われます。

Stickersに対して検索する場合

検索の使い方はiconsと同じなので、stickers単体、stickers packs の両方に対しての検索が可能です。

flaticonの使い方2:アイコンを編集する

flaticonでは画像をそのまま保存することはもちろん可能ですが、編集もすることができます。

ここではアイコンを編集する使い方を解説します。

アイコンをクリック後に編集画面を表示

まず、検索結果の画面からダウンロードしい画像をクリックします。

flaticonをAnimalsで検索した結果

すると次のように画像が拡大表示されたウィンドウが表示されますので、その中の「Edit icon」をクリックします。

flaticonの画像クリック後

するとエディターが表示されます。

flaticonのエディター画面

補足

エディターを開いた際に次のようなメッセージが出た場合は、ログインをしてから操作を行ってください。

エディタークリック後の画面

編集画面の使い方は簡単で、画像の左側にある「Colors」「Display」「Shapes」から行います。

flaticonのエディター画面左側の編集領域

色の変更方法

まず、「Select a color from the icon」の部分で、画像内の変えたい部分の色を選択します。

(ここではゾウの左側の牙の色部分をクリックしています)

flaticonの色変更方法

次に「Cohhse a new color」のカラーパレット部分をクリックします。

するとカラーパレットが表示されますので、変えたい色を選択すると画像に反映されます。

flaticonの色変更後

色はパーツごとに決まっているので、画像によっては数多くの色が表示されます。ただし、パーツごとに色を変えていくような流れなので、使い方はとっても簡単ですね。

表示形式(大きさ、位置、回転・反転)の変更方法

編集画面左側から「Display」をクリックすると次のように表示形式を変更するパーツが表示されます。

Scale:拡大・縮小
Move:画像の位置を上下左右にずらす
Rotate:画像の回転
Flip:左右反転、上下反転

表示形式も使い方としては直感的に行えます。

アイコン背景の形の変更方法

編集画面左側から「Shapes」をクリックすると次のようにアイコン背景の形を変更するパーツが表示されます。

flaticonの画像の形の変更パーツ

「Select a shape」の部分に4タイプ表示されますので、好きなタイプをクリックして形を変更します。

None:通常
Circle:円囲い
Rounded Square:四角囲い(角が丸角)
Square:四角囲い

None以外をクリックすると拡大率と背景色の指定をすることができます。

flaticonで丸背景に色を付けた場合

flaticonの使い方3:アイコンのダウンロード

最後にアイコンをダウンロードします。

ダウンロードも直感的な使い方ができます。

画像右側の緑色のボタンではPNG形式の画像としてダウンロードが可能です。サイズは7種類(16px、32px、64px、128px、256px、512px)から選択可能です。

SVGボタンの横のアイコンをクリックすると画像がクリップボードにコピーされます。

PNGボタンをクリックすると次のようなダウンロードウィンドウが表示されます。

アイコンのダウンロードウィンドウ

プレミアムで会員登録している場合は左側、無料で使う場合は右側のボタンをクリックします。

flaticonの商用利用とクレジット表記

flaticonは無料で、商用でも利用可能です。

クレジット表記についてはプレミアムで会員登録している場合は特に不要ですが、無料で使う場合はクレジット表記は必要です。(ダウンロード画面からHTMLをコピーできます)

flaticonの使い方まとめ

flactionの使い方についてをご紹介しました。

flactionは様々なアイコンが用意されているので、自分が欲しいものをこの使い方を参考に探してみてください。

コメントを残す

CAPTCHA


Twitterでフォローしよう