DAINASHI YESTERDAY

ワイヤーフレームが完成したら、いよいよデザインへ!

guide08

前回の講座で作成したワイヤーフレームをもとにデザインを制作していきます。

これまでにお話ししたデザインの基本やコツを踏まえて、また、レスポンシブデザインで構築する際に無理のないようにデザインしておきましょう。

念のため、これまでにお話ししたウェブサイトをデザインする上での要点をおさらいしておきましょう。

業者に頼らず自分で作る!初心者のためのウェブサイト制作ガイド【全10回】


デザインとは見た目を飾ることではなく設計

デザインというとどうしても見た目をかっこよくとか、きれいに飾ることに目が行きがちですが、ユーザーに注目してもらうためにどんな色を使うとか、目標を達成するにはどの要素をどのようにレイアウトするなどの設計の考え方で取り組むことの方が重要です。

ウェブサイトは趣味やセンスを表現する場ではなく、ユーザーにあなたの持っている情報を分かりやすく伝えるためのものです。あなたが時間や労力、またはお金をかけて作るものですが、ユーザーのために存在するものだということを忘れないで頂きたいです。

そういうスタンスで作り上げたウェブサイトはユーザーの役に立ち、ひいては大きなリターンをあなたにもたらしてくれるでしょう。

レスポンシブデザインで構築できるようにレイアウトする

レスポンシブデザインには、一定の制限があります。たとえば、PC表示のときにサイドバーにあるコンテンツを、スマホ表示のときにはメインコンテンツのエリアに持ってくるということができません。

もっとも、CSSで表示・非表示を切り替えることで実現することはできますが、それをやるとページの読み込みに時間が掛かるソースになってしまうためおすすめはできません。

「どうしてもそうする必要がある」という場合はそれもアリですが、そうでないのならレスポンシブデザインの制約の中でデザインを制作するようにしましょう。

各要素には余白を適切に確保して見やすく

Webページ上の各コンテンツごとに十分な余白を確保することで、可読性(読みやすさ)を維持し、各コンテンツの関連性などを視覚的にユーザーに伝えることができます。

Yahoo!JAPANや楽天市場のトップページなど国内の大手サイトは、比較的余白が狭くコンテンツが詰まっていることが特徴です。それに対し、海外のウェブサイトは余白を非常に大きくとってレイアウトされているものが多いです。

余白が小さくコンテンツがぎゅうぎゅうに詰まっているページは読みにくい反面、情報量が多い印象を与えることができます。反対に余白が大きいと、スカスカで物足りない印象になってしまうことがある反面、すっきりとして一つ一つのコンテンツの存在感が大きくなります。

ウェブサイトの目的や情報量によっても違ってきますが、余白は大きすぎず小さすぎず、「十分に」または「適切な」余白を確保することを意識してデザインしましょう。

いろいろなサイトを見比べつつ、どれくらいの余白が適切なのかあなた自身の目で感覚をつかみましょう。

どこが重要なのかぱっと見で分かるように文字のジャンプ率を意識する

ジャンプ率とは文字の大小の比率のことです。

読ませたいテキストは大きく、補足的な文章は控えめにするなど、フォントサイズにメリハリをつけましょう。そうすることでどこが重要なメッセージなのか、視覚的にユーザーに伝えることができます。

また強く打ち出したいメッセージの周りには、十分な余白を確保することでより存在感を強めることができます。

現在のウェブサイトには画像や動画などさまざまなメディアを掲載することができますが、やはりメインは文章(テキスト)です。読みやすく、メッセージの伝わりやすいウェブサイトを目指しましょう。

ユーザーに与えたい印象によってカラーを決定する

ウェブサイトをデザインする上で、「あなたの好きな色」は重要ではありません。ユーザーにどのような印象を与えたいか、どのような行動を取ってもらいたいかを考えて決めるようにしましょう。

保育園のサイトが黒を基調にスタイリッシュにまとめられていても違和感しかありませんよね? また高級腕時計のサイトがかわいいイラスト満載でにぎやかでも同様です。

あなたがウェブサイトで扱う商品やサービスを求めているユーザーはどんな人たちなのか、ユーザーに合わせてベストなカラーを探っていきましょう。

ユーザーにサイトを見てもらえるかはメインビジュアルにかかっている

ブラウザでウェブサイト開いて一番はじめに表示されるエリアのことを「ファーストビュー」といいます。そして、このファーストビューの大部分を占めることになるのがメインビジュアル(ヘッダー画像、キービジュアルなどとも言います)です。

あなたのサイトをはじめて訪れた人が、興味を持ってページを読み進めてくれるかは、このメインビジュアルが魅力的は否かに掛かっていると言ってもいいでしょう。

そのため、メインビジュアルにはウェブサイトでもっとも打ち出したいメッセージを盛り込んだり、もっとも自信のある商品・サービスの画像などを差し込んでユーザーにアピールしましょう。

メインビジュアルは、ウェブサイト内でもっともクリエイティブな要素を盛り込めるエリアです。見やすさを損なわないように気を付けつつ、ユーザーを引き付ける魅力あるコンテンツに仕上げましょう。

またメインビジュアルにスライドを実装することで、複数の画像でユーザーに訴えることができますし、最近では1~2分程度の短めの動画を表示させているウェブサイトもあります。

スライドはjQueryプラグインを利用すれば簡単に実装することができます。最近ではレスポンシブデザイン対応の高機能なものがたくさんありますので、あなたの使いやすいものを探してみましょう。

また動画を表示させるのであれば、Youtubeを埋め込むのがおすすめです。Youtubeの読み込みはページの読み込みとは別に行われるので、ページの表示速度に影響しません(とはいえメインビジュアルの表示に時間が掛かれば問題ですが)し、埋め込み作業自体とても簡単にできます。

デザインはやはり、一番楽しい作業!

収益化を目指すウェブサイトのデザインでは、個人的な趣味を前面に押し出すのは危険です。

とはいえ、デザインはウェブサイトを制作する工程の中でももっとも楽しい作業だと言えます。また個人的な考えですが、個性とはわざわざ表現するものではなく、出そうとせずともにじみ出てしまうもののことだと思っています。

ですから、あなたがユーザーのことを一番に考えてウェブサイトをデザインしたとしても、あなたの個性は自然ににじみ出ているはずです。

繰り返しになりますが、ウェブサイトはあなたのためではなく、あなたの情報を求めているユーザーのために作ってください。そうすることで、ユーザーにとって大きな価値があり、またあなたにとっても大きな収益をもたらすウェブサイトとなり、自然と愛着を持って育て上げることができるようになります。

≫ 第9回:ウェブサイトを公開するためのドメインとサーバーの準備

投稿者: