サイトリニューアル、技術面のお話。
前回の記事では「何故サイトをリニューアルするに至ったのか」その理由について書きましたが、今回は技術面についてのお話をしたいと思います。
まず、時とともにブレてしまわないようサイトの方向性を固めるとともに、制作ツールに必要な条件を考えていきます。
その上で、条件に合うツールを選定していきます。
今回の目的の一つに「Webデザイン・開発の知識＆スキル向上」があるので、色々なサイトのスクリーンショットを取って分析するところから制作を始めていきます。
良いデザインだと思ったサイトの
他にも良いWebデザインとは何か理解を深めるためにYouTube動画を見てみたり。
HUGO（静的Webサイト生成ツール）やVue.JSに慣れているとはいえ、Astroが私にとって基本から学ばないといけない未知のツールであることに変わりはありません。学習効果を最大化するという意味では、ステップバイステップ形式のチュートリアルがかなり役立ちました。 （しかもここで作ったサンプルサイトはテンプレートとして使い回せますし）
デザイン作業はいつもラフスケッチから始まります。 今回はExcalidraw（と紙とペン）を使って、以下のページの構成を描いていきました。
そして色合いやフォントの組み合わせについても考えていきます。
@font-face {
font-family: 'heading';
src: local("Futura"), local("Trebuchet MS"), local("ヒラギノ角ゴ ProN"), local("Hiragino Kaku Gothic ProN"), local("游ゴシック"), local("YuGothic"), local("Yu Gothic"), local("メイリオ"), local("Meiryo"), local("ＭＳ ゴシック"), local("MS Gothic"), local("HiraKakuProN-W3");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'reading';
src: local("Andale Mono"), local("Consolas"), local("ヒラギノ角ゴ ProN"), local("Hiragino Kaku Gothic ProN"), local("游ゴシック"), local("YuGothic"), local("Yu Gothic"), local("メイリオ"), local("Meiryo"), local("ＭＳ ゴシック"), local("MS Gothic"), local("HiraKakuProN-W3");
font-weight: normal;
font-style: normal;
font-display: swap;
}ラフ案のデザインが実現可能かをテストしたり最終的な形を決めるため、Figmaで各ページのPC・スマートフォン用レイアウトを組み立てていきます。
最終的な見た目を決めた後、先に作ったサンプルサイトのコードを編集していきます。
まずは機能の追加から。
そして以下の工程から実際のコーディングを進めていきました。
個人的に、アセットの流用がプロジェクト進行やサイトの運営を楽にする鍵だと考えているので、いかにコードを流用可能にするかはかなり重要なポイントでした。 なので、この段階では「実装を進める中でどんなコンポーネントが必要になってくるか」をできるだけ予測するよう意識しました。
コーディングが終わったら、サイトをCloudflare Pagesにデプロイします。
でも何故チュートリアルおすすめのNetlifyではなくCloudflare Pagesにしたのか？ 理由は簡単で、（2025年2月現在）Cloudflareのアジア圏データセンター数が、数ヶ所だけのNetlifyより格段に多かったからです。 画像多めで使用地域の異なる言語を複数扱うサイトなので、どこからでもスピーディーに接続できるというのはかなり大事だなと。
公開までに取ったステップは以下の通り。