みなさんこんにちは。いしかわでございます。12月３日（水）まで、ベクトルパスポートのユーザーの方は ヘアサロンのデモサイト が無料でインストール可能になっています。
今日はこのヘアサロンのデモサイトで使ったヒーローエリアを例にレスポンシブでも視認性を確保するテクニック例を紹介します！
この記事は「Vektor WordPress Solution Advent Calendar 2025」の12月2日の記事になります。
一人ひとりに
寄り添える美容師に
INTERVIEW 01
スタイリスト
山田花子
HANAKO YAMADA
20XX年度入社
画面サイズによる見え方の違い
画面サイズによって以下のようになります。
“顔” に文字が被らないように
おそらく基本だと思ってるのですが、見せる役割で配置している人物の顔の上に文字が被るのは美しくないです。しかしながら、人物を最初から右に配置した画像を使うと、画面が広い場合に無駄に目線が右（コンテント幅の右端あるいはそれよりも右）に流れてしまいます。
そこで、人物は中央よりやや右に配置された画像を使いつつ、フォーカルポイントを左に振ります。
これによって左上が優先表示されるので、画面が狭くなった時は右下からトリミングされていきます。
文字の視認性をしっかり確保する
画像の上の文字は見にくくなってしまいますので、まずはカバーブロックの背景オーバーレイで黒をグラデーションさせる事によって視認性が上がるようにします。
その下の名前が記載してある部分も更に視認性を上げるためにグループブロックで背景に黒の透過を指定します。
しかしながら、このブループブロックは普通に配置すると横幅いっぱいに広がってしまうので右側の人物のところまで被っていってしまいます。
そこで、グループブロックが要素の幅以上に広がらないように横並びブロックでラップします。
意図しない改行を制御する
画面が狭くなった時に意図しない箇所で改行されないように、No wrap を指定しています。
Sample
02
採用ページ インタビューバナー 背景斜めカット
最終的に先に紹介したタイプを使いましたが、採用ページのインタビュー用に作ったバナーです。背景を斜めにカットしつつ各画面サイズでも各要素の視認性を損なわないようにしています。
一人ひとりに
寄り添える美容師に
INTERVIEW 01
スタイリスト
山田花子
HANAKO YAMADA
20XX年度入社
画面サイズによる見え方の違い
画面サイズによって以下のようになります。
やってる事・意図は先に紹介したタイプと同じです。
文字の視認性を上げるために画像の上に白で斜めにオーバーレイ
01 のヒーローバナーでは黒透過のグラデーションでしたが、こちらは白のベタ塗りを斜めにかぶせています。
画面が狭くても見出し部分の視認性を確保
斜めにカットしている部分は画面が狭くなると画像の領域が広くなり、上の文字が見にくくなるため、文字の下に背景色を指定しています。そして、名前のカードと同様に右に広がらないように横並びブロックでラップします。
まとめと宣伝
いかがでしょう？実は…この部分作った時に各画面サイズで文字の視認性と人物に被らないようにするためにめちゃめちゃ思考錯誤しました…。最終的にいい感じにできたのではないかなと思います。
参考にしてみてください。
12月3日（水）まで！
「ヘアサロン」サイトがインストール無料！
今日から12月3日（水）まで！期間限定でベクトルパスポートのユーザーのみなさんは
ヘアサロンのデモサイトデータを無料でインストール可能になってます！
当然この３日間でサロンのウェブサイトを作る案件を持っている方はいないと思いますが、テスト環境にインストールしてデータをエクスポートして保存しておけば今後必要に応じて使えると思います。
パスポートユーザー以外の方はこの機会に是非ご検討ください！
ベクトルパスポート for ワードプレス | Vektor Web Solutions
WordPress テーマ・プラグイン等が使えるお得なオールインワンライセンス。高品質なウェブ制作をすべての人に。コピペで使える豊富なプロ品質プレミアムパターン、ブロックエディタ、フルサイト編集対応。
このデモサイトは VK FullSite Installer から簡単にインストール可能です
このデモサイトはプラグイン「VK FullSite Installer」から簡単にインストール可能です。
VK FullSite Installer | 目的に応じたデモサイトデータから超カンタンにウェブサイトが立ち上がります
目的に応じたデモサイトデータから超カンタンにウェブサイトが立ち上がります
02 のパターンの呼び出し方
ヘアサロンのデモサイトをインストールしたら、エディタから 「ブロックを挿入 > パターン > ヘアサロン」 から配置する事ができます。
ご参加お待ちしてます！
ベクトルスタッフ以外の一般のユーザーの皆様の参加もウルトラ大歓迎ですのでお待ちしています！
この記事を書いた人
- 代表取締役
-
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他
を購入して
特典をゲットしよう！
特典A
X-T9 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
特典B
Lightning ビジネス（Evergreen）
9,900円 (税込)
0円に！
特典C
Lightning 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
今なら！
Vektor Passport の
有効期間中、上記の
デモサイトデータを
何度でも素早くまるごと
インポートできます！
爆速!!１分でデモサイトと同じ
ホームページができる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。