>>読みたい記事がすぐ見つかるサイトマップ

100記事書くためのおしゃれなアイキャッチの作り方

100記事書くためには、「記事を書くこと」に集中すべきです。
アイキャッチや記事内画像はあくまでも補助。

でも、アイキャッチはおしゃれにしたい?

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

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

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

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

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

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

参考

canvacanva

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

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


画面右上の「画像サイズを指定」をクリック


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


白紙のテンプレートが作成されました!

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

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ファイル」を利用します。


ダウンロードするサイズは「512×512」がオススメ

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

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

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

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

 


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

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

カラーコードを取得


先ほどの「背景あり」のアイコンをクリックします。


ブラウザ拡張機能「ColorPick Eyedropper」をクリック


アイコンの背景にマウスを乗せるとカラーコードが表示されますので、コピーしておきましょう。

 

canvaで背景を作る

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


素材→図形を選択し、一番左上にある図形を選択します


表示された図形をドラッグして引き延ばして、左上の小さな四角をクリックします。


「使用中のカラー」から「+マーク」をクリック。


赤枠の中に、先ほど「ColorPick Eyedropper」でコピーしたコードを貼り付けます。

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

アイコンを配置する

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


アイコンを背景へドラッグします。


ドラッグしたら、アイコンの大きさと位置をドラッグして整えます。
上下左右真ん中に配置するとガイド線が表示されるので参考にしてみてください。


配置できたら、画面右上の「ダウンロード」からファイル形式を選択して「ダウンロード」をクリック。


完成です!

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

イメージに近いカラーコードがすぐ取得出来るサービス-Flat Inspire

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

今回紹介した以外にも、アイコンを配布しているサイトをいくつか紹介します。
配布サイトはたくさんありますが、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テーマを導入した時に統一感を出したい時や、フリー素材画像を使用したアイキャッチから変えてみたい時に使ってみてください!

ではでは。

その他の100記事を書く方法はこちら
根性論ゼロの100記事講座