Sunset Coffee — サンセットコーヒーのマルチページサイト

Web
Sunset Coffee — サンセットコーヒーのマルチページサイト

Sunset Coffee — サンセットコーヒーのマルチページサイト

Sunset Coffeeは、HTML/CSS/vanilla JavaScriptで作られたレスポンシブなマルチページなカフェ向けウェブサイトです。RTL（アラビア語）対応、ガラスモーフィズムのナビバー、スクロールアニメーション、シャインテキスト効果、カスタムJSによるライトボックスギャラリーなど視覚的に凝った演出を備え、静的ホスティング（例：GitHub Pages）でそのまま公開できる設計になっています。（約300字）

https://github.com/ahmedbadawix77x-gif/-Sunset-Coffee

概要

Sunset Coffeeは、架空のカフェ「Sunset Coffee」向けに作られた、デザイン志向の静的マルチページサイトです。純粋なHTML・CSS・バニラJSのみで構築され、アラビア語など右→左（RTL）言語への最適化が施されています。ビジュアル面ではガラスモーフィズム風のナビゲーション、スクロールに連動した演出、文字のシャイン効果、そして独自実装のライトボックスギャラリーなどを導入。小規模なポートフォリオやサンプルサイトとしてそのままデプロイ可能で、学習用途やテンプレート利用にも向く作りになっています。（約300字）

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 3
  • ファイル数: 8
  • メインの言語: HTML

主な特徴

  • 完全レスポンシブでマルチページ構成（複数のHTMLファイル）。
  • RTL（アラビア語）最適化：レイアウトとテキスト方向が右→左に対応。
  • 視覚効果：ガラスモーフィズムナビ、シャインテキスト、スクロールトリガーのアニメーション。
  • カスタムJSライトボックスギャラリー：ギャラリーページで拡大表示・モーダル表示を実現。

技術的なポイント

本プロジェクトはフロントエンドの表現力を純粋な技術で引き出すことにフォーカスしています。レイアウトはHTMLのセマンティック要素をベースにし、CSSでレスポンシブを実現。メディアクエリや相対単位（%・vw/vh・rem）を使って画面幅に応じた調整をしており、モバイル〜デスクトップまで安定した表示を目指しています。RTL対応は単純なdir=“rtl”指定に加え、フレックスやマージンの反転を意識したスタイル設計を行っており、テキストやUIの流れが自然に見えるよう配慮されています。

ビジュアル面ではガラスモーフィズムをCSSの半透明背景（rgba）とbackdrop-filter（ブラウザ対応要確認）などで表現し、ナビバーに浮遊感のある質感を付与。シャイン（反射）テキスト効果はCSSアニメーションと擬似要素でグラデーションを動かす手法を用いて視線を集めます。スクロールアニメーションはCSSトランジション／アニメーションを主体としつつ、表示トリガーに軽量なバニラJS（要素が画面内に入ったことを判定するロジック）を組み合わせることで、余計なライブラリなしに「シネマティック」な演出を実現しています。

ギャラリー機能はカスタム実装のライトボックスで、サムネイルクリックでモーダルを開き、左右ナビゲーションやキーボード操作で画像を遷移させる典型的なUXを提供。JavaScriptは最小限の依存でDOM操作やイベント管理を行うため、軽量で移植しやすい作りです。画像アセットはディレクトリで管理され、静的ホスティングに適した構成なので、GitHub Pages等へのデプロイが容易。アクセシビリティ面ではalt属性や適切なラベル付けを行うことが望ましく、画像サイズ最適化や遅延読み込みの導入でさらにパフォーマンスを改善できます。（約700字）

プロジェクトの構成

主要なファイルとディレクトリ：

  • README.md: プロジェクト概要とハイライト（デザイン、機能の説明）。
  • app.js: サイト全体のインタラクション（ライトボックス、スクロール検知、メニュー制御など）のメインスクリプト。
  • gallery.html: 画像ギャラリーのページ。サムネイルとライトボックスを備える。
  • image for Menu: メニュー表示用の画像群を格納するディレクトリ。
  • image for cafe: カフェビジュアル（店舗写真など）のディレクトリ。
  • index.html（想定）: トップページ（リポジトリ構成に含まれている可能性の高い主要ファイル）。
  • style.css / assets（想定）: サイト全体のスタイルシートとフォント／アイコン等（実際のファイルはリポジトリ内を参照してください）。

…他 3 ファイル

（各ファイルは静的構成で、編集→ローカル確認→そのまま静的ホスティングにアップする流れが想定されます。画像を差し替えればブランド沿ったサイトに簡単にカスタマイズ可能です。）

まとめ

シンプルで表現力の高い静的カフェサイトのテンプレート。学習・デモに最適。

リポジトリ情報：

READMEの抜粋：

☕ Sunset Coffee — Premium Multi-Page Café Website

A complete, beautifully crafted website for Sunset Coffee — a fictional café that blends warmth, elegance, and modern web design. Built with pure HTML, CSS, and vanilla JavaScript, this project showcases professional-grade front-end development with full Arabic (RTL) support, cinematic animations, and a cohesive visual language.

🌟 Highlights

🎨 Design & UX

  • Fully RTL-optimized: Designed from the ground up for Arabic,…