スマートフォンサイトを表示する

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 第8回 デザインの4原則をWebサイトに応用しよう

エキスパートコラム

Jimdoで魅せる日本語Webデザイン(全12回)

第8回:デザインの4原則をWebサイトに応用しよう

執筆:服部 雄樹(服部制作室)

2016年11月7日更新

  • このエントリーをはてなブックマークに追加

閲覧数911views

このコラムをPDF形式でダウンロードする

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

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

デザインとアートの違い

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

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

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

デザインには4つの基本原則がある

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

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

近接

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

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

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

整列

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

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

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

反復

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

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

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

コントラスト

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

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

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

原則を応用して見やすいWebサイトを

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

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

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 晴れ晴れホームページ -ホームページで失敗しないために知っておきたいコト-

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/1/8~2017/1/14]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業での開業スケジュールから融資申込に必要な書類が作成できるサービスです

  • SmaBI

    会社設立から契約書作成ツール、オンライン上の経営顧問まで スマートな経営をサポート

  • 経理通信

    中小企業・小規模事業者の経営者と経理担当者のための経理サポートサイト