ヘッダー画像のデザイン

投稿日:2017年4月7日

今回のヘッダー画像デザインはプランE。前回書いた通り、1枚のヘッダー画像のみで構成してみます。…まぁこれが普通なんですけどね。

 
まずは自分が今まで理想としてきた形である、サイトタイトル&キャッチフレーズ+両脇に2枚の写真、でデザインしてみる。

ほんでとりあえずの形になったのがコレ。

写真素材は前回から引き続き、「写真AC」様、加えて「写真素材 足成」様よりお借りしました。

 
まーまーデザインセンスとかそういうのは置いといて、一応一般的に見るヘッダーっぽい画像になりましたかね?

面白かったのは最上部に残ってしまうヘッダーエリアに前回設置した黄と黒のライン(なんて呼べばいいんでしょかねコレ)がまだ表示されていたというトコ。
ヘッダーエリア背景画像を下に固定していた為ですね。これはなんか気に入ったのでそのままに。

 
ここまでは最初期に当サイトで設定していたヘッダー画像と全く同じ構成なので、特に問題はないですね。問題はここから。

レスポンシブデザインですね、考えていかねばならんのは。
WordPressにはPC・タブレット・スマホ用のウィンドウサイズにワンクリックで切り替えられるっぽい機能がライブプレビュー(カスタマイザー)にあるので、これを使って見てみました。

アコーディオンメニュー含むヘッダーエリアには今回は手を付けていないのでここは放っとく。
肝心のヘッダー画像なんですが、ここはウィンドウサイズに合わせて縦横比を維持したまま縮小されますね。(私はこれを相対比縮小と呼んでる)

以前私はウィンドウを縮めると両端から切れていってしまう形式が嫌だ、みたいな事を言った気がしますが、この相対比縮小は私の好むところ…だと思っていたのですが、画像内に入れたキャッチフレーズが読めなくなりますね…

ずぇったいに何か問題が起きると思っていましたが、案の定ですね(^^;
ま、こんくらい先に気付けよって話ですが…

 
でも逆に良かった事もあるんですよね。それは横幅100%のヘッダー画像にリンクを張っても、思ってた程気にならなかったってトコ。

私は端から端までがクリック可だと、誤クリック(タップ)が増えてしまうんじゃないかと危惧していたんですが、相対比縮小だと、ウィンドウの幅が縮まれば高さも比率を維持するために適宜縮んでくれるので、そこまで悪くないんじゃぁないかと。
そもそも一番邪魔になるであろうPC時なら、マウスオーバーで色が変わるので、マウス操作ではそんなに誤クリックとか無いんじゃないのではと。

ここは前回妥協点として挙げたものだったんですが、許容内としてもいいかな?

 

プランEはこんなもんかな。
スマホ時だと多分キャッチフレーズが小さくなりすぎて読めない事になってると思うので(実際には確かめてはいない)、前回の記事で2つ目の妥協点で挙げた、ヘッダー画像をクリック不可(リンク無)にしてタイトル・キャッチフレーズをその上部にリンク付きテキストとして設置する方法を次回試してみようと思います。

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.