noteやブログで使えるカバー画像をサクッとつくれるサービスを公開しました

更新日：2018年5月29日

昨日の19時ぐらいにTwitterを眺めていて、ふと気づいたんです

こういう単色に文字載せたカバー画像って最近よく見かけるけど、何で作ってるんだろう？

PhotoshopやSketchを開くほどでもないし。ましてやそういうのインストールしてない人、どうしてるんだろ？パワポ？

noteでも「見出し画像」つけたほうが読んでもらえるみたい。

グラフィックツールを使わずに、色と文字だけ入力すればサクッとカバー画像作れたら楽かなって思ったんです。

で、こんなのを作りました。

5時間ぐらいでできた。

ImageMagickか？HTML5 Canvasか？

画像を生成するにはどうしたらいいかなーと検討して、最初に思いついたのがImageMagickでした。

qiita.com
ImageMagickの使用例 -- 入門
https://qiita.com/mtakizawa/items/a74bd91f7b3835976461

うーんでもそこまで複雑なことをしようとしてるわけじゃないし…。そこで今回はHTML5のCanvasを利用して作ってみました。

垂直方向の位置指定に弱いCanvas

Canvasはブラウザ上で図を描画するための技術で、Flashの代替手段として活用されています。むかし、ソシャゲの会社で働いていたことがあり、これを使ってサンプルのカジュアルゲームを作ってみたことがありました。

Canvasで出来ることはこんな感じ
・図形（矩形とか円とか）の描画
・テキストの描画
・画像の描画
・作成したCanvasをPNGもしくはJPEGで保存

ところがこのテキストの描画の仕様があまりイケてなくて、水平方向の左揃え・右揃え・中央揃えには対応しているのですが、垂直方向には対応していないのです。さらに改行したときにいい感じに表示したり、指定したエリアをはみ出したときに自動的に折り返したりすることもできません。

なので今回、水平方向での中央揃え・改行についてはごまかしごまかしやってます。

コードは汚いから見ないで！！！！！

フォントの変更や画像背景の対応も

今は背景色の指定（色のバリエーション少ない）とテキストの入力しかできないのですが、もうちょっと機能追加しようかなと思ってます

・画像をアップして背景に設定
・文字色や文字サイズの変更
・背景色をカラーコードで指定
・サービスごとにあった比率での出力

余力があったらRailsで会員登録と作成したカバー画像の保存にも対応するかもしれません。

ぜひご利用ください。

追記：アップデートしました

余白を調整して、noteでもいい感じに表示できるようにしました。それから明朝体を選択できるようにしました。

さらに追記：メジャーアップデート「Cover2」

サービス名を改めて「Cover2」にして、ガラッとデザインを変えました。

書き手：小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter： @yoshikikoji

この記事が気に入ったらいいね・フォローお願いします！

『お知らせ』の記事

新サービス

無料で学べるデザイン学習サイト

デザイン記事をかんたんに保存・共有

おすすめ本紹介

おすすめサイト

最近の記事

TechnicalCreator.com