アラフォー会社員がWeb系の副業をオススメするブログ

デザイン未経験でもオリジナルのWebデザインが作れる効率のいい手順【センス不要】


Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45
ユズト
デザイン経験無し、絵も書く趣味も無し、の状態からWebデザイン案件を受注できるまでになりました。

・Webデザインってデザイン経験ないと無理なんじゃないの?

・絵心全く皆無なんだけれども、デザインってセンスなんじゃないの?

・デザインって勉強したらなんとかなるもんなの?

このような悩みに対して本記事を読むことで以下のようなことを知ることができます。
  • Webサイトをオリジナルデザインで制作する手順がわかる(初心者向け)

実体験をベースに記事を作成していますので参考になれば幸いです。

デザイン未経験でもオリジナルのWebデザインが作れる効率のいい手順

未経験からWebデザインを勉強する効率のいい手順

デザイン経験無し、絵心無しの40歳オーバー男でもデザイン案件受注できてます。

ここでいう「Webデザイン」とは

Webサイトの完成デザイン画を描けるスキル

ということ。Webデザインにコーディングも含める、と定義する場合もあるのでここでは

完成デザイン画をphotoshopをベースに制作できる(コーディング含まず)

と定義します。

スクールに通っても課題通りにphotoshopを使ってできるようになるのがメインの学習。

見本通りにするにはphotoshopの使い方が分かればいい訳で、

自分のオリジナリティを表現するにはどうしたらいいのか、、

と悩みます。実際の案件になると、こんなWebサイトみたいな感じで作って、と既存の競合他社のWebサイトを提示されて要件言われるだけ、が普通です。

そこで以下の手順で自分はオリジナルデザインを制作していきました。

  • その1:Webデザインツール(Adobe製品)の使い方を学ぶ
  • その2:「デザイン理論」を学ぶ
  • その3:既存Webサイトをたくさん見る
  • その4:「目的」と「デザイン理論」から見本デザインを選ぶ
  • その5:見本デザインを混ぜ合わせてオリジナルにする

制作のポイントを簡単にいうと、いろんなサイトを選んでうまいこと混ぜ合わせる、ということ。

全くオリジナルデザインが頭に浮かばない、、どうしよう、という人はお試しください。

その1:Webデザインツール(Adobe製品)の使い方を学ぶ

Webデザインツール(Adobe製品)の使い方を学ぶ

Webデザインをするには道具(ツール)が必要です。絵を描くには紙とパレット、絵の具、筆が必要なのと同じですね。

業界のスタンダードツールはAdobe製品です。Adobe社という会社が出している製品です。

photoshop(フォトショップ→フォトショと略したりする)

Illustrator(イラストレーター→イラレと略したりする)

Webデザインスクールでは上記二つのツールの使い方を学習します。

制作会社と仕事をする時にも、上記どちらかのデータでやり取りします。

Webサイトの完成デザインはphotoshopで作ることがほとんどなので、photoshopのデータ(psdデータという)でやり取りすることが多いです。

スクールに通えば課題がありその見本となる課題デザインの通りにphotoshopを使って制作します。そこでphotoshopの使い方を学びます。Illustratorも名刺制作課題がありそこで使い方を学びます。

自分は全くAdobe製品を使ったことが一切無かったので、最初は画面のどこに何の機能があるのかよく分からん、、状態でスクール講師に聞きまくりました。Adobe機能多すぎ。

既存WebサイトをキャプチャーしてphotoshopでトレースできればスキルレベルとしてはOK。

その2:「デザイン理論」を学ぶ

「デザイン理論」を学ぶ

ツールが使えるようになれば、次は「理論」です。

Webデザインとは何かと考えたとき、

Webサイトを見る人にとって必要な情報が分かりやすく整理されている状態を作ること

と考えます。じゃあ、必要な情報を箇条書きで書いておけばいいんじゃない?と思ったりしますが、Webサイトを見にくる人は基本そのサイト自体にそんなに興味がない、ということを前提に考えます。興味がない人を振り向かせるためにどうしたら効果的か、を考えます。

つまり、

直感的にこのサイトは必要な情報があるだろうな

と思ってもらう、ということ。

デザイン理論の原則

Webデザインを構成する

レイアウト、配色、画像とイラスト、書体

について見る人にとって自分と関係がある、欲しい情報がありそう、見やすい、と思ってもらいます。そのために直感的な見た目の印象を整えることを考えます。

それぞれこうすればこういう印象になる、というルールというかパターンがあるわけです。それを頭に入れておく、ということになります。それぞれざっくりどんな内容を知っておくといいか箇条書きにしてみます。

レイアウト

レイアウトとは、何をどこにどうやって配置するのか、ということ。

・レイアウトの4原則(近接、整列、反復、対比)

・グリッドレイアウト

・ヘッダー、フッター、サイドバー

・ナビゲーション

・視線の誘導

・余白の活用

・Webサイトでよく見るレイアウト(シングルカラム、マルチカラム、タイル型、フルスクリーン)

・レイアウトのトレンド

配色

どんな色を使うか、ということ。

・色の三属性(色相、明度、彩度)

・RGB

・トーン

・色相環(補色、類似色、配色の調和)

・色の印象

・配色の比率(ベースカラー、メインカラー、アクセントカラー)

・リンクの色

・ベースカラーが与える印象

画像とイラスト

画像とイラストをWeb上で利用する方法。

・画像とイラストが与える印象

・トリミング

・解像度

・ファイル形式(JPG,PNG,SVG,GIF)

・画像とイラストの配置例

書体

文字の使い方による表現。

・セリフ書体、サンセリフ書体(明朝体、ゴシック体)

・書体ファミリー

・書体の選び方

・文字サイズ、行間、カーニング

・1つのWebサイトで利用するフォントの種類

・フォントタイプ別デザイン事例

それぞれ説明しだすと記事が長くなりすぎるので、これ重要だな、と思ったのは個別記事にしていきたいと思います。「レイアウトの4原則」とか「配色の比率」とかはもう基本も基本なので知っておかないといけないですね。それぞれ個別に気になったら検索してみてください。

文字のカーニングとか地味に重要なポイントだと個人的には思ってますし、細々とデザインのポイントってあります。

「美は細部に宿る」が自分の中でしっくりきます。細かいことの積み重ねですね。

以上の内容はWebデザインスクールを受講すれば大枠学習はできます。自分は本を主に参考にしました。網羅的に一通りのデザイン理論を知るには本は手っ取り早いです。

いちばんよくわかるWebデザインの基本きちんと入門

伊藤 庄平 (著), 益子 貴寛 (著), 久保 知己 (著), 宮田 優希 (著), 伊藤 由暁 (著)
この本は、Web制作に関わる内容はひととおり網羅されています。初心者にとってとても分かりやすい内容。後半はコーディング技術の内容についても書かれています。僕は前半部分のデザイン理論が網羅的で参考になるな、と思い購入しました。上記「デザイン理論の原則」でかいた内容の詳細が書かれているので独学でデザイン理論を学習していて網羅的に内容を知りたい方にオススメします。

けっきょく、よはく

網羅的な本ではないのですが、「余白のとり方」をメインにデザインをとりあげた本がこちら。レイアウトの「余白の活用」をより具体的に知りたい方向けの本です。なにもない白い空白の部分もデザインの一部である、ということを理解させてくれます。
デザイン素人の僕は色々と情報を詰め込みたくなるときがあります。目立たせたいポイントをより強調するために余白が必要である、という概念。NGデザインとOKデザインの比較事例が豊富なので分かりやすいです。これをみて余白が怖くなくなりました。

デザイン理論の活用

上記デザイン理論は原則となる基本知識であり、実際デザイン制作開始するときは、

誰に、何を、なぜ

を整理することから始まります。具体的には

誰に:休日の服選びを面倒と思う40代男性に
何を:色々な服のコーディネート例をWebサイトで見せて
なぜ:迷いなく服を購入してもらいたい

と考えたとしたら、

誰に:40代男性に信頼されるような色をベースにフォントはゴシックで
何を:コーディネート例を全面に画像多めにして
なぜ:余白をうまく使いながら分かりやすい導線にする

というような感じでデザインを考える、ということですね。(このたとえは自分が思いつきで書いたものなのでまあこんなイメージか、くらいでご了承願います)

デザインは、目的に対する手段である、ということです。

目的のために、整理した情報を構造化する、要素の関係性や強弱・優先順位を明確にする、ということをデザインしていくわけです。

これについては、事例から学習した方がいいので2つオススメ本があります。どちらもWebデザインに限定した内容ではないのですがデザインはこんな考え方をして作っていくんだ、というのが分かる本。どちらかあれば重宝します。

なるほどデザイン

この本は、通学制スクールでも勧められた本です。
どんな人に、何を、なぜ、いつ・どこで」伝えるためにどういうデザインをすべきか、という観点から色、フォント、レイアウトの実例豊富にグラフ・チャートの見やすいデザイン例まで書かれています。難しい言葉一切無し。個人的には「擬人化力」というチャートが納得感あり。書体を声色に例えてみる、とか色を年代に例えてみる、とか身近なイメージをデザインに落として説明しているのが分かりやすい。

知りたいレイアウトデザイン

この本は、本屋で立ち読みして購入しました。最初のパートが論理的な説明で分かりやすかったんです。「Who×What×How(誰に、何を、どうやって)」を整理し、直観的に知りたいことが分かるデザイン制作方法について事例豊富に説明されています。個人的には、「How」の考え方が参考になりデザイン制作の基準となりました。この本のデザイン制作の進め方を参考にしてオリジナルデザインの製作をしました。何かAmazonレビューが少なすぎるけれど僕は参考になりました。

その3:既存Webサイトをたくさん見る

既存Webサイトをたくさん見る
「デザイン理論」を頭に入れただけでオリジナルデザインができるならデザイン素人は苦労しません。

ここから既存のWebサイトをたくさん見ていきます。デザインパターンを自分の頭の中にストックしていくわけです。デザインの引き出しを増やす、ということです。

この業界はこのパターン
このターゲット向けにはこのパターン
流行りのデザインはこんなパターン

ターゲットや目的によってパターンはある程度決まってます。

Webギャラリーを利用してWebサイトをたくさん見る

最新のおしゃれなWebサイトを集めたサイトを「Webギャラリー」といいます。

検索エンジンで「Webギャラリー」と検索すれば色々なサイトがでてくるのでそれを活用します。

たとえば

I/O3000

MUUUUU.ORG

Web Design Clip

Responsive Web Design JP

bookma! 

です。業界別、色別など検索機能もついていたり自分が制作する業界業種、色合いを検索して調べていくことになります。Webギャラリーは他にもいろいろあります。自分が検索しやすいギャラリーを見つけてみてください。

(参考までに、バナーだけを集めたギャラリーもあります。例:Banner Matome

競合他社を検索してWebサイトを見る

製作するWebサイトの競合となるサイトを見て、だいたいどのようなパターンで制作されているかを見ます。

制作対象となる業界名で検索したり、

知っている競合他社があれば直接検索してみたり、

してWebサイトがどんなデザインか見に行きます。

ここで確認すべきポイントは

アピールしているポイントはどこか

です。

何が強みで、それを分かりやすくどうやってデザインしているのか

を確認する、ということ。

デザインとは情報の整理、アピールポイントを表現する方法を考えるクセをつけるといいです。

便利なWebサイト保存ツールを使う

このWebサイトいいな、と直感的に思えば保存していきます。ブラウザのお気に入りにいれていけばいい、ということ。

ただ、お気に入りに入れていると一目でどんなサイトか分からないので不便を感じることがあります。

そこで、スクールに通った時スタッフの人に教えてもらったが、

Pinterest(ピンタレスト)

というツール。これ便利。

未来の自分のために情報を集めるツール

だそうです。

簡単に言うと気に入ったWebサイトを保存できて、保存したWebサイトが画像で一目で分かるからとても見やすい!というツール。

カテゴリごとに分けることもできるから保存にはぴったりです。

本を活用する

体系だててカテゴリ―ごとに把握するには、本が分かりやすいです。自分で検索して調べていると検索ワードに偏りがでてきたりしますしね。

オススメは、

Webデザイン良質見本帳

印象から考えるデザイン、配色から考えるデザイン、業種・ジャンル別から考えるデザイン、レイアウトや構図から考えるデザイン、とカテゴリー別に事例豊富に紹介してくれています。
デザインのトレンドも紹介されているのがいいです。この目的だとこういうパターンね、というのが整理されているのがGOOD!

その4:「目的」と「デザイン理論」から見本デザインを選ぶ

「目的」と「デザイン理論」から見本デザインを選ぶ

①目的整理

デザイン理論の活用でお伝えした

誰に、何を、なぜ

ということを整理します。目的の整理です。ここを見えるところに書きだしておくのもいいです。

最初に「企画」していれば、目的とターゲットが明確になっているはずなのでそこから書き出します。

誰に、何を、なぜが整理出来たらこのイメージに合うレイアウト、配色、画像とイラスト、書体を考えます。

「誰に、何を、なぜ→レイアウト、配色、画像とイラスト、書体」

②なんとなく見本をいくつも選んでみる

次に、たくさんみたWebサイトから制作目的に合いそうだ、と思うものをいくつも選びます

このデザインの方向性は合ってる、と思えれば選んでOK。初心者であればあるほど数多めに選んでおいた方がいいです。直観的にこれかな、と思えれば選んでおきます。

図だけ使える、と思うWebサイトもあれば選んでおきます。パーツだけ使える、というのも対象とは違う別の業界のWebサイトで見つかったりするので幅広く見ておくとストックになります。

製作対象業界のWebサイトをたくさん見ると、パターンが見えてきます。上級者になると、違う業界やWeb以外のデザインからイメージを作るのかもしれないですが、初級者は同じ業界、ターゲット、目的のサイトをピックアップすれば大きくは外すことはないです。

③見本を選別する

「①目的の整理」で整理したデザインイメージ(レイアウト、配色、画像とイラスト、書体)と比較してみてこのデザインは違うな、と思ったら選択から外す、という感じ。

その5:見本デザインを混ぜ合わせてオリジナルにする

見本デザインを混ぜ合わせてオリジナルにする

「その4」でいくつか選んだ見本デザインのレイアウトやパーツを混ぜ合わせていく、というのが最後の作業。(見本が1,2個だけだとパクリサイトになってしまう可能性があるので要注意。)

「設計」で作った「ワイヤーフレーム」にそって、見本デザインのパーツをあれこれ配置していきます。

(「設計」についてはまた別の記事で書いてみます)

最初の自分のやり方は

・10個くらい見本を選んで全てデザイン模写して微妙に自分なりに変えてみて(ロゴとかを制作する本番用に変えてみるとかキャッチコピーを変えてみるとか)

・できた模写デザインからベースデザインを決めて

・ワイヤーフレームの構成に変換してみて

・パーツやらレイアウトやらを他のと入れ変えたり組み合わせて

オリジナルデザインにしていきました。最初のやり方なので非効率かもしれませんが練習も兼ねての製作方法です。

まとめ:とにかくいろんなWebサイトを見て模写してみる

理論を学習しても正直どうやって使えばデザインできるのかデザイン初心者には分かりません。

多くのWebサイトを見て、模写して、手を動かすことで自分の頭の中にパターンが蓄積されて、アウトプットできる、という流れです。

手を動かして実際作ってみないと細かい線の細さや影の使い方、行間のとりかた、など頭に入ってこないです。だから模写は効果がある、と言われます。見本と全く同じにしなくても微妙に変えてみてもいいです。微妙に変えてみると分かるのですが、線の細さやフォント種類などを変えただけなのにダサくなる、というのはよくあります。

最初は、蓄積パターンがないからとにかく組み合わせてオリジナルにしていくのが早いです。あまりに似ていたらよくないのでそこは完成後、客観的に誰かに見てもらうのもいいですね。

あと、スクールの卒業制作時にどれだけのWebサイトを見たかというと100サイトは見ました。デザイン経験有りのスクール同期も100サイトは見た、と言ってました。

 

スクールのLIVE授業で話をすることができた現役Webデザイナーの方に、

どうやってデザイン考えてるんですか?

と聞いたとき、

見る人を憑依させるのだ

と言っていた記憶があります。見ている人になりきってその人なら何を見るかをイメージする、ということなんだと思います。

うーむ、初心者には参考にならん、、

 

スクールに通ってて卒業制作どうしよう、と思う人にも参考にしてもらえると幸いです。

 

この記事はここまでです。

未経験からWebデザインを勉強する効率のいい手順
情報発信しています♫