Typography.jsの日本語用テーマTofuを作ってみた

突如、このブログを作り直したいと思い、Yak shavingが始まりました。その結果、なぜかブログを構築する前に、日本語のタイポグラフィを少し調べて、Typography.js向けの日本語のテーマを試しに作っていました。この間わずか4日程で途中子供と一緒に眠ってしまって2日ほど抜けてるので正味2日程度でしたが、とてもよい勉強になりました。

経緯

  1. ブログにAWS Amplify入れてみたいな
  2. そうすると、Hugoのままだとしんどそう
  3. GatsbyというのがReact/JSXなサイトを静的に書き出せるらしい。ずっとReactやりたかったのでちょうどいい
  4. Markdownの資産も活かせて、しかも内部的にGraphQLでデータ扱うなんて面白い
  5. しかし、問題はデザインをどうするかだ。React Bootstrapなんていうのもあるから、Bootstrapっぽいものならできるかなぁ。。。
  6. GatsbyのチュートリアルでTypography.jsに出会う。が、あまりよく意味がわからない
  7. うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。 に出会う。
    • ちなみに僕がはてブしたあと600越えまで一気に伸びてました。
  8. タイポグラフィが分かればWebがデザインできるらしいぞ!ということでググって記事を読み漁る
  9. なんとなく、Typography.jsの日本語テーマが作れる様な気がしたので、とりあえずやってみよう
  10. 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.

https://news.stanford.edu/2005/06/14/jobs-061505/

自分はこれまで、いい感じのフォントを選べばいいの?くらいにしか思ってませんでした。そういう話じゃぁない。美しく読みやすく配置するための、ルール、そんなものがあるとは。

まだ勉強始めて2日なので、言われるがままにやるしかなかったですが、例えば最小フォントサイズだったり、行間だったり、今まで何も意識したことがなかったですね。。。どちらかというとdivをどの様に配置するか、しか考えたことがなかった。でもそうじゃない。

自分は絵も下手くそで、デザインのセンスもないので、ずーっとコンプレックスだったんですが、今回タイポグラフィをやってみて、始めてCSSで数値を細かく打つ”目的”がわかりました。そして、これはもう少し勉強していけば、あくまでも文字中心のサイトであれば、ですがデザインができそうな気がしてきました。今まで何度頑張っても(それこそ中学生の頃からHTMLを組むことはやってたけど、それはひどいできで)全くうまくできなかったものが、視点を変えるだけでもしかしたら自分にもできるかもしれない!という気持ちになれたのは、本当に生きててよかったという思いです。

ところで、Hugoのテーマもついこの間さくっと入れ替えてみたところなんですが、日本語に最適化してないのでタイポグラフィがひどいですね。。。

今後

とりあえず久々にnpmモジュール出したかったという目的もあったので、テーマはひと段落で、これを使いながらこのブログをGatsby化していこうと思います。MarkdownをGraphQLで触るPoCはもう終わって雰囲気はつかめているので、あとは配置とタイポグラフィがある程度固まれば一気に進められそうです。

ソフトウェアって本当に素敵だ。


1663 Words

2019-05-02 22:26 -0700

comments powered by Disqus