DAINASHI YESTERDAY

ウェブサイトをデザインするための基礎知識

guide05

これまで 自分で作るウェブサイト制作講座 として、以下の内容についてお話ししました。

  • ウェブサイトで達成したい目標を設定する
  • ウェブサイトの構成を考える
  • ウェブサイトのコンテンツを作成する
  • ウェブサイトを作成するための言語を理解する

ここではいよいよ、これまでの内容を踏まえてユーザーにより分かりやすく情報を伝えるためのデザイン制作について、また制作を進めるうえで気を付けて頂きたいことについてお話ししていきたいと思います。

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


デザインとは装飾ではなく設計!勘違いすると致命的な失敗に

まず一番に心に留めておいて頂きたいのは、デザインとは単に飾りのことではなく、設計のことであるということです。

日本では「デザイン」というと装飾(見た目)についてのことと捉えられがちですが、そもそもデザイン(design)とは「設計する」という意味です。

そういう意味では、どこにどんなコンテンツを配置するというレイアウト設計や、ユーザーに行動を起こしてもらうための導線作りも「デザイン」なのです。

この部分を勘違いしたままデザインを制作してしまうと、致命的な失敗につながる恐れがあります。

なんの意図や根拠もなく「この部分をもっと派手に」とか「この色は嫌いだから他の色に」などとやってしまうと、まずウェブサイトは成功しません。

あなた自身が作るウェブサイトですが、あなたのために作ってしまってはうまくいきません。ユーザー目線で、ユーザーのために作るということを忘れないようにしましょう。ですから言ってしまえば、あなたが好きな色とか好きなテイストとか、そんなものはどうでもいいのです。

それよりも、読んでもらいたいところに注目してもらうためには… とか、クリックしてもらうためにはこの色で… というようなことを考えていくことの方がずっと重要なのです。

スマホの普及で従来の制作フローが機能しない?

また従来のウェブデザインでは、Photoshopなどの画像編集ソフトでデザインをカッチリ制作した上で、マークアップ作業に入るという流れが一般的でした。

しかし現在では、スマートフォンの普及によりこのような制作の流れでは対応できない場面が多くなっています。

なぜなら、同じウェブサイトでもあるユーザーはPCから、またあるユーザーはスマホからアクセスするためです。PCのみであれば、閲覧環境はある程度同じ※ですので、すべてのユーザーに対して同じようにウェブサイトを表示させるということも可能でした。

しかし現在、スマートフォンのディスプレイサイズはさまざまなため、すべてのPC・スマートフォンに対して同じようにウェブサイトを表示させることは現実的に不可能です。

そのため、マークアップ作業の前にデザインを固めてしまうということができません。そのため、デザインの制作と並行してマークアップを進め、逐一表示や動作を確認しながら制作を進めるというやり方が一般的になりつつあります。

※それでもIEやChrome、Safariなどの各ブラウザで微妙にソースの解釈が違うため、互換性を持たせるように制作する必要はありました。

現在のWebデザインに必要なものは妥協と取捨選択

そうした制作の進め方をするには、ある意味での妥協と取捨選択が必要になります。

従来のように「1pxのズレも許さない」「ここはどうしてもこういう表示方法で」とやっていると、はっきり言って時間の無駄が多すぎます。自分で作るにしても制作業者に依頼するにしても、そうした重要性の低いところに時間をかけてしまうと、必ずほかの部分でしわ寄せがきます。

そしてそれが重要なコンテンツの品質に関わってきてしまうということもありますので、「どこを残してどこを捨てるか」といった意識は持つようにしましょう。

ウェブサイト制作で重要なのは、あなたの理想のウェブサイトを作り上げることではありません。ユーザーへ効果的にあなたの持っている情報を伝え、収益につなげることです。

この考え方を持っているかいないかで、他のただ見栄えがいいだけのウェブサイトと大きく違いを出すことができます。

繰り返しになりますが、ほとんどの人はこれが分かっていないために見た目の部分にばかりこだわってウェブサイトを制作してしまいます。

実際に収益の上がるウェブサイトは驚くほどシンプルですし、中には見栄えとしてはとてもほめられたものではないものもあります。しかしそんなウェブサイトが月に数万~数十万、ときには100万円以上の収益を上げているということもザラなのです。

もっとも、見栄えなどどうでもいいと言っているわけではありません。過度な装飾はウェブサイト収益化の邪魔になると言いたいのです。

シンプルで、パッと見て「きれいだな」と思われるウェブサイトを目指すことが、収益の上がるウェブサイトを作るための近道になります。

また、シンプルできれいな印象をユーザーに与えるためにはコツがあります。それについても後ほどご紹介しますので、心に留めておいて頂ければと思います。

ウェブサイトの基本的なレイアウト

ウェブサイトの基本的なレイアウト

次に、ウェブサイトの基本的なレイアウトについてお話ししていきたいと思います。

レイアウトは、好みで決めるものではありません。ウェブサイトの目的、または各ページの役割によって決めていくことが理想的です。

1カラムレイアウト

1カラムレイアウト

ヘッダーからフッターまで、コンテンツが1列になっているものを1カラムレイアウトと言います。サイドバーがなく、コンテンツのみで構成されているレイアウトです。

スマートフォン用サイトなどの場合は、ディスプレイのアスペクト比(縦横比)が縦長のため、また省スペースのために1カラムレイアウトが採用されることが多いです。

1カラム構成では、コンテンツがディスプレイの横幅いっぱいにレイアウトされていることが多いですが、そうするとテキストの行が横に長くなってしまい読みにくくなってしまうことから、あえて幅を狭くしているウェブサイトもあります。

1カラムレイアウトのメリットは、余計なリンクがないために、ユーザーにコンテンツに集中してもらえることです。セールスレターやLPなどが1カラムで制作されることが多いのはこのためです。

2カラム、3カラムなどサイドバーがあるレイアウトの場合、記事を読み進めていく中でどうしてもサイドバーに設置されたリンクが目に入り、そこからユーザーが離脱してしまいます。

カラムを1つに絞り、出口を限定することでページ最下部などに設置された購入ボタンや申し込みボタンまでユーザーを誘導するのに最適なレイアウトだといえます。

デメリットとしては、サイドバーがないためにカテゴリーや人気記事の一覧など、サイト内の回遊性を上げるためのコンテンツを設置できないことです。

そのため、収益を上げるためのページには向いている反面、情報を提供してユーザーとの関係を築いていくことには不向きなレイアウトだといえます。

2カラムレイアウト

2カラムレイアウト

メインコンテンツの左右どちらかにサイドバーを設置したレイアウトを2カラムレイアウトと言います。

ウェブサイトでいろいろな情報を提供することで、ユーザーはあなたに親近感・信頼感といったものを持つようになり、あなたから商品を購入しようという気持ちになります。

そして、ユーザに情報を提供するためには、今ユーザーが見ているページからサイト内のいろいろなページへのリンクを設置しておくことが大切です。

せっかくユーザーが「他にどんな情報があるのだろう?」と思っても、他のページへ行くためのリンクがすぐに見つからなければ、あきらめて他のサイトへ行ってしまいます。サイドバーを有効に活用することで、ユーザーにとって情報収集しやすいウェブサイトにすることができるわけです。

また、サイドバーにプロフィールページなどユーザーの関心を引きやすいコンテンツへのリンクを設置しておくことで、よりそのページへのアクセスを集めやすくなります。

3カラムレイアウト

3カラムレイアウト

メインコンテンツをはさむ形で左右にサイドバーを設置したレイアウトを3カラムレイアウトといいます。ウェブサイト内のコンテンツが多い場合などに適したレイアウトだといえます。

サイドバーの最上部はもっともクリックされやすいエリアの1つですので、ここにアクセスを集めたいページへのリンクや広告を設置しておくことで収益につなげることができます。

メリットとしては、やはりいろいろなコンテンツを配置できるのでユーザーの回遊率を上げることができること、デメリットとしてはページ内に出口がたくさんあるためにページ離脱率が高くなってしまうことが考えられます。

なぜ、このレイアウトなのか?

上記のように、それぞれのレイアウトにメリット・デメリットがあります。そのため、同じウェブサイト内のページでも情報提供用のページは3カラム、セールスレターは1カラムなど、ページによってレイアウトを変えていくという方法が効果的です。

それが難しい場合は、ウェブサイトのもっとも大きな目的や目標などからレイアウトを決定したり、目的別に複数のウェブサイトを制作してリンクを送り合うなどするとよいでしょう。

いずれにしても「なぜ、このレイアウトなのか?」を考えることで、収益を大きく伸ばす思考が身に付きます。たんに「見栄えがいいから」「流行っているから」などの理由でレイアウトを決めてしまわないようにしましょう。

ウェブサイトのカラーは自分の好みで決めるものではない

次に、デザインにおける重要な要素であるカラー(色)についてお話ししたいと思います。

ウェブサイトに使用するカラーは、あなたの好みで決めるものではなく、ウェブサイトの目的によって決めましょう。「自分はこの色が好きだから」というような理由でウェブサイトのメインカラーを決めてしまうのは、典型的な失敗パターンです。

色には人の感情をコントロールする力がある

色によって、ユーザーに与える印象が変わってきます。

たとえばオレンジには、温かみや親しみやすさを感じさせる効果があります。また青には信頼感や清潔感をイメージさせる効果があります。

そのため、保育園などのウェブサイトではオレンジがメインカラーとして使われるケースが多いですし、ビジネス系のウェブサイトでは信頼感を与えるブルーが使われることが多いのです。

また、場合によってはロゴに使われているカラーを元にしてウェブサイトのカラーを決めていくこともあります。

しかしその場合、ロゴマークで使われているカラーがあなたのビジネスのコンセプトをしっかり反映したものでないとウェブサイトの内容とカラーとの間にズレが生まれてしまいますので注意してください。

色は清潔感、純粋さをイメージさせます。そのため、結婚式のウェディングドレスは白が多いですし、病院でも医師が白衣を着ています。清潔さが不可欠な飲食店の調理師も白い服を着ていますよね。
黒は高級感、重厚感、恐怖などをイメージさせます。高級車や高級時計などのウェブサイトでは黒が使われることが多いのはこのためです。また、怪談を集めたサイトなどでも黒が多用されたりします。
赤は、興奮、情熱、活発さをイメージさせます。ウェブサイト制作の現場でよく言われるのは、「購入ボタンは赤がいい」ということです。ユーザーの購買意欲を高め、クリックさせるには赤がいいという理屈です。
青は信頼感、誠実さ、清涼感をイメージさせます。コンサル会社や政治家のウェブサイトでは青が使われているケースが多いです。またスポーツドリンクなどの清涼飲料水なども、青がイメージカラーとして使われていますよね。
黄色
黄色は刺激、注意、元気などをイメージさせます。工事の標識に黄色が使われるのは注意を促すためです。また元気な印象を与えるため、カジュアルなイメージを持たせることにも効果的です。
緑は癒し、リラックス、安心感、自然などをイメージさせます。エコ系商品などでは自然を連想させるために緑が使われることが多いです。またスタバのロゴマークが緑なのも、こういった理由(リラックスしてコーヒーを飲んでほしい)からだと考えることができますね。
紫は高貴、神秘、スピリチュアルなものをイメージさせます。占い師のウェブサイトで紫が多く使われているのはこのためです。また葬儀屋のウェブサイトなどで厳(おごそ)かなイメージを伝えるのにも効果的です。
オレンジ
オレンジは親しみやすさ、陽気、食欲をイメージさせます。保育園や親しみやすさを前面に押し出したサービス業などのウェブサイトに効果的です。またオレンジだけではないですが、暖色系のカラーは食欲を沸かせるため、飲食店のウェブサイトにもおすすめです。吉野家のロゴなどこの効果を狙ったものだと考えられますね。

購入ボタンの色は緑か赤がおすすめ

先ほども触れましたが、購入ボタンには購買意欲を喚起する赤が使われているケースが非常に多いです。そのほかにも安心させる効果がある緑も効果的です。

そういった意味では信頼感を与える青もいいのではと思われますが、青は気持ちを落ち着かせる効果もあるため、せっかく購買意欲が高まった状態を下げてしまう恐れがあるため不向きです。

いいデザインはいい余白から

コンテンツの見やすさ・読みやすさを考えたときに、もっとも注意を払っていただきたいのが十分な余白の確保です。

「いいデザインはいい余白から」と言ってもよいでしょう。目を引かせたい要素の周りにしっかりと余白を確保することで、その要素が際立ちます。これが逆にほかの要素と隣接していると、埋もれてしまってユーザーの注目を集めることができません。

また関連するコンテンツ同士をまとめて、他のコンテンツとの間に余白を設けることで、要素同士の関連性を視覚的に伝えることができます。

marginとpaddingの使い方

ここで少し、マークアップについてお話ししておきたいと思います。

画像として制作したデザインをマークアップする際に、CSSで余白の指定をすることになります。そのときに使用するプロパティにmargin(マージン)とpadding(パディング)というものがあります。

簡単にいうと、marginは要素の外側、paddingは要素の内側の余白を指定するためのものです。

div {
width: 300px;
height: 200px;
margin-top: 30px;
padding-top: 20px;
}

どちらも要素の余白を指定するためのプロパティですが、使い方としての大きな違いは、marginにはマイナスの値が指定できる(ネガティブマージン)のに対し、paddingはできないということです。

div {
width: 300px;
height: 200px;
margin-top: -30px; /* これは効く */
padding-top: -20px; /* これは効かない! */
}

はじめのうちはもしかしたらネガティブマージンの使いどころがピンとこないかもしれませんが、例えば要素を画面に見切れる形で表示したいというような場合にネガティブマージンを指定することで実現できます。

marginの相殺について

マージンの相殺

マークアップをしていく中で、たまに「marginを指定しているのに余白が思うように空かない!」というようなときがあるかもしれません。

そんなときに疑ってほしいのが、「marginの相殺」です。

たとえば以下のソースのように上の要素に「margin-bottom: 30px;」と指定されていて、下の要素との間にさらに20px分の余白を空けたいという場合、下の要素に「margin-top: 20px;」と指定しても、余白は30pxしか空きません。

<div class="box01">
</div>
<div class="box02">
</div>
.box01 {
width: 300px;
height: 200px;
margin-botom: 30px;
}
.box02 {
width: 300px;
height: 200px;
margin-top: 20px;
}

なぜなら、この場合上と下の要素の間のmarginは値の大きなものが優先されるからです。ですので、より値の大きい上の要素の「margin-bottom: 30px;」が適用され、下の要素に指定した「margin-top: 20px;」が効いてさらに20px余白が大きくなることはありません。

これがmarginの相殺です。

そのためこの場合であれば、さらに20px分余白を広げるためには上下どちらかの要素に50pxのmarginを指定することで解決できます。

特にマークアップを勉強中のときには、このmarginの相殺によってつまずく場面が多いかもしれません。そんなときには隣接する要素のmarginを注意深く確認してみましょう。

また、marginの相殺が起こらないよう、各要素のスタイル指定には常に「margin-top」もしくは「margin-bottom」のどちらか一方で指定するようにしておくなど、自分なりにルールを設けておくとよいでしょう。

各要素のサイズ、margin・paddingの指定は厳密に!

各要素のサイズ(width、height)、余白(margin、padding)の値はデザインの段階から正確に制作するようにしましょう。

300pxなら300px、これが298pxだったり301pxだったりするとマークアップ作業に入った段階で思わぬ手間を取られることになります。

たとえば、下の画像のように横幅1000pxの要素の中に300px×300pxの要素横に3つ並べる場合を考えてみましょう。

floatでのスタイル指定

このように1000pxの要素に3つの子要素を幅ぴったりに並べる場合、隣り合う子要素のmarginは50pxになります。デザインの段階からサイズや余白の値を正確に制作しておけば、マークアップ作業はスムーズに進みます。

しかしこれが、子要素の横幅がそれぞれ300px、298px、301pxだったらどうでしょう?

まず子要素のスタイル指定がまとめてできませんよね。もしくはデザインの方をすべて300pxに修正しなければなりません。また、marginも51pxと50pxという感じで微調整が必要になります。

スタイル指定がしづらい!

子要素の横幅と余白の合計が親要素の幅(1000px)より1pxでも大きいと、要素が横一列に並ばずに最後の1つが下に回り込んでしまいますので、このような微調整または修正が必要になってきてしまいます。

でもこのような作業って、重要度から言ったらかなり低いですよね? デザインの段階で適当に制作を進めてしまうと、あとでこのようなしわ寄せが来るのです。こういう無駄な作業で時間を取られないように、一つ一つの作業をていねいに進めるようにしましょう。

関連ページ:【CSS】横並び(float)したブロック要素のマージン(margin)を指定する方法

borderの扱いに注意!

div {
width: 300px;
height: 200px;
border: 1px solid #999;
}

上記のソースは横幅300pxのdiv要素に1pxの枠線を指定しています。この場合、div要素の実際のサイズはどうなると思いますか?

そうです、答えは302pxです。

このようにスタイル指定した場合、要素に指定したwidthに枠線の幅もプラスされます。CSSの作成に慣れていないときは、このことをついつい忘れがちになってしまい、思わぬ表示崩れを招くことになります。

全幅はwidthに含まれない

CSSを作成するときは、線幅の値についても計算に入れておくようにしましょう。

枠線も含めて要素のサイズを300pxに収めたい場合は、以下のようにスタイルを指定してみてください。

div {
width: 298px; /* 枠線の幅を引いた値を指定する */
height: 200px;
border: 1px solid #999;
}

box-sizingをうまく使おう

box-sizingプロパティを使えば、線幅やpaddingを含めてwidthやheightを指定することができます。

div {
width: 300px;
height: 200px;
border: 1px solid #999;
box-sizing: content-box; /* 線幅やpaddingはwidth、heightに含まれない(初期値) */
}
div {
width: 300px;
height: 200px;
border: 1px solid #999;
box-sizing: padding-box; /* paddingはwidth、heightに含まれ、線幅は含まれない */
}
div {
width: 300px;
height: 200px;
border: 1px solid #999;
box-sizing: border-box; /* 線幅やpaddingがwidth、heightに含まれる */
}

box-sizingプロパティはレスポンシブデザインでウェブサイトを制作する際に非常に便利に使えますので、この機会に是非覚えてしまいましょう。

画像の下に謎の隙間ができてしまう場合は?

マークアップを進めていると、画像の下に謎の隙間が空いてしまうことがあります。

これは、画像がテキストのベースラインに合わせて表示されていることが原因で起こります。この場合、imgタグにvertical-alignプロパティにtopまたはbottomを指定することで解決できます。

img {
vertical-align: top;
}

float指定したときにレイアウトが崩れてしまう理由と対処法

親要素の中に複数の子要素を横並びにするレイアウトは、ウェブサイトを制作する上で非常によく使われます。そして、このレイアウトを実現するために使われるのがfloatプロパティです。

上で紹介した2カラム、3カラムレイアウトもメインコンテンツとサイドバーにfloatを指定することで実現します。しかし、floatプロパティでのレイアウトには押さえておいて頂きたいコツがありますので、ここで紹介します。

ここでは例として、2カラムレイアウトでスタイルを指定する場合を考えてみたいと思います。まず、下記のようにソースを記述してみました。

<div id="header">ヘッダー</div>
<div id="wrap">
<div id="content">メインコンテンツ</div>
<div id="side">サイドバー</div>
</div><!-- #wrap -->
<div id="footer">フッター</div>
#header {
width: 100%;
height: 60px;
margin-bottom: 30px;
}
#wrap {
width: 1000px;
margin: 0 auto 30px;
}
#content {
width: 700px;
float: left;
}
#side {
width: 300px;
float: left;
}
#footer {
width: 100%;
height: 30px;
}
※float指定すると子要素が上から下へ並ぶのではなく、親要素の横幅が許す限り左寄せで並んでいき、親要素の横幅を超えると下へ回り込みます。

一見問題なさそうですが、実際にブラウザで表示させると下の画像のようになってしまいます。

要素の高さが取得できない

floatプロパティは、文字通り要素が「浮かんでいる」扱いになります。そのため、親要素内のすべての子要素にfloatを指定していると、「親要素内に子要素が1つもない」という扱いになってしまうのです。

一度下記のような空(から)要素を記述して表示を確認してみて頂けると分かりやすいですが、CSSによりスタイル指定していない空要素は高さ(height)が取得できないためにブラウザ上で表示されません。

<div id="header">ヘッダー</div>
<div id="wrap"></div><!-- 空要素 -->
<div id="footer">フッター</div>
#header {
width: 100%;
height: 60px;
margin-bottom: 30px;
}
#wrap {
}
#footer {
width: 100%;
height: 30px;
}

#wrapは表示されない!(当たり前と言えば当たり前ですが…)

子要素すべてにfloat指定した場合、この空要素と同じ状態になってしまうのですね。そうすると、さっきのようにレイアウトが崩れてしまいます。

clearfixで要素の高さを取得する

こんなときに便利なのがclearfixです。CSSに下記のようなソースを記述し、class(この場合「clearfix」)を指定することで、float指定した子要素を内包する親要素の高さを取得できるようになります。

<div id="header">ヘッダー</div>
<div id="wrap" class="clearfix">
<div id="content">メインコンテンツ</div>
<div id="side">サイドバー</div>
</div><!-- #wrap -->
<div id="footer">フッター</div>
#header {
width: 100%;
height: 60px;
margin-bottom: 30px;
}
#wrap {
width: 1000px;
margin: 0 auto 30px;
}
#content {
width: 700px;
float: left;
}
#side {
width: 300px;
float: left;
}
#footer {
width: 100%;
height: 30px;
}
.clearfix {
zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
※clearfixを適用するのは、子要素ではなく親要素ですので注意してください。

clearfixで何をしているかというと、float指定している子要素の後ろに疑似的に要素を追加し、その疑似要素にclear:bothを指定して回り込みを解除してあげることで親要素の高さが取得している… というわけです。

正直この辺の理屈は制作を進めていく中で自然と腑に落ちますので、はじめは「clearfixを指定すればレイアウト崩れを防げる」と覚えておいて頂ければ大丈夫です。

もしマークアップを進めていく中でレイアウトが崩れるような問題が起きたら、clearfixを思い出してください。

グリッドを意識することでデザインの品質はグッと上がる

いろいろなウェブサイトのデザインを見て回っていると、「なんとなく素人っぽいな…」とか「なんとなくきれいだな…」という違いを感じることがあります。

実はこの「なんとなく」には理由があり、ここを押さえておくことでデザインの品質はグッと上がります。

それが、「グリッド」です。

グリッド(grid)とは「格子」のことで、ウェブデザインの現場では「グリッドを合わせる」というように使われます。

要は、ページ上の各要素の端のラインをぴったり合わせることで、サイズの違う複数の要素を配置しても整った印象を与えることができるというわけです。

グリッドを合わせる

実際のところ、プロとして活動しているウェブデザイナーでもグリッドがガタガタのデザインを作ってしまう人が結構います。そんな状況ですので、あなたがグリッドを意識してデザインするだけで、品質の面で一段と差をつけることができます。

可読性とジャンプ率について

テキストのジャンプ率

ウェブサイトのコンテンツには画像や動画も掲載することができますが、やはりメインは文章(テキスト)です。そのため、どんなウェブサイトでも文字の読みやすさ(可読性)には注意するようにしましょう。

たとえば、黒背景に濃いグレーの文字色では読みづらいですよね。白背景に薄いグレーも同様です。

もっともユーザーにストレスなくテキストを読んでもらうには、白背景に濃いグレーがおすすめです。そのため、ブログなどテキスト量が多いページはできるだけそのように指定しておきましょう。

また、ページ上のすべての文字のサイズが同じだと、どこが重要な部分なのか分かりづらいですよね。

やはり見出しやユーザーに読んでもらいたいメッセージは文字を大きく、反対に補足や注釈などは文字を小さめにしておくことで、どこが重要でどこがそうでないかを見た目で伝えることができます。

このような文字サイズの大小の比率のことを「ジャンプ率」と言います。本文の文字サイズに対してサイズが大きいほど「ジャンプ率が高い」というふうに表現します。

またジャンプ率とともに、注目させたいテキストの周りに十分な余白を確保したり、役割の似た文章(メインコピーとサブコピーなど)は距離を近くしたりということを意識することで、見やすいコンテンツを作成することができます。

メインビジュアルはウェブサイトの顔!

ウェブサイトを開いて一番はじめに大きく表示される画像のことをメインビジュアルとかヘッダー画像、キービジュアルなどと呼びます。

メインビジュアル

ある意味、ウェブサイト制作でもっともクリエイティブな作業ができる部分です。ここにユーザーの心にグサリと刺さる!コンテンツの作り方で作成したキャッチコピーを効果的に盛り込むことで、ユーザーに強いメッセージを伝えることができます。

ある意味、はじめて訪れたユーザーにウェブサイトを読み進めてもらえるかは、メインビジュアルの出来にかかっていると言ってもいいでしょう。

メインビジュアルでも、上で紹介したジャンプ率や可読性を意識しながら画像を制作します。場合によってはこの部分だけデザイナーに制作を依頼するという選択もアリです。

また最近では、この部分にYoutubeなどの動画を挿入しているサイトも増えています。ただあまり長くなってしまうとユーザーも見る気が失せてしまいますし、動画の読み込みに時間がかかったりします。1分程度、長くても2~3分で見終わるものにしましょう。

各ページの横幅(width)を統一しておこう

ウェブサイト内の各ページの横幅(width)は統一するようにしましょう。

これはサイト全体を通しての統一感を出すことも理由の一つですが、どちらかと言うと制作・管理面での手間を省くことが大きな理由です。

あるページは横幅980px、またあるページは横幅1200pxという感じでデザインを制作してしまうと、ナビゲーションなどの全ページ共通のパーツでさえそれぞれのページ幅に合わせてマークアップしなければなりません。

こういった作業は無駄以外の何物でもありませんので、極力こういう作業が発生しないよう後の工程をイメージしながら、一つ一つの作業を丁寧に進めて頂きたいと思います。

無駄な作業を極力省いて、重要な部分に注力するようにいつも心がけましょう。

≫ 第6回:スマホ時代の対応するためのレスポンシブデザイン

投稿者: