ポートフォリオサイトリニューアル振り返り（ver.2019）
2019年12月2日
これはFOLIO Advent Calendar 2019 2日めの記事です。
こんにちは、株式会社FOLIOフロントエンドエンジニアのtakanoripです。2日目にしてめちゃくちゃ個人的な話題でごめんなさい。
先日自分のポートフォリオをリニューアルしたので、それの技術、デザインの紹介とかをしたいと思います。
11ty
今回は11tyというStatic Site Generatorを使いました。
詳しいことはリポジトリ見てね。
Eleventy is a simpler static site generator.
_npm install -g @11ty/eleventy echo '# Page header' > README.md eleventy This will compile any files matching valid…_www.11ty.io
takanorip/portfolio-version3
_You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…_github.com
これは特定のフレームワークに依存してなくてとてもシンプルなSSGです。以前のポートフォリオではGatsby.jsを使っていたんですが、今回はこちらのツールに乗り換えました。
Gatsby.js疲れ
なんで乗り換えたかというと、「Gatsby.jsに疲れた」からです。Gatsby.jsはとても素晴らしいツールだと思いますが、機能が多く、使い方も独特かつ複雑（GraphQL使うとことか）なので、ちょっとした機能追加も意外と大変、みたいなことがあります。
あと、個人的に気になるのが、Gatsby.jsがbuild後もReactに依存してるところです。僕は完全にStaticなウェブサイトを作りたいので、Gatsby.jsのこの仕様はあまり気に入っていませんでした。純粋なHTMLを生成してほしいんです。
僕はただMarkdownをHTMLにして表示できれば満足だったのです。その欲求を満たすにはGatsby.jsは大きすぎました。
11tyの良いところ
このツイートに書いてあることはとても良いと感じました。
この他に複数のテンプレートの拡張子に対応しているのも良いと感じました。公式ドキュメントはnunjucksで書かれていますが、その他ejsやHandlebarsなどでも書けます。もし既存のテンプレートがある場合はそれらを使うことができるし、プロジェクトの特性や自分の好みに合ったテンプレートを選択できます。選択できることは非常に重要です。
collectionもsortや追加など柔軟に設定できるのが非常に良いと感じました。特にメディア系のウェブサイトだと粒度の異なるカテゴリを扱ったり、複数のソーティングをすることがあると思うので、そういう時に便利さを実感できる気がしました。
FONTPLUS
今回、フォントにFuturaを採用したかったのでFONTPLUSの一番安いプラン（￥1,100/月）を契約して使っています。
FONTPLUSはダイナミックサブセッティングを採用しているのでJavaScriptがHTMLに含まれるテキストを解析、サーバーに送信した後、動的にサブセットされたフォントがダウンロードされる仕組みになっています。これによりダウンロードされるフォントファイルの大きさがとても小さくなるメリットがあります。
しかし、今回は英語フォントしか使っていないのでそのメリットを感じることが少ないのと、JavaScriptの実行からフォントがダウンロードされるまでに少し時間かかりすぎるなと感じました。またフォントがキャッシュされないため、ページ遷移するごとにFOITが発生してしまうので体験が少し悪くなるなと感じました。これはこれから改善していきたいです。
ちなみに、僕の4G環境で試したところJavaScriptの実行からダウンロードまで最大3sほどかかっていました。もう少しレスポンスが早くなると使い勝手が良くなるのにもったいないなと感じました。
デザイン
今回デザインで意識したのはこのブログの内容を実践することです。
音楽、数学、タイポグラフィ
_ブログ 鈴木丈 開発マネジャー 開催された「 フロントエンドカンファレンス福岡2019 」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 ..._standard.shiftbrain.com
TOPページとか一部これに則ってないところもありますが、全体的な構成はフィボナッチ数列や調和数列に則ったルールを作りました。今までそういったルールを意識したことがなかったので、今回は実験的な意味合いも込めて少し厳し目にルールに準拠するよう作ってみました。
ルールを決めておくことで楽になるところと、どうしても納得できなくてルールからはみ出すかどうか悩む部分があり、思った以上に難しかったですがとても勉強になりました。
まとめ
みんなポートフォリオサイト見てくれよな！
takanorip.com
_frontend developer / interface designer_takanorip.com
