GBC様 Webサイトリニューアル 3案のご提案

株式会社GBC様
Webサイトリニューアル 3案のご提案

現行サイト（grabbag.jp）の写真と文章はそのままに、「見せ方」の違う3案をデモとしてご用意しました。スマホでもPCでも実際にスクロールしてお確かめください。気に入った案をベースに、細部を一緒に作り込んでいきます。

提案：ハッピーAIスタジオ2026年9月現行サイトを見る

3案で共通して解決すること（現行サイトの課題）

スマホで見づらい3案すべてスマホファーストで設計。片手で読める文字サイズと余白

お問い合わせページが404お問い合わせフォームを各案のトップに新設（電話・SNSの導線も併記）

SNSの入口が小さいInstagram／Facebookをヘッダー・専用ギャラリー・フッターの3箇所に

「買う」に繋がらない全案に「オンラインショップ」ボタン（公開時にBASE等へ接続）

ストーリーが埋もれている「一杯のエスプレッソから」の物語をトップに引き上げ、受賞・資格も見える化

3つのデザイン案

カードの画像はデモの実際の画面です。「デモを見る」でそのまま開けます。

案 A

狙い：写真を主役に、余白で上品に。商品を「買いたくなる」ショップ寄りの見せ方。チョコのダークブラウンとコーヒーの琥珀色を差し色に。

向いているケース：オンラインショップやギフト販売を伸ばしたい／写真をこれから増やしていきたい／全国のBean to Bar専門店と並んで見られたい

白・生成り・ダークブラウン・琥珀

案 B

狙い：「一杯のエスプレッソから」を第1章〜第5章の縦スクロールで読ませる。スクロールに合わせて背景写真が章ごとに切り替わる、ブランディング重視の構成。

向いているケース：ブランドの物語・産地との関係を深く伝えたい／取材・メディア・法人ギフトなど「背景」で選ばれたい／価格より価値で語りたい

生成り・ダークブラウン・琥珀・白

案 C

狙い：クリーム色とダークブラウンの落ち着いた配色で、山里の工房の温かみを前面に。7月にご提案した案で、現行サイトの雰囲気を残しつつ刷新する方向。

向いているケース：現行の雰囲気を大きく変えたくない／店舗に来てもらうことを最優先にしたい／まず手堅く整えたい

クリーム・ブラウン・ゴールド

ひと目でわかる比較

	案A 白基調ギャラリー型	案B 物語型	案C クラフト調
第一印象	明るい・洗練・都会のBean to Bar店の空気	映画のような没入感・読ませる	温かい・落ち着き・山里の工房
いちばん目立つもの	商品写真と価格	物語と産地の写真	ブランドコピーと世界観
スマホでの読み心地	軽い・すぐ商品にたどり着く	スクロールが楽しい・やや長い	標準的
ECとの相性	◎ そのまま通販の顔になる	○ 章ごとに購入導線	○ 商品カードから誘導
ブランディング	○	◎ 物語で選ばれる	○
更新のしやすさ	◎ 商品の追加が簡単	△ 章の文章を整える必要	○
参考にした型	Minimal（東京・Bean to Bar）	Dandelion Chocolate ＋ ONIBUS COFFEE	—

3案に共通する中身

写真・文章はすべて現行サイトの実素材公開時は最新の写真・商品情報に差し替えます。受賞歴・資格は現行サイト記載のもののみ

お問い合わせフォーム（見た目のみ）デモでは送信されません。公開時にメール通知・LINE公式などを設定

オンラインショップボタン（準備中）公開時にBASE／STORESなどへ接続。板チョコは現行のMILTOS CHOCOLATEショップにもリンク

店舗情報・Googleマップチョコレートファクトリー（中之庄町）を掲載。キリヤマベース店は現行の「休店中」表記に準拠

日本語フォント・スマホ対応Noto Sans JP／Noto Serif JP。375px〜PCまで崩れないことを確認済み

組み合わせも可能「案Aのレイアウトに案Bのストーリーページを足す」など、良いところ取りで本制作に進めます

※デモのため検索エンジンには登録されない設定（noindex）にしています。