季節ごとに背景画像が切り替わる
Webデザインのちょっとした工夫

こんにちは山形のWEBデザイナー菅野です。

少し前の話になりますが、小規模で比較的簡単なWEBサイトを制作した時の話になります。
デザインも概ね確定し、コーディング作業に入る際にお客様から1点ご要望をいただきました

「季節ごとに背景画像を変更したい」

メインビジュアルの背景画像を春夏秋冬の4種類作成し
季節ごとに変更したいというものです

デザイン的にはまったく問題ありませんし
コーディング的にも4種類作成すればOKです

少し問題があるとすれば背景の切り替えを手動で行うか自動で行うかでしょうか🤔
手動であればもちろん私の作業になるわけですが
切り替えの日時を決めて年４回の切り替え作業となるとちょっとだけ面倒です
背景の切り替えだけであれば数分程度で大した手間ではありませんが
この場合ですと年4回程度とはいえ終わりがなくスケジュールを気にしなくてはいけません
あと常にタスクが残っている状態って意外とストレスかかるんですよね…😓

自動の切り替えは今までやったことはありませんが
一度設定してしまえばあとは手が離れますしクライアント的にも楽になるはずです
いい機会なので今回調べてみることにしました🤔

調べてみたところ結構いろんな方法があることがわかりました
JavaScriptとCSSを使うことで変更可能なようです

JavaScriptで現在の日時を取得し、期間を4つに分けて
それぞれ季節のCSSスタイル名を付与する形です
自動切り替え勝手に難しいと思ってましたが全然簡単で
実際作業してみたら30分かからずで設定できました👍

ちょっとした工夫で、自分もクライアントさんも手間がなくなるのは嬉しいですね
Webサイトを作るときは「見やすさ」だけでなく「使いやすさ」や「続けやすさ」も意識していきたいと感じました