WEB SITE

どひ水族館サイト

Webサイト一覧へ戻る

どひ水族館サイト

WEB SITE / CORPORATE

どひ水族館サイト

制作概要

「海を、もっと身近に」をコンセプトにした架空の水族館コーポレートサイトです。ホーム・展示エリア・イベント・チケット・アクセス・生き物図鑑・ショップ・ニュース・会社概要の多ページ構成で、実際の水族館サイトを想定したコンテンツを制作しました。

こだわりポイント

水族館らしい深海ブルーをメインカラーとして採用し、ヒーローセクションにはジンベイザメの迫力ある写真を全面配置することで、サイトを開いた瞬間に訪問者を海の世界へ引き込む演出を意識しました。ナビゲーションは上部に固定し、チケット購入・アクセス・メニューへのクイックリンクを常時表示することで、実用的なUXを実現しています。Photoshopで写真素材の編集・加工も行い、サイト全体のビジュアルを統一しました。

AI活用について

本サイトの制作には、生成AI(Claude Code)を補助ツールとして活用しています。デザインのコンセプト設計・全体構成・カラーパレットや訴求方針などの企画判断は自身で行い、AIには定型的なコーディング作業や繰り返し処理の効率化、コードレビューを担当させることで、品質を担保しつつ短期間で多ページ構成を完成させました。「AIに任せて作った」のではなく、「AIを道具として使いこなした」制作プロセスを意識しています。

課題

情報量の多い水族館サイトで、視覚的な魅力と実用性(チケット・アクセス)を両立させる必要があった。

施策

深海ブルーのカラーパレットとヒーロー写真で没入感を演出。固定ナビにチケット・アクセスへのクイックリンクを常時配置してUXを確保。

結果

ビジュアル体験と機能性を両立した多ページ構成のコーポレートサイトを実現。9ページ分のコンテンツを統一感のあるデザインで完成。

CATEGORY

Webサイト

DATE

2026年3月

TECH STACK

HTML CSS JavaScript

TOOL

VS Code Claude Code Photoshop