>共働きパパの人生をより良くするブログ

デザインが苦手でもできるアイキャッチの作り方!無料アイコンまとめもあるよ

photoshopやillustratorや使わなくても簡単に出来る、おしゃれなアイキャッチの作り方をまとめました。
ブログやオウンドメディア記事のアイキャッチだけでなく、twitterやfacebooのアイコン、ヘッダーバナーにも最適です!

アイキャッチ作成環境の準備

canvaでテンプレートをつくる

photoshopなどのツールがなくてもオンラインツールで作成可能です。

オンラインツールのオススメは「canva」。

facebookやインスタなどのテンプレートがあらかじめ用意されていて、アイコンや画像もある程度無料で使えます。(一部は有料)

参考 canvacanva

アイキャッチ用テンプレートの作り方

記事を書くたびにアイキャッチをつくるので、テンプレートを作ってしまいましょう。
慣れれば1分もかからずアイキャッチを作れるようになりますよ!

おしゃれなアイキャッチの作り方canvaの手順1ー画像サイズ指定リンクをクリック
画面右上の「画像サイズを指定」をクリック

おしゃれなアイキャッチの作り方canvaの手順2ーテンプレートのサイズを入力
作成するテンプレートのサイズを入力して、「デザインする」をクリック。
ちなみに、twitterやfacebookでシェアされた時、キレイに表示されるサイズは1200×630が良いようです。

おしゃれなアイキャッチの作り方canvaの手順3ー白紙のテンプレート完成
白紙のテンプレートが作成されました!

次は、センスの良いカラーを調べるためのツールをインストールします。

Google chrome拡張機能 「ColorPick Eyedropper」をいれる

「ColorPick Eyedropper」はブラウザ上に表示されている色のカラーコードを取得するツールです。
おしゃれな色があるけど、この色のコードは何だろう?」というときに、カンタンにカラーコードが分かるスグレモノ。

Google chrome拡張機能 「ColorPick Eyedropper」はコチラからインストールできます。

参考 ColorPick EyedropperColorPick Eyedropper

おしゃれなブログ用アイキャッチの作り方

ここからは、実際にこのページのアイキャッチを作った時の手順を例に解説します!

大まかな流れとしては、

  • 手順1
    アイコンをダウンロードする
  • 手順2
    背景のカラーコードを取得する
  • 手順3
    テンプレートの背景色を変える
  • 手順4
    テンプレートにアイコンを配置
  • 手順5
    画像をダウンロードする

という流れになります。

アイコンサイトからイメージに近いアイコンをダウンロードする

アイコンをフリー配布していただいているサイトはいくつかあります。
今回はこちら「flat icon design」さんのアイコンを使用させて頂きました。

参考 flat-icon-designflat-icon-design

記事タイトルが「3分〜」なので、砂時計アイコンを選んでみました。
ダウンロード出来る形式は

  • Aiファイル
  • EPSファイル
  • JPEGファイル
  • PNGファイル
  • SVGファイル

の5種類があります。
今回使用する「canva」では、「PNGファイル」を利用します。

おしゃれなアイキャッチの作り方canvaの手順4ーダウンロードするがぞうは512x512を選ぶ
ダウンロードするサイズは「512×512」がオススメ

仮に、ちょうどいいサイズをダウンロードして、

「ちょっとアイコンを拡大したいな」

というときに、アイコン画像を拡大してしまうと画像が粗くなりキレイにみえなくなってしまいます。

大きいサイズをダウンロードして、レイアウトを決めるときに縮小するとキレイにレイアウト出来ます!

 

おしゃれなアイキャッチの作り方canvaの手順5ーアイコンは背景なしを選ぶ
背景のありなしは、背景なしがオススメ。背景ありだと不自然にアイコンの影が切れてしまいます。
お好みの配色のアイコンを選択し、表示された画像をデスクトップなどにドラッグすればダウンロード完了です。

次に、背景色のカラーコードを取得しましょう。

カラーコードを取得

おしゃれなアイキャッチの作り方canvaの手順6ー背景ありのアイコンをクリック
先ほどの「背景あり」のアイコンをクリックします。

おしゃれなアイキャッチの作り方canvaの手順7ーColorPick Eyedropperをクリック
ブラウザ拡張機能「ColorPick Eyedropper」をクリック

おしゃれなアイキャッチの作り方canvaの手順8ーカラーコードをコピー
アイコンの背景にマウスを乗せるとカラーコードが表示されますので、コピーしておきましょう。

 

canvaで背景を作る

作成しておいたテンプレートの左側から、

おしゃれなアイキャッチの作り方canvaの手順9ーcanvaから「図形」をクリック
素材→図形を選択し、一番左上にある図形を選択します

おしゃれなアイキャッチの作り方canvaの手順10ー表示された図形をドラッグして引き延ばして、左上の小さな四角をクリック
表示された図形をドラッグして引き延ばして、左上の小さな四角をクリックします。

おしゃれなアイキャッチの作り方canvaの手順11ー「使用中のカラー」から「+マーク」をクリック
「使用中のカラー」から「+マーク」をクリック。

おしゃれなアイキャッチの作り方canvaの手順12ー「ColorPick Eyedropper」でコピーしたコードを貼り付け
赤枠の中に、先ほど「ColorPick Eyedropper」でコピーしたコードを貼り付けます。

これで、背景は完成です。
次は、アイコンを配置しましょう。

アイコンを配置する

ダウンロードしたアイコンをブラウザ上にドラッグすると、画面左側に表示されます。

おしゃれなアイキャッチの作り方canvaの手順13ーアイコンを背景へドラッグ
アイコンを背景へドラッグします。

おしゃれなアイキャッチの作り方canvaの手順14ーアイコンの大きさと位置を整えます
ドラッグしたら、アイコンの大きさと位置をドラッグして整えます。
上下左右真ん中に配置するとガイド線が表示されるので参考にしてみてください。

おしゃれなアイキャッチの作り方canvaの手順15ー画面右上の「ダウンロード」からファイル形式を選択して「ダウンロード」
配置できたら、画面右上の「ダウンロード」からファイル形式を選択して「ダウンロード」をクリック。

おしゃれなアイキャッチの作り方canvaの手順16ー完成
完成です!

もし、背景色に他のフラットデザインテイストのカラーを使いたい時は、こちらの記事が参考になるかと思います。

いろいろなサイトの配色パターンを参考にできるサービス

オシャレなアイコン配布サイト

今回紹介した以外にも、アイコンを配布しているサイトをいくつか紹介します。
配布サイトはたくさんありますが、PSDファイルやSVGファイルで配布しているサイトがほとんど。

photoshopなどのツールを使わないと利用できないため、canvaで使いやすいよう「PNGファイル」での配布をしているサイトのみにしました。

smashingmagazine

アイコンの数こそ少なめですが、ユニークで細かいデザインが特徴です。
有料版から厳選して無料配布しているアイコンとのこと。
気に入ったら、有料版を購入するのも良いですね!

参考 smashingmagazinesmashingmagazine
アイコンの評価
アイコンの数(55)
(3.0)
アイコンのユニークさ
(4.0)
デザインの緻密さ
(4.0)
総合評価
(3.5)

tympanus


旅や移動手段がテーマのアイコン。
他のサイトに比べて、緻密にデザインされているのが特徴。

参考 tympanustympanus
アイコンの評価
アイコンの数(50)
(3.0)
アイコンのユニークさ
(4.0)
デザインの緻密さ
(4.5)
総合評価
(3.5)

elegantthemes


単色・フルカラー合わせて190のアイコンがダウンロードできます。
ややデフォルメされたデザインで、可愛いテイストのサイトやブログに合いそうです。

参考 elegantthemeselegantthemes
アイコンの評価
アイコンの数(190)
(4.0)
アイコンのユニークさ
(4.0)
デザインの緻密さ
(4.0)
総合評価
(4.0)

icooon-mono

僕1番のオススメサイト。
単色ですが、黒色だけでなく、任意のカラーに変更してダウンロード可能です。
アイコンの数は1400以上、と群を抜いています。

参考 icooon-monoicooon-mono
アイコンの評価
アイコンの数(1400↑)
(5.0)
アイコンのユニークさ
(5.0)
デザインの緻密さ
(4.0)
総合評価
(4.5)

まとめ

フラットデザインなアイコンを一から作るのはかなり大変ですが、フリーアイコンを使用すると手軽にフラットデザインテイストなアイキャッチが作成できます。

SANGOなどのwordpressテーマを導入した時に統一感を出したい時や、フリー素材画像を使用したアイキャッチから変えてみたい時に使ってみてください!

ではでは。

あなたにはこの記事もオススメ
ブログ運営に役立つツール・サービスのまとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください