ホーム >  Blog > 美容室・サロン・エステさまホームページサンプル(仮公開)
2010年08月09日

美容室・サロン・エステさまホームページサンプル(仮公開)

こんばんは。WEBデザイナーの CUBESです。

先週からチョコチョコと空き時間に作っていた美容室・ヘアーサロンさまホームページサンプル

ですが、何となくお見せできるレベルになったのでプレ公開させていただきます。

動物病院、美容室のHP制作はお任せください!WEB制作CUBES-美容室ホームページ

美容室・ヘアーサロンさまホームページサンプル

はこちらへ。

今回、色々と実験的な事も試したかったのですが、
一番のテーマはFlashを使わずにFlashみたいな処理です。

Flashみたいな処理ってのは下記になります。

  1. TOPページメイン画像をウィンドウの大きさに合わせて拡大縮小
  2. メニューボタンへポインター(マウス)を重ねた時にフェードインフェードアウトで色が変わる。
  3. スタイル写真集ページでサムネイル画像にポインター(マウス)を重ねた時にフェードインフェードアウトで色が変わる。
  4. スタイル写真集でサムネイル画像をクリックしたときに表示される拡大画像の表示
  5. TOP・スタッフ紹介ページで使っているタブは時間が経つと自動で次のタブへ移動

とくに、3・4のスタイル写真集の動き処理が一番手が掛かりましたので、
作り手としては一番見てもらいたい箇所です。

動物病院、美容室のHP制作はお任せください!WEB制作CUBES-サロンホームページ

動物病院、美容室のHP制作はお任せください!WEB制作CUBES-エステホームページ

スタイル写真集ページはこちら。

サムネイル画像をクリックすると上記のように拡大画像が表示されます。
また、拡大画像の左右をクリックするか、キーボードの←→キーをクリックしていただければ、次の写真へ拡大画像が切り替わります。
また、拡大画像を閉じるには、拡大画像右上の×か画面の黒いところをクリックしていただくと、拡大画像サムネイルの大きさに縮小されて元の位置へ戻ります。
実は、この閉じるときの動きを見て欲しかったりして。

5番目のタブ切り替えもフェードインフェードアウトで
自動で時間が経つとタブが切り替わります。
また、TOPページタブに追加しているBLOGは、このアメブロ情報を表示し
自動でリンクになるようにしています。

動物病院、美容室のHP制作はお任せください!WEB制作CUBES-美容室ホームページ

まだ、仮公開ですので、IE6でレイアウトが崩れるなどの問題が有り調整しないといけないですが、1週間でココまで作り込めれば、自分的には満足。よく頑張ったな自分

と自画自賛。

この 美容室・ヘアーサロンさまホームページサンプル ご覧いただけた方で、
「使いにくいよ。」「ココはこうした方が良いのじゃない?」等の
ご意見いただければ幸いです。
※特に、美容室・エステ・サロン関係者様から、ご意見いただければ嬉しいです。

page-top