ホームページデザインの基礎やおすすめ参考ギャラリーサイト、ツールを紹介

「ホームページのデザインを勉強したいけど、何から始めていいかわからない・・・」
「参考になるデザインツールやギャラリーサイトが知りたい・・・」

ホームページをデザインする上で、基礎知識や参考サイトを知らないと、効率のいい学習ができず、いつまでも理解が深まりません。
しかし、Webデザインの幅は広く、何から学ぶべきかわからない方も多いでしょう。

そこで今回は、ホームページデザインの基礎やギャラリーサイト・ツールについて紹介します。
これからホームページデザインを学ぶ方は、ぜひ参考にしてください。

なお、ホームページ作成をご検討なら、BESTホームページをご検討ください。

ホームページをデザインする際に必要なスキルは知識・ツール・コーディングの3つです。
上記3つを理解すれば、自身でホームページを作るときだけでなく、制作会社に依頼するときにも円滑なやりとりができるようになります。

では知識・ツール・コーディングについて掘り下げていきましょう。

１-１．基礎知識・経験

また、Webサイト制作を依頼する場合、

などの曖昧なイメージを伝えるよりも

といったように、具体的な話ができます。

具体的なイメージを伝えられるとムダな作業も少なくなり、コスト削減にも繋がるでしょう。

１-２．ツール

１-３．Web上に実装するためのコーディングスキル

コーディングスキルを身につけておけば、デザインする際に完成形のイメージがしやすくなるのがメリットです。

Webサイト制作を依頼する際も、スムーズなやりとりができ、工数のロスを減らすこともできるでしょう。

ホームページデザインを学ぶ上で、基本原則は抑えておきたいポイントです。

基本原則は

の4つがありますので、それぞれ詳しく解説をしていきます。

２-１．近接：関連要素は近づけてグループ化

近接は関連のある要素同士を近づけてグループ化することで、まとまりをよくする手法です。

グループにしたい要素同士が離れていると、一目で関連しているかどうか判断ができません。
そのため、デザインを見て瞬時に理解できるように、同じ要素は近づけておきましょう。

逆に、異なるグループ同士は余白を設けると、規則性が出て見やすくなります。

２-２．整列：要素にルールを設けて統一化

整列は関連のある要素同士にルールを設けて統一させる手法です。

例えば、以下のようなルールがあります。

整列を意識すると、近接でまとめたグループがより洗練された見た目になるので、ホームページをデザインする際は必ず意識しておきましょう。

２-３．反復：要素ごとに設けたルールを繰り返す

反復は関連する要素ごとに設けたルールを繰り返す手法です。

何かの商品を販売するサイトのデザインを例にしてみましょう。

商品は「商品画像・商品名・紹介文」の順で整え、さらに商品名の下に太い罫線を入れたとします。
上記のルールを他の商品に全く同じ内容で繰り返す、これが反復です。

反復を用いれば、直感的にページ内で関連したグループが複数あることを認識できます。

もし反復を使わなければ、同じカテゴリーの商品であるにも関わらず、違うものと誤認されかねません。
近接・整列に加えて反復を組み込めば、ユーザーが興味を引きやすいデザインを作れるようになるでしょう。

２-４．対比：優先度を明確にさせる

対比はコントラストとも呼ばれ、要素のデザインルールに差をつけて優先度を明確にさせる手法です。

要素に差が生まれると、パッと見て情報が伝わりやすくなるメリットがあります。
例えば、ライブイベントについてお知らせするバナーに対比を用いてみましょう。

バナーには

の順に情報の優先度が高いこととします。

そこで、1番訴求すべきイベント名と、さほど優先ではない注意事項を同じ文字サイズや色でレイアウトすると、どちらも目立たなくなってしまいます。

しかし、対比を取り入れて情報の優先度ごとに大きさや色を変更すると、バナーを見たユーザーに効率よく訴求が可能です。
注目してほしい部分がある場合は、対比を用いて他の要素よりも目立つレイアウトにしていきましょう。

近接・整列・反復・対比だけではなく、カラー・タイポグラフィについても知っておくと、さらにデザインについて理解を深めることが可能です。

では続いて、カラー・タイポグラフィについても詳しく解説します。

３-１．色の三属性

ホームページのデザインを制作する際は、コンテンツやレイアウトのイメージに合うような色の選択が必要です。

例えば赤色を想像すると、 濃い赤・薄い赤、紫色に近い赤色など、さまざまな種類が思い浮かぶでしょう。
この微妙な色の違いを、色の三属性を用いて表現していきます。

色の三属性は色相・彩度・明度に分かれ、それぞれ特徴が異なります。

デザイン時には、この色相・彩度・明度がホームページに適しているかどうか、適宜チェックするのが重要です。

参考： ホームページは適切なカラーで効果UPを狙う！

３-２．タイポグラフィとは何か？

Webデザインにおけるタイポグラフィとは、文字をうまく扱うことでホームページ全体の見栄えをよくするという意味です。

タイポグラフィは2つの意味があります。

適切な文字の体裁は、先ほど紹介した近接・整列・反復・対比の4原則を用いると、キレイに整いやすいです。

文字もデザイン要素の1つと捉える点は、重要な文字だけ太字にする、色やマーカーで強調する方法があります。
タイポグラフィを磨いていけば、文字がイラストの1つに見えるほど美しいものになるはずです。

ホームページデザインを学ぶには文字を整える技術も習得していきましょう。

ホームページデザインの原則を理解したところで、次に基礎知識について解説していきます。
基礎知識は実践的な内容になるため、よりデザインのイメージが沸くはずです。

では、どういった知識が必要になるのか見ていきましょう。

４-１．レイアウトの種類

ホームページを見るとわかりますが、レイアウトの種類はさまざまです。

レイアウトには

の5つの基本パーツと

の5つの基本パターンがあるので、それぞれ詳しく解説します。

レイアウトの基本パーツ

レイアウトの基本パーツごとにデザインをしていくことを理解できれば、スムーズな作業に取りかかることができるでしょう。
基本パーツごとの場所や特徴を以下にまとめました。

パーツによって必要なレイアウトが変わるので、上記をぜひ参考にしてください。

レイアウトの基本パターン

先ほどの基本パーツを適切な位置に配置するための基本パターンも覚えておきましょう。
下記に基本パターン名と特徴をまとめました。

基本原則や知識を覚えておけば、あえて規則性を崩すという技法も身に付けられます。

もし、基本パターンの習得を考えているなら、上記表の上から順に覚えていく方が、応用ができるようになりおすすめです。

４-２．フォントの種類

文字のフォントの種類は数多く、どれが最適なのか探すだけでも骨が折れる作業です。

一般的なホームページで採用されやすいフォントは

の3種類があります。

どれも見やすく読みやすいフォントです。
上記3つのフォントは最低限覚えておきましょう。

４-３．配色の種類

配色には以下のような種類があります。

上記3種類の使用比率を理解しておくと、全体のカラーバランスが整いやすいです。

特にメインカラーはホームページの印象に大きく関わります。
ホームページをどのようなイメージにしたいのかを明確にして、見合ったカラーを選ぶようにしましょう。

ホームページデザインを設計する上で、見た目が整っているのは前提条件です。

さらに、以下の目的も達成しなくてはいけません。

では、どうすれば見た目だけでなく上記の目的も達成できるのか、ホームページデザインを設計する際のポイントについて見ていきましょう。

５-１．ファーストビューにこだわる

ユーザーの目をひく上で、ファーストビューのインパクトは欠かせません。
ホームページを最初に見たとき、求める情報がすぐに見つからないような乱雑なデザインだとストレスを感じ、ユーザーは離脱してしまいがちです。

逆に、整っているデザインや興味を促すメッセージがあれば、継続して情報を得ようとユーザーはホームページ内を回遊するでしょう。

また、ファーストビューで以下の情報が含まれているのが理想的です。

バランスよく組み込めるよう、ファーストビューのデザインを意識してみてください。

５-２．視線の流れを意識してデザインする

ホームページを閲覧する際、視線の動きには法則があることをご存知でしょうか。

有名なのは、Fの法則とZの法則です。

文字をデザインとして考えるなら、視線の動きも理解しておいて損はありません。
どのようなホームページなのかによって、効果的な法則を取り入れていきましょう。

５-３．情報の優先順位を明確にする

優先したい情報こそ目立つような色や位置にデザインする必要があります。
そのため、何を優先すべきなのか順位付けは事前に行いましょう。

成約することを優先するとしたら、申込や購入ボタンを目立つ色にするなどです。
優先順位を設けておくと、ホームページ全体が見やすくなり、スッキリとした印象を与えられます。

ホームページデザインを設計する前には、必ず優先順位も明確にしておきましょう。

５-４．シンプルなレイアウト・テキストを心がける

必要以上に情報を盛り込みすぎると、かえって見づらくなってしまう場合もあります。
シンプルに伝えられるようなレイアウト・テキストを心がけるのも、デザイナーとしての役目です。

デザイン中にレイアウトやテキストを客観的に見るようにして、シンプルかつ的確に伝えられているかを確認してみましょう。

５-５．ナビゲーションバーでわかりやすく導く

ユーザーにとって使いやすいホームページは滞在率・回遊率も高くなります。
ナビゲーションバーはユーザーの知りたい情報をまとめられる便利なツールです。

ホームページを作成する中で、どのような情報があればユーザーの目的を達成できるか考え、リンク集としてナビゲーションバーに組み込みましょう。

５-６．配色・文字に一貫性をもたせる

ホームページ全体をキレイに見せるには、配色・文字に一貫性をもたせることが重要です。
清潔なイメージなら青を基調とした配色、目立たせたい色は赤で統一するなど、ページ全体の要素にルールを設けましょう。

ただし、関連する全てのホームページに一貫性を持たせる必要はありません。

LP・ヘルプページ・ブログなどがあれば、それぞれで定めたルールに沿って一貫性をもたせてあげましょう。

５-７．レスポンシブ化でデザイン崩れをさせない

最近ではスマホやタブレットでホームページを見る方も多くなっています。
そのため、ホームページをレスポンシブ化して、デザインの崩れが起こらないようにするのもポイントです。

また、モバイルフレンドリーなホームページはSEOにおいても評価対象となります。

レスポンシブ化ができているかどうかは、WebデザインチェックツールやChromeのデベロッパーツールで確認可能です。

参考： 【わかりやすく解説】レスポンシブデザインって何？

ホームページデザインを行う際に注意すべきなのは、ユーザーファーストなホームページになっているかという点です。
Webデザインのスキルに自信がついてくると、ホームページに反映させたくなる気持ちが先行し、自分好みのレイアウトになりがちです。

しかし、本来はホームページを見てアクションを起こすユーザーのために、必要な情報やデザインを用いなくてはいけません。

これまで紹介した原則・基礎知識・設計時のポイントをもとに、常にユーザーファーストかどうかを考えてデザインしてください。
訪れるユーザーの動向が知りたい場合、ホームページを公開後にGoogleアナリティクスやヒートマップなどのツールを用いて情報収集が可能です。

など、ユーザーが求めていることを考えて、その都度修正していきましょう。

参考： ホームページのアクセス解析

プロが作るホームページデザインを見ることで、自身のインスピレーションにいい影響を与えます。
ここでは、参考になるおすすめのギャラリーサイトをいくつか紹介するので、時間のあるときやデザインを参考にしたい場合は、ぜひ参考にしてください。

７-１．SANKOU!

SANKOU!は国内のWebデザインに特化したギャラリーサイトです。

更新頻度が高く、流行のデザインをチェックしたい場合に活用できます。
また、豊富なカテゴリーから自分の探している業種のウェブデザインが見つけやすく、グリッドレイアウトで使いやすさも抜群です。

７-２．WebDesignClip

国内だけでなく海外のWebデザインについても知りたい方はWebDesignClipがおすすめです。

業種やLPなどの分類ごとに検索できるのも魅力で、レスポンシブ化されたデザインサイトも閲覧できます。
ジャンルなど細かく絞って検索がしたい方におすすめです。

７-３．MUUUUU.ORG

MUUUUU.ORGはWebデザインの参考となるよう縦長のホームページを多く集めたギャラリーサイトです。

オーソドックスかつ優れたデザイン性のホームページが集まっているので、実務として参考になるものばかりでしょう。
表示速度も高速でストレスフリーで利用ができます。

７-４．AWWWARDS

AWWWARDSの最大の魅力は、海外サイトを投票によって順位をつけ、人気順で紹介されている点です。

日本語に対応していないので少し検索がしにくいかもしれませんが、最新でハイクオリティなWebデザインを簡単に見つけることができます。

７-５．I/O 3000

I/O 3000の特徴は更新頻度の高さです。

国内外のホームページを毎月20件前後更新しており、流行のデザインを知りたい方におすすめできます。
さらに、I/O 3000にはシャッフル機能があり、ランダムに表示されたホームページから思わぬ参考になるデザインを発掘できるかもしれません。

７-６．81-web.com

81-web.comは国内でハイデザインなホームページを集めたギャラリーサイトです。

サムネイル下部にはプレビューボタンがあり、わざわざリンクを開かなくても一覧から確認できる利便性の高さがあります。
プレビュー機能があれば、どんなデザインを使っているのか流し見したい場合に役立つでしょう。

７-７．bookma! v3

bookma! v3は特徴のあるデザインのホームページを集めたギャラリーサイトです。

更新頻度は低く検索機能が文字のみなものの、PC版・スマホ版どちらも掲載していて見やすさは評価できます。
独創的なデザインを参考にしたいときに活用しましょう。

ホームページをデザインするにはツールを使わなくてはいけません。

ここで、おすすめのデザインツールをいくつか紹介しますので、気になるものがあればぜひ利用を検討してみてください。

８-１．Photoshop

Photoshopは画像やレイアウトを加工するツールで、多くのWebデザイナーやホームページ制作会社が愛用しています。

画像の合成やエフェクト、テキストの挿入など、利用幅が広いので、Webデザインだけでなく画像編集のスキルも自然と磨けるはずです。
Photoshopの利用料金は単体プランで月額2,728円（税込）となっています。

８-２．Illustrator

Illustratorはロゴやアイコンの作成、文字のデザインをする際に便利なツールです。

拡大・縮小しても画質が落ちないため、どのサイズでも気兼ねなくデザインができます。
レイアウト機能も備わっており、Illustratorをメインにするデザイナーも少なくありません。

Illustratorの利用料金はPhotoshop同様に、単体プランで月額2,728円（税込）となっています。

８-３．Adobe XD

Adobe XDは画像加工や文字のデザインに加え、ホームページ内の動きを再現できるツールです。

1ページのみのホームページならPhotoshopを用いることが多く、複数ページがあるホームページならAdobe XDが適しています。

Adobe XDの利用料金は1,848円（税込）です。
以前までは公式サイトに無料で始められるプランが掲載されていました。

しかし、現在では7日間の無料体験後、月額利用料を支払うプランに自動切り替えとなっています。

８-４．Sketch

SketchはUI（ユーザーインターフェース）に最適なデザインツールです。
ホームページデザインで利用するにはやや不向きなものの、豊富なプラグインがあり、高品質なUIデザインの制作ができます。

現状Macユーザーのみ使用でき、30日間の無料トライアルが利用可能です。
年間99ドルを支払えば、同バージョンのSketchが使い放題になります。

もし、アップデートされたバージョンのライセンスが欲しい場合は1年ごとに購入しましょう。

今回はホームページデザインの基礎やおすすめのギャラリーサイト・ツールについて紹介しました。
デザインの知識を身につけておくと、ホームページを作るときだけでなく、制作依頼をする際にも役立ちます。

ぜひ、今回の記事を参考にデザインスキルを伸ばしていきましょう。

当社の提供するBESTホームページは、簡単にホームページが作成できるホームページ作成サービスです。
115業種に合ったデザインや写真などの素材をご用意しておりますので、簡単にホームページが作成できます。

また、BESTホームページは決まったテンプレート形式のデザインではなく、パーツを組み合わせて利用できるダイナミックデザインでその組み合わせ種類は無限大！
バナー作成ツールや画像加工機能も付いていますので、ご自身でホームページをすぐ簡単に編集できます。

ホームページ作成が初めてでもプロが導入をご支援、またプロが代行作成するプランもお選びいただけます。
今なら15日間の無料お試し体験を実施中です！ぜひお気軽にお問い合わせください。