隠者のちょっと横道。。無駄話。。。？ 〜和食器webショップ〜菖蒲の隠者
プチリニューアル
2010 06/18 (FRI)
★ 昨年春に、それまで使っていたPC『VAIO』が故障したため『Mac』へと乗り換えたのを機に、サイトのリニューアルを考え、密かに作業を進めていたのですが、最近はPCの画像解像度も良くなって来たため、HPのサイズ（横幅）も少し広くしたいなと思い、計画をしていたものの、いざHPのサイズを変えるとなると、商品ページのレイアウトを変える必要があり、そうなると現在使用している画像サイズではレイアウトが合わなくなるため商品画像から全て編集し直す必要があり、現在出品中の３００以上の商品ページを画像から全て修正するとなると、途方もない作業になるため、結局HPサイズの変更は諦める事にしました。。。
結局、一番変更作業が大変になる『商品ページ』のレイアウトはそのまま変更しない事にして、先頭のバナーの部分だけをデザイン変更する事にしました。
▼ プチリニューアルしたトップページのバナー部分
←←← リニュ前 - トップページ - リニュ後 →→→
先頭の バナー の部分のデザインをちょっと変更してみました。（画像にマウスオーバで確認下さい）
←←← リニュ前 - 商品ページ - リニュ後 →→→
商品ページの バナー 部分もデザインをちょっと変更してみました。（画像にマウスオーバで確認下さい）
★ こんな感じで、見た目にはバナー部分が少しスリムになったけど、デザインは他でもよく見かけるカチッとした一般的なHPのデザインっぽくなってしまったかな〜と、以前の『菖蒲の隠者』らしさが残るデザインのままの方が好いかなぁ〜と、思う部分もあります。。。
思い切ってフラッシュなどを使った『カッチョ良い〜』HPにする事も考えましたが、それはそれで何だか重すぎて飽きてしまいそうなので。。でも、どこかに『菖蒲の隠者』らしさを出したいと考え、その結果今回は、HTMLとスタイルシートの『裏技』？を使い、ちょっと遊び心のある『隠し味』をHPに加えてみました♪
★ その『裏技』とは、ページをスクロールさせる時にバナーに起こる変化です。。
ページをスクロールさせると、バナーの背景画像は止まったままで、変わって違う画像が現れる仕組みになっています。（下の画像にマウスオーバーしてみて下さい）
こんな風に、隠れていた『隠者くん』が（わずかな隙間に一瞬だけですが・笑）顔を出します。。（あまり早くスクロールすると見落としますので（笑）ゆっくりスクロールしてみてください）
そして、トップページの『item list』のボタンをクリックして移動した『item list』- 商品項目のリスト - を案内するバナーですが、この時表示されている『星空の夜景』のバナーも、ページをスクロールさせると『日中の風景』の画像が現れます。
（下の画像にマウスオーバーしてみて下さい）
画像で紹介すると分かり辛いですが、実際のページをスクロールして頂くと、その動きが分かると思いますのでお試し下さい。
この『夜から昼』もしくは『昼から夜』に変化する画像は、『毎日使いたくなる器。。daily tableware』 のキャッチコピーそのまま、『毎日 朝から夜まで使って頂きたい♪』という、隠者の願いが込められています（画像を作っている最中に思いついた後付けですが・・笑）
ところで、この『昼から夜』に変化する画像はどうやっているのだろう？と思いませんか？ でも、実はこれも簡単なトリックを使っています♪
一見、『昼の景色』と『夜の景色』の２種類の画像を用意しているように思えますが、実際には一つの画像の中に、夜と昼の景色を色を変えて組み込んでいます。
上の画像にマウスオーバーして見ると分かりますが、藍の色で作った景色と、白の色で作った景色を組み合わせて、背景が白の時には藍の景色が浮かび上がり、背景が藍の時には白の景色が浮かび上がるようになっているんです。面白いでしょ♪
技術的には大した技術でもなく、HTMLとスタイルシート、そして、画像を工夫することで出来る、隠者らしい安っぽい『遊び心』です。（笑）
今後は、この『裏技』で季節感を少し出して行ければ良いな♪ なんて計画中で〜す。
★ そして今回のリニューアルでは、アイテムリストのボタンの折りたたみ式も採用しています。
HPのチェックは、MacのPC上で Firefox のブラウザでのみチェックしていますので、もしかしたら、Firefox以外のブラウザ、IE などのユーザー様には、動きがおかしかったり、見え方が違っていたり、レイアウトが崩れていたり、する可能性も御座います。
もし、見え方がおかしいなど、見つけられた方はお知らせ頂けたら幸いです。
結局、一番変更作業が大変になる『商品ページ』のレイアウトはそのまま変更しない事にして、先頭のバナーの部分だけをデザイン変更する事にしました。
▼ プチリニューアルしたトップページのバナー部分
★ こんな感じで、見た目にはバナー部分が少しスリムになったけど、デザインは他でもよく見かけるカチッとした一般的なHPのデザインっぽくなってしまったかな〜と、以前の『菖蒲の隠者』らしさが残るデザインのままの方が好いかなぁ〜と、思う部分もあります。。。
思い切ってフラッシュなどを使った『カッチョ良い〜』HPにする事も考えましたが、それはそれで何だか重すぎて飽きてしまいそうなので。。でも、どこかに『菖蒲の隠者』らしさを出したいと考え、その結果今回は、HTMLとスタイルシートの『裏技』？を使い、ちょっと遊び心のある『隠し味』をHPに加えてみました♪
★ その『裏技』とは、ページをスクロールさせる時にバナーに起こる変化です。。
ページをスクロールさせると、バナーの背景画像は止まったままで、変わって違う画像が現れる仕組みになっています。（下の画像にマウスオーバーしてみて下さい）
こんな風に、隠れていた『隠者くん』が（わずかな隙間に一瞬だけですが・笑）顔を出します。。（あまり早くスクロールすると見落としますので（笑）ゆっくりスクロールしてみてください）
そして、トップページの『item list』のボタンをクリックして移動した『item list』- 商品項目のリスト - を案内するバナーですが、この時表示されている『星空の夜景』のバナーも、ページをスクロールさせると『日中の風景』の画像が現れます。（下の画像にマウスオーバーしてみて下さい）
画像で紹介すると分かり辛いですが、実際のページをスクロールして頂くと、その動きが分かると思いますのでお試し下さい。
この『夜から昼』もしくは『昼から夜』に変化する画像は、『毎日使いたくなる器。。daily tableware』 のキャッチコピーそのまま、『毎日 朝から夜まで使って頂きたい♪』という、隠者の願いが込められています（画像を作っている最中に思いついた後付けですが・・笑）
ところで、この『昼から夜』に変化する画像はどうやっているのだろう？と思いませんか？ でも、実はこれも簡単なトリックを使っています♪
一見、『昼の景色』と『夜の景色』の２種類の画像を用意しているように思えますが、実際には一つの画像の中に、夜と昼の景色を色を変えて組み込んでいます。
技術的には大した技術でもなく、HTMLとスタイルシート、そして、画像を工夫することで出来る、隠者らしい安っぽい『遊び心』です。（笑）
今後は、この『裏技』で季節感を少し出して行ければ良いな♪ なんて計画中で〜す。
★ そして今回のリニューアルでは、アイテムリストのボタンの折りたたみ式も採用しています。
HPのチェックは、MacのPC上で Firefox のブラウザでのみチェックしていますので、もしかしたら、Firefox以外のブラウザ、IE などのユーザー様には、動きがおかしかったり、見え方が違っていたり、レイアウトが崩れていたり、する可能性も御座います。
もし、見え方がおかしいなど、見つけられた方はお知らせ頂けたら幸いです。
Copyright© Iris-Hermit. All Right Reserved.