Yukiyanagiな日々

趣味で創作活動しています。野生動物、北方狩猟民大好き。創作活動の報告や、日々思うことを綴ります。

今どきのワイド型のWEBデザインにしたい!

久しぶりにWEBデザインに関することを書きます。

つい先日また自分のサイトのデザインを変えました。そう、トップページのスライダーやその他のページのヘッダー画像が、ブラウザ幅いっぱいまで表示できるようになったんです。

今どきのWEBサイトって、スライダーとかヘッダー画像とかが画面いっぱいに表示されてることが多いじゃないですか。私もあんなデザインを作ってみたいと常々思っていたのですが、調べてもなかなかやり方が見つからないし、今まで構築していたサイトデザインを一からやり直すことになったらしんどいなぁと思って手をつけられないでいました。しかしこの間トップページ右のリンクを編集した際、やっぱりワイド型じゃないスライダーはこじんまりとしててショボいと思えて仕方なく、なんとかしてワイドでダイナミックなデザインが出来ないかと、本格的に取り組むことにしてみました。


試行錯誤の過程をいちいち記すのは面倒なので結論からさっさと述べていきます。
まず、1枚の画像を画面いっぱいに表示するデザインにしようと思ったら、今まで愛用していたbxsliderは使えないんじゃないかと思えてきました。なぜなら画面いっぱいに1枚の画像を表示するなら背景画像として設定する必要があるし、背景画像をスライダーとして適用する機能はbxsliderにはない気がしたからです。

そこで私が新しく適用させたのがSkipprというスライダーです。
(注:リンク先のページの「Download」では何故かエラーが出てダウンロードが出来ませんので、「Github」をクリックしてそこからダウンロードを行ってください)
デフォルトでは自動再生になっていないため、ヘッダー部分に書くjavascriptには「autoPlay: true,」と書く必要があります。但しPC上では画像上にマウスがあるとき、またページを開いているウィンドウを選択していないとき、自動再生は停止します。(そういう仕様)

※2016年4月にスライダーをz-index:-1;にして重ねる順位を下げ、「Yukiyanagi」のロゴをその上に重ねたところ、skipperの画像がマウスオーバー状態でも動くようになりました。但し自分で次のスライドに飛ばしたりスライドする順番を変えたりすることができなくなってしまったので、矢印や横長の白いバーは非表示にしました。


Skipprもそうですが、背景画像を画面いっぱいに表示するにはCSSで「background-size:cover;」というのを使うらしく、最近のサイトではよく使われているようです。こんなの職業訓練では全然習いませんでしたけど!
デザイン会社でアルバイトしていたときに「常に自分でWEBの勉強をしていくべきだよ」と言われたことがあるのですが、確かにそうなんですよね。職業訓練で教えてくれることはあくまで基礎であって、新しいデザインを作ろうと思ったら積極的に勉強していくべきなんですよね。(しかも職業訓練で教わった方法が使われない場合だってある)

以下が新旧のデザインの違い

少し前まで(~2016年2月)
yukiyanagi_web_2016_feb.jpg
bxsliderに背景色をつけてwidth:100%;にするのが精一杯だった。でもやっぱりこじんまりとした印象なのは変わらない。

現在のデザイン
yukiyanagi_web_2016_march.jpg
Skipprに変えてから背景画像としてウィンドウサイズいっぱいに表示できるようになった。スマホやタブレットで見たときはロゴやイラストだけ見えるようになる。

少し前まで(~2016年2月)
yukiyanagi_web_2016_feb2.jpg
ヘッダーをwidth:100%;でウィンドウサイズいっぱいまで表示できるようになったのはいいものの、単色なので地味。

現在のデザイン
yukiyanagi_web_2016_march2.jpg
background-size:cover;と設定したら岩のテクスチャや風景画をウィンドウサイズいっぱいまで表示できるようになった。スマホやタブレットで見たときは風景画が右端に表示される。



【おまけ】
イラレで描いたこのオブジェクト。もともとイラストのフレームの一部でしたが、サイトの装飾用として使い道を模索していたものの結局使わずじまいになってしまいました。(クリックでオリジナルサイズ表示)

skull_and_feather.png



0 Comments

Add your comment