"junkato.jp" Webサイト
デザイン
このWebサイトは、ユーザビリティ、メンテナンス性、そして速度を念頭に設計されています。
ユーザビリティ
このWebサイトはSemantic UI CSSフレームワークを利用して作られており、さまざまな閲覧環境を想定したレスポンシブデザインとなっています。
また、色はモノトーンを基調としてアクセントカラーにアドニスブルーを採用し、肝心の内容が引き立つよう控え目に配色されています。
メンテナンス性
下で詳しく触れているように、Webサイトは専用に開発されたデータ構造を持ち、データが更新されるたびに動的にビルドされるようにできています。
このビルドパイプラインにより、メンテナンスとテストが容易になっています。
速度
このWebサイトはほとんどが静的なHTML/CSSファイルからなっており、サーバ側でも、クライアント側でも、画面に描画される前に必要な処理が少なくて済むように設計されています。
唯一の例外は、読み込みに多少時間のかかるWebフォントUD 新ゴ Rですが、これは綺麗なタイポグラフィのためには外せないものです。
コードとデータ
このWebサイトはほとんどが静的なHTML/CSS/JavaScriptファイルの塊です。そうしたファイルは、GitHubリポジトリのmasterブランチに何かがpushされるたび、コードとデータをもとにビルドされています。ビルドパイプラインはTravis CI上で実行されています。
ビルド中は、以下のファイルの内容が何度も参照されています。もし似たようなWebサイトを作ってみたい場合、データ構造を参考にしてみてください。また、このポートフォリオ上の情報を機械的に処理したい場合にも使えるかもしれません。
謝辞
このWebサイトはさまざまなOSSプロジェクトを利用して開発されています。README.mdに書いてあるように、以下のツール、ライブラリ、プログラミング言語が主に使われています。その他も含めたすべての依存ライブラリの一覧はpackage.jsonをご覧ください。