公開済みウェブ開発2026

Mining Hairのウェブサイト

営業中の美容室サイトのデザインとフルスタック開発。写真を中心とする画面に、レスポンシブレイアウト、動くギャラリー、Next.jsによる編集可能なコンテンツシステムを組み合わせています。

受託制作
公開中のウェブサイト

製品体験

Mining Hairの公式サイトをデザイン・開発し、現在運営されています。ホームには全幅写真、太い文字、共通ナビゲーションを使います。Next.jsとReactでページを構成し、Tailwind CSSで画面サイズに合うレイアウト、要素の重ね合わせ、画面に応じた文字サイズを実装しています。下の画面は、紹介、動くギャラリー、画像アーカイブ、操作できるレビュー場面の実装を示します。

人物写真、重ねた文字、固定レイアウトの紹介セクション — 紹介 — Next.js Imageで人物写真を表示し、Tailwind CSSで固定ビュー、重ねた文章、レスポンシブな文字サイズを組み合わせています。スクロールすると画像と文章がセクション内を動きます。

写真カードが横に動くGallery Snippetsセクション — Gallery Snippets — GSAPで複製したカード列を連続ループで動かし、レイアウト変更時に距離を再計算します。ホバーやキーボードフォーカスでCSSトランジションが写真を切り替え、カードを選ぶとそのカテゴリーを開きます。

Mining Hairのギャラリー一覧とカテゴリーナビゲーション — ギャラリー — Reactでカテゴリー選択を管理し、画像を12枚ずつ読み込みます。Tailwind CSSでレスポンシブなグリッドを配置し、Next.js Imageに読み込み中表示とホバーの変化を組み合わせます。

イラストのパノラマと人物操作があるStreet Notesレビューセクション — Street Notes — CSSの固定ビューでイラストの場面を画面に保ちます。重ねた背景画像と人物ボタンで構成し、通りの切り替え、場面の移動、レビューの表示を操作できます。

できること

ホームと紹介：レスポンシブな文字、重ねた写真、固定するセクション。
Gallery Snippets：GSAPのループ、画像切り替え、絞り込んだギャラリーへのリンク。
ギャラリー：カテゴリー絞り込み、ページ単位の読み込み、レスポンシブな画像一覧。
Street Notes：人物ボタンと場面移動を備えたイラストのパノラマ。
コンテンツ管理：その場での文章編集、画像アップロード、サーバー保存。

仕組み

サーバーで初回表示の主要コンテンツを用意し、クライアントのコンテンツ状態と共有します。編集要求はサーバーAPIを通り、Prismaが各セクションの内容をPostgreSQLに保存します。Redisで読み取り結果をキャッシュし、保存時に関連キャッシュを無効化して、その後は更新内容を読み取ります。

プライバシーとローカル運用

一般閲覧とコンテンツ編集は責任を分けています。編集操作は管理者モードで表示し、保存APIでも管理者セッションを確認します。納品には訪問者向けデザインと運営者の編集工程の両方を含めています。

リリース状況

サイトはmininghair.comで公開されています。ここに掲載した画像は運営中のサイトを撮影したものです。この事例では実装、構成、デザインを紹介します。