⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
サイトを運営していると「デザインの基礎知識を学んでおきたい」「デザインの制作会社に依頼したいけれど知識がない」などの悩みがでてきます。
サイトやホームページのデザインは、訪問者に自社や商品のイメージに直結するため整えておきたいところです。しかし、基本的な知識やスキルがないとどう対処すればいいかわからないでしょう。
そこで、この記事ではホームページデザインの基礎知識を解説します。今後のサイト運営に活かしてください。
ホームページのデザインに必要な知識やスキル
ホームページのデザインに必要な知識やスキルとして、以下の3つがあります。
ツールの知識
デザインツールはさまざまなものがあります。有名どころでいうと、PhotoshopやIllustratorなどです。そのようなツールの使い方がわからないことには、デザインを描けません。
使いながら慣れていくしかありませんので、ツールの学習メニューなどを利用しながら理解を深めていきましょう。
いいデザインをみる知識
ツールが使えるようになっても、いいデザインに触れなければ良質なデザインが完成しません。
そのため、デザイン担当者はできるだけ多くのデザインをみて目を養うことが大事です。デザインを外注する際も「かっこいい感じ」「スマートなもの」と伝えるよりも「このサイトのように統一感のあるものにしたい」と明確にしたほうが、情報共有がしやすいです。
たとえば、「MUUUUU.ORG（https://muuuuu.org/）」というサイトには、数多くのデザインが掲載されてあります。
自社サイトに参考になるものがあるかもしれないため、一通りみてみましょう。
コーティングスキル
コーティングとは、ブラウザ上でユーザーに見える形にすることです。HTMLやCSS、JavaScriptといった言語がよく使われます。
・HTML
文章や文字列が何を表しているか示す言語。ページの土台となるファイルを作成する。
・CSS
文章の装飾をする言語。
・JavaScript
ページに動きをつける言語。HTMLやCSSだけでは静的だが、JavaScriptを使うと動的なページにできる。
以上の3つの言語については、基本的な概念や使い方を勉強してみましょう。
ホームページデザインの基礎知識
ここからはホームページのデザインについて、具体的にどのような知識が必要なのかみていきます。
レイアウトの種類
ホームページのレイアウトはいくつかありますが、1カラムとグリッドレイアウトの2つにわけることが可能です。
・1カラム
上から下に1列に並べるレイアウト。ランディングページや企業サイト、キャンペーンサイトでよく使われる。1カラムのメリットは左右にコンテンツを配置しないため、ユーザーが集中しやすいこと。横幅にあわせたコンテンツの変更やレスポンシブルデザインにも相性がいい。
・グリッドレイアウト
ページを格子状に分割させてコンテンツを表示するレイアウト。コンテンツの枠の大きさをそろえたり、違う大きさにしたりできる。レスポンシブデザインに対応できるため、デスクトップでは3カラム、スマートフォンでは2カラムなどが自動的に適用される。
フォントの種類
フォントの種類も多岐にわたりますが、選ぶ種類により可読性や視認性が変わります。どのようなフォントを選ぶかも重要です。
・メイリオ
Windowsで利用する場合に適している。遠くからでもみやすく視認性や判読性に優れる。
・游ゴシック体
游ゴシック体はコンピューターに標準的に入っているフォントである。読みやすくきれいなフォントであり、柔らかさや上品さも感じる。
・ヒラギノ角ゴシック
Macで利用する場合に適している。太さが10パターンほど用意され、幅広さがある。多くの企業が採用しているフォントである。
<h3>配色パターンの種類</h3>
ホームページの配色パターンはデザインを決めるときに重要な要素となります。以下の3つのカラーを選ぶとよいとされています。
・ベースカラー
背景や余白などサイト内でもっとも大きな面積を占める色。
・メインカラー
サイト全体の印象を決める色。配色カラーでは最も大事なカラーである。
・アクセントカラー
ベースカラーやメインカラーに対して、ユーザーが見たときに目を引く色。問い合わせボタンなどに使う。
以上の配色で、ベースカラーが75％、メインカラー25％、アクセントカラー25％の割合にするとバランスがよくなります。
デザインを学ぶときのツール
デザインは次の3つのツールを使って学び、実務でも活用しましょう。
Photoshop
Photoshopは多くのWEBデザイナーやWEB制作会社が活用しているデザインツールです。レイアウトやグラフィックの加工に使いますが、レイアウトと同時進行でグラフィック加工ができます。
なお、Photoshop単体では月額2480円の費用がかかります。そのほかのAdobeが提供するツールやクラウドストレージのパッケージプランもあるので検討してみましょう。
Photoshop（https://www.adobe.com/jp/products/photoshop.html）
Illustrator
Illustratorはイラストを描くためのツールです。アイコンやイラスト画像の作成の際に使い、デザインのレイアウト機能も備わっています。
Photoshopと同様でAdobeが提供するツールであり、Illustrator単体では月額2480円となります。
Illustrator（https://www.adobe.com/jp/products/illustrator.html）
Adobe XD
Adobe XDは、WEBサービス系のアプリ制作を主としたツールです。PhotoshopやIllustratorとの連携もできてデザイン制作の効率化を図ることができます。
無料で利用できますが機能面はPhotoshopやIllustratorよりも劣るため、自社が使ってメリットのあるツールなのか見極める必要があります。
Adobe XD（https://www.adobe.com/jp/products/xd.html）
ホームページのデザインを学ぼう
ホームページのデザインはユーザーからの印象に影響があります。コンテンツを際立たせるスキルとして、基本的なものは理解しておきたいところです。この記事を参考にデザインについて学習を進めてみましょう。
⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
