essence13
異なる素材や動きを使用してインパクトを与えるWebサイト
サイトを制作するうえで、きれいなデザイン、シンプルな配色、セオリー通りにデザインしているだけでは数あるサイトの中で埋もれてしまうだけだ。セオリーを守りつつも、遊び心を取り入れることもたまには必要だ。
文＝玉置真一
| keyword |
| 異素材を組み合わせる |
|
| 静と動をフルFlashで最大限利用する |
|
| キャラクターや補色で魅せる |
インパクトを出して印象に残るサイトに
サイトを制作するうえで重要なのはインパクトだ。きれいにレイアウトし、セオリー通りにサイトを制作しても結果的に存在感が薄く、印象に残らないと意味がないからである。実際、広告費に莫大な費用を投入し、SEO対策などを駆使して、ユーザーを取り込んだとしても、サイト自体にインパクトがなければユーザーはすぐに通りすぎてしまう。逆を言えば「インパクト＝存在感」のあるサイトを制作することが、自然なSEO対策につながるとも言える。
インパクトを出す方法のひとつに異素材を組み合わせるという手法がある。「イラスト×写真」などをコラージュしたり、キャラクターやCGを混ぜてレイアウトすることによって、奥行きや質感が生まれ、PCの画面で見ているという狭さを感じさせない表現ができる。
また、Web特有の手法として、「動き」を最大限に利用する方法がある。たとえば、サイトが表示されてすぐに動き出すFlashを、あえて読み込み時にいったん静止状態にして、読み込み後に一気にはじけさせるような動きを表現すると、“静から動への変化”が最大限得られる。待たせないサイトではなく、少し待たせることがキーポイントになってくるのだ。ただしこのとき、読み込みが長すぎるとユーザーのストレスとなってしまうので注意しよう。
その他の手法として配色を利用する方法がある。サイト全体の基調とされる落ち着いた色に加えて、「ピンク×グリーン」など補色をキーカラーとして使用することにより、ユーザーの目線を確実に引き付けられる。全体に補色や目立つカラーをレイアウトするとユーザーのストレスとなるので、差し色として使用したり、トップページのみにレイアウトするのがよい。
サイトを制作するうえで、ユーザビリティを考え、SEOによいサイトを心がけ、見やすく、きれいなサイトを制作することはもちろん正しい。しかし、セオリー通りに制作するだけではインパクトがなく「結果の出ないデザイン」になってしまう。ほかのサイトと差別化を図る意味でも、あえて違和感のある素材を組み合わせたり、よく使われる一般的なWeb表現を崩してインパクトを出すことも必要だ。
| sitename | edit.for LuLu |
| URL | editforlulu.jp/ |
複数の動きで浮遊感を表現
レイヤーをうまく使い、異素材をレイアウトすることで、サイトに質感や奥行きを出している。アイテムごとに違う動きをもたせて速度を遅くすると、浮かんでいるような幻想的な動きを演出できる。色数を少なめにして、トーンをおさえた配色が安定感につながる。トップページ以降はシンプルな構成なので、ユーザーのストレスもない。
| sitename | CEMENT PRODUCE DESIGN |
| URL | www.cementdesign.com/ |
静と動の組み合わせの妙
ローディングが終わってからの一瞬の動きで、見るユーザーの心をつかむ独創的なデザイン。静と動をうまく利用している。サイト閲覧中にもアニメーションGIFが随所で動くので、ユーザーの目線を惑わせている。そのようにすることでサイトのもつ“遊び心”が強調されている。すべてのページでデザインを変えて、よりインパクトを演出している。
| sitename | And A |
| URL | www.and-a.com/ |
異素材を重ねて奥行きを演出
黒色と赤色のブランドカラーから、ラインとドットで構成されたFlash、コミカルなキャラクターが表示される。Flashは数秒で表示し終わるのでユーザーのストレスにもならない。キャラクターをスクロールで登場させ、あえて中央の背景と重ねて、奥行きと存在感を演出している。ナビゲーションのピンクの差し色がサイトを引き締めている。
［INDEX］
>>> essence02 横方向のスクロールを効果的に取り入れたWebサイト
>>> essence13 異なる素材や動きを使用してインパクトを与えるWebサイト
