はじめまして長岡です

というわけで初投稿です。代表の長岡です。
久しぶりに自分のサイトを作り直しているわけですが、スマホでも見られるようにするためにあれやこれやといじっています。
特に手こずったのがiPhoneではFLASH動画が使えないこと。トップヴィジュアルを動画にしていますが、これはjQueryとCSS3を使って表現しています。

今回は動画の話について。デザイン屋のウェブサイトというとデザイン屋なんだから簡単でしょ? と思われがちですが、これがまた面倒だったりします。あるテーマに沿って作るのは簡単なんですが、そのテーマというのはあるイメージを連想させます。
イメージというのはImageですから何かを想像させます。

想像するということは偏見(バイアス)が掛かることです。
例えば乙女チックなデザインにしたとします。すると、「あーこの人は乙女チックなデザインが得意なんだなー」という印象を与えることになります。それだけならばいいのですが、乙女とは正反対の漢(←あえて男ではなく漢と書きます)らしいイメージは苦手なんじゃないか? という印象も与えてしまう恐れがあります。偏見(バイアス)が掛かるのです。

クライアントがかわいらしいデザインを望んでいる時はハマるのですが、そうではない場合は「ここで大丈夫かな?」と思われるかもしれません。この意味分かりますか?
なので外枠や外装を作る会社というのは、お客様に固定観念を持たれることを嫌います。おそらくはやろうと思えばどんなジャンルでもできるからです。しかし、全てを説明し尽くすことはできないので、ステレオタイプの分かりやすいものを代表に選ばざるを得ません。
そう意味で、デザイナーのウェブサイトは無難なものが多かったりする気がしますね。全体的で一般的なつまらないものになりがちです。

かといって、あれもできます、これもできます、というのも整合性がないので、色々と考えた結果、トップヴィジュアルを毎回ランダムに変えることにしました。背景画像とレイヤー画像の2つをランダムに組み合わせることで、偶然性と意外性を演出することができます。
組合せの種類はおそらく数百通りあります。これからも増やしていく予定なので、数千、数万通りになると予想されます。
組み合わせによってアタリもあるし、ハズレもあります。デザインの面白いところですね。

しかし、ヴィジュアルのサイズというのが横長です。こんなに横長な画像というのは普通はないので、上下に表示されない領域ができてしまいます。これはもったいない! ということで、ランダム性に加えてアニメーションを加えることにしました。
背景画像が上方向または、下方向にランダムにスクロールします。画像は私が「いいねぇ」と思ったフリー素材ばかりをチョイスしています。

あっと忘れてはならないのは、このサイト初回に訪問するとぶっ壊れた動きをします(笑)
サイト全体が拡大縮小し回転します。子供騙しですが「最近のウェブはこんなことができるんだよ」ということを分かりやすく表現しています。
でも、うざいのでCookieで訪問回数を記録して初回訪問時だけぶっ壊れた動きをするようにしています。1日以上アクセスがないとCookieが破棄されて、またぶっ壊れます(笑) ブラウザによっては動作しませんが、スマホでも動くのが自分でいうのもなんですが驚きです。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です