https://810eigo-droid.github.io/avanti_morofujl/　イタリアで修業した店主が営む、カウンター17席のワイン食堂の公式サイトです。「"食堂"の気軽さで、本格的なひと皿を。」というコンセプトを軸に、構成・デザイン・実装・原稿までを一貫して担当しました。フレームワークを使わず、HTML / CSS / JavaScript のみで構築しています。 課題 小規模な個人店にとって、ホームページの最大の役割は「集客」より先に 「来店前の不安をなくすこと」 だと考えました。ワインの店は、詳しくない人ほど入りにくい。価格が分からない、支払い方法が分からない、貸切ができるのか分からない——その一つひとつが、来店をためらう理由になります。 同時に、店主が更新作業に追われない仕組み であることも必須条件でした。営業中や仕込み中に手を止めてサイトを直す、という運用は現実的に続きません。 設計のポイント 1. 知りたいことが、来店前にすべて分かる 30品を超えるメニューを5つのタブに整理し、税別価格を全品に明記。支払い方法（現金・クレジットカード・QRコード決済）、インボイス対応の領収書、貸切の可否と人数、予算の目安まで、来店前に確認できる構成にしました。「よくある質問」も、実際に聞かれることだけを6問に絞っています。 2. 電話をかける前に、事情が分かる 仕込み中や調理中は電話に出られないことが多い店です。そこで電話番号を直接リンクにせず、タップすると固定電話と携帯電話を選べるダイアログ を挟みました。同じ画面に「留守番電話にメッセージを残していただければ折り返します」と明記することで、「出なかった＝やっていない」という誤解を防いでいます。 3. 店主が更新しなくても、古くならない 「季節のおすすめ」は、日付や年号を書かず "例として3品" を挙げる形式にしました。実際の内容はInstagramへ誘導することで、書き換えなくても情報が嘘にならない設計です。 写真についても、決められたファイル名で画像を置くだけで自動的に反映される仕組み を実装しました。店主がHTMLを触る必要はありません。あわせて、必要な画像の名前・サイズ・構図の指針をまとめた仕様書を別途用意しています。 4. 実際の声を、誠実に載せる Googleクチコミから13件を抜粋し、3件を常時表示、残り10件をアコーディオンに格納。星評価は載せず、投稿全文へのリンクを添えました。人物イラストは実在の投稿者ではないため、その旨を明記しています。 5. スマートフォンでの操作感 ヘッダー全体を追従させるとスマートフォンの画面を圧迫するため、ハンバーガーメニューだけを固定。画面下部には電話予約とネット予約の常時表示バーを置いています。横スクロールするメニュータブには、端のグラデーション・金色の矢印・初回のみの自動アニメーションという3段階のヒントを重ね、気づかずに見落とされることを防ぎました。 実装・技術 HTML / CSS / JavaScript（フレームワーク不使用）、GitHub Pages で公開 スクロールに連動した表示アニメーション（IntersectionObserver、6種類の動きを要素ごとに出し分け） prefers-reduced-motion に対応し、動きを抑える設定の環境では全アニメーションを停止 画像は WebP、aspect-ratio を実際の画像から動的に算出し、端末幅による意図しない切り抜きを回避 タブUIは role="tablist" / aria-selected を付与 OGP・ファビコン・キャッシュバスティング対応 担当 企画構成 / ワイヤーフレーム / デザイン / コーディング / 原稿執筆 / 公開・運用手順の整備