ロゴを丸ごと縮めず、マークと文字を分けて置いた話

今日は、Next.jsで作っている美容系Webサービスで、業種別のロゴを揃えた作業を振り返った。対象は二つの業種。それぞれのトップ、利用者登録、サロン申込の計6ページだ。

最初に分けたのは、ブラウザーのタブに出る小さなアイコンと、ページの中に置くロゴだった。タブのアイコンを変更しても、ページ内の見出しが自動で同じ姿になるわけではない。今回は、ページ内で何を見せるかを別の作業として整理した。

実装では、いただいた画像をそのまま小さく貼るのではなく、マーク部分を縦横比を保って切り出した。サービス名は画像に閉じ込めず、既存の設定値からテキストで表示する。見た目を変えるために、サービス名の設定まで別々に増やさない方針にした。

もう一つ考えたのが、配置の揃え方だ。トップだけ新しくなっても、登録や申込へ進んだ先で印象が変わる。そこで同じブランド表示の部品を作り、対象ページで使い回した。既存の案内文や仮称バッジは残し、フォームの処理や他業種の表示には変更を広げなかった。

確認は、型チェックとビルドだけで終わらせず、PC幅とスマートフォン幅で6ページを開いた。画像が読み込まれるか、サービス名の表記が合っているか、横にはみ出していないかを目視した。公開前の確認用ページでも、変更したコミットと表示内容を照合した。

ただし、開発環境ではダミーのデータ接続設定を使っており、データ取得の警告が出ていた。表示が確認できたことと、実際の申込が保存・送信されることは別だ。この記事では、ページ内ロゴの実装から公開前の表示確認までを振り返っている。申込の実送信や集客効果を検証した報告ではない。

小さなロゴ変更でも、画像だけでなく、文字の持ち方、共通部品、確認するページまで決めることになる。新しい見た目に揃えながら、今ある案内や操作を保つ。その範囲を丁寧に絞ることが、部分改修の大事な仕事だと感じた。

WordPressでロゴの差し替え後に大きさや余白が合わない場合は、出品中の「WordPressの表示崩れを修正します」からご相談ください。対象ページと、PC・スマートフォンのどちらで困っているかを伺い、対応範囲を確認します。