歴てく2024年度前期
福岡県で歴史観光会社の立ち上げを準備しているクライアントと連携して進めたプロジェクトです。 あまり知られていない地域の歴史をたどることで、旅行者が新たな気づきやより深い体験を得られるようにデザインした観光サービスサイトになります。
また、技術的な知識がなくてもサイト内の情報を更新できる仕組みを導入し、運用面にも配慮しました。
種類:チーム制作
役割:リーダー・リードエンジニア
使用言語&ツール:TypeScriptNext.jsNode.jsFirebase
※ セキュリティ上、ウェブサイトの管理ページには直接公開アクセスできません。しかし、スクリーンショットを撮影する許可を得ましたので、詳細は画像をご覧ください。

※ 現在、一部の 約款などの法的情報 を追加する準備を進めているため、本番環境のウェブサイトはプライベートモードになっています。 現在のリンクは、開発中に使用していたテストデプロイ用のURLとなります。
  • aaa
  • aaa
  • aaa
  • aaa
  • aaa
  • aaa
  • aaa
  • aaa
  • aaa
  • aaa
  • aaa
  • aaa

1. プロジェクト制作における意識したこと

1.1 お客様の要望を最優先にする

当初は、MySQLとExpressを使ったバックエンドを構築し、自分のスキルを磨きたいと思っていました。しかし、クライアントから「できるだけ維持費を抑えてほしい」という要望を受け、当初のプランを断念することに。

その結果、費用を抑えるため、フロントエンドとバックエンドを分けるのではなく、Next.jsを使って統合し、データベースやストレージはFirebaseの無料枠を活用することにしました。これにより、月々のコストはサイトのサーバー代とドメイン代のみで済み、データベースやストレージ、その他クラウドサービスに関する費用は完全にゼロに抑えられています。

aaa

管理者に関するデータは Firebaseを利用して保管しています。

1.2 専門的な知識がなくても、簡単に使えるように!!

私たちのクライアントは、Web技術についてあまり詳しくない方でした。そのため、「誰でも手軽に使えるウェブサイトを作ってほしい」という要望があり、チームとして何度もクライアントと話し合いました。具体的には、担当教員が用意したGoogleシートに質問をまとめ、そこから適切な方向性を導き出しています。

管理画面は私が担当し、できるだけシンプルなUIを心がけました。ボタン類を分かりやすく配置し、操作手順を補足する説明を加えて、クライアントが戸惑わないよう配慮しています。

また、管理画面のマニュアルと各種アカウントをまとめた資料も用意し、いつでも疑問点を確認できるようにしました。

aaa

Notionページで マニュアルを作成しました。

2. チームリーダーとして意識したこと。

2.1 「報・連・相」は最も重要!

チームでの作業において「報・連・相」の重要性を強く意識し、チーム内でのコミュニケーションを常に重視しました。メンバーには、自分の作業が進むたびに報告・連絡を徹底してもらうことで、業務内容のズレやミスを防ぐよう努めました。

また、授業外の時間にも定期的にミーティングを行い、コミュニケーションの強化を図るとともに、プロジェクトの進行をスムーズにしました。これにより、プロジェクトの進捗を滞りなく維持し、大きなミスなく進めることができました。

aaa

基本のコミュニケーションと知らせはdiscordで実施しました

2.2 メンバーのそれぞれの得意分野を活かす

今回のプロジェクトは 5人チーム で進めました。メンバーそれぞれに 得意な分野と苦手な分野 があり、私の役割は 各メンバーが持つ強みを最大限に発揮できるポジションを用意すること でした。適切な役割分担を行うことで、メンバー全員が 自分のスキルを100%活かせる環境 を作ることを目指しました。

例えば、デザイナーが2名いる中で、1人はUI/UXやレイアウト設計が得意、もう1人はグラフィックデザインに強みがあると判断しました。そのため、グラフィックデザインが得意なメンバーには装飾やビジュアル要素を担当してもらい、レイアウト設計が得意なメンバーにはコンテンツブロックの配置を中心に担当してもらいました。

もちろん、デザインの進行は全員で意見を出し合い、フィードバックを共有しながら進めることで、より客観的でバランスの取れたアウトプットを目指しました。

aaa

discordでそれぞれの分野のチャンネルを作成し、情報共有を行いました。

3. 気づき・学び・反省点

3.1 仕事ってこういうものなんだ!

今回が初めての企業連携プロジェクトだったため、実務に近い経験を通じて多くのことを学びました。

例えば、デザイナーが2名いる中で、1人はUI/例えば、クライアントとコミュニケーションを取る際、専門用語を使いすぎず、分かりやすい言葉を選ぶ必要がありました。また、クライアントの要望をそのまま受け入れるだけでなく、より良い選択肢を提案することも求められました。

そして何より、自分が「やりたい」と思ったことでも、クライアントの利益にならなければ優先すべきではないということを実感しました。このプロジェクトを通じて、実務における意思決定の難しさと重要性を学ぶことができ、今後の仕事に生かせる貴重な経験となりました。

aaa
3.2 自分でデプロイもやりたかった!

プロジェクトの最終段階では、開発したシステムを 本番環境のサーバーにデプロイし、正式に公開 する必要がありました。しかし、その時点で私は サーバーの設定やデプロイの実務経験がなく、最終的にこの作業は 担当の先生に任せることになってしまいました。

最後の重要な工程を自分でできなかったのは、とても悔しい経験でした。そのため、プロジェクト終了後すぐに 自分でVPSサーバーをレンタルし、ドメインの設定・サーバー構築・デプロイ作業 などを試行錯誤しながら学びました。

今では、自分でデプロイや本番環境への公開ができるようになり、自信を持って対応できるスキルが身についた と実感しています。次のプロジェクトでは、必ず自分でデプロイまで担当しようと思います。

aaa

Xserverサビースで4GB-4コアのVPSサーバーをレンタルし、いろいろ試しました。

© 2025 | Create by  Huynhnguyen1906