課題
SSEには、組織の活動、テーマ別領域、プロジェクト情報、大規模ギャラリーを紹介できる公開サイトが必要でした。
Loading portfolio
Webサイト + CMSフロントエンドNext.js WebサイトとCMSRambler TechnologiesでWebサイトを単独担当2022年-2023年
School of Shelter and Environment Webサイト・CMSフロントエンド
NGOであるSchool of Shelter and Environment向けに、プロジェクト情報、テーマ別コンテンツ、大規模ギャラリー、認証付きコンテンツ管理を備えた公開サイトとCMSフロントエンドを構築しました。
Project story
NGOサイト開発
要件を使えるWebサイトに落とし込む小さな事例
School of Shelter and Environmentは、Rambler Technologiesで私がWebサイト実装を単独で担当したプロフェッショナルなクライアント案件です。NGOサイトだったため、大げさなプロダクトストーリーよりも、プロジェクト情報、テーマ、ギャラリー、コンテンツ管理を分かりやすく保つことが重要でした。
制約
コンテンツを中心にした構成、APIデータとの連携、CMS認証、非エンジニアでも扱いやすい更新フローが求められました。
判断
Next.jsとTailwind CSSでレスポンシブなフロントエンドを構築し、公開ページをREST APIに接続し、CMS側は実用的な認証付きコンテンツ管理に絞りました。
トレードオフ
演出は控えめにし、モーションやパララックスは補助的に使いました。優先したのは読みやすさ、ナビゲーション、コンテンツ構造です。
結果
CMS連携、テーマ別ページ、プロジェクト情報、1000枚以上を想定したギャラリー構造を備えた公開NGOサイトとして納品しました。
NGO向け公開サイトとCMSフロントエンドを単独で実装。
主なポイント
- Rambler Technologiesで、このWebサイト実装を単独開発者として担当しました。
- NGO向けに、プロジェクト情報とテーマ別ページを中心にしたコンテンツ量の多い公開サイトを構築しました。
- APIから取得する動的なプロジェクトページと情報ページを構築しました。
- 1000枚以上の画像を想定したフォトギャラリーを扱いました。
- CMSフロントエンドにJWTベース認証を実装しました。
- コンテンツを優先しながらパララックス効果を追加しました。
担当範囲
- WebサイトとCMSフロントエンドの実装を単独開発者として担当しました。
- 公開WebサイトとCMSフロントエンドの実装をリードしました。
- プロジェクトと団体情報のAPI駆動コンテンツを統合しました。
- コンテンツ管理向けの認証付きCMSワークフローを構築しました。
関連プロジェクト
2022年-2023年 / プロのクライアントワーク
Nepal Volleyball Association Webサイト
動的なイベント、実績、ギャラリー、団体情報を備えたNepal Volleyball Associationの公開Webサイト。
2022年-2023年 / プロのクライアントワーク
First Step Pre School Webサイト
親しみやすいビジュアル、パララックス、活動紹介、サービス、推薦文、ギャラリーを備えた幼稚園Webサイト。
2022年-2023年 / プロのクライアントワーク
住宅ローン管理システム
ロールベースアクセス、堅牢なフォーム、ドキュメントアップロード、分析、Atomic React構成を備えた住宅ローン業務アプリケーション。