ダウンロード__32_

タイポグラフィメーカーを作るときに参考にしたサイトや技術

先日、テキスト主体の見出し画像をブラウザ上で作れる「タイポグラフィメーカー」を作りました。

今回は、参考になったサイトや技術についてざっくり紹介していく記事になります!

コンセプト

今回、タイポグラフィメーカーでやりたかったことは

・自分用に、手早くおまかせで作れるツールが欲しい
文字詰めや装飾をそれなりに施せて、使いたいと思えるクオリティ
・ナンバリングを楽に変えられるよう、いつでも再編集できるようにしたい
・(全然できなかったけど)マテリアルデザインやりたい
・どうせならちょびっとES6書いてみたい

この辺りを満たせるように作りました。

配色おまかせ機能

色を選ぶのは大変なので、ボタンをポチポチするだけでいい感じの組み合わせが作れるようにしました。

スクリーンショット 2020-02-24 4.02.39

これをしないなら新しくツールを作る必要はないと思ったので、気合を入れて配色について調べました。

この辺りのサイトを参考に、使い勝手の良さそうなトーン(色の明度・彩度毎の雰囲気)を4つ選び、そのそれぞれのトーン内で色相をランダムに動かしてメインカラーを決め、そのトーンに合いそうな配色技法でアクセントカラーを決めるようにしました。
タイポグラフィメーカーは下記4つの雰囲気の配色が作れます。

「ふわっと」→ライトトーンでドミナントトーン
「しっとり」→ライトグレイッシュトーンよりのドミナントカラー
「ポップ」→ストロングトーンでドミナントトーン
「どっしり」→ディープトーンよりのドミナントカラー

ドミナントトーンは近いトーン内で色相をずらす配色、ドミナントカラーは近い色相でトーンをずらす配色技法です。

ちなみに色相は360°の中からランダムなのですが、そのままのランダムだと、どぎつい黄緑の出現率が高く、一方黄色はあまり出ないので、105°〜135°の黄緑が出たときは、-60して黄色の方へずらすようにしています。
マゼンタも結構キツイので290°〜310°は青の方へずらしました。
その結果、体感では万遍なく色が出ているように感じられるチューニングになりました!

スクリーンショット 2020-02-24 17.55.26

文字色はリープマン効果が起きづらいように白or黒のみにしました。

HTMLをSVG経由で画像化

canvasだけだと文字の制御がキビシイので、HTMLをそのまま画像化できないかな〜と思い探してみたら、下記の方法がありました。

XHTMLのルールに則って書けばSVGに変換でき、style当てたり画像を載せたりとかも、かなり精度高くできるみたいです。知りませんでした…!
これはもっといろいろなことに活用できそうです。(というかリッチなサイトでは当たり前のように使ってるのかも?)

これのおかげでHTMLタグを受け付けられるようになって、装飾の幅が広がりました。

ダウンロード (28)

<s><bb>打ち消し</bb>とか</s><br><i><bb>斜体</bb>とか</i>

※ 「bb」は「font-size: 150%;」指定をつけてあります。

ところどころ文字サイズを大きくすると、一気に手が込んでる感が出るので、bbで囲むだけで指定できるようにしました。

html2canvasは後述の自動文字詰めで表示が乱れたのと、上記の方法でやりたいことは事足りたので、使いませんでした。

自動文字詰め

文字だけで、そこそこ見られる画像にするには文字詰めが必須…!!!!!!!

ダウンロード (29)

下記2つの指定を入れて、英字も日本語もカーニング情報があるものは、自動で文字詰めされるようにしました。

font-kerning: normal;
font-feature-settings: "palt";

縦書き

CSSで一発みたいです。英語も縦並びになる指定にしました。
Webの進化ありがとう…;;

writing-mode: vertical-rl;
text-orientation: upright;

ダウンロード (31)

効果

ロングシャドウとか縁取りとかできた方がリッチだな〜と思ったので、できるようにしました。
特にロングシャドウは、グラフィック系ツールでいざ作ろうと思うと、結構めんどくさいと思うので、かなりの便利機能かと思います…!

ダウンロード (27)

マテリアルデザインをやりたかった

「マテリアルデザイン」というGoogleが提唱したイイ感じのデザインルールがあることを最近知り、早速やってみよう!と思ったのですが、全然駄目でした!!難しい…!!!だるい…!!
良いデザインはシンプルに見えても、本当に手間がかかっているんですね…

最初はMaterializeを使おうとしていたのですが、何かよく分からなかったので、使ったことあるPure.cssを使いました。
Pure Gridsなしでは生きられない…
タイポグラフィメーカーはリキッドデザインなので、興味ある方は画面幅とかいじってみてください。

ES6で書いてみたり、Vue.js使ってたり

モダンブラウザしか使えない指定をモリモリ使っているので、もう古いブラウザ知らんわ〜と、BabelなしでそのままのES6です。
ES6初挑戦であんまり使いこなせている感じしませんが、勉強になりました。
Vue.jsを使っています。楽すぎる…Vue.jsなしでは生きられない…

クエリにデータ保存

WebARジェネレータでもやっているのですが、URLのクエリにいろいろな設定を即時反映するようにしています。
タブブラウザが当たり前になった今、この手法は一時保存にかなり便利だなと思います。

https://yoridrill.github.io/typography-maker/?&colorbg=hsl(191%2C60%25%2C85%25)&colortext=%23000&colorpoint=hsl(11%2C60%25%2C85%25)&text0content=Sample&text0pos=cc&text0font=sans-serif&text0size=16&text1content=&text1pos=bc&text1font=sans-serif&text1size=10&text2content=&text2pos=vr&text2font=serif&text2size=8&effect=stripe&sizew=1280&sizeh=670

何故かできなかったこと

スマホで画像保存が何故かできるようにできませんでした…
canvasのままだと画像として認識されないので、imgに移す必要があり、その際に、「toDataURL()」で変換する必要があるのですが、クロスオリジンに引っかかってしまい…
WebARジェネレータのときは普通に

img.crossOrigin = "Anonymous";

を付ければ突破できていたのですが…

分かる方いらしたら教えてください!!!

まとめ

Photoshopを起動するより速く、楽にイイ感じの見出し画像が作れるようになって、自分用としても大満足の出来です!
今後はもうちょっとマテリアルデザインぽくしたり、既知のバグ(iOSではロングシャドウが適用されないとか)を直していけたらなと思います。

最後まで読んでくれてありがとうございます! 良ければサポートしてもらえると嬉しいです!