・Webデザインってデザイン経験ないと無理なんじゃないの？
・絵心全く皆無なんだけれども、デザインってセンスなんじゃないの？
・デザインって勉強したらなんとかなるもんなの？
- Webサイトをオリジナルデザインで制作する手順がわかる（初心者向け）
実体験をベースに記事を作成していますので参考になれば幸いです。
デザイン未経験でもオリジナルのWebデザインが作れる効率のいい手順
デザイン経験無し、絵心無しの40歳オーバー男でもデザイン案件受注できてます。
ここでいう「Webデザイン」とは
Webサイトの完成デザイン画を描けるスキル
ということ。Webデザインにコーディングも含める、と定義する場合もあるのでここでは
完成デザイン画をphotoshopをベースに制作できる（コーディング含まず）
と定義します。
スクールに通っても課題通りにphotoshopを使ってできるようになるのがメインの学習。
見本通りにするにはphotoshopの使い方が分かればいい訳で、
自分のオリジナリティを表現するにはどうしたらいいのか、、
と悩みます。実際の案件になると、こんなWebサイトみたいな感じで作って、と既存の競合他社のWebサイトを提示されて要件言われるだけ、が普通です。
そこで以下の手順で自分はオリジナルデザインを制作していきました。
- その１：Webデザインツール（Adobe製品）の使い方を学ぶ
- その２：「デザイン理論」を学ぶ
- その３：既存Webサイトをたくさん見る
- その４：「目的」と「デザイン理論」から見本デザインを選ぶ
- その５：見本デザインを混ぜ合わせてオリジナルにする
制作のポイントを簡単にいうと、いろんなサイトを選んでうまいこと混ぜ合わせる、ということ。
全くオリジナルデザインが頭に浮かばない、、どうしよう、という人はお試しください。
その１：Webデザインツール（Adobe製品）の使い方を学ぶ
Webデザインをするには道具（ツール）が必要です。絵を描くには紙とパレット、絵の具、筆が必要なのと同じですね。
業界のスタンダードツールはAdobe製品です。Adobe社という会社が出している製品です。
photoshop（フォトショップ→フォトショと略したりする）
Illustrator（イラストレーター→イラレと略したりする）
Webデザインスクールでは上記二つのツールの使い方を学習します。
制作会社と仕事をする時にも、上記どちらかのデータでやり取りします。
Webサイトの完成デザインはphotoshopで作ることがほとんどなので、photoshopのデータ（psdデータという）でやり取りすることが多いです。
スクールに通えば課題がありその見本となる課題デザインの通りにphotoshopを使って制作します。そこでphotoshopの使い方を学びます。Illustratorも名刺制作課題がありそこで使い方を学びます。
自分は全くAdobe製品を使ったことが一切無かったので、最初は画面のどこに何の機能があるのかよく分からん、、状態でスクール講師に聞きまくりました。Adobe機能多すぎ。
既存WebサイトをキャプチャーしてphotoshopでトレースできればスキルレベルとしてはOK。
その２：「デザイン理論」を学ぶ
ツールが使えるようになれば、次は「理論」です。
Webデザインとは何かと考えたとき、
Webサイトを見る人にとって必要な情報が分かりやすく整理されている状態を作ること
と考えます。じゃあ、必要な情報を箇条書きで書いておけばいいんじゃない？と思ったりしますが、Webサイトを見にくる人は基本そのサイト自体にそんなに興味がない、ということを前提に考えます。興味がない人を振り向かせるためにどうしたら効果的か、を考えます。
つまり、
直感的にこのサイトは必要な情報があるだろうな
と思ってもらう、ということ。
デザイン理論の原則
Webデザインを構成する
レイアウト、配色、画像とイラスト、書体
について見る人にとって自分と関係がある、欲しい情報がありそう、見やすい、と思ってもらいます。そのために直感的な見た目の印象を整えることを考えます。
それぞれこうすればこういう印象になる、というルールというかパターンがあるわけです。それを頭に入れておく、ということになります。それぞれざっくりどんな内容を知っておくといいか箇条書きにしてみます。
レイアウト
レイアウトとは、何をどこにどうやって配置するのか、ということ。
・レイアウトの４原則（近接、整列、反復、対比）
・グリッドレイアウト
・ヘッダー、フッター、サイドバー
・ナビゲーション
・視線の誘導
・余白の活用
・Webサイトでよく見るレイアウト（シングルカラム、マルチカラム、タイル型、フルスクリーン）
・レイアウトのトレンド
配色
どんな色を使うか、ということ。
・色の三属性（色相、明度、彩度）
・RGB
・トーン
・色相環（補色、類似色、配色の調和）
・色の印象
・配色の比率（ベースカラー、メインカラー、アクセントカラー）
・リンクの色
・ベースカラーが与える印象
画像とイラスト
画像とイラストをWeb上で利用する方法。
・画像とイラストが与える印象
・トリミング
・解像度
・ファイル形式（JPG,PNG,SVG,GIF）
・画像とイラストの配置例
書体
文字の使い方による表現。
・セリフ書体、サンセリフ書体（明朝体、ゴシック体）
・書体ファミリー
・書体の選び方
・文字サイズ、行間、カーニング
・１つのWebサイトで利用するフォントの種類
・フォントタイプ別デザイン事例
それぞれ説明しだすと記事が長くなりすぎるので、これ重要だな、と思ったのは個別記事にしていきたいと思います。「レイアウトの４原則」とか「配色の比率」とかはもう基本も基本なので知っておかないといけないですね。それぞれ個別に気になったら検索してみてください。
文字のカーニングとか地味に重要なポイントだと個人的には思ってますし、細々とデザインのポイントってあります。
「美は細部に宿る」が自分の中でしっくりきます。細かいことの積み重ねですね。
以上の内容はWebデザインスクールを受講すれば大枠学習はできます。自分は本を主に参考にしました。網羅的に一通りのデザイン理論を知るには本は手っ取り早いです。
いちばんよくわかるWebデザインの基本きちんと入門
けっきょく、よはく
デザイン素人の僕は色々と情報を詰め込みたくなるときがあります。目立たせたいポイントをより強調するために余白が必要である、という概念。NGデザインとOKデザインの比較事例が豊富なので分かりやすいです。これをみて余白が怖くなくなりました。
デザイン理論の活用
上記デザイン理論は原則となる基本知識であり、実際デザイン制作開始するときは、
誰に、何を、なぜ
を整理することから始まります。具体的には
何を：色々な服のコーディネート例をWebサイトで見せて
なぜ：迷いなく服を購入してもらいたい
と考えたとしたら、
何を：コーディネート例を全面に画像多めにして
なぜ：余白をうまく使いながら分かりやすい導線にする
というような感じでデザインを考える、ということですね。（このたとえは自分が思いつきで書いたものなのでまあこんなイメージか、くらいでご了承願います）
デザインは、目的に対する手段である、ということです。
これについては、事例から学習した方がいいので２つオススメ本があります。どちらもWebデザインに限定した内容ではないのですがデザインはこんな考え方をして作っていくんだ、というのが分かる本。どちらかあれば重宝します。
なるほどデザイン
「どんな人に、何を、なぜ、いつ・どこで」伝えるためにどういうデザインをすべきか、という観点から色、フォント、レイアウトの実例豊富にグラフ・チャートの見やすいデザイン例まで書かれています。難しい言葉一切無し。個人的には「擬人化力」というチャートが納得感あり。書体を声色に例えてみる、とか色を年代に例えてみる、とか身近なイメージをデザインに落として説明しているのが分かりやすい。
知りたいレイアウトデザイン
その３：既存Webサイトをたくさん見る
「デザイン理論」を頭に入れただけでオリジナルデザインができるならデザイン素人は苦労しません。
ここから既存のWebサイトをたくさん見ていきます。デザインパターンを自分の頭の中にストックしていくわけです。デザインの引き出しを増やす、ということです。
このターゲット向けにはこのパターン
流行りのデザインはこんなパターン
ターゲットや目的によってパターンはある程度決まってます。
Webギャラリーを利用してWebサイトをたくさん見る
最新のおしゃれなWebサイトを集めたサイトを「Webギャラリー」といいます。
検索エンジンで「Webギャラリー」と検索すれば色々なサイトがでてくるのでそれを活用します。
たとえば
です。業界別、色別など検索機能もついていたり自分が制作する業界業種、色合いを検索して調べていくことになります。Webギャラリーは他にもいろいろあります。自分が検索しやすいギャラリーを見つけてみてください。
（参考までに、バナーだけを集めたギャラリーもあります。例：Banner Matome）
競合他社を検索してWebサイトを見る
製作するWebサイトの競合となるサイトを見て、だいたいどのようなパターンで制作されているかを見ます。
制作対象となる業界名で検索したり、
知っている競合他社があれば直接検索してみたり、
してWebサイトがどんなデザインか見に行きます。
ここで確認すべきポイントは
アピールしているポイントはどこか
です。
何が強みで、それを分かりやすくどうやってデザインしているのか
を確認する、ということ。
デザインとは情報の整理、アピールポイントを表現する方法を考えるクセをつけるといいです。
便利なWebサイト保存ツールを使う
このWebサイトいいな、と直感的に思えば保存していきます。ブラウザのお気に入りにいれていけばいい、ということ。
ただ、お気に入りに入れていると一目でどんなサイトか分からないので不便を感じることがあります。
そこで、スクールに通った時スタッフの人に教えてもらったが、
というツール。これ便利。
未来の自分のために情報を集めるツール
だそうです。
簡単に言うと気に入ったWebサイトを保存できて、保存したWebサイトが画像で一目で分かるからとても見やすい！というツール。
カテゴリごとに分けることもできるから保存にはぴったりです。
本を活用する
体系だててカテゴリ―ごとに把握するには、本が分かりやすいです。自分で検索して調べていると検索ワードに偏りがでてきたりしますしね。
オススメは、
Webデザイン良質見本帳
デザインのトレンドも紹介されているのがいいです。この目的だとこういうパターンね、というのが整理されているのがＧＯＯＤ！
その４：「目的」と「デザイン理論」から見本デザインを選ぶ
①目的整理
デザイン理論の活用でお伝えした
誰に、何を、なぜ
ということを整理します。目的の整理です。ここを見えるところに書きだしておくのもいいです。
最初に「企画」していれば、目的とターゲットが明確になっているはずなのでそこから書き出します。
誰に、何を、なぜが整理出来たらこのイメージに合うレイアウト、配色、画像とイラスト、書体を考えます。
「誰に、何を、なぜ→レイアウト、配色、画像とイラスト、書体」
②なんとなく見本をいくつも選んでみる
次に、たくさんみたWebサイトから制作目的に合いそうだ、と思うものをいくつも選びます。
図だけ使える、と思うWebサイトもあれば選んでおきます。パーツだけ使える、というのも対象とは違う別の業界のWebサイトで見つかったりするので幅広く見ておくとストックになります。
製作対象業界のWebサイトをたくさん見ると、パターンが見えてきます。上級者になると、違う業界やWeb以外のデザインからイメージを作るのかもしれないですが、初級者は同じ業界、ターゲット、目的のサイトをピックアップすれば大きくは外すことはないです。
③見本を選別する
「①目的の整理」で整理したデザインイメージ（レイアウト、配色、画像とイラスト、書体）と比較してみてこのデザインは違うな、と思ったら選択から外す、という感じ。
その５：見本デザインを混ぜ合わせてオリジナルにする
「その４」でいくつか選んだ見本デザインのレイアウトやパーツを混ぜ合わせていく、というのが最後の作業。（見本が1，2個だけだとパクリサイトになってしまう可能性があるので要注意。）
「設計」で作った「ワイヤーフレーム」にそって、見本デザインのパーツをあれこれ配置していきます。
（「設計」についてはまた別の記事で書いてみます）
最初の自分のやり方は
・10個くらい見本を選んで全てデザイン模写して微妙に自分なりに変えてみて（ロゴとかを制作する本番用に変えてみるとかキャッチコピーを変えてみるとか）
・できた模写デザインからベースデザインを決めて
・ワイヤーフレームの構成に変換してみて
・パーツやらレイアウトやらを他のと入れ変えたり組み合わせて
オリジナルデザインにしていきました。最初のやり方なので非効率かもしれませんが練習も兼ねての製作方法です。
まとめ：とにかくいろんなWebサイトを見て模写してみる
理論を学習しても正直どうやって使えばデザインできるのかデザイン初心者には分かりません。
多くのWebサイトを見て、模写して、手を動かすことで自分の頭の中にパターンが蓄積されて、アウトプットできる、という流れです。
最初は、蓄積パターンがないからとにかく組み合わせてオリジナルにしていくのが早いです。あまりに似ていたらよくないのでそこは完成後、客観的に誰かに見てもらうのもいいですね。
あと、スクールの卒業制作時にどれだけのWebサイトを見たかというと100サイトは見ました。デザイン経験有りのスクール同期も100サイトは見た、と言ってました。
スクールのLIVE授業で話をすることができた現役Webデザイナーの方に、
どうやってデザイン考えてるんですか？
と聞いたとき、
見る人を憑依させるのだ、
と言っていた記憶があります。見ている人になりきってその人なら何を見るかをイメージする、ということなんだと思います。
うーむ、初心者には参考にならん、、
スクールに通ってて卒業制作どうしよう、と思う人にも参考にしてもらえると幸いです。
この記事はここまでです。