既存ページのパーツ追加・文言調整(Before / Afterデモ)

既存の静的ページやWordPressサイトに対して、ボックス追加Instagramアイコン追加メニュー文言の変更を行ったときの見え方を、画面イメージでBefore / After比較できるようにしたサンプルです。

「ここだけ足したい」「ここだけ直したい」に対応します

新規制作だけでなく、既存サイトの下層ページに対してボタン・ボックスの追加や、 Instagramアイコンの追加メニュー名の変更など、細かな修正もお任せください。

HTML / CSS / WordPress
ボックスを増やして分かりやすくしたい

「お知らせだけ」から「予約・お問い合わせボックスも並べる」形への変更など。

Instagramアイコンを追加したい

フッターやハンバーガーメニューにInstagramアイコンを追加し、フォローや予約ページへ誘導。

メニューの名前を変えたい

「メニュー」→「サービス・料金」など、内容が伝わりやすいラベルに調整します。

PF-005-01|ボックス追加による導線整理(ボックスなし → ボックスあり)

ページ中段に何もボックスが無い状態から、「予約」と「お問い合わせ」ボックスを追加して、 次のアクションが一目で分かるようにした例です。

静的HTML ボックス追加 導線設計
Before

・お知らせの下が空白のままで、予約や問い合わせのボタンが無い
・「次にどこを押せば良いか」が分かりにくい

After

・お知らせの下に「予約」と「お問い合わせ」ボックスを追加
・スマホでもタップしやすいボタンで、行動が明確になる

Before:ボックスなし
ホーム メニュー アクセス

最新のお知らせ

営業日やキャンペーンなどのお知らせがここに表示されます。

ボックス未設置

この位置には、まだ「予約ボタン」や「お問い合わせボタン」がありません。
次のアクションはヘッダーメニューから探す必要があります。

ページ中段が空白になっており、初めて訪れた方には「次に何をすれば良いか」が伝わりにくい状態です。

After:ボックス追加
ホーム サービス・料金 アクセス

最新のお知らせ

営業日やキャンペーンなどのお知らせがここに表示されます。

ボックスを追加
ご予約の空き状況 オンラインで空き状況を確認できます。
お問い合わせ 小さなご質問でもお気軽にご連絡ください。

「お知らせ」の直下に分かりやすい2つのボックスを置くことで、予約問い合わせのどちらにもすぐ進める構成です。

PF-005-02|Instagramアイコン追加(なし → あり)

フッターにInstagramアイコンが無い状態から、Instagramアイコンを追加して、 フォローや予約ページへの導線を分かりやすくした例です。

Instagramアイコン フッター ハンバーガーメニュー
Before

・フッターにはコピーライトのみ
・Instagramへのリンクがテキストだけ、もしくはそもそも無い

After

・フッターにInstagramアイコンを追加
・スマホでも一目で「Instagramへ飛べる」と分かる

Before:Instagramアイコンなし
ホーム メニュー お問い合わせ

ページ内容

本文やサービス紹介がここに表示される想定です。

Instagram未設置

Instagramへの導線は、別ページのテキストリンク頼りになっており、
「フォローしたい人」がフッターからすぐ飛ぶことはできません。

After:Instagramアイコン追加
ホーム サービス お問い合わせ

ページ内容

本文やサービス紹介がここに表示される想定です。

Instagramアイコンを追加

ブランドカラーに合わせたInstagramアイコンをフッターに常設することで、
スマホでも「ここを押せばInstagram」と一目で分かるようにした例です。
実案件では、ハンバーガーメニュー内にも同様のアイコンを配置し、
上部メニューからもInstagramへ飛べるように調整します。

PF-005-03|メニュー名と色の調整(「メニュー」→「サービス・料金」など)

グローバルナビのラベルが「メニュー」など抽象的な状態から、 「サービス・料金」など内容がイメージしやすいラベルに変更し、現在地の色も調整した例です。

ナビゲーション 文言変更 色調整
Before

・「メニュー」など抽象的なラベル
・現在地の色も薄く、どこを見ているか分かりづらい

After

・「サービス・料金」など、内容が伝わるラベルに変更
・現在地だけブランドカラーにして、ページ位置が一目で分かる

Before:ラベルが抽象的
ホーム メニュー その他

メニュー

サービス内容・料金などが1ページにまとまっている状態。

ラベル・色がぼんやり

「メニュー」という言葉だけでは、初めての方には何が載っているページか分かりにくい状態です。
現在地もグレーで、どのページを見ているか伝わりづらくなっています。

After:ラベルと色を調整
ホーム サービス・料金 よくある質問

サービス・料金

提供しているメニューと料金、よくある質問への導線などを整理したページ。

ラベルと色を変更

ナビゲーションの文言を「サービス・料金」など中身が想像しやすい表現に変更し、
現在地だけブランドカラーで強調することで、今どこを見ているかが一目で分かるようにした例です。