Typography.jsの日本語用テーマTofuを作ってみた
突如、このブログを作り直したいと思い、Yak shaving が始まりました。その結果、なぜかブログを構築する前に、日本語のタイポグラフィを少し調べて、Typography.js向けの日本語のテーマを試しに作っていました。この間わずか 4 日程で途中子供と一緒に眠ってしまって 2 日ほど抜けてるので正味 2 日程度でしたが、とてもよい勉強になりました。
- デモサイト: https://static.riywo.com/typography-japanese/
- Gatsby で構築して GitHub pages へ。そのうちAWS Amplify Consoleにする
- テーマ: typography-theme-japanese-tofu
- 文字化けの豆腐とは特に関係ないです
経緯
- ブログにAWS Amplify入れてみたいな
- そうすると、Hugo のままだとしんどそう
- Gatsbyというのが React/JSX なサイトを静的に書き出せるらしい。ずっと React やりたかったのでちょうどいい
- Markdown の資産も活かせて、しかも内部的にGraphQL でデータ扱うなんて面白い
- しかし、問題はデザインをどうするかだ。React Bootstrapなんていうのもあるから、Bootstrap っぽいものならできるかなぁ。。。
- Gatsby のチュートリアルでTypography.jsに出会う。が、あまりよく意味がわからない
- うわっ、私のサイト Bootstrap くさすぎ!? たった数文字変えるだけで Bootstrap のくさみが抜ける 7 つの CSS テクニック。 に出会う。
- ちなみに僕がはてブしたあと600 越えまで一気に伸びてました。
- タイポグラフィが分かれば Web がデザインできるらしいぞ！ということでググって記事を読み漁る
- なんとなく、Typography.js の日本語テーマが作れる様な気がしたので、とりあえずやってみよう
- 2 日で完成 https://static.riywo.com/typography-japanese/
前提条件として、React/JSX も Gatsby も Typography.js も 1 週間前には触ったことがなかったのですが、5,6 年前の Node.js の環境とくらべて生態系が本当に発達していて、初心者でもあっという間に綺麗(と自分では思ってる)なサイトを作ることができました。
タイポグラフィ
といえば、Steve Jobs ですね。
I learned about serif and sans serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can’t capture, and I found it fascinating.
自分はこれまで、いい感じのフォントを選べばいいの？くらいにしか思ってませんでした。そういう話じゃぁない。美しく読みやすく配置するための、ルール、そんなものがあるとは。
- Japanese typography on the web — tips and tricks – Pavel Laptev – Medium
- Web Typography in Japanese and why it matters. | LinkedIn
まだ勉強始めて 2 日なので、言われるがままにやるしかなかったですが、例えば最小フォントサイズだったり、行間だったり、今まで何も意識したことがなかったですね。。。どちらかというと div をどの様に配置するか、しか考えたことがなかった。でもそうじゃない。
自分は絵も下手くそで、デザインのセンスもないので、ずーっとコンプレックスだったんですが、今回タイポグラフィをやってみて、始めて CSS で数値を細かく打つ”目的”がわかりました。そして、これはもう少し勉強していけば、あくまでも文字中心のサイトであれば、ですがデザインができそうな気がしてきました。今まで何度頑張っても(それこそ中学生の頃から HTML を組むことはやってたけど、それはひどいできで)全くうまくできなかったものが、視点を変えるだけでもしかしたら自分にもできるかもしれない！という気持ちになれたのは、本当に生きててよかったという思いです。
ところで、Hugo のテーマもついこの間さくっと入れ替えてみたところなんですが、日本語に最適化してないのでタイポグラフィがひどいですね。。。
今後
とりあえず久々に npm モジュール出したかったという目的もあったので、テーマはひと段落で、これを使いながらこのブログを Gatsby 化していこうと思います。Markdown を GraphQL で触る PoC はもう終わって雰囲気はつかめているので、あとは配置とタイポグラフィがある程度固まれば一気に進められそうです。
ソフトウェアって本当に素敵だ。
