ウェブデザインの原理についてリサーチしたことがあるなら、あなたはおそらくこのような考え方に親しみがあるでしょう。近頃、ウェブデザインはとても簡単なものになっています。驚くほど高速なインターネットと洗練されたブラウザで、デザイナーはウェブの初期に形成された制約にとらわれずに済むでしょう。現代のウェブサイトはこれまで以上に、デザイナーのキャンバスとして使われるようになってきています。

ベーシックなもので、すでに満足している人の見解からすると、確かにその通りかもしれませんが、もし”CSS「レスポンシブ・グリッド・システム」”や“Google Web Fonts”などのフレーズを聞き慣れていない方なら、おそらくウェブデザインの“とても簡単な”世界に飛び込んでいくのはとっつきにくい課題と思えるでしょう。

これを踏まえ、初心者向けということを念頭に置いて、私たちはウェブデザインの基本の中の本当の基本項目をまとめました。もちろん、自分はエキスパートだと思っている人も、基本を見返すのは必要なことです。

1. グリッドシステム

New York Timesのグリッド・オーバーレイ

手書き原稿(Graphics.comより);New York Timesのグリッド・オーバーレイ(Design O’ Blogより)

1世紀に古写本が考案されて以来、その“グリッド”は私たちがどのように文字を読み進めるかを決定付けました。そして時と共に、列やコラムの様々な配置を含む数千種類ものバリエーションが現れたのです。

テキストや画像が、本、新聞、雑誌でどのように配置されているかを考えてみてください。多かれ少なかれそのシステムはウェブでも採用されており、役に立っています。賢者へ一言送るなら、多くのデザイナーは、“創造力”という名目でグリッドの使用を避けようとしてきましたが、そのようなウェブサイトの多くは読まれていません。

現代において、少なくとも従来のコンピューターよりも、スマートフォンやタブレットでウェブを閲覧する傾向がないのなら、スムーズかつ意図的に、より小さなスクリーンサイズに変換するデザインである“レスポンシブデザイン”も最優先されるべきです。

レスポンシブに対応したグリッド

Profound Gridは互換性のある、レスポンシブに対応したグリッドシステムの1例です。

私たちの生活をより快適なものにするために、事前に作成されたグリッドシステムが数多く登場しています。その中には反応が早く、メジャーなプログラミング言語に互換性があり、そして通常は無料でダウンロードできるものもあります。ポピュラーなものは、960.gsや、Simple GridGolden Grid Systemですが、良いオプションは本当に膨大で、他よりも更に複雑になっています。

もちろん、冒険心のある方や自分のプロジェクトが本当にユニークなソリューションを必要としていると感じる方は、ぜひ自作してください。

2. 視覚的階層

視覚的階層

Buildのカンファレンス・ウェブサイトには、階層原理が用いられています。

私たちはこの題材について最近、情報満載の記事を書いたばかりですので、ここでは要約します。基本的に、ほとんどの文化で人々は左から右、上から下へ読み進めるということは周知の事実です。しかし、これらの特色の中でも、読むときの動作はさらに複合的なルールに従っているという事実も知られています。これは実際に、人々がページを“読む”というよりも“スキャン”するインターネットにおいて、特に当てはまることです。

良いウェブページは、ロゴや行動を誘導するもの、または要となる画像などの重要なエレメントを、読み手がスキャンすると思われる軸に沿って配置するという、計算されたリーディングパターンに応じて構成されています。これらは通常、“F”または“Z”の形状を取ります。

Fパターンの証明

Nielsen Norman GroupによるFパターンの証明

その上視覚的階層は、1番最初にどこを読み、次にどこを読むべきかというシグナルを読み手に出すということでもあります。ページの配置の次に、視覚的階層には、カラーハイライトの使用と共にフォントサイズやスペースのあけ方、管理、そして書体の組み合わせなどの方法があるでしょう。

3. Webセーフフォント

Webセーフフォント

オープンサンはGoogle Web FontsのすてきなWebフォントです

2014年には、“Webセーフフォント”という用語はすでに時代遅れのもののように感じられていました。インターネットの初期時代、ブラウザは一般的にユーザのワープロ・ソフトにインストール済みの、ほんの限られた数のフォントにしか対応していませんでした。そしてそれ以外のフォントでは、閲覧者はでたらめな記号を目にして終わるだけでした。

今日、特定のフォントは、ほとんどのブラウザによってサポートされていますが、そうでないフォントもあります。しかし、現代のほとんどのブラウザで@font-faceとして知られている規則を採用したことにより、webセーフオプションの数は爆発的に増えました。実際、多くのデザイナーは選択肢が多すぎるために不満を漏らしています。

有料のフォントサービスにはTypekitFONTPLUS(フォントプラス)TypeSquare(タイプスクウェア)、そしてFontspringがあります。Google Web Fontsのような無料サービスを少し検索してみると、すてきなフリーフォントが見つかります。こちらはCreativeBloqによる最近のすてきなフリーウェブフォントの総まとめです。

Arvo、Google Web Fonts

ArvoもGoogle Web Fontsの洗練されたフォントです

どこに目を向けると良いか、もうお分かりだと思いますので、気に留めておくべき一般的なルールをご紹介します。

  • ウェブデザインでは、小さなフォントサイズは読みにくくなるため、セリフ体は常にヘッドライン向きです。本文は一般的にサンセリフ体にすると良いでしょう。
  • 1つのウェブサイトに使用する異なるフォントの数を最小限にしておかなければ、ゴチャゴチャした印象になります。多くて2~3種類でしょう。おしゃれなフォントの組み合わせについては私たちの最近の記事をお読みください。
  • フォントファイルにはかなり大きなサイズのものもあり、ウェブサイトのローディングに時間がかかる可能性があることを心得ておきましょう。

4. 画像と色

The-Hype-Agency

Hype!の文字は太字ですがモノクロになっています

画像や色の配置の原理はウェブデザインにとって特に変わったものではないので、これについて深く説明はしません。心に留めておくべき主な原理はやり過ぎないようにするということです。

色について:

  • フォントと同様、使用する色は2~3色に押さえておきましょう。“視覚的階層”の項でも述べたように、色は重要な箇所を目立たせる役割がある一方、ホストのブランディングを反映することは言うまでもありません。
  • 頭の隅に留めておくと良いもう一つの留意事項は、(男性の)人口のおよそ5%は色覚異常を持っているという事実です。ですから、色の組み合わせには気をつけましょう。このテーマについては、こちらの記事により詳しく書いています。
Square

Squareの写真はその製品の理解をするのに役立ちます

画像について:

  • 動く画像の使用は避け、見せびらかしたいという衝動は抑えましょう。もっと言えば、最高のスキルで実行しない限り、GIFでもかなり疑わしいものです。調査の結果では、閲覧者は概して落ち着いたウェブサイトを好むことが分かりました。
  • ただ単にスペースを埋めるために、画像を使用するのはやめましょう。訪問者はすぐにそのことに気付き、あなたのサイトへの興味を失ってしまうかもしれません。その代わりにテキストに付随するイラストや、描写されている商品についての説明など、役立つ情報を伝える画像だけを使いましょう。
  • あなたの画像に関する使用許可制限に注意しましょう。ほとんどの画像は著作権で保護されています。つまりあなたやクライアントは、必要性に応じてその画像を使用するために料金を支払わなければなりません。
  • ファイルサイズはできるだけ小さいものに抑えましょう(ウェブの解像度は72ppiです)。多くの画像は、ウェブページのサイズや、ダウンロード時間の60%以上を占めます。

以上が大まかなウェブデザインの基本事項です。質問はコメント欄にお寄せください!

[ 翻訳:shunichi shiga ]