【実案件ざっくりレポート】 Astro + microCMS + Cloudflareで、『モトスミ・オズ通り商店街』のホームページも制作してみた
先日の案件つながりで、「モトスミ・オズ通り商店街のホームページも作ってみませんか？」という、うれしいお誘いが。
今回も受注から納品までスルスルと進んだので、「案件をこなすってどういう感じなの？」という方のために、ざっとレポートしてみます。なお、今回作った商店街のホームページはこちらです。
案件を獲得する
今回も同じ友人（モトスミ・オズ通り商店街のIT担当）からの案件受注です。クライアントがリピートしてくれるのは、なんともありがたいことですよね…。
Web 制作で独立している知り合いフリーランスの方々も、ある程度軌道にのってくると、「最近は紹介だけで仕事がまわっていますね…」という人が多い印象があります。
ただ、こうした状況になるには、目の前の案件をひとつずつ丁寧にこなして、クライアントから高い評価をいただかないといけません。今回も全力で取り組むぞ！と気合をいれてから、詳しいお話を聞くことにしました。
ヒアリングする
案件に取り組むことが決まったら早速ヒアリングです。友人からいろいろ聞いたところ、以下のような要望があることがわかりました。
現在もホームページはあるが、店舗を紹介するページなどで表示速度が遅いことがあるのでなんとかしたい。
作ったのが少し昔（8年前）なので、最近のトレンドにあわせてデザインを刷新したい。
写真が表示されていなかったり、リンク切れがあったりするので、コンテンツを整理して、データの管理体制をきっちりしていきたい。
公式ゆるキャラの「おずっちょ」をもっと推したい。
またヒアリングの際には、ホームページで気になる箇所を見せてもらったり、データをどのように管理しているか教えてもらったりしながら、言語化されていない、その他の要望があるかどうかも探っていきます。
そしてだいたいの要望がわかったら、次は楽しい楽しい設計作業です。
設計する
今回作るホームページでは商店街の店舗データを管理していく必要があるので、CMS（コンテンツ管理システム）が必須となります。
CMS といえば WordPress が有名ですが、WordPress は現在、エディタやテーマが新しいシステムに移行中であり、それに振り回されると大変そう…、ということで今回は見送ることにしました。
では、どうするか。
実はヒアリングで「表示速度を速くしたい」という要望を聞いたときから、「A…、Astro、君の出番だよ！」と、心に決めていたのでした笑。
Astro は日本ではややマイナーな印象がありますが、メディアやブログ、今回の商店街など、コンテンツ管理を前提としたサイトに特化したフレームワークの一つです（グローバルではだいぶメジャーな存在ですね）。
また、Astro の特徴はなんといってもその速度！「商店街の人にきっと満足してもらえるはず…！」ということで、Astro を軸にシステムを組み上げることに決めました。
そしてその他の構成ですが、コンテンツ管理についてはドットインストールで取り上げたときから惚れ込んでいる microCMS（詳しくは以下のレッスンをどうぞ！）、そしてデプロイ先（公開するサーバー）も自由に決めていい、ということだったので、こちらも速度重視で Cloudflare Pages を選ぶことにしました。
なお、モダンな技術をふんだんに使っているので開発費用がぐんと跳ね上がったのですが（三桁万円前後…）、弊社の研究開発を兼ねているのと（Astro のレッスン作りたい）、これから完成度を高めていけば外販もできるかも…？という思惑もあったので、商店街側が希望する予算とうまいこと折り合いをつけてから開発スタートです。
開発する
今回の開発では弊社の学生スタッフが大活躍。Astro は初見だったらしいのですが、数日でそれっぽいものが出来上がってきました。優秀…。
ちょこちょこ詰まるところはあったりしましたが、GitHub での共同開発でゴリゴリ進めていきます。Astro では JavaScript の知識が必須ですが、コンポーネント単位で効率的に開発を進めていくことができて、とてつもなく快適です。「さすが、グローバルで人気のフレームワーク、よくできてる…」と感心しながら作業を進めていきます。
なお、サイトでよく見るギミック的なものは、ドットインストールで取り上げたスクリプトを組み入れたらサクッと完成…。今回も以下が役立ちました。レッスン作って良かった。
なお、今回の制作で技術的に詰まる所は（あまり）なかったのですが、一点、困ったのが「プロが撮った、（映える）写真がなかったこと」。前回の案件はそれがあったのでデザインがビシッと決まったのですが…。
今回はこれから徐々に写真や動画を充実させていくことにして、とりあえずシンプルなデザインで組み上げました。今後、案件をこなしていくにあたって、（映える）写真をどうしていくかが大きな課題になってきそうです。
報告する
案件をこなすにあたって、もっとも重要なのはクライアントとのコミュニケーションです。今回も密に連絡をとりあって「次回のマイルストーンはこれです、いついつまでにこうなります、いまは計画通りで問題はありません」といった報告をしながら進めました。
また今回は microCMS を使ってデータを管理してもらうので、Zoom で講習会を行いました。国産 CMS 大手なので、画面も日本語でわかりやすく、すんなり使い方を習得してもらうことができたので一安心です。
今回の案件を終えて
実は今回、開発スケジュールがタイトで一ヶ月ほどでリリースまでこぎつける必要がありました。そのため、まだ実装していない機能がいくつかあったりします（検索機能とか）。今後、商店街の方々と話し合いながら、徐々にサイトを充実させていく予定です。
ただ、当初の目的であった「表示速度の向上」はうまくいったようで、リリース後に商店街の方から「表示が速くて気持ちいいです！」という感想をいただきました。Astro 選んで良かった…！
それから前回の案件同様、やはりクライアントとリアルなやり取りをすると学びが多いですね。この学びは、ドットインストールのコンテンツや、展開中のメンタリング、そして次の案件に活かしていければと思います。
なお、今回もざっくりレポートだったので細かい点を省きましたが、「今の学習からどう案件につなげていけばいいだろうか」「実案件のこのあたりって…、実際どうなっているの？」という疑問があれば以下から相談していただいても OK です！
おまけ
今回手掛けたモトスミ・オズ通り商店街ですが、10月6日に「オズフェスタ2024」を開催予定です。たくさんのブース、こども縁日やワークショップ、お笑いライブなど盛りだくさんらしいですよ。
元住吉ちかくの方は是非お立ち寄りください。公式パンフレットは近日中に公開されるらしいですが、概要他、詳細は以下のお知らせからご確認いただけます。
→ オズフェスタ2024のお知らせ（2024年10月6日 開催）
今回の案件レポートは以上です。また案件をこなしたら、こちらのnoteでも報告してみますね。
この記事が気に入ったらサポートをしてみませんか？