センス不要！初心者でも今すぐ使えるWebデザインテクニック13選

よくあるWebデザインのパターン

1. Photoshop や Illustrator でデザイン
2. WordPress などの CMS 利用で、デザインは基本的にテンプレートの加工
3. 手書きのデザインを元にHTML や CSS ファイルを作成し、デザイン

Webデザインをプライベートな感覚で行うのか、ビジネスとして行うのかでは作業工程も変わってきます。チョット副業的にWebサイトを運営しておこずかい稼ぎと思われている方は②や③のパターンになると思います。

デザインを考える前にやっておくこと

デザインのトレンドを把握

アパレル業界同様にWeb業界にもトレンドがあります。一つ二つでもトレンド要素をデザインに取り込むと、グッとデザイン性が向上します。（ゴーストボタンや動画背景、フラットデザインなど）

• 参考記事/ここが最前線！2015年WEBデザイントレンド13選
• 参考記事/Webデザインの参考にしたい今流行りのフラットデザインサイト15選

Webの表現方法をいろいろ知っておく

メニューボタンにマウスオンするとサブメニュー一覧が表示されたり、表示幅が狭くなるとメニュー一覧がドロワ―タイプに自動的に変更されたりなど、Webデザインを行うものは一応のWeb機能を把握しておく必要があります。

• 参考記事／WEBサイトに動きをつけたい方必見！jQuery入門講座
• 参考記事／jQueryを使いこなそう！便利すぎるプラグイン15選！

Webデザインの目的を明確にしておく

何のためのWebサイトで、どうなったらゴールなのかをデザイナーも明確に把握しておく必要があります。

Webデザイン良い例・悪い例

レイアウト

photo : wix.com
悪い例には、画像や文字がゴチャゴチャ表示されていて、分かりにくいですよね。

ボタン・レイアウト

photo : wix.com
悪い例では、ボタンが小さくユーザーもスルーしてしまいそうですよね。売上に差が出てきます。

Webデザイン初心者必見！Webデザイン・テクニック

全体のデザイン - 黄金比

photo : LISKUL

ツイッターのロゴや名画「モナリザ」など、人々を魅了する芸術品の多くに黄金比「ゴールデンバランス」が取り入れられています。Web デザインにおいてもゴールデンバランスを意識するかしないかでは、ユーザーの印象が大きく変わってきます。トップ画面をはじめ、メニューバーの幅やフォント・サイズや写真、ボタンなどゴールデンバランスを意識してデザインするとバランスの取れた Web サイトになります。ちなみに Photoshop をお使いであれば切り抜きツールの中に「黄金螺旋」が用意されていますので、簡単に写真や画像を黄金比に編集することができます。

黄金比 1 : 1.618

全体のデザイン - グリッド・システム

Webデザインの作業を効率的にこなすテクニックのひとつに「グリッド」があります。垂直方向や水平方向にラインが引かれ、コンテンツのツラや配列を整える基準として役立てることができます。Photoshop や Illustrator でデザイン作業を進める場合はそちらに含まれているグリッド・システムが使えますし、ソフトを持っていない場合はオンラインでグリッドを任意に作成してくれるソフトを活用することができます。そして作成したグリッドをフリーのイラストソフト「Inkscape」を使って、Illustrator 並みにデザイン作業を進めることができます。 グリッドの使い方については明確な基準が無く、デザイン初心者を困惑させる一つの要素でもあります。そんな時は世の中のメジャーなサイトのグリッドを覗いてみて、参考にし、自分の Web デザインに活かす方法も一つのテクニックです。Google Chrome などからもグリッド関係の拡張機能はリリースされていますが、うまく起動しないこともありますので、個人的には FirFox で使える「GridFox」をお勧めします。

• グリッド・システムに使えるツール
  • グリッド画像作成　1200
  • グリッド画像作成　gridulator
  • グリッド・デザインができるフリーの画像ソフト　Inkscape
  • 世の中の Web サイトのグリッドをチェックできるツール（FireFox 用）　GridFox
  • 自分のサイトにグリッド線を上書きするソフト　TheHeads-UpGrid

全体のデザイン - ワイヤーフレームとモックアップ

photo : UXBooth

プロの Web 制作者でも、この工程をきちんとしたことのある方は少ないといわれています。しかし、UI が重視される商用サイトやチームで一つのサイトを作りあげていく場合などは重要な行程となってきます。Web デザイン初心者がワイヤーフレームやモックアップをうまく切り抜けるテクニックとしては、「いい作成ツールの利用」と「Web 機能の熟知」といえます。作成ツールの一例としては「moqups new beta」があります。Web 機能の知識というのは、アコーディオンやタブをはじめとする演出方法で、Web 機能を熟知しているかどうかでUI の向上にもつながり、サイトの利便性向上につながってきます。

全体のデザイン - 配色パターン

photo : Adobe Color

見やすい Web サイトかどうかの決め手となるポイントに「配色」があります。文字やボタンが見やすいという必要最低限のこと以外に、色の組み合わせ方によってもユーザーが抱く Web サイトのイメージは変わってきます。デザインするサイトのコンセプト・イメージに近い配色を心がけると、閲覧しやすく、見ていて楽しい Web サイトになると思います。配色パターンについては理屈ウンヌンよりも、とりあえず多くのパターン例を見て、配色情報を知っておくことが重要と考えられます。Adobe 社が無償提供している「Adobe Color」や㈱スタイルリンクさんが紹介している配色パターンが参考になります。

全体のデザイン - 文章デザイン

このブログ記事もそうですが、ブログサイトや特定のコンテンツを紹介する時は、1ページに1000文字から3000文字程度の文字が記述されます。作文のように、ただ文字を羅列しただけではユーザーの興味を引きにくく、読んでもらえるような文章デザインを考える必要があります。一般的には、

このブログ記事もそうですが、ブログサイトや特定のコンテンツを紹介する時は、1 ページに1000文字から3000文字程度の文字が記述されます。作文のように、ただ文字を羅列しただけではユーザーの興味を引きにくく、読んでもらえるような文章デザインを考える必要があります。一般的には、

＜h1＞タイトル＜/h1＞
導入文

＜h2＞サブタイトル＜/h2＞

＜h3＞小見出し＜/h3＞
本文

＜h2＞まとめ＜/h2＞

全体のデザイン - モバイルファースト

photo : IT media

ご存じの方も多いと思いますが、現代のメジャーサイトのアクセスはモバイルの方が圧倒的に増えてきており、Web デザインを考える上でスマホ、タブレットのデザインを無視することはできなくなっています。Web デザイン初心者でもスムーズにモバイル対応のサイトをデザインするテクニックとしては、テンプレートの活用があります。テンプレートを参考にすることによって、フォントサイズの変わり方や画像やナビゲーション（メニューバー）の変化を参考にすることができます。いきなり CSS であれこれ言われても難しいですよね。出来上がったサイトは、プレビューサイトでレスポンス具合をチェックすることができます。

• モバイルファーストに役立つツール　無料のWebページ開発ソフト
  • Expression Web 4
  • CoffeeCup Free HTML Editor
    ダウンロードしたテンプレートフォルダの index.html を上記のソフトで読み込むと、サーバーにファイルをアップロードしなくても Web ページをチェック・編集できます。

部分的なデザイン - 表やグラフ

photo:伝わるデザイン

客観的データの裏付けとなる表やグラフもひと手間かけるだけで見た目が大きく変わります。jQuery や JavaScript で動きのあるグラフ演出もステキですが、初めのうちは Google スプレッドシートで作成したグラフを Web デザインに取り入れる方法も一つです。がんばって表ソフトを使いこなせると、デザイン性の高いグラフを搭載することができます。

部分的なデザイン - 引き出し線

photo:

photo : 伝わるデザイン

写真や画像の解説に用いる「引き出し線」。決まった角度や法則で「引き出し線」を引くと、見栄えが良くなります。小さいことかもしれませんが、細かい点までデザインがいき届いているとサイト自体の品格も上がります。

部分的なデザイン - フォント・サイズ

一般的に読みやすいフォントの大きさはデスクトップ（1024px以上）で16px以上、タブレット（768px）で14px以上、スマホで12px程度といわれています。使い慣れている単位の“px”の方が使いやすいかもしれませんが、レスポンシブデザインを考える上では相対値の“em”の方がよく使われています。emは、フォント以外にもレスポンシブ・サイトのマージン幅を指定する時にもよく使われますので、がんばってemに慣れることもWebデザインにおいては必要なことです。emの数値とpxの数値がイメージしにくい時は、単位換算表を一読しておくと使いやすいと思います。

部分的なデザイン - ロゴやバナーのデザイン

photo : blog.logogarden.com

Illustoratorなどのデザインツールが使えればストレスにならないと思いますが、多くのWebデザイン初心者はデザインツールに慣れていないケースがよくあります（私自身そうでした）。そんな時はロゴやバナーの作成をサポートしてくれる無料のオンラインツールを使う方法も一つのテクニックといえるでしょう。結果にコミットする、Web サイトであればこのあたりの行程は手を省いてサクッと作ってもいいのではないでしょうか？

• ロゴ作成に役立つツール（オンラインで無料）
  • Logo Garden
  • Online Logo Maker
• バナー作成に役立つツール
  • Bannersnack
  • Google Web Designer

部分的なデザイン - レイアウトの微調整テクニック

Webデザイン初心者にありがちなパターンとして、コンテンツ間の余白やフォントの大きさ、行間などがうまく調整できない、ということがあります。こんな時はページ・プレビューを見ながら調整することが最良の手段と考えられます。ページプレビューを見ながら微調整する方法は「Google デベロッパー・ツール」もしくは「Web 開発ソフト（IDE）」を利用することをお勧めします。

• 参考記事／プログラミング初心者必見！Chromeデベロッパーツール便利機能まとめ
• 無料IDEの活用
  • Expression Web 4　日本語、WordPress テンプレートも読み込みOK（若干手間）
  • CoffeeCup Free HTML Editor　英語ですが充実した機能

ページの全体像を把握（特にWordPressの場合）

photo : FireShot

PhotoshopやIllustratorなどでWebデザインをすればページの全体像がよく把握できますが、WordPressでデザインの変更などを行っているとサイト全体のイメージがつかみにくくなります。どうしてもモニター画面で表示される範囲には限りがあり、トップ部分とボトム部分、サイドなどとの調整がやりにくくあります。そんな時の小技として、サイトページ全体をキャプチャ（画像）に撮ってみる方法があります。Web デザインを進める中で、時々ページ全体のバランスを見直す事もいいサイトデザインには欠かせない作業です。

• 全体イメージ把握に役立つツール　FireShot

とりあえず流行りのテンプレートの活用

Webデザインに限った話ではありませんが、デザイン力をつけるためには「模写」することも大事です。海外の美術館などに行くと画家の卵が、キレイな絵画を模写していますよね。これと同じで Web デザインにおいても模写もしくはデザインベースとして既存の Web デザインを活用することも一つのテクニックです。ただし、テンプレートによっては作者の表記が必要なモノもありますので、利用は自己責任でお願いします。

• ホームページ作成の参考にしたい海外デザインギャラリーサイト10選
• 国内でのWebテンプレート事例（Cool Web Window 様）

まとめ

ちょっと長くなりましたが、いかかでしたでしょうか？Webデザインの作業工程というのは完成までの道のりが長く、専門的な知識も必要となるために初心者にとっては難しい作業となります。Webデザインに限った話ではありませんが、やはりイイものを作り上げようと思うとテクニックうんぬんよりも「こんなサイトを作りたい」という信念が一番重要になってきます。「家は3階建てないと成功しない」といわれますが、Webデザインにおいてもこのことは共通しますので、焦らずにコツコツとデザインのテクニックを身につけていくことが最良の手段と思います。歴史に残るWebサイトをがんばって作り上げましょう！