DegiLog デジタル情報で毎日を便利に
この記事ではデザインの4つの基本原則、そして、webデザインの8つの法則をご紹介します。
これらの原則・法則通りにしたからといって、必ずデザイン性の高いものができるわけではありませんが、デザイン性の高いものを作れる可能性は上がるはずです。
ぜひ、参考にご覧ください。
スポンサードリンク
1.そもそもデザインとは
デザインとは「設計」や「意匠」のことであり、構想することです。webデザインにおいては、ユーザーにわかりやすくデザインすることで、多くの人にストレスなく利用してもらい、商品やサービスの購入など提供者の目的を達成する必要があります。
基本原則や法則などを参考にして、デザイン性の高いwebサイトを製作しましょう。
デザインの4つの基本原則
デザインには「近接」「反復」「整列」「強弱（コントラスト）」の4つの基本原則があります。基本的なことになりますので把握しておきましょう。
①近接
「近接」とは関連する項目をまとめることです。近接してまとめて配置することで、見る人は「バラバラなもの」ではなく「1つのグループ」として認識をします。
逆に、関連性の薄いものは遠ざけて配置することで関連性がないことを訴求できます。特に多くの画像やテキストを配置する場合は気をつけましょう。
②反復
「反復」とは繰り返すことです。形や色、レイアウト、サイズや線の太さ、フォント、書体など、視覚的要素を反復させることで、統一感が生まれ全体的にまとまったデザインになります。
逆に、反復がないと統一感が生まれにくく、まとまりを感じないデザインになりやすいです。
③整列
これはデザインに限ったことではありません。文書なども始まりの位置や文章の並び、画像同士の間隔などがバラバラであったら、見づらく意図も伝わりにくいです。
文章や画像など、各要素をきちんと整列して配置することで、わかりやすくきれいに整列されたデザインになります。
④強弱
メリハリをつけることです。強弱・メリハリのないデザインだと、見る側に「何を伝えたいのか？」「何が大事なのか？」が伝わりません。
フォントの大小や色の濃淡、余白の大小や線の太さなど、他にもいろいろな方法で強弱をつけることができます。大事な部分・伝えたい部分を目立たせるようにしましょう。
2.webデザインの8つの法則
デザインの4つの基本原則をご紹介しましたが、webデザインにおいてはそれに加えて8つの法則があります。多くのデザインがこれらの法則をもとに作られており、いずれもとても重要なものです。
①黄金比
webデザインに限らず自然界などにも利用されていますが、見た目が最も美しくなると言われているバランスは黄金比と呼ばれる、1:1.618です。
有名な絵画も黄金比になっているものは多いですが、実はトヨタやAppleなどのロゴにも黄金比が使われています。多くのWebデザインにも使われており、デザインする上ではハズせないでしょう。
②ヒックの法則
ヒックの法則とは「選択肢が増えるほど意思決定に時間がかかり労力が必要になる」ことです。
たとえば、昔のテレビゲームは非常にシンプルだったためすぐに操作を覚えることができましたが、現在のゲームは非常に組み合わせ方が多彩で選択肢が多く操作を覚えるのに時間がかかります。
レストランなどでも、メニューが2〜3つなど少ない場合は短い時間で決められますが、メニューが10〜20あると決めるまでに時間がかかります。
Webデザインにおいても選択肢・オプションが多くなるとユーザーは考える時間と労力が増え、ストレスを感じてしまいます。選択肢・オプションを最小限に抑えることができれば、ユーザーのストレスも軽減でき、UX（ユーザーエクスペリエンス）の向上にも繋がります。
③視覚階層
どんなwebサイトでもパーツによって重要度が異なります。それぞれに重要度の高いデザイン要素と重要度の低い要素があり、重要度に応じて階層をつけることを視覚階層といいます。
たとえば、3つのタイトルがあり、それぞれフォントが大きいサイズのタイトル、標準サイズのタイトル、小さいサイズのタイトルで並んでいれば、簡単に重要性が判断できるはずです。
このように、文字の大きさや並べ方、色使いなど、いろいろな手法によって視覚的に階層が分かりやすくなります。ですから、視覚階層は質の高いwebデザインを作るうえで重要度の高い法則です。
④三分割法
三分割法は、写真撮影をする際の基本的要素でもあり、バランス・調和のとれた構図を作ることが可能です。
2本の水平線と2本の垂直線により画面を9分割にして、線上や線同士の交点上に画像などを配置します。
画像を利用する際に三分割法に従うことで、より魅力的な画像・webサイトになります。
⑤フィットの法則
フィットの法則とは、目的（得られるもの）までの距離に関する法則で、得られるものが大きいほど、そして目的までの距離が近いほど使いやすくなることを示しています。
たとえば、ネットショッピングの際に目的となる商品購入までの距離が近いほど、購入率は高くなりますし、購入までの工程が複雑で距離が遠いほど購入率が低くなります。
そのため、何らかの商品やサービスを販売する際は、購入までの工程・距離が短いほどいいでしょう。
逆に、退会や解約に関しては、距離を長くした方がいいです。利用者は目的までの距離がどれくらいかによって利用する・しないを判断したりします。
⑥オッカムの剃刀
オッカムの剃刀とは、「ある事柄を解説するとき、必要以上に多くの関連する事柄を説明するべきではない」という指針のことです。
webデザインにあてはめると、不要なデザインを加えることなく、単純でシンプルな方が好ましいということです。つまり、剃刀というように削ぎ落とすことが大事であるということです。
⑦ゲシュタルトの法則
ゲシュタルトの法則は、「人は何かを見ようとするときは個々のパーツを見るのではなく、まずは全体像を理解しようとする」という心理学に関する法則です。この法則には、「近接」「類同」「閉合」「対称」「共通運命」「連続」「面積」の”ゲシュタルトの基本7法則”があります。これに基づくことによって、意図しない関連性をさけたり、意図した要素に注目をさせたりでき、デザインによる混乱を防ぎます。
⑧余白・清潔感のあるデザイン
デザインする場合は、余白も1つのデザインと考えましょう。webデザインだけでなくアート作品の多くも余白を大事にしています。余白があることで、オブジェクトの存在感が引き立ち、清潔感も生まれます。
3.おすすめのテーブルデザイン3選
デザインの基本的なルールが分かったところで、最後におすすめのテーブルデザインについてご紹介します。
①CODEPEN
CODEPENは海外のサイトで、デザイン性の高いレイアウトやコンポーネントが数多く掲載されています。気になるデザインがあれば、クリックするだけでhtmlやcss、javascriptのコードを見ることができます。
サイトURLはこちら↓
②web creators manual
web creators manualは、シンプルで使いやすいテーブルデザインです。ワンポイントで色の選択ができ、行間にも余裕があります。
サイトURLはこちら↓
③Responsive Pricing Table
Responsive Pricing Tableは、無料版でも多くの機能が使用でき、2万人以上のユーザーがいるWordPressプラグインです。有料版では自分に合った価格テーブルを選ぶことができます。
サイトURLはこちら↓
まとめ
いかがでしたか？webデザインをする際は、これらの基本原則や法則に従うことで、初心者でもデザイン性の高いサイトを製作できるようになります。
これから製作予定がある方は、ぜひ参考にして作ってみましょう！
スポンサーリンク