How to Design

- ホームページのデザインは? -

what1画像
what2画像

●全体の雰囲気をどうするか

シンプルな感じ、カラフルな感じ、和風な感じなど、まずは大まかな全体像を思い描いていきます。会社のホームページであればカチっとシンプルに、和菓子や着物など日本的なサイトは和風デザインに、サロンやクリニックは優しいイメージがあるナチュラルなデザインにしてみるなど、ホームページの内容に合ったデザインを心がけましょう。

イメージ画像

●色合いは?

赤、ピンク、イエロー、青、黒、グレー系などなど、色合いが違えばサイトの印象もガラっと変わってきます。どんな色合いなら商品やコンテンツの魅力を引き出せるのか、どんな印象を与えたいかなどを考慮しながら色合いを決めていきましょう。

色合い画像

●タイトルやロゴは?

社名や店名、タイトルはサイトの看板のようなもの。文字だけよりもロゴや特殊フォントを使ったりキャッチコピーを添えておくと、ここは何をやっているサイトなのか認識してもらいやすいんじゃないかなと思います。

ロゴ見本画像

●イメージに行き詰ったら

何もイメージが湧いてこない、どんなホームページにしたいのか迷走してしまったときはいろんなサイトを見てみましょう。気になるサイトやこんな雰囲気にしたいといった参考サイトなどがあれば教えてください。全く同じデザインにすることは著作権上できませんが、近い雰囲気で制作することは可能です。

参考サイト
【Webデザインのリンク集 | ズロック】
【デザイケ -Design Iketeru-】
【WEBデザイン参考サイト bookma!】
【縦長のwebデザインギャラリー】
【Webデザインリンク集】
【WEBデザインの見本帳】

●こんなホームページは嫌われるかも?

ホームページでは音楽を流したり動きのある表示をさせたりといろんな効果や装飾を施すことができますが、お洒落で個性的な演出ができる反面デメリットもあり、サイト作りをしていく上で注意しなければならない点がいくつかあります。

イライラ画像

その1. アニメーションなどの視差効果

スクロールに合わせて動きのある表示をさせることができるエフェクトで、強調したい部分を目立たせたりサイトにストーリー性を持たせたりとカッコよく見せることができるのですが、表示が遅い、見づらい、ゆらゆら動いて鬱陶しいという意見も少なからずあります。

参考サイト
視差効果|webデザインギャラリー

実際、スペックの低いパソコンで閲覧するとカクカクしたりフリーズしたりと閲覧者泣かせのエフェクトでもあります。上手に取り入れれば商品やコンテンツの魅力を伝える上で高い効果を発揮しますが、サイトの主旨に合っていなかったり、単にカッコいいからといった理由で取り入れるとただ鬱陶しいだけのサイトになってしまうかもしれません。

その2. オープニング演出

ワクワク感を持たせたり期待度を上げるという意味ではとても効果的な演出ですが、やたら長いオープニングアニメーションや、0%....30%....70%......といったローディング画面はイライラ度も高めです。スムーズに進むのならまだいいのですが、重くて進むのが遅かったり途中で止まったりするとコンテンツを見る前にページを閉じられてしまいます。ページの表示速度に関する調査データによると、ページ表示2秒でユーザーはイライラし始め、約3割のユーザーがサイトを閉じるそうです。
イライラ画像2

ユーザーは待たされることを特に嫌います。たとえ素敵なオープニングだとしても、最後まで強制的に見せられるのは拷問に近いものがありますね。カッコいいオープニングを見せたい気持ちも分かりますが、先に進める「SKIP」ボタンを用意しておきましょう。

その3. 音楽や動画でお出迎え

サイトを開いたとき音が鳴ったり音楽が流れる演出は、敬遠される演出第1位として参考書などでも注意喚起されています。BGMが流れることでサイトの雰囲気が良くなることもありますが、必ずしも閲覧者が夜中に一人でヘッドホンをして見ているとは限りません。会社や職場で見るかもしれないし、横で赤ちゃんが眠っているかもしれない。そんな時いきなり音や音楽が鳴ったらドキっとさせてしまうでしょう。
びっくり画像

音楽や動画を流すときは「ここから先音楽が流れます(音が鳴ります)」といった告知ページの表示や、再生ON/OFFの切り替えボタンを設置するなどの配慮が必要です。

ユーザーファースト第一です

遊び心のあるサイトや個性のある演出は見ていて楽しいですが、使い方を間違えると訪問者に迷惑をかけてしまったり、見せる側の単なる自己満足で終わってしまいます。その演出は本当に必要か、こちらの趣味趣向を押し付けてはいないかなどを考慮し、訪問者目線を一番に考えたサイト作りをすることが大切です。