AstroでWebサイトを作る（デザイナー的ワークフロー）

サイトリニューアル、技術面のお話。

Tue Mar 04

#Web開発#デザイン#ワークフロー#コーディング

前回の記事では「何故サイトをリニューアルするに至ったのか」その理由について書きましたが、今回は技術面についてのお話をしたいと思います。

1. サイトの目的とツール決め

まず、時とともにブレてしまわないようサイトの方向性を固めるとともに、制作ツールに必要な条件を考えていきます。

サイトの目的：私のスキル実例や考えを載せていく
- Webマガジン、インスピレーションの元、経歴書として機能する場所
ツールの条件：
- 最新のWeb開発フローによるスキル向上効果があって、かつ制作時間削減にも繋がるもの
- 静的Webサイト生成ツールであること。WordPressのようにセキュリティの脆弱性を気にしなくてよいので。

その上で、条件に合うツールを選定していきます。

準備ツール
- Excalidraw：オープンソースのホワイトボードアプリ。紙とペンのような使い心地が取り掛かりの敷居を低くしてくれます。
- Figma：仕事で普段使いしているワイヤーフレーム作成ツールなので。
開発ツール
- Webサイト生成ツール：Astro
  - 近頃広く使われている、個人サイト制作が楽になったとの声が多数の静的Webサイト生成ツール。
  - Git、GitHub、Netlify、Cloudflare、React、Tailwind CSS等のプラットフォームやフレームワークと連携できるのがポイント。
  - HugoとVue.JSの知識が生かせるのもポイント。
  - Hugoではできなかった.mdファイル内へのHTMLタグの埋め込みが可能。
- CSSフレームワーク：Tailwind CSS
  - 仕事で使ってみて、いかにCSSコーディングを時短できるかに驚いたので。
  - 技術の進歩に伴い頻繁にアップデートされるので、サイト管理もローメンテナンスで行けます。
- コードエディター：Visual Studio Code
  - 使用した拡張機能：WSL、Astro、Git Graph、JavaScript Debugger Companion Extension
画像系ツール
- Photoshop
  - 定番の画像処理ソフト。
- Blender
  - お気に入りのオールインワン3Dツール。

2. 準備

インスピレーション探し＋知識のアップデート

今回の目的の一つに「Webデザイン・開発の知識＆スキル向上」があるので、色々なサイトのスクリーンショットを取って分析するところから制作を始めていきます。

良いデザインだと思ったサイトの

構成
パーソナルブランドや企業ブランドの魅せ方についてノートを取って、自分のサイトをどのようなデザインにしたいかを考えました。

他にも良いWebデザインとは何か理解を深めるためにYouTube動画を見てみたり。

https://www.youtube.com/@AnthonySistilli/ （Roasting your portfoliosシリーズ）
https://www.youtube.com/@MalewiczHype （論理的に説明してくれるチュートリアルが良いです）

チュートリアルでAstroの仕様を把握

HUGO（静的Webサイト生成ツール）やVue.JSに慣れているとはいえ、Astroが私にとって基本から学ばないといけない未知のツールであることに変わりはありません。学習効果を最大化するという意味では、ステップバイステップ形式のチュートリアルがかなり役立ちました。（しかもここで作ったサンプルサイトはテンプレートとして使い回せますし）

3. デザイン

1. コンセプト

身近で気軽な雰囲気で、かつ私の人柄が伝わるような場所
頻繁に更新できる（完璧を目指さない）場所
- 言い訳がましい気もしますが、更新頻度が鈍らないよう完璧主義を捨てた感じです。

2. ラフスケッチ

デザイン作業はいつもラフスケッチから始まります。今回はExcalidraw（と紙とペン）を使って、以下のページの構成を描いていきました。

Indexページ：サイトの概要
Article：考え・考え方や制作スキルを見せる場所
About：私について、スキル一覧、経歴について

そして色合いやフォントの組み合わせについても考えていきます。

色の組み合わせを検討するのに https://colormagic.app/ が役立ちました。
フォントに関しては、最初はWebフォントを使うつもりでいたのですが、日本語フォントを読み込むのにかなり負荷がかかるとのことで、最終的にはWebセーフフォントを使うことにしました。

@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;
}

3. Figmaで実際の見え方を検討する

ラフ案のデザインが実現可能かをテストしたり最終的な形を決めるため、Figmaで各ページのPC・スマートフォン用レイアウトを組み立てていきます。

4. Astroでコーディング

最終的な見た目を決めた後、先に作ったサンプルサイトのコードを編集していきます。

まずは機能の追加から。

Tailwind CSS：実装の工程を簡略化＆スピードアップするため
Tailwind CSS Animated：サイトにアナログ感や身近な雰囲気をプラスするため
i18n：日本語・英語両方に対応するため

そして以下の工程から実際のコーディングを進めていきました。

global.cssにCSS変数（font familyやカラーコードなど）を加えて
header.astro、navigation.astro、footer.astroなど、使い回すためのAstroコンポーネントを作っていきました。

個人的に、アセットの流用がプロジェクト進行やサイトの運営を楽にする鍵だと考えているので、いかにコードを流用可能にするかはかなり重要なポイントでした。なので、この段階では「実装を進める中でどんなコンポーネントが必要になってくるか」をできるだけ予測するよう意識しました。

5. GitHub→Cloudflare Pagesにデプロイ

コーディングが終わったら、サイトをCloudflare Pagesにデプロイします。

でも何故チュートリアルおすすめのNetlifyではなくCloudflare Pagesにしたのか？理由は簡単で、（2025年2月現在）Cloudflareのアジア圏データセンター数が、数ヶ所だけのNetlifyより格段に多かったからです。画像多めで使用地域の異なる言語を複数扱うサイトなので、どこからでもスピーディーに接続できるというのはかなり大事だなと。

公開までに取ったステップは以下の通り。

新しいGitHubレポジトリを作成します。
Cloudflareにサインアップします。
Cloudflare Pages projectを作成し、先に作ったGitHubレポジトリのコードから自動でデプロイするよう連携させます。
カスタムドメイン設定（erikaobama.com）をして完了です。