アイキャッチを作成するサービスを作ってみた話

こんにちはタカフミです!

みなさん、ブログに使用するアイキャッチ画像の作成って面倒じゃありませんか?

月に1、2本しか記事を更新しない僕ですら面倒になるのですから、一生懸命ブログを運営されている人にとってはもっと面倒なのではないのでしょうか?

専用のグラフィックソフトがあればいいですが、あったとしてもアイキャッチのためだけにデザインソフトを起動してunsplashで見つけた良さげな画像を配置。その上にテキストとマスクを被せて書き出しという一連の作業は大変です。

僕はいつもブログの記事を書き終えたあとに、このアイキャッチ画像の作成をするのがホーントに嫌でした。

 

そんな思いもあって、Eye Catch Generatorというウェブサービスを作りました。

ウェブサービスというと大それた凄いものに思いますが、アイキャッチジェネレーターは名前からも分かる通りアイキャッチを作成するだけのシンプルなサービスです。

専用のグラフィックソフトがなくてもブラウザ上で誰でも簡単にシンプルなアイキャッチ画像が作れるようになります。

アイキャッチジェネレーターの使い方

アイキャッチジェネレーターは誰でも簡単にアイキャッチが作成できるようにデザインされています。

まずは、こちらのリンクをクリックしてアイキャッチジェネレーターに移動します。

 

アイキャッチジェネレーターのトップ

アイキャッチの比率を選ぶ

STEP1のところから作成したアイキャッチ画像の比率を選ぶことができます。

ここでは真ん中の比率にしてみたいと思います。

アイキャッチジェネレーターで比率を選択

背景画像をアップする

STEP2ではお持ちの背景画像をアップします。

unsplashなどから良さげな画像を選んでアップしてみてください。

アイキャッチジェネレーターで背景画像をアップロード

画像のアップロードが完了すると、いい感じに画像が自動的に中央に配置されるようになります。

アイキャッチ作成ツールで画像のアップロード完了

 

記事のタイトルを入力

STEP3では記事のタイトルを入力します。

テキストエリア内で入力したとおりにテキストが追加されます。改行の位置はバランスをみながら調整します。

更新をクリックすると、画像の上に入力したテキストが追加されます。

アイキャッチジェネレーターでテキストを入力

フォントを選択

記事タイトルの入力が完了したらフォントを変えてみましょう!

STEP4のところからゴシックや明朝体などのフォントを選んで、適用するをクリックするだけです。

アイキャッチジェネレーターでフォントを選択

 

アイキャッチ画像を書き出す

残す作業は画像を書き出すだけです。

STEP5のところにある書き出すをクリックします。

作成したアイキャッチ画像がダウンロードされます。

アイキャッチジェネレーターで書き出す

 

アイキャッチ画像を作成するのが面倒だという方はぜひ一度使ってみてください!