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

頼鳥ミドリ

2020年2月9日 22:18

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

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

見た目

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

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

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

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

リアルタイム生成

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

プレビュー機能

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

配色設定とおまかせ機能

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

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

効果

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

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

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

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

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

<bb>〜</bb>

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

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

フォント変更可能

フォントをインストールされているものであれば、どれでもファミリー名で指定できます。
おすすめのものをプルダウンに用意していますが、インストールされているものしか適用されません。
文字詰めの情報を持っている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秒でできています。

まとめ

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

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

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

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

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