CASE STUDY — WEBSITE RENEWAL
町のパン屋「麦の音」
町のパン屋「麦の音」
Webサイト改修
長く使われてきた既存サイトを、ブランドの世界観に合うデザインへ刷新。スマホ対応・表示の軽量化・問い合わせ導線の改善まで、コーディングで解決した事例です。
※ 各枠内はスクロールできます。Before側は固定幅（非レスポンシブ）のため、枠内で横スクロールが発生します。
IMPROVEMENTS
改善したポイント
01
デザイン
Before
原色・影付き文字・虹色の罫線など装飾過多で、商品の魅力が伝わりにくい状態。
After
余白と落ち着いた配色でブランドの世界観を表現。写真と商品が主役になる構成に。
02
レスポンシブ対応
Before
固定幅（760px）でスマホ非対応。スマホでは文字が小さく横スクロールが必要だった。
After
スマホ・タブレット・PCに最適化。どの画面でも読みやすく操作しやすいレイアウトに。
03
HTML構造・表示速度
Before
テーブルレイアウトと装飾画像でコードが煩雑。見出し構造も整理されていなかった。
After
セマンティックなHTMLに再構築。軽量で表示が速く、保守しやすいコードに整理。
04
導線・CTA
Before
予約・問い合わせの導線が文中に埋もれ、行動につながりにくかった。
After
「ご予約」ボタンを各所に配置し、問い合わせまでの導線を明確化。
05
SEO・アクセシビリティ
Before
タイトルや見出しが整理されず、点滅文字など読みづらい要素も。
After
適切なtitle・見出し階層・代替テキストを設定。検索にも人にもやさしい設計に。
RESULT
改修による変化（イメージ）
スマホ対応
✕→◎
表示の軽さ
重い→軽快
問い合わせ導線
不明瞭→明確
更新のしやすさ
難→易
※ 数値・指標はデモ用のイメージです。