JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて解説する本コラム。

前回のコラムでは読みやすい文章の掲載方法について解説しました。第8回目となる今回は、デザインの原則をWebサイトに応用する方法について解説します。

普段なにげなく耳にしている「デザイン」という言葉。この意味を正確に理解している人は意外と少ないのではないでしょうか。例えば、デザインはよくアートと比べられることがあります。デザイナーとアーティスト、この2つは似ているようで実は全く違います。

アートは、アーティスト自身が何らかの自己表現をするためのもので、人から理解されることはあまり重要ではありません。重要なのは「何を表現するか」です。

一方、デザインは人に何かを伝える、何か行動を起こしてもらうために計画され、構成されるコミュニケーションの手段であり、「何を誰にどう伝えるか」が最も重要です。

つまり、主観的・感覚的であるアートに対して、デザインは客観的で理論的なものであるといえます。私たちデザイナーは何かを制作する時、いわゆるセンスと呼ばれるような感覚や直感に頼っているわけではなく、理論に基づいてデザインをしています。

今回はこの理論のうち、最も基本的な4つの原則について解説します。「近接」「整列」「反復」「コントラスト」、この4つを正しく理解すれば、皆さまのWebサイトもより見やすく使いやすいものになるでしょう。

近接

まず初めに解説するのは「近接」です。これは「関連しているものは近づけ、そうでないものは離す」という原則です。例えば上のイラストでいえば、左の図は無造作にいろいろな色の丸が配置されていますが、右図のように同じ色同士のものをまとめると、色が3色であること、それぞれの色によって丸の大きさや数は様々であることなど、内容を理解しやすくなります。

一例ですが、Webサイトであれば見出しと本文など関連するものを近づけて配置することで、グループ化され読みやすくなります。下図のように余白の使い方などを工夫してみると良いでしょう。

「近接」を適用することで、見出しと本文の関連性が明確になった

整列

続いて「整列」です。これは読んで字のごとく「要素を整列して配置する」という原則です。上図では近接によりグループ化された丸が、整列して配置することでより内容が分かりやすくなります。見えない線を意識して、各要素を整列して配置してください。

Jimdoで制作されたWebサイトにたまに見られるのが、文字の左寄せ、中央寄せ、右寄せなどが混在したページです。特別な理由がない限りは統一して掲載したほうが読みやすいでしょう。

見えない線を意識して「整列」を適用することで文章が読みやすくなった

反復

次は「反復」です。これは「同じ特徴のものを繰り返すことでデザインに一貫性を持たせる」という原則です。上図では、整列によって配置された丸が、各色の大きさも統一することで連続性が生まれました。

例えば商品紹介のページなどで、商品によって画像のサイズや縦横比、見出しの大きさなどが異なっていると統一感のない印象を与えます。反復を適用し同じレイアウトを繰り返すことによって、統一感が生まれ、情報の整理された見やすいページになります。

反復を適用することで情報が整理され見やすくなった

コントラスト

最後は「コントラスト」です。これは「違うものをはっきり違わせる」ことでデザインにメリハリを持たせる原則です。上図では反復によって大きさが揃えられた丸の中で、一番上のものだけを極端に大きくしてみました。こうすることで一番上の丸だけが他のものとは違う、ということがより明確になります。

Webサイトでもこの原則を利用してインパクトのある表現をすることが可能です。例えば下図のように見出しと画像のサイズを大きくすることで「スマホに対応している」ということをよりはっきり伝えることができるようになります。

「コントラスト」を適用することで、スマホ対応であることが分かりやすくなった

このように、デザインは感覚的ではなく理論的なものであることがご理解いただけたかと思います。今回ご紹介したのはデザイン理論のほんの一部ですが、最も基本的で重要な原則です。ご自身のWebサイトと照らし合わせて、うまく取り入れてみてください。きっと見違えるように使いやすいWebサイトになるでしょう。

次回は、Jimdoでも活用されているWebフォントについて解説します。