ホームページ制作,
ホームページ制作でホームページデザインを作るには
この記事で知っておきたいポイント

ホームページ制作を自分で行う場合、
最初にホームページ全体の「デザイン」を決めることになります。


ホームページ制作の経験があれば多少デザインについての知識もあるでしょうが、
初めてだとホームページのデザインを決めろと言われてもどうすれば良いか
分からないですよね。


そこで、ホームページ制作におけるデザインの基本やホームページデザインに必要な
スキルなどを詳しく見てみましょう。

ホームページ制作におけるデザインの基本

ホームページのデザインを作る際には
 ・近接
 ・整列
 ・反復
 ・コントラスト

という4つの基本を押さえておかないといけません。


中にはあえて基本を無視したデザインもありますが、現在公開されている
ホームページの多くは先の4つの基本を押さえてデザインされているんですね。


反対に言うと、先の4つの基本を意識してデザインすれば、
ちゃんとしたホームページが作れるということでもありますよ。

関連する情報をまとめる「近接」

ホームページ制作におけるデザインの基本1つ目は「近接」ですが、
これは簡単に言うと「関連する情報をまとめる」ということです。


例えば、ホームページで自社の製品を紹介する場合、
製品の写真と特徴や使い方など製品の説明文を掲載します。


近接というポイントを押さえるには、製品の写真の直上や直下に説明文を持ってきて、
製品に関する情報を1つにまとめてしまえば良いんです。


製品の写真と説明文の位置が離れていると、写真を見ていて説明文を読もうとすると画面をスクロールしないといけません。


そこで画面をスクロールしなくても説明文が見られるように、
製品の写真と説明文など関連する情報は近接させておく必要があるわけです。


関連する情報がまとまっていると見ている側には分かりやすいですから、
結果的に使いやすいホームページとなります。

画像やテキストの端を合わせる「整列」

2つの「整列」は、簡単に言うと、
ホームページで使う「画像やテキストの端を合わせる」ということです。


例えば製品の写真の直下に説明文があるとして、写真の大きさに対して説明文の
1行の長さが長すぎたり短すぎたりすると見栄えが良くないですよね。


また説明文が3行4行に渡る場合に、
書きだし部分など左端が揃っていないと読みにくくなってしまいます。


画像のすぐ上や下にテキストを置くんだったら、
画像の両端とテキスト1行の両端を揃えることで見栄えが良くなります。


説明文が3行4行に渡る際には、各行の左端を揃えることで見栄えが良くなるとともに
テキストが読みやすくなるんですね。


さらに整列を意識したデザインにすることで、
ホームページの利用者に「ちゃんとしている」というイメージを与えることができます。

 

テキストのフォントは揃えて、大きさや太さでメリハリをつける

整列と関連することで言うと、
ホームページで使うテキストのフォントは揃えた方が良いですね。


フォントを揃えることでホームページ全体にデザインの統一感が出て、
見ている側により良い印象を与えることできますよ。


ホームページ内で特に強調したい部分やアピールしたい部分は、
文字のフォントではなく大きさや太さを変えてメリハリをつけるようにしましょう。


文字を大きくしたり太字にするだけで、
見ている側に「ここは強調したい部分」であることは十分に伝わります。

ホームページ内で一定のルールを繰り返す「反復」

3つ目の「反復」は、
簡単に言うとホームページのデザインで「一定のルールを繰り返す」ことです。


例えば今見ているこのページの場合、「<h3>~</h3>」が大見出しで、「<h4>~</h4>」が中見出し、
「<h5>~</h5>」が小見出しという一定のルールに基づいて書かれています。


このページを見ている側からすると「<h3>~</h3>」の後に「<h4>~</h4>」が来ると、
ここには先のことに関連したことが書かれていると分かりますよね。


また「<h4>~</h4>」や「<h5>~</h5>」の次に「<h3>~</h3>」が来ると、ここで話題が切り替わることが
分かるので文章が読みやすく情報を整理しやすくなります。
(手前みそですが・・・)


写真や画像を使う場合は大きさや形を揃える、説明文は直上や直下など
決まった場所に置くなどの一定のルールを繰り返すことで、ホームページ全体の
デザインに一体感が生まれて、見やすいホームページになるわけです。

ホームページ内で違いを際立たせる「コントラスト」

4つ目の「コントラスト」は、ホームページ内に要素が違う2つのもの並べた時に、
その「違いを際立たせる」ことです。


強調したい部分やアピールしたい部分は、
文字を大きくしたり太くしたりしてメリハリをつけると先に書きました。


中途半端に文字を大きくしたり太くするとコントラストがあまり付きませんから、
強調したい部分やアピールしたい部分がほとんど目立ちません。


極端すぎるのもダメですが、少なくとも他の部分とは明らかに違うことが分かるぐらい
コントラストをはっきりさせることで、強調したい部分やアピールしたい部分を
明確にさせることができるんですね。


また製品一覧のようなページを作る場合には、1つずつの製品情報を枠で囲ったり、
背景の色を変えるなどしてコントラストを付けます。


漫然と製品情報を並べていると見ている側には1つ1つの違いが分かりにくいですが、
コントラストを付けることで製品ごとの違いがハッキリします。


先の近接・整列・反復という3つの基本を押さえることで、
ホームページのデザインに一体感を生むことができます。


一体感が生まれると、
今度はホームページ内のコンテンツや情報の違いが見えにくくなってしまいます。


そこでコントラストを付けてコンテンツや情報の違いを見やすくして、
見ている側にとって使いやすいホームページにすることができるんですね。

 

コントラストを付けるには色相環の知識も必要

コントラストを意識したホームページ制作を行うには、
色相環の知識を持っておくと便利ですよ。


一般的に、色相環で正反対の色である補色や反対側の色である反対色を
組み合わせることでコントラストが付くと思われています。


反対色の組み合わせは比較的調和が取りやすいですが、
正反対の色である補色で調和を取るには明度の調節が必要だったりします。


なので反対色や色相環で90度の位置にあるインターミディエート、
色相環を三等分した位置にあるトライアドといった組み合わせの方が明度や彩度を
調節しなくても調和が取りやすいですよ。


ちなみにホームページのメインカラーを赤にした場合、色相環で正反対の補色は青緑、
反対色は緑と緑みの青、インターミディエートは黄色と青紫、トライアドは黄緑と青と
なります。

 

色の組み合わせによる効果

ホームページをデザインする際に押さえるべきポイントの1つであるコントラスト、
色の組み合わせによるコントラストの効果を簡単に紹介しましょう。


赤をメインカラーとした場合、ホームページのデザインを赤一色で統一すると
「アイデンティティ」という配色になります。


アイデンティティはおとなしいイメージの反面、単調になりやすいですから
明度や彩度を調節してコントラストを付ける必要がありますね。


赤に色相環で赤の隣の色相である赤みの橙と赤紫を加えると「アナロジー」という
配色です。


単調さも無く柔らかいイメージになり失敗しにくい配色ではありますが、
コントラストを付けるには明度や彩度の調整が必要ですよ。


色相環を時計に見立てて、メインカラーが12時で3時・6時・9時の位置にある色との
組み合わせが「テトラード」という配色になります。


2組の補色の組み合わせであり、インターミディエートに補色を加えた組み合わせでも
あるので、コントラストが付けやすい上に調和も取りやすくなっています。

 

配色のバランス

ファッションでもたくさんの色を組み合わせるのは、かなりセンスが問われますし、
バランスが難しいですよね。


ホームページのデザインでも同じで、何色使えば良いのか、
それぞれどういったバランスで配色すれば良いのかが難しいんです。


失敗しにくい配色としては
 ・ベースカラー
 ・メインカラー
 ・アクセントカラー

の3色の組み合わせです。


背景などホームページ内で一番広い面積を占めるのが「ベースカラー」、
ホームページのイメージカラーとなるのが「メインカラー」、
いわゆる差し色が「アクセントカラー」となります。


先に紹介したアナロジーやインターミディエート、トライアドといった配色を利用すると、
メインカラーを決めれば自動的にベースカラーやアクセントカラーも決まってきますよ。


バランス的には、一番広い面積を占めるベースカラーが70~75%、
メインカラーが20~25%、差し色のアクセントカラーが5~10%といったところですね。


3色の組み合わせをアナロジーなどの配色で決めて、バランス良く使うことで、
シンプルでガチャガチャせずにまとまった印象のホームページになります。

ホームページのデザインではユーザビリティも意識すべし

使いやすいホームページを作りたいのであれば、
ユーザビリティを意識したデザインを作らないといけません。


簡単に言うと、パソコン・スマホ・タブレットなどどんな機器で閲覧することを考えた
デザインにしないといけないってことです。


基本的にホームページ制作ではパソコンを使うので、
どうしてもパソコンでの閲覧だけを意識したホームページになってしまいがちです。


しかし最近はスマホやタブレットなどの機器でインターネットを使う人が増えており、
パソコンよりも小さい画面を意識したホームページ制作が求められています。


実際にGoogleなどの検索アルゴリズムでもユーザビリティが重視されていて、
スマホやタブレットなどに対応したホームページが検索結果の上位に
表示されやすくなっていたりするんですよね。


デザインを重視したホームページ制作をしたせいで、パソコンでは見やすいけど、
スマホだとどこに何かがあるか分かりにくいといったことにならないように
気を付けましょう。

画像が多いデザインはSEO対策で不利?

ホームページのデザインに画像や写真を多く使おうと考えている場合は、
SEO対策としは不利になる可能性があるので注意が必要ですよ。


SEO対策は簡単に言うと、Googleなどで関連ワードが検索された時に作った
ホームページを検索結果の上位に表示させるための対策のことです。


現状ではGoogleなどの検索アルゴリズムでは、
画像や写真は情報として認識されないようになっているようです。


そのため画像や写真が多く使われているホームページは、Googleなどの
検索アルゴリズムでは情報量の少ないホームページと見なされてしまいます。


情報量の少ないホームページが検索結果の上位に表示されることはありませんから、
画像や写真を多く使ったホームページ制作には注意が必要というわけです。


あくまでメインの情報は全てテキストで掲載し、画像や写真はテキストを
より分かりやすく補完するような形で使うと良いんじゃないでしょうか。

ホームページのデザインを作るにはツールとコーディングのスキルが必要

自分でホームページのデザインを作るには、デザインを作るためのツールを
使いこなすスキルとコーディングのスキルが求められます。


デザインを作るには
 ・PhotoShop
 ・Illustrator
 ・Adobe XD
 ・Sketch

などのデザインツールを使って、画像や写真を加工したり、イラストを描いたり、
アイコンなどを作ったりすることになります。


これらデザインツールを使いこなせないと、ホームページのデザインを自分で作るのは
難しいですよ。


さらにデザインツールを使って作ったデザインをホームページに落とし込むには、
コーディングのスキルが必要です。


HTMLやJavaScriptなどのプログラミング言語を使ってソースコードを書き、
作ったデザインをホームページとして公開できる形にしないといけないわけです。


まずプログラミング言語を理解する必要がありますし、
さらにソースコードの書き方や書く際のルールなんかも覚えないといけません。


いずれも一朝一夕にできることじゃありませんから、
場合によっては年単位での勉強や訓練が必要となるかもしれないですね。

まとめ

ホームページのデザインを作るための基本ポイントや必要なスキルなどについて、
詳しく見てきました。


ノーコードツールを使ってホームページを作る方法もありますが、
それだと思い通りのデザインのホームページを作れない可能性が高いです。


だからと言って、
1からデザインやコーディングの勉強をすると年単位の時間がかかってしまいます。


なので、思い通りのデザインのホームページを作りたいのであれば、
ホームページ制作会社に依頼するのがおすすめです。


多少費用はかかりますが、自作するよりも短期間で作ってもらえますし、
よりクオリティの高いホームページに仕上がる可能性が高いですよ。

あわせて読みたい
ホームページ制作を自分で!初心者向けの簡単な手順と無料ツールの活用法
ホームページ制作を自分で!初心者向けの簡単な手順と無料ツールの活用法

初心者向けホームページ制作の手順と無料ツールの活用法を紹介します。私自身が初めて作成した経験からアドバイスを共有します。難しく感じるかもしれませんが、この記事を参考にすれば誰でも簡単に素敵なホームページが作れます。手を動かして、魅力的なホームページを作りましょう!

お問い合わせはこちら
お電話でのお問い合わせはこちら
03-6866-7521
よくある質問

こちらのホームページは、株式会社アシストにより監修されています。同社は累計ホームページ制作数80,000社、MEO対策70,000社という豊富な実績を持ち、SEO検定やWEB解析士などの有資格者が多数在籍しています。そのため、ご覧いただいている本ホームページの内容には安心してご覧いただけます。ご不明点はお気軽にお問い合わせ下さい。

NEW
簡単30秒入力

株式会社アシストの
成功事例

株式会社アシストの
その他のコラム