Webデザイン基礎講座

2021年07月04日

目次をチェック

Webデザインとは
Webデザインの基礎知識
Webデザインに必要な知識
まとめ

デザインや絵など、何かをつくることが好きで、Webデザインの仕事がしたいと考えたことはありませんか。 Webデザインには、デザインをサポートするツールやアイデアにつながる経験、Web制作に欠かせないコーディングスキルが必要です。実際に働きながらスキルアップする方法もありますが、ある程度自分で基礎知識を得ておいた方が良いでしょう。ここでは、Webデザインに必要な知識をご紹介いたします。

Webデザインとは

Webデザインとは、パソコンやスマートフォンなどのデジタル機器上で表示されるデザインや、レイアウトを設計することです。ウェブサービスやウェブサイト、ランディングページのレイアウトをはじめとして、ロゴやボタンといったパーツのビジュアル設計なども一般的にWebデザインと呼びます。 Webデザインは、公開後の使われ方やユーザーの行動心理を想定しなければなりません。そのため、クライアントの要望やディレクターの指示に沿って、適切な動線や行動喚起を促すデザイン設計が求められます。

Webデザインの基礎知識

Webデザインの制作はクライアントのヒアリングから始まり、基礎と言える基本原則に基づいて組立てられます。ここでは、Webデザインのレイアウト・フォント・配色について基本的な知識をご紹介します。

レイアウト

Webデザインのレイアウトはいくつかあり、大きく分けるとシングルカラムとグリッドレイアウトの2種類になります。シングルカラムレイアウトは、サイドバーを設けず、コンテンツを縦に並べるレイアウトです。コンテンツはディスプレイのサイズに合わせて幅を変えるため、レスポンシブデザインを組立てやすく、閲覧環境によるデザインの差を抑えられます。グリッドレイアウトは、画面やページを格子状に分割して、コンテンツを配置するレイアウトです。同じサイズで並べたり、異なる大きさを組合わせたりしてパーツを配置し、コンテンツの情報を整理して表示できます。

フォント

Webデザインのフォントは、サイトの印象をガラッと変える要素の1つです。多くの種類がありますが、基本的にデバイスフォントを使用するため、見る人によって変わります。代表的なフォントは、ゴシック体・明朝体・筆書体・デザイン書体があります。読みやすい文字や文章は、可読性、視認性、判読性を考慮して選択すると良いでしょう。例えば、Windowsならゴシック体の「メイリオ」が視認性、判読性に優れており、Macなら「ヒラギノ角ゴシック」が多くの企業サイトで採用されています。両方のOSに標準で入っている「游ゴシック体」は、バリエーションが豊富で使いやすいフォントです。

配色

Webデザインの配色は、色が人に与える影響が大きいため、制作では重要項目の1つです。サイトの配色はベースカラー・メインカラー・アクセントカラーがあり、それぞれ役割があります。ベースカラーは最も大きな面積を占める色で、余白や背景などに使われます。サイト全体の印象を決めるメインカラーは、配色を選択する上で最も大切な色です。アクセントカラーは、少ない量ですが一番目立つ色で全体を引き締め、ユーザーの目を引く役割があります。それぞれの比率は、ベース70％・メイン25％・アクセント5％が美しい配色割合とされています。

Webデザインに必要な知識

Webデザインは、レイアウト・フォント・配色などの基礎のほか、コーディングやデザイン力が必要です。ここでは、コーディングスキルやデザインに関する必要な知識をご紹介します。

コーディングスキル

コーディングは、Webデザインをインターネット上で公開するために行う開発作業です。使われる言語は、HTMLやCSS、JavaScriptがあります。 HTMLはサイトの骨組みとなるファイルを作成する言語で、見出しや段落、リンク、画像などの配置を指定します。 CSSはHTMLでつくったページに、文字の色やフォントの種類、パーツの大きさや配置など、見た目を装飾するための言語です。 JavaScriptはWebサイトに動きをつけるプログラミング言語です。他にも、Webアプリやスマホアプリの開発では、異なる言語を使用することもあります。開発の際は、更新性の確保や、SEOなどへの配慮も求められます。

デザインツール

Webデザインの制作は、様々なデザインツールが必要です。 PhotoshopはWebデザインのレイアウトやグラフィック加工、写真の加工・合成・編集を得意としており、多くのWeb制作会社で使われています。 Illustratorでは、ロゴやアイコンやイラスト画像、Webサイトのイメージに沿ったデザイン制作ができます。 Adobe XDは設計図や完成形のデザイン作成に向いており、Web上で動きを再現できるため、クライアントとイメージのすり合わせをする際に便利です。 SketchはUIデザインに特化したデザインツールで、動作が速くて容量が小さく、IllustratorやPhotoshopなど様々なデザインツールと連携できます。

デザインセンス

美しいWebデザインを設計するには、たくさんのデザインに触れてデザインセンスを磨くことが大切です。 Webデザインは技術の進歩に比例してトレンドも日々進化しています。そのため、最新の技術を勉強しながら常に海外などの新しいデザインを集め、自分なりに研究する必要があります。また、情報設計をしっかり行って、最終的なゴールを見据えたコンテンツ内容にすることも大切です。ユーザーが読み進める目線を想定し、重要な内容の配置や見出しを効果的に使い、文章量を調整するデザイン力が求められるでしょう。様々な状況を想定しながら、どのようにすればユーザーが操作しやすいか、と意識することが最適なデザインにつながります。