デザインは重要？
ナビゲーションまで構築できれば、あとはWEBページを作るだけです。
載せたいコンテンツやストーリーはすでに決まっているわけですから、どんどん精力的に制作してゆきましょう。
今の意欲と勢いを、完成まで保ち続けてガンガン制作に打ち込みましょう。
なぜなら、WEBページ制作って思った以上に結構時間がかかるからです。
同じ作るなら、デザインは良いに越したことは無いのですが、最初から「カッコイイ！」とか「クール！」なデザインにこだわっているといつまでたっても完成しません。デザインにこだわると、時を忘れて、とことんはまってしまいます。
WEB制作のプロは、あらかじめ見積もったコスト相応の工数しか割きませんが、アマチュアの方々は、とにかく凝ったことをしがちなのです。実はこれ、本当に気をつけないと怖いのです。
ページのアクセントに使用する画像のデザインだけで、２～３日もかけたりしてしまいます。「ボクはWEB制作が趣味なんだ」とか「WEBデザインが生業です」といった方ならともかく、あなたの本来の目的はビジネスです。デザインに先駆けて『儲ける』ことが肝心です。
ホームページ制作の解説書を読むと「魅せるデザイン」とか「クールデザイン」とか「こういうのが、あか抜けしない素人風なデザイン」などの例が掲載されていることが多いです。あたかもデザインさえ洗練されていれば「良いサイト」であるかのように思わされます。
しかし、 WEB制作のプロがそのように記述するのは当然なんですね。彼らはデザインで勝負しているわけですから、「立派な良いWEBサイト＝デザインに優れたサイト」の構図を訴え、世間に浸透させ、受注につなげなければならないのと、彼ら自身デザインそのものに価値を見出しているからなのです。
しかし、実際に運営を始めるとわかるのですが「クール」なデザインだからと言って、ユーザーはアクションを起こしてくれるわけではありません。
むしろ、凄く凝ったクールなデザインで中身が薄いサイトよりも、あか抜けてはいないけれども、情報満載の中身が非常に濃いサイトの方が、ユーザーの支持を得られるのです。
中身の濃いサイトを作って運営するだけでも多大な時間と労力が必要です。その上、デザインに凝ればWEBの更新や追加に費やす時間は相当なものになってしまいます。「まずは、中身ありき！」で取り組みましょう。
もちろん理想は「クール、かつ機能的なデザインで、中身も満点！」なサイトです。それができれば素晴らしい成果か期待できることでしょう。
しかし、当初からそのようなものを望んでも、完成まで時間がかかりすぎて、なかなか運営が始まりません。
デザインや配色を勉強して、レイアウトを勉強して・・・と、素人がいきなりクールWEBを作ってプロのサイトと張り合おうなんて構想はまず無謀すぎます。
凝りすぎると、なかなか運営開始にこぎつくことが出来ずに、最悪の場合は挫折してしまいます。そうならないために、まずは情報の質と量で勝負しましょう。
ユーザーは何を求めているか
ユーザーが欲しがっているのは「自分にとって利益となる情報」です。「読んでいて楽しい情報」です。 そして、それがどれだけストーリー立てて詳細に記述してあるかが鍵となります。
記述と言っても、通りいっぺんのカタログ的な説明を羅列しただけの記述ではなく、その商品をユーザーが所有し、使用することによる恩恵や楽しさを、リアルに想像・体感させるだけの表現豊かな記述であることが重要です。
購買心理を簡単に説明すれば、商品に興味を抱いたユーザーは、まず、もっとその商品について詳しく知りたいと思います。色、材質、質感、サイズ、重量、仕様などをまず調べ、次に使用方法や特徴を調べます。
しかし、その時点では購入に対して、まだ迷いがあります。他の商品との比較をしたり、費用対効果などを吟味したりと悩み始めるのです。
けど、そこまで迷っている場合、ほとんど「購入したい」という気持ちの方が勝っているのですが、迷いを解消して背中を後押ししてくれる何かを探しているのです。
たとえば「圧倒的に安い！」とか「スゴイおまけやサービス品！」とか「他では絶対に得られなかった情報を与えてくれた！」とか、「それを買って使っている自分の嬉しそうな姿♪」などです。そして、そこにわかり易い購入方法が明記してあればアクションを起こします。
要は、購入決定に関する決定的な要素を提供して、ユーザーが期待するタイミングで「背中をポンと押してあげる」ものが勝つのです。
購買意思決定の要因として、ネット起業家が勝負でき得るものは「コンテンツの質」です。先ほど説明したように、たっぷりユーザーを堪能させるほどの、それを手に入れたら何が得られるのか、という仮想体験を記述してください、そして、訪れたユーザーをとことん楽しませてあげましょう、それがユーザーに対する礼儀です。
そして、運営に余裕が出てきた段階で、デザインの向上を図ればよいのです。デザインはいくらでも変更が出来るので、まずはコンテンツをどんどんアップしましょう。
とは言ったものの、ユーザーは必ずしも、じっくりと字面を読んでから、サイト内を巡回するとも限りません。やはりページをぱっと見た時の第一印象から内容が判断されることも多々あります。最近ではWEBを見る目が肥えたユーザーが多いため、むしろそういったケースの方が多いかもしれません。なんせWEBサイトは星の数程ありますからね。
最初から、ある程度は凝ったデザインでスタートを飾りたいというあなたのために、基本的なことを説明しておきます。デザインやインターフェースに凝りだすと本当にキリがありませんが、次章少しだけ説明を書いておきますのでご参照ください。
どのようなデザインにするか
■WEBページをデザインする要素
•オープニング
•レイアウト・文字・配色
•画像・動画
オープニングとは、ホームページ（トップページ）の前に表示されるページや仕組みのことです。たとえば、免責事項や同意事項をオープニングで表示し、[ 同意する ] や [ Ｅｎｔｅｒ ] などのリンクをクリックして、初めてホームページが表示される、といったものや、ムービーによるＣＭやイメージが表示された後、自動的にホームページに切り替わったり、ムービーがそのままメニューに変わったりするものです。
サイトの内容次第で意見が分かれるところですが、エンターテインメント性を重んじるサイトならともかく、一般向け商用サイトとして運営する場合はオープニングは設けない方がいいです。
理由は２つ、オープニングがあると目的の情報にいたるまでのクリック数が多くなる（待ち時間が長くなる）ことと、リピーターに飽きられてしまうからです。（わざわざ[skip]や[menuへ]などのムービーをスキップするためのリンクをクリックしなければならないし、ひどいケースでは、そのムービースキップのリンクも無く、毎回延々ムービーが終わるまで見せ付けられるサイトもあり、非常に困惑させられる事があります。ホント、腹が立ちます）ユーザーに嫌われないためには、わずらわしい思いをさせない配慮が必要です。
次に、レイアウトの基本は、ブロック化です。まず、関連の深いもの同士をグルーピングします。その後、グループごとに配置してゆけば良いのです。タイトル、ナビゲーション、トピックス、メインコンテンツを見やすくかつ、扱いやすく配置しましょう。そして、基本デザインが決まれば、それをテンプレートにして全体へ反映させてサイトに統一感を持たせます。
ページをレイアウトする際に、フレームにより分割する手法が多用された時代がありました
。フレームを使うと常に表示させておきたいものを画面上に固定することが可能です。そのメリットは以下の通りです。
- ナビゲーションや広告を常時表示させておくことができる。
- 他のページへの移動時間が短縮できる。(ページ移動のたびに、ロゴなどの画像読み込みをしなくてすむ)
- 追加や更新、変更などが楽になる。
逆に以下のようなデメリットもあります。
- コンテンツエリアが狭くなる。
- アクセシビリティが低下する。（フレーム非対応のブラウザでは読めない）
- 目的のページのURLがわかりにくい。（お気に入りやブックマークに入れても、初期のフレームセットが入ってしまう）
このようにフレームには一長一短があります。使わないですめばそれにこしたことはないです。スマホやタブレット等で閲覧される事が多い近況を見れば、今後はフレームは使わないのが良策でしょう。
以上の特徴を参考に、気になるサイトをあれこれとご閲覧してみてください。後はあなたの判断です。
表示される文字の大きさも、サイトを印象付ける要素のひとつです。大きすぎると、なんとなく間の抜けた印象を与えますし、小さめに作ると、全体が引き締まり、理知的なイメージを与えます。
基本的に文字の取り扱いに関しては、いかなるブラウザで閲覧しても読みやすいように制作すべきですが、デザイン要素を強く前面に押し出したいサイトである場合には、文字のサイズ指定などをスタイルシートにてピクセル単位で指定し、固定してしまうことも可能です。
ただし、この場合、ブラウザに文字のサイズを大きくしたり小さくしたりする機能が備わっていても、全く効果がありません。したがって、文字サイズが小さく読みにくいなと感じたユーザーが、ブラウザの機能にて文字サイズを大きくしようとしても、文字のサイズは全く変わりません。
制作側の都合でレイアウトを固定してしまうと、そういう弊害が発生するということも頭に入れておきましょう。デザイン重視のサイトで、どうしても全体のレイアウトを崩したくない場合にのみに文字サイズ指定を行なうのが良いでしょう。
たまに、デザインを崩したくないためか、文字を全て画像で制作しているサイトを見かけますが、そういう作りだと、「ページ全体が重くなる」、「音声ブラウザや、テキストブラウザでは何のサイトかわからない」、「追加や更新が大変」、「集客するのに不利（後章[集客をしよう]で説明します）」など様々な意味で良い手法とはいえませんので、「どうしても使いたい特殊なフォントがある」というような、よほどの事情がない限りそのような作り方はするべきではありません。
あと、フォントに関してはあらゆるユーザ環境に対応できるように、フォント指定をせず、強調したい部分を太字で表示させるのが良いです。フォントに依存したページを作っても、環境によってデフォルトのフォントが様々なので、あなたが意図したとおりのフォントで表示されるとは限りませんし、へたにフォント指定をすると最悪の場合文字化けしてしまいます。
配色については、文字が読みやすく、目が疲れず、コンテンツにふさわしい配色を考えましょう。たとえば、シリアスな情報サイトなのにパステル調であったり、子供用品を扱っているサイトなのに落ち着いた暗いイメージだったりすると、ユーザーが感じ取るイメージと内容が合わず、不快な印象を与えてしまいます。色の持つ力は結構大きいのです。
それから、これは余談ですが、勤務中にインターネットを私用で閲覧している人も結構います、その中で商取引も結構行なわれているのです。（決して勧められる話ではないですが、事実です）そのような客層がターゲットであれば、目立つ画像やビビッドな配色は慎んで、ビジネスフォームっぽく作るとターゲットユーザーの好感度がアップします。
その理由は、以下のとおりです。
私用でネットを見ているところを背後から覗かれてバレたら、まずい事態になります。だから、当人は結構周囲も気にしながらネットを閲覧しているのです。そういった心理上、開いたページの画面が社用での情報調査や、ビジネス関連風のものに見えれば、ホッとするんですね。
それはなぜか？
答えは、見つかってもある程度ごまかしがきくからなんですよ。
これが、その画面上にイラストやキャラクターなどが色鮮やかにチカチカ映っていると、一目瞭然で仕事とは関係ないものを閲覧している事がバレてしまいますよね。
「おっと！こんなページは閉じなければ！」となってしまうわけです。BGMなんかが勝手に再生されるともう最悪です。それこそ心底恨まれますよ(笑)
また、先ほどの理由から、全画面表示にせず、小さなウインドウサイズで閲覧しているユーザも多いため、ウインドウサイズを小さくしても、レイアウトがサイズに応じて動的に再配置され、テキストがきちんと読める作りにしておくのがベターです。（リキッドデザインといい、最近ではレスポンシブ・ウェブ・デザインと呼ばれる手法が主流になっています）制作には、このような細やかな配慮も必要なのです。
「けど、テキストだけだとつまらん！」
はい、おっしゃるとおりです。つまらないとユーザーも多々いらっしゃいます。確かに画像や動画を効果的に挿入することによって、WEBにアクセントをつけたり、説明に対する理解を補足することができます。ここからは、画像について触れてゆきます。
まず、 画像や動画などを扱うためには専用のツールが必要です。
■画像などを加工するためのツール
- 画像加工（レタッチ）ソフト —> 写真やイラストを加工するのに便利です。
- 動画制作ソフト —> 各種ムービーを作る場合に必要です。
画像加工ソフトを使えば、デジカメで撮った写真や、イラスト、スキャナから取り込んだ画像などを、大きくしたり、小さくしたり、明度や彩度を調整したり、保存するファイルの形式を指定したりすることができます。
動画制作ソフトを使えば、デジタルビデオカメラや、ムービー機能付のデジカメで取った動画や、他から入手した動画などを編集、加工、保存することができます。また、WEB広告などで、GIFアニメバナーの代わりにふんだんに使われているフラッシュムービーなども専用ソフトで制作できます。
■画像などを使う場合の注意事項
- 本当に使用すべき画像かどうかを熟考する
- 表示の大きさは「小さく」
- ファイルサイズも「小さく」
- 画像点数は「少なく」
- HTMLでのサイズ指定などの属性を必ずする
画像はWEBページの読み込み速度に即影響を与えます。まず、本当に「その画像」は必要かどうかをよく吟味しましょう。
また、画像の表示が大きいと、画像が気になってしまい、肝心のテキストを読む集中力に欠けてしまいますので、表示はできるだけ小さくしましょう。ちょこちょこ動くアニメや動く文字などもってのほかです、「ここの運営者は本文を読ませたくないのか？」と思ってしまいます。
そして、ファイルサイズも可能な限り小さくしましょう。また、無駄と思われる装飾のための画像や背景画像は極力使用しないようにしましょう。あと、忘れてはいけないのが、属性の指定です。例として本記事の挿絵について説明すると、ソースは下記の通りとなっています。
src=”https://bizfesta.com/wp-content/uploads/2016/09/2295384.jpg” は画像ファイルの場所を記述しています。
width=”640″ height=”426″ は画像の幅が640ピクセル、高さが426ピクセルということです。
alt=”” は画像の説明です。画像が表示されるまでの間の説明表示や、画像が表示できないテキストブラウザや音声ブラウザのために、ここへ代替文字を記述します。いかなるブラウザであってもWEBページの情報をスムーズに理解してもらえるように、alt属性の記述は怠らないようにしましょう。
本ページでは ”” としているため、何も表示はされません。「表示されないのなら、わざわざ ”” て書かなくてもいいじゃないの？」と考えたくなりますが、当ページの場合、リンクを張っているため、alt属性を記述しないとテキストブラウザや音声ブラウザではリンク先のURLがそのまま表示されたり、読み上げられてしまいます。したがって、ブラウザに無駄な言葉を読み飛ばしてもらうために、わざわざ ”” を記述しています。
以上、WEBデザインに関して基本的なことだけを大まかに説明しました。
気になるのは、とにかく作り始めると凝った仕組みを採用しがちになることです。
「ようこそ」とお辞儀を繰り返すGIFアニメや、「あなたのブラウザは○○で△△からアクセスしてますね」などの表示や、スクロールする文字、あるいは時間帯と共に変わるあいさつ文や、ステータスバーの乗っ取りなどです。
そのような技術を誇示してもユーザーは感心するどころか、最近ではむしろ、野暮ったく思われるのがオチです。デザインや仕組みに凝るよりも情報へのアクセシビリティやコンテンツの充実を図る方が重要です。
まずはコンテンツのボリュームと精度を充実させましょう。そして、とにかくインターネット上にアップして運営を行いながら反応を見た後で、デザインも反応の度合いが高く使い易いものへと向上させてゆけばよいのです。
最後に一言。デザインを確認する上で重要なのは必ずブラウザで確認することです。いくらWYSIWYGのWEBオーサリングソフトを使っているとしても、最終確認はブラウザで行ないましょう。また、そのブラウザもあなたが使用しているブラウザだけではなく、最低でも代表的なブラウザ「Internet Explorer」、「Safari」、「Google Chrome」、「Mozilla Firefox」、「Opera」、さらに、できれば「iPhone」、「Android端末」などで表示確認をしましょう。それらの表示を再現出来るエミュレータもありますが、この章では説明を割愛します。
さあ、コンテンツも充実し、WEBサイトも完成すればいよいよ運営です！鼓動の高鳴りも最高潮！ドキドキしますね。運営については、次章[いよいよ運営へ]で詳しく説明してゆきます。
