ホームページ作ってみた

2022-1-26

サークルのホームページを構築するまでを説明しています。

どんなページを作るかの検討

もともと頭にあったので、あんまり迷いませんでしたが、トップページ、サークル紹介、ブログ、お問合せ、関連リンクの主に5つを作ることにしました。

デザインのアイディア出し

初めてホームページを作ったので、デザインのアイディアを出すところから始めました。
まずは他の例を参考にしようと思い、以下のfigmaプラグインを使って、色々なサイトのデザインを引っ張ってきて、自分達の持っている写真などと入れ替えて遊びながら徐々にイメージを固めていきました。
html.to.design
参考(webデザイン集):

デザインから実装へ

Figmaでいい感じの画面を作るところまで行ったのですが、Figmaのデザインをコードに出力して利用するには、かなり丁寧にAutoLayoutなどの設定する必要がありそうで、リスポンシブなデザインにしたかったことから、Figmaのデザインをそのまま利用することは諦めることにしました。
teleport HQというツールをたまたまツイッターで見かけたので、使うことにしました。所謂ノーコードでweb開発できるツールで様々なフレームワークへの出力対応しています。元のFigmaのデザインもそんなに複雑なものを使っていた訳では無いので、これで1から作り直すことにしました。

全手動リファクタリング

後述する理由で、teleport HQからNext.jsのコードを出力させたのですが(github tokenを登録すると、mainに直pushされます)、結構リファクタリングの余地があったので、手動で尻拭いすることになりました。

ブログ機能の追加

ブログ(markdwon)だけは手で実装する必要性がありました。こちらのページの解説が非常に解りやすかったので、Next.jsで順に実装していくことにしました。またブログを実装する上で、非プログラマーの部員でも運用コストが少ないといいなと思っていたのですが、このやり方ではmarkdownファイルを追加するだけで良いので非常にありがたいですね。

デプロイ

GitHub Pagesとの相性がいまいちだったので、vercelにデプロイすることにしました。本番環境とDEV環境の二種類を区別することもできて、実装時にも役に立ちました。