Home / Webサービス / 見やすいサイトをつくる!4つの基本原則とwebデザインの8つの法則

見やすいサイトをつくる!4つの基本原則とwebデザインの8つの法則

webデザインをするのであれば、おしゃれでカッコよく仕上げたいものです。せっかくwebデザインをしても分かりにくかったり、どこか単調なサイトだとユーザーも読む気が失せてしまいます。

この記事ではデザインの4つの基本原則、そして、webデザインの8つの法則をご紹介します。

これらの原則・法則通りにしたからといって、必ずデザイン性の高いものができるわけではありませんが、デザイン性の高いものを作れる可能性は上がるはずです。

ぜひ、参考にご覧ください。

スポンサードリンク

1.そもそもデザインとは

デザインとは「設計」や「意匠」のことであり、構想することです。webデザインにおいては、ユーザーにわかりやすくデザインすることで、多くの人にストレスなく利用してもらい、商品やサービスの購入など提供者の目的を達成する必要があります。

基本原則や法則などを参考にして、デザイン性の高いwebサイトを製作しましょう。

デザインの4つの基本原則

サラリーマン 会社員 社会人 ビジネスマン ビジネス 人物 仕事 スペース 室内 テーブル 手 手元 PC ノートパソコン Mac マック パソコン インターネット 情報 机 WEBサイト 入力 打つ 働く 会社 オフィス コピースペース オフィスワーク デスクワーク サービス 通信 キーボード 事務 デスクトップ モニター 画面 デスク 背景 IT コンピュータ 作業 コンピューター 作る ネットワーク コード 電子機器 クラッカー ソース 開発 アプリ ネット デジタル バックグラウンド インフラ 背景素材 壁紙 イメージ デザイン 職人 職業 バック 小物 セキュリティ テクノロジー 技術 インターフェース ブラインドタッチ スクリーン 労働 製作 言語 ワーク ディスプレイ 叩く 制作 セキュリティー サーバー 企業 設計 ノートPC クラウド 情報処理 PC デザイナー アプリケーション 制御 インターフェイス システム ソフトウェア 電子 労働者 業務 ビジネスパーソン ディスプレー 分析 コマンド 技術者 エンジニア オンライン 就職 ハイテク 依頼 WEB ホームページ ブログ 技術職 アウトソーシング ハッカー ハッキング プログラム サイバー 羅列 専門職 副収入 副業 パソコン操作 データベース スキル ウェブ 在宅 クラウドソーシング アフィリエイト フリーランス SE プログラミング クリエイティブ クリエイター 解析 クラッキング ウェブサイト ウェブデザイン ウェブデザイナー コーディング バーチャル プロフェッショナル web開発 デバッグ プログラマー システム管理 ソースコード HTML 制作者 コーダー 開発者 エンジニアリング 外注 マークアップ プログラマ web制作

デザインには「近接」「反復」「整列」「強弱(コントラスト)」の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選

ビジネス 仕事 テーブル ノートパソコン パソコン インターネット 情報 WEBサイト 入力 打つ 働く 会社 オフィス オフィスワーク デスクワーク サービス 通信 キーボード 事務 デスクトップ モニター 画面 デスク IT コンピュータ 作業 コンピューター 作る ネットワーク コード 電子機器 クラッカー ソース 開発 アプリ ネット デジタル インフラ イメージ デザイン 職人 職業 小物 セキュリティ テクノロジー 技術 インターフェース ブラインドタッチ スクリーン 労働 製作 言語 ワーク ディスプレイ 叩く 制作 セキュリティー サーバー 企業 設計 ノートPC クラウド 情報処理 PC デザイナー アプリケーション 制御 インターフェイス システム ソフトウェア 電子 労働者 業務 ビジネスパーソン ディスプレー 分析 コマンド 技術者 エンジニア オンライン ハイテク 依頼 WEB ホームページ ブログ 技術職 アウトソーシング ハッカー ハッキング プログラム サイバー 羅列 専門職 HP 副収入 副業 パソコン操作 データベース スキル ウェブ 在宅 クラウドソーシング フリーランス SE プログラミング クリエイティブ クリエイター 解析 クラッキング ウェブサイト パソコンスキル ウェブデザイン ウェブデザイナー コーディング バーチャル JavaScript プロフェッショナル web開発 デバッグ プログラマー システム管理 ソースコード HTML 制作者 Java プログラミング言語 コーダー 開発者 エンジニアリング 外注 サイト制作 hpデザイン マークアップ システムプログラマー エンジニアー クラウドワーカー プログラマ アプリ制作

デザインの基本的なルールが分かったところで、最後におすすめのテーブルデザインについてご紹介します。

①CODEPEN

CODEPENは海外のサイトで、デザイン性の高いレイアウトやコンポーネントが数多く掲載されています。気になるデザインがあれば、クリックするだけでhtmlやcss、javascriptのコードを見ることができます。

サイトURLはこちら↓

https://codepen.io/

②web creators manual

web creators manualは、シンプルで使いやすいテーブルデザインです。ワンポイントで色の選択ができ、行間にも余裕があります。

サイトURLはこちら↓

http://creators-manual.com/

③Responsive Pricing Table

Responsive Pricing Tableは、無料版でも多くの機能が使用でき、2万人以上のユーザーがいるWordPressプラグインです。有料版では自分に合った価格テーブルを選ぶことができます。

サイトURLはこちら↓

Responsive Pricing Table

まとめ

いかがでしたか?webデザインをする際は、これらの基本原則や法則に従うことで、初心者でもデザイン性の高いサイトを製作できるようになります。

これから製作予定がある方は、ぜひ参考にして作ってみましょう!


スポンサーリンク