見出し画像

[5秒で見出し画像を作る] タイポグラフィメーカーを作りました!

こんな感じのテキスト主体の見出し画像ブラウザ上で作れる「タイポグラフィメーカー」を作りました!

画像1

画像2

過去の記事の見出し画像もこれで作りました。

見た目

スクリーンショット 2020-02-09 20.53.09

ブラウザ上で作れる(スマホは一部機能使用不可)

上記のURLにアクセスすれば作れます!
作成した画像は右クリックで保存できます。
スマホは保存ができないので、横画面にしてスクショしてください…
また、一部の効果が使えないこともあるようです。
IEや古いブラウザは非対応です。

2020/02/11 追記
@rel0005さんに、iOSはショートカットを使うことで保存ができると教えていただいたので、タイポグラフィメーカー用保存ショートカットを配布します!

iOSの対応したバージョンであれば、タイポグラフィメーカーを開いた状態で、Safariからこのショートカットを実行することで、カメラロールに保存されます。

リアルタイム生成

変更した内容は即時反映されます!

プレビュー機能

真ん中部分をトリミングされたときに、どんな見え方になるか確認できるプレビューがあります。

配色設定とおまかせ機能

背景色、文字色、アクセントの3色をカラーコードやRGBA,HSLなどで設定できます。
手動で設定したいときは「カスタム」タブに切り替えてください。
「おまかせ」タブには4つボタンがあり、押す度にランダムでボタン名の雰囲気の色に変わります。
中々いい感じに変わるのでポチポチしてみてください!

厳密ではありませんが、
「ふわっと」→ライトトーンでドミナントトーン
「しっとり」→ライトグレイッシュトーンよりのドミナントカラー
「ポップ」→ストロングトーンでドミナントトーン
「どっしり」→ディープトーンよりのドミナントカラー
っぽくなるように生成しています。

効果

ロングシャドウや縁取りを文字に付けたり、背景をストライプにしたりできます。

テキスト3つ、縦書きも可

テキストを3つ配置でき、位置で「縦」が頭に付いているものを選ぶと縦書きになります。
縦書き時ロングシャドウが乱れるのは仕様です…

HTMLタグである程度の装飾ができる

斜体(<i>〜</i>)や下線(<u>〜</u>)、上付き(<sup>〜</sup>)などHTMLタグで装飾できます。
文字サイズを少し大きくする表現は頻繁にあるので、

<bb>〜</bb>

という独自タグが用意してあります。
太字は、デフォルトが太めにしてあるので、効果はありません。

改行は自動で<br>に変換されます。

フォント変更可能

フォントをインストールされているものであれば、どれでもファミリー名で指定できます。
おすすめのものをプルダウンに用意していますが、インストールされているものしか適用されません。
文字詰めの情報を持っているOpenTypeフォント(プリセット内の游書体や源ノ○○、ヒラギノなど)は自動で文字詰めされます。

画像を1枚配置可能

一面を覆うように画像を配置したり、タイルのように並べたりできます。

全体サイズ変更可能

いくつかサイズのテンプレートが用意してあります。
数値入力も可能です。

テンプレート機能

変更内容はURLのパラメータに即時反映されるので、その時のページをブラウザのタブに置いておいたり、ブックマークしておくことでいつでも再編集できます。
連載物でナンバリングだけ変更したいときに便利かと思います!

一応URLの文字数に制限はないらしいですが、巨大な画像が入ってきたときにその画像データをそのままURLに入れたらちょっと怖いので、画像は保持しないようにしています。

note用ブックマークレット

5秒で見出し画像を作るために、ブックマークレットも用意しました!
noteの編集画面を開いた状態で

javascript:window.open('https://yoridrill.github.io/typography-maker/?text0content='+document.getElementById('note-name').textContent);

を実行するとタイトルを取得して、新しいウインドウでタイポグラフィメーカーを開き、タイトルが入力されている状態にします。

下記はiPhoneでやってみた様子で、大体5秒でできています。

画像4

まとめ

ちなみにですが、noteの見出し画像を作るツールは私が見つけただけでも、既に2つあります。

私が欲しい機能がなかったので、新たに作りましたが、この2つもいいジェネレータなので是非使ってみてください!

次の記事では技術面の話や、特に参考になった記事などを紹介します。

このタイポグラフィメーカーが執筆の助けになりましたら何よりです!

2020/02/14追記
@rel0005さんにブログでご紹介いただきました!!ありがとうございます!
iOSでさらに使いやすくなるショートカットを作っていただいたので、こちらもご活用ください!


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

note.user.nickname || note.user.urlname

新しいツールの購入費かガチャ代になります!!!!!!!!

ありがとうございます!!
7
Spine, Live2D, After Effectsなどアニメーションや、Web系のTipsについて書いていきます! WebARジェネレータについての記事も。名前の読みは「よりどり みどり」