見出し画像

noteのアイキャッチ画像ジェネレータ作りました

先日、noteのアイキャッチ画像テンプレ(Photoshop用)を作って公開しました。

しかし、Photoshop用のみだとデザイナーさん向けになってしまうし、そもそもデザイナーさんはテンプレなくても綺麗なアイキャッチ画像作れるのでは?と思ったので、

誰でも簡単に綺麗なアイキャッチ画像が作れるジェネレータを作りました!

操作はとっても簡単なのですが、作り方を書いておきます。

サイトにアクセス

▼こちらからアクセス。

つくるボタンをクリック。

ひとまずPCのみの対応にしています。
スマホだと崩れてしまうので、今後改善していきます(>人<;)

STEP 1 : 背景画像を選択

背景画像を選択してくださいと記載のあるエリアの上をクリックすると、画像を選択できます。

アップロードした画像が背景に表示されます。

STEP 2 : テキストを入力

テキストエリアにテキストを入力します。

上部のプレビューにリアルタイムで反映されます。

薄い黒の正方形の中にテキストが収まるように入力してください。

STEP 3 : 装飾を選択

装飾を選択と記載のあるエリアの上をクリックすると、プルダウンで装飾を選ぶことができます。

「なし」の場合

「黒」の場合

「シャドウ」の場合

生成&ダウンロード

生成ボタンをクリックすると、ボタンの下に画像のプレビューが表示されます。

生成ボタンをクリック後に、ダウンロードをクリックすると、作成した画像がダウンロードされます。

今後の改善

今後下記のような改善を予定しています。

・入力とプレビューを一体型にする
・スマホでも作成できるようにする
・装飾の種類を増やす

おわりに

作りはじめて6時間程で公開したので、分かりにくい点や使いにくい点があるかもしれません。今後改善していきたいので、お気付きの点がありましたらTwitterやnoteからご報告いただけますと幸いです。

そして、このサイトを運用するために、多少ではありますがドメイン代やサーバ代がかかっています。

もし気に入っていただけたら、こちらのnoteからサポートをいただけると嬉しいです!

レッツエンジョイ!noteライフ!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

しかぶらんどきいよ!
61

ちょみ

デザインもコーディングもディレクションもやります。Webマーケとアクセス解析は勉強中。コーディングが一番好きでメインはフロントエンドですがバックエンドも身につけてフルスタックになってやろうと計画中。好きなフォントはCentury Gothic/好きな色は#bf0000

お気に入りnote

素敵なnoteを「お気に入り」として入れています。
2つ のマガジンに含まれています

コメント1件

すごい、これ便利ですね〜
今後使わせていただきますー
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。