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

ホーム > ブログ > 美容室・ヘアーサロンさまホームページサンプル制作中

2010年08月03日

仕事（ステマ）

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

ちょっとホームページでテストしたい事があったので、
テストをかねて「美容室・ヘアーサロンさまホームページ」

サンプル制作中。

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

まだ、デザイン・動きももラフ状態なので
実際に「美容室・ヘアーサロンさまホームページ」

サンプルをお見せできませんが・・・・・。

今回、テストしたかった事というのは、
Flashを使わずにウィンドウの大きさに合わせてイメージ画像の拡大縮小。

文章で書くと何？って感じですので画像を使ってご説明させていただくと。

ワイドモニターで開くと下記画像のように
ウィンドウ枠の左右イッパイにメイン画像（店舗内写真）が拡大されて表示されます。

そして、少し前のワイドじゃないモニターで開いても
ウィンドウ枠の左右イッパイにメイン画像（店舗内写真）が縮小されて表示されます。

ん～。画像を使っても判りにくいな～。

ワイドモニター・ワイドじゃないモニターの違いはメイン画像下の
「メニュー」や「バナーアイコンの大きさ」で見比べてみてください。
「メニュー」や「バナーアイコン」左右の白場の幅が違うことが判ってもらえるとうれしいです。

メイン画像（店舗内写真）はウィンドウ幅に合わせて拡大縮小ができ、
メイン画像（店舗内写真）下のコンテンツは左右の白場がレイアウトが崩れないように広がる仕組みにしています。

Flashで作れば特別難しい事じゃないのですが、
Flashを使わずに、Flashのような動きを表現したいが僕のポリシーなので
CSS（スタイルシート）を足し算・引き算しながらをガリガリと書いています。
※今回の処理は出来るだけXHTMLのソースを綺麗にしておきたいので、CSSだけで、javascriptと使っていません。

特に今回は、Flashを使わずに、よりFlashらしい動きを表現がしたい。
アイデアは色々と浮かんではいるのですが、どこまで再現できるかは未定・・・・・。
もっと、もっとCSS・javascriptを勉強しなくては。
来週には仮公開が出来ると思いますので、ご興味のある方はしばらくお待ちください。

今回、Flashを使わない理由

Flashを使えば今回の動きは簡単に表現できますが、先日のFlashを使いたくない記事にも書きましたが、Flashは使い方を誤ると検索サイトに対してデメリットが大きいです。
美容室さまやサロンさまホームページを拝見していると見た目にコダワリすぎてYahoo・Googleなどの検索サイトでHitされにくいホームページをよく見かけます。

美容室さま・サロンさまでオフィシャルホームページとブログをお持ちの方も多いと思いますが、
一度、店名・地域・業種などのキーワードで検索してみてください。
ブログばかりがHitしてオフィシャルサイトがHitしないという方も多いのじゃないでしょうか。
それでは、せっかくホームページをお持ちなのに集客につながらず費用対効果が悪いです。

ただ、検索順位ばかりを気にして作ったホームページは
「面白みのないホームページ」「見た目に動きのないホームページ」にってしまい、
美容室さまやサロンさまのイメージの伝わらないホームページになってしまいます。

僕がFlashを使わずに、Flashと同じような動きのホームページサンプルを作っている理由はそこです。
「動きのあるホームページでありながら、検索サイトにも有効で、検索順位も上位に表示されやすいホームページ」

が今回もテーマです。