ブラウザ上で完結したいを叶える為に。アイキャッチメーカーの開発経緯

  • URLをコピーしました!

ブログで記事を書くとき、作業はひとつだけでは終わりません。タイトルを決めて、本文を書いて、スラッグを考えて、SEOタイトルやメタディスクリプションも確認します。

その流れの中に、アイキャッチを作る作業も入ってきます。いつも使っているテンプレートを使うか、それとも記事に合う素材や、目を引く画像を探すか。

新しい画像が見つかっても、それをそのまま使う訳にはいきません。画像サイズや容量を確認し、必要なら画像の上に文字も入れます。

ここで一度、ブラウザで進めていた作業からペイントソフトを使う作業へ切り替わります。

目次

ブラウザからソフトへ作業場を切り替える手間

自分は高い頻度でペイントソフトを使いますが、ソフトを立ち上げたり、ブラウザの裏にソフトが隠れたりすることに煩わしさを感じるときがあります。

普段と違うフォントを使いたいときも同じです。たくさんあるフォントの中から、以前使ったものや、雰囲気に合うものを探すだけでも意外と手間がかかります。

画像が完成したら、またブラウザに戻ります。今度は画像容量を圧縮したり、WebPに変換したりする作業です。

一つ一つの作業は大したことではありません。ただ、画面や作業場所を切り替える小さな手間が重なると、記事を書く流れが少し止まります。

大きな不満ではありません。それでも、記事を書く流れの中では、こうした小さな切り替えが意外と気になります。そこで、ブラウザだけで完結できる形にしたいと思うようになりました。

WEBツールだけで完結させたい

ブラウザで完結したいなら、作ってしまえば良い。そう考えて、アイキャッチメーカーと画像WebP変換ツールを作成しました。

少し偏見も入っていますが、アイキャッチで使われる文字は太字が多い印象があります。自分がよく使うフォントも、やはり太字が多めです。

それなら、よく使いそうな太字フォントを中心に用意して、無難なテンプレートもボタン1つで呼び出せるようにしたら使いやすいのではないか。まずはそのあたりの機能をツールに取り込みました。

さらに、フォントは外部サーバーから読み込むのではなく、自前のサーバーから選択時に読み込むようにしています。最初からすべてを読み込ませず、ページ内での操作の負担を減らすためです。

もちろん、用意した画像を読み込んで、その上に文字を入れることもできます。

読み込んだ画像へ文字を入れる
読み込んだ画像へ文字を入れる例

SNSで使いやすいOGPサイズ(1200px×630px)に特化し、画像の中心から余った横幅は切り取り、サイズが足りない場合は引き伸ばします。縦位置は調整できるようにし、プレビュー画面に収まっている画像シーンが、設定した文字と一緒に保存される仕組みです。

アイキャッチメーカーβ版として公開している理由

アイキャッチメーカーの名前には、β版という表記を入れています。これは、機能が不完全というよりも、まだまだ改良の余地があるツールだと考えているためです。

現在でもアイキャッチ画像を作成するための基本的な機能は使えます。ただ、あらかじめ用意しているテンプレートはもっと増やしたいですし、選べるWEBフォントも少しずつ追加していきたいと考えています。

使いながら足りない部分を見つけて、必要な機能を足していく。そのため、完成品として固定するのではなく、β版として公開しています。

アイキャッチメーカーを利用する人へ

アイキャッチ作成から画像の変換まで、一連の作業をブラウザ上で進められます。

よく使うWEBツールは、お気に入りのフォルダ内で整頓しておくと便利です。必要なときにすぐ開けるだけでも、作業の流れはかなり楽になります。

また、この記事で紹介したツールはブラウザ上で処理するため、サーバーにはユーザーのデータを送信しません。登録やログインも必要なく、必要なときにページを開いてすぐ使えます。

アイキャッチメーカーは、以下のページから利用できます。

あわせて画像WebP変換ツール(PNG/JPG対応)も、以下のページから利用できます。

  • URLをコピーしました!

コメント

コメントする

目次