印刷とは異なるウェブならではの基本的な5つのデザインルール

僕もこの記事のように印刷からウェブに移行した組ですが、最初は印刷とウェブではルールが違うので戸惑いました。もちろん、印刷時代の知識も役にたったものが数多くあります。

なぜフォントのサイズが小さいとよろしくないのか、サイドバーはなぜ右側なのか、ナビゲーションはなぜ上部なのか、印刷とは異なるウェブならではの基本的な5つのデザインルールを紹介します。

サイトのキャプチャ

5 Design Rules No Blog Should Break

下記は各ポイントを意訳したものです。

はじめに

印刷デザインの世界からウェブデザインに入った時、いくつかのミスをしていました。一番大きなポイントは、新聞や雑誌のようにはウェブは使わないということです。紙を読む時とスクリーンを見る時では、どのくらい目からの距離が違うか考えてみてください。
良いウェブサイト・ブログのレイアウトをデザインすることは、ウェブを理解し学び、印刷でのルールを若干破らなければなりません。

ここに、ウェブデザインで破るべきではない5つのルールがあります。

本文は大きいサイズで、分かりやすく

印刷では本文のフォントサイズはだいたい10-12ポイントで、かなり小さいです。このルールはフォントのサイズ・スペース・マージンと、学生時代から学ぶものです。

このサイズは印刷ではうまく機能しますが、スクリーン上でテキストを読むウェブではもっと目が遠くにあるため機能しません。
一言で言うと、11ポイントではウェブで読むには小さすぎます。

ウェブではテキストが読みにくいので、ReadabilityEvernote Clearlyのようなテキストを読みやすくするサービスがリリースされています。これらのサービスの特徴は、不要なものを取り除くことに加え、読みやすいようにフォントのサイズを大きくし、コラムを狭くしています。

ウェブでは小さいフォントに限定する理由は何もありません。正しくレイアウトされていれば、より大きいサイズのフォントは読みやすく、非常に素敵に見えるでしょう。11ポイントより大きいサイズのフォントを試してみてください、きっとユーザーはあなたに感謝するでしょう。

右側のサイドバー

ウェブの初期に、サイドバーを左側に設置すべきか、右側に設置すべきか激しい議論がありました。ユーザーの多くは左から右に読む人が多いため、左側のサイドバーにより多くの注意が集まるけれど、右側のサイドバーがより読みやすいという意見が多数を占めました。
結果、サイドバーは右側派が強いです。

ユーザーが下まで読み進め、行の左に視線を移動させる時、左側にサイドバーがあると干渉してしまうため、次のテキストの始まりを見つけ出すのが困難になってしまいます。サイドバーが右側だと、この問題はありません。

また、左側のサイドバーは広告を配置するのに良いという意見もありますが、コンテンツを読みやすくするには、右側にサイドバーを配置し、左側をクリーンな状態にするだけでなく、左上に大切なエレメントを配置するスペースを与えることもできます。

クリーンなカラー

これは印刷デザインとウェブデザインが密接に関係しあう領域です。クリーンなカラーは、読みやすく魅力的なコンテンツに極めて重要です。

あなたのカラーパレットを汚さないでください。読みやすさを考えると、ホワイトの背景にブラックのテキストが良いでしょう。そして、力強いアクセントカラーを使い、ユーザーの注意を引きつけ、サイトにユニークな見た目を与えるために使用することができます。

グレーは難しいカラーで、読みにくくしてしまうと、ユーザーは落胆して去ってしまうでしょう。あなたのサイトで使用するカラーは、明快でクリアなものにしてください。

上部のナビゲーション

印刷デザインでは、目次を予測可能な場所に配置することはごく当たり前のことです。もし、あなたのサイトが特にスタティックなページでナビゲーションがあるのであれば、通常はロゴの下に水平に配置してください。ロゴの側やロゴエリア内の場合もあります。

上部に配置する理由は、もしサイドバーが左側にないなら、コンテンツの上部のスペースが最も目立ち、最も容易にアクセスできるからです。さらに、大部分のユーザーは上部のその場所を最初に見ることが予想できます。

ナビゲーションを他の場所に配置するということは、ユーザーがナビゲーションを見つけるのに手間を増やしてしまうということです。

常に画像を使用する

印刷では画像を使用すると、コストがかかりました。単に画像自身のコストだけでなく、カラー印刷にすると余計にコストがかかります。1色から4色に増えると、プロジェクトのコストが何倍にもなってしまいます。しかしウェブではこの心配すべき印刷の経費はありません。MorguefileStock.XCHNGのようなフリーのストックフォトもあり、フリーの画像を見つけることが簡単にできます。

画像を使用することで、記事にヴィジュアルのフォーカスを加えたり、テキストを区切ったり、サイトをより魅力的にするので、画像を使用しない理由は何もありません。

おわりに

印刷デザインとウェブデザインは異なる世界です。同じルールとアイデアの多くを共有しますが、非常に異なっており、それらの相違点が類似性と同じくらい重要な多くの方法があります。

あなたがブログをデザインする時、これらのルールを心にとめておいてください。これはクリエイティブを押さえつけるものではありません。あなたのサイトを唯一なものとして、面白くするために、これらのルールの中でできることはたくさんあります。最も良い、最もクリエイティブなデザインは、ユーザに使いやすさと読みやすさをデザインに結合させることです。

top of page

©2017 coliss