団体のホームページの色々なはなし
どうも、初めまして。九州学生エンジニア連合の立ち上げ人である meteor です。普段はフリーランスのエンジニアやってます。
さて、お気づきの方もいるかと思いますが、団体のホームページがリニューアルしました。このリニューアルは全て僕が主導となって実施したわけですが、今回はホームページリニューアルについてお話したいと思います。
GitHub Pagesで運用していた時期
九州学生エンジニア連合は2018年4月に設立しました。その際はホームページと呼べるものがちゃんとない状態の中でJekyllを使って既存のテーマを使いつつ、ホームページを公開しました。
ホームページ自体はちゃんと内容を書いていたのですが、デザインが既存のテーマをそのまま使っているおかげでとても質素な感じでした。
そこで団体の規模拡大に伴い、ホームページもリニューアルしたいと思い、僕を主導に動き始めました。
デザイン
新しいホームページは、とてもシンプルですが分かりやすく作られています。
このデザインは、僕の方で調整しています。実はあまり知られていないですが、1年間ウェブデザイナーとしてお仕事をした経験もあり、それなりに経験はあったためスムーズにデザインを組むことが出来ました。
レスポンシブデザインなので、スマホから閲覧しても見やすいように作られています。
ロゴに関しては全てSVG形式で載せています。
なぜSVGかというと、スマートフォンの高解像度化に伴い、画像の解像度も大きくしないとぼやけて表示されるのですが、単純に画像の解像度を大きくするとファイルサイズも大きくなります。
ファイルサイズが大きくなると読み込みに時間がかかり、UXが失われることになります。
そこでベクターで表現されたSVGを使うことでファイルサイズの削減に努めました。
スポンサー企業様にも無理いってSVGでロゴを提供して頂いたことに感謝いたします。
団体のロゴ
今回、事前に団体名が変更となることを聞いていたので、それに伴いロゴも刷新しないといけないと思い、新たにロゴを作成しました。
以前の団体名である「九州学生エンジニア連合」のロゴを作ったのも僕ですが、今回は「Kyushu Student Association」の略称であるKSAを意識してロゴを作りました。
ロゴを作るときにいつも意識していることがあるのですが、ロゴは基本的にページの上部ヘッダーにちょこっと顔を出したり、パンフレットの下に載せたり、基本的にロゴが目立つことはありません。
ですので、一目見ただけで分かりやすく作っています。具体的にはロゴを作る際に20%くらいのサイズに縮めて、そのサイズで見たときにちゃんと団体のロゴとして見えるか確認するようにしています。
その結果、メンバーにも好評で良い感じのロゴを作ることが出来ました。ちなみにロゴの左にあるのは本団体のマスコットキャラクター(?)です。九州地方と馬を掛け合わせた感じになっていますが、まだ名前が決まっていないので名前を絶賛募集中です(笑)。
デプロイ
僕の本職であるエンジニアリング的なお話もしたいと思います。
ホームページはGitLabにあるプライベートリポジトリで管理されています。
基本的に GitHub Flow と同じ形で運用しており、 `master` ブランチはProtected Branchに指定しており、直接pushすることは禁止しています。
そのため、Merge Request(GitHubでいうPull Request)を作ってもらい、僕のApproveがあるとMerge出来るようにしています。Merge Requestも基本的にセルフマージ出来ないようにしており、僕のApproveがないとマージ出来ないようになっています。
ホスティングはNetlifyを使っています。masterブランチにpushした時点で、Netlifyでビルドしてデプロイされるようになっています。
GitLabやNetlifyのログはDiscordに流しており、メンバー全員がpushやdeployに関して気づける状態を作っています。
パフォーマンスチューニング
ホームページはNetlifyでホスティングしていますが、CDNにCloudFlareを使っており、実際はCloudFlareのエッジサーバから配信されています。
CloudFlare側でCache-Controlの設定を行い、最長7日間はブラウザでキャッシュさせるようにしています。ホームページが頻繁に変わらないように意図的にそういったデザインにしていますので、キャッシュも長めに持たせています。
元々、 `student-kyushu.org` は本団体が保有するオンプレのDNSサーバで運用していたのですが、DNSのレコード変更する際にコードベースで変更しないといけなく、Terraformなどの知識がない学生だと運用がとても分かりづらい状況でした。今回、CDNを挟むのに当たり、DNSサーバもCloudFlareに変更したので、Web GUIでポチポチ変更出来るようになったため、運用がとても簡単になりました。
画像に関してはimgixを使っています。imgixは画像変換サービスで、日本だとImageFluxなどに当たります。
imgixはURLのクエリパラメータに画像サイズやフォーマットを指定することで、それに合わせて画像変換をしてくれます。
imgixの配信はFastlyを使っており、画像はFastlyのエッジサーバにキャッシュされるため、常に高速に画像を表示することが出来ます。
また、imgixの場合はWebPが使えるブラウザの場合にはWebPで表示することも出来るので、とても便利でした。
最後に
九州学生エンジニア連合、改めKyushu Student Associationはメンバーを募集しています。一緒にモノを作ってみたい、何かに挑戦したい人は是非本団体に加入して、色々取り組んでみましょう。
僕は、この団体ではOBみたいな扱いなので、直接顔を出すことはほぼないですが、呼べば多分反応します(笑)。
これからもKyushu Student Associationの活躍に期待しています。