物販

基本を押さえてホームページのデザインを作ろう

Webデザインはセンスの他に知識も必要です。基礎を固め素敵なWebデザインを作れるようになりましょう。この記事では、Webサイトを作る際に知っておきたい基礎知識について解説します。

デザインの基礎を知ろう

デザインに関して無知だからデザイナーに丸投げしていたり、感性や才能をどのようにデザインで表現すれば良いのか分からない人も少なくありません。本業でない限りデザインに対して重点的に時間を作ることは難しいです。

しかし、デザインは思っているほど難しいものではありません。原理原則や法則で考えれば良いのです。

理解を深めればデザイナーと連携が取れるようになり、クオリティの向上につながります。デザインの原理原則を学びましょう。

デザインの基礎

デザインの4つの基本原則は近接、整列、反復、コントラストです。これはどんなデザインに対しても共通して言えることです。ここから押さえるようにしましょう。

色の基礎

色は彩度・明度・色相で構成されています。この違いが分かれば色が与えるイメージや、どの色を組み合わせれば良いのかが理解できます。色の組み合わせも大切なポイントです。

レイアウトの基礎

レイアウトは印象に関わる部分なのでしっかりと基礎を押さえる必要があります。どのように配置すれば情報を受け取りやすいか考えてみましょう。見てほしい場所に視線を誘導するテクニックが使えます。

文字組みの基礎

文字にもデザインが関係してきます。文字のサイズや余白などを調整し、美しく見せることを文字組みと言います。ここが変わると文字の印象がガラッと変わってきます。商品訴求にも関わるので充分に理解しておきましょう。

理解を深めたい8つの法則

Webデザインには、8つの法則があります。視覚階層、黄金律、ヒックの法則、フィットの法則、三分割法、ゲシュタルトの法則、余白・清潔感のあるデザイン、オッカムの剃刀です。

例えば、黄金律ではパルテノン神殿が挙げられます。忠実に法則に従ってデザインされています。

デザインを美しくするには「余白とバランス」が重要

余白とバランスを意識すればデザインが美しくなります。その理由について解説します。

Webデザインはバランスが大切

Webデザインの基礎としてバランスがあります。美しくするにはまずバランスから。感覚としてすぐに習得することは難しいですが、手本となるデザインをたくさん見て勉強する習慣を付けましょう。美しさを求めるなら、「文字・画像・装飾の比重」がとても重要なのです。

塊としてバランスを考える

いきなり1つ1つの配置を個別に考えるのではなく、まずは塊として認識する方法があります。写真やテキストなどを大きな塊として考え、全体がバランス良く配置されているかを俯瞰します。

塊は一箇所にまとまりすぎていてもバランスとしては悪く、適度な余白が必要です。塊周辺のバランスは特に重要で、仮にどこかに寄せたらその余白部分が無駄にならない配置を考える必要があります。

重心的なバランスを意識する

重心的なバランスがとれていれば美しく見えます。

・バランスの悪いデザイン

一見整っているように見えますが全体的に左に寄っていて不安定な印象を受けます。これをバランス良く配置すると、次のようなイメージの変化が起こります。

・バランスの良いデザイン

上部のメインビジュアルを全面に入れる事でダイナミックさと安定感を与えます。赤枠の濃い色の部分をバランス良く配置することで安定したレイアウトに変わります。このように、重心的なバランスを意識することで、印象が大きく変わるのです。

タイポグラフィーを学ぼう

Webサイトの雰囲気は文字の扱いで大きく変わります。そこで、サイトの読みやすさにも関わってくるタイポグラフィーについて学びましょう。タイポグラフィーとは、フォントを用いて文字を適切に配置しデザインする技法のことで、HTMLやCSSでも表現することができます。

フォントの種類

フォントは何種類もあり、コンセプトに合ったフォント選びが大切です。英字フォントならセリフ、サンセリフ、スラブ、スクリプトがあります。

日本語フォントならゴシック体、明朝体、ポップ体があります。他に使用頻度の高いフォントならメイリオ、ヒラギノ角ゴシック、游ゴシックがあります。

Google Fontsの「Noto Sans CJK JP」もよく使われています。読みやすく綺麗なフォントですが、これはPCにインストールされていません。使用する場合は読み込みに時間がかかります。

一般的に採用されているフォントしてサンセリフゴシック体が挙げられます。この2つのフォントは、双方を同時に使っても癖がなく馴染みがいいのが特徴です。

和を意識したいなら明朝体が良いでしょう。高級感を出したいならセリフ体です。楽しい雰囲気を出したいなら、手書き風のフォントも目を引きます。

どのフォントを選ぶべきか考える

フォントはWebサイトの印象に大きく関わります。多種類のフォントを使えば統一感のないデザインになります。

長い文章にはオーソドックスなフォントがオススメです。メイリオヒラギノ角ゴシック游ゴシックが当てはまります。これらのフォントは癖がなく特に読みやすいものとして挙げられます。

癖の強いフォントは普段見慣れていないこともあり、文章に集中しづらいです。そういったフォントはサイトのタイトルでやアクセント、限られた場所に使用しましょう。

タイポグラフィーの扱いの違い

画像内のテキストとサイト内のテキストでは、タイポグラフィーの扱いが変わります。バナーでは文字のサイズを変え、重要な部分を強調します。

こういった細かい文字サイズの指定はHTMLやCSSではほとんど使いません。また、画像では文字間を調整するカーニングをしていますが、HTMLを使ってカーニングをすることもほとんどありません。

画像は改行の位置が決まっています。Webサイト内のテキストは大抵改行位置が決まっていません。レスポンシブデザインでは、デバイスのサイズにより改行の位置が変化します。例えばブログではタイトルや本文の文字数、テキストはページによって異なります。

画像内のテキストには、PCにインストールできるフォントなら全て使えます。ところがサイト内で使えるフォントは決まっています。デフォルトで入っているフォントかWebフォントです。

WebフォントといえばGoogle Fontsが有名で、日本語なら「Noto Sans Japanese」があります。ファイルを読み込めばCSSを記述するだけで使うことができます。

他にも有料でフォントを販売している会社があります。それ以外のフォントは使うことができません。

画像ならブラウザやデバイスが変わってもフォントは変わりません。ところがWebサイト内のテキストはブラウザやデバイスによって変わります。

例えばSan FransiscoはiPhoneやMacなら見れますが、WindowsやAndroidでは見れません。端末に応じたフォントを設定する必要があります。

基本ルールを押さえてシンプルなWebデザインを作ろう

6つの基本ルールを押さえればシンプルなWebデザインを作ることができます。情報を詰め込みすぎたデザインは美しくありません。美しくシンプルなデザインを作れるように学びましょう。

1ページごとに目標を立てる

まずは目標を立てるところから始めましょう。各ページ1つ1つのアクションでユーザーを誘導する必要があります。

例えばリンクのクリックやフォーム入力、ビデオ動画、ゲームが挙げられます。1ページごとにユーザー行動やコンバージョンへ焦点を当てる必要があります。

量が多いとユーザーを圧倒し、どんな行動をするべきか見失わせてしまう可能性があります。1ページごとにユーザーを目当ての情報へ導けるように考えましょう。

スクロール前後のボタンが同じ行動をとるように設計することも大切です。一貫性をもたせ、魅力的なデザインを実現できるようになりましょう。

2つのフォントだけを使う

3つのフォントを推奨する指南書もありますが、使用するフォントを2つに抑えればより合理的なデザインが作れます。

通常の文字と太字だけでもコントラストが表現できます。見出しなど大きく表示すれば、多くの表現をすることができます。

本文フォントと見出しフォントを組み合わせるだけでもデザイン全体が引き立ちます。2つのフォントだけでも読みやすく手軽に使うことができ、管理も簡単で一貫性がありオススメです。

一貫性のある配置

デザインは周辺方向への配置にも気を配りましょう。文字テキストとボタンなど、同じグループに分けられる塊を中心に配置してみましょう。

上記の例ではホームページのイメージスライダーにこのテクニックが使われています。異なる行数のテキストが画像上にあるものの、各見出しにユーザーの行動を促すボタンが配置され、デザインの間隔に一貫性があります。

イメージスライダーに合わせたテキストの配置ができています。一般的には、左揃えと中央揃えが読みやすい配置として挙げられます。テキスト量が多く長い場合は左揃えを使うと良いでしょう。

階層を作る

シンプルなデザインでも階層を作る必要があります。ここを明確にしなければユーザーはどのページを見るべきか迷ってしまいます。

最初に第一印象を決めるビジュアルを考えましょう。画像やビデオ、テキストなど思い付くもので構いません。

次にユーザーにメッセージを伝えるテキストを決定します。インパクトのある見出しタイトルが含まれます。

ユーザーがアクションを実行できるテキスト、最後の要素がナビゲーションメニューです。ユーザーの視線をこの順序で操作することができます。

コンテンツの強化

コントラストのはっきりしているデザインなら、重要なことをうまく伝えることができます

コントラストがあるパレットを使いユーザーの注目を集めましょう。大胆な色使いはユニークな印象を感じさせてくれます。コントラストを意識するためにカラーホイールの反対側にある色を選びます。

もし配色の組み合わせが印象と違う場合は、カラーホイールの他の色も試してみましょう。思わぬ組み合わせが見つかることもあります。

アイコンやデザインは一貫性を持たせる

一貫性を持たせることでハイクオリティなデザインを作れます。複数のボタンスタイルやSNSアイコンを利用しがちですが、一貫性を持たせることはとても大切です。

ユーザーインターフェースの要素は最初にしっかり検討しましょう。プロジェクトごとにルールを決定し、アイコンやユーザーインターフェース用のスタイルを作る必要があります。

アイコンフォントやUIキットを購入しダウンロードすることで、この作業を省くこともできます。要素ごとに同じ色を選び、同じホバーエフェクトを使い、用途に応じてアイコンサイズを決めましょう。

こちらの例では大きめのアイコンを使っています。アイコンには+マークが付けられ、色によるカテゴリ分けがされています。

マウスホバーでユーザーがクリックすれば同じように動作します。サイト全体で同じアイコンを使うことで一貫性をもたせ、ユーザーが新しいコンテンツを見つけてキャッチコピーを読むような工夫がされています。

デザインをする上で参考にしたいレイアウト

ユーザーの目を引くWebデザインはすぐに身に付くものではありません。理想と現実の壁にぶつかることも多いでしょう。スマートフォンやタブレットの普及でWebデザインの環境も変化しています。

レイアウトは様々なデバイスに対応できる必要があり、ユーザーにとって見やすく使いやすいデザインでなければいけません。多様化するレイアウトについてまとめています。

レスポンシブ・ウェブデザイン

ブラウザの横幅に応じてページのレイアウトや画像サイズが柔軟に調整できる主流なレイアウトです。HTMLファイルをCSS3で制御し、画面サイズに適したレイアウトに調整してくれます。

リキッド・レイアウト

ユーザーの画面サイズに合わせて横幅が調整され、コンテンツを表示してくれます。ボックスとしての要素をどの端末を使っていても伸縮して伝えられることがメリットです。

フレキシブル・レイアウト

最小幅と最大幅を指定して、レイアウト崩れを防ぐことができます。大きな画面サイズで視聴すると周りに余白が生まれるため、PCで見た時だけ幅を固定する場合に有効です。

可変グリッド・レイアウト

一定のグリッドに合わせてカード型のコンテンツを並べ、ウインドウ幅が変更されるとコンテンツを再配置してくれます。再配置にはjQueryなどのプログラミングが活用されます。ただし小さい画面になると縦長になるので見づらくなってしまいます。

「タイルレイアウト」「カードレイアウト」はこのタイプのレイアウトです。

 

エラスティック・レイアウト

全要素単位をemで指定し、ブラウザ幅をかえてもコンテンツ全体がズームします。ブラウザにズーム機能があるのであまり必要性はありませんが、ノン・レスポンシブ・サイトをスマホで開いた時に見えるレイアウトがこれに当たります。

まとめ

基本を押さえることでクオリティの高いデザインを仕上げることができます。普段からデザインに触れる機会を増やし、感性を磨くように習慣化しましょう。

美しいデザインは人の心を惹き付けます。いつでも安定したデザインを考えられるようにしたいものです。全体の中で、どのように配置すれば良いのか考えられるようにしましょう。