【初心者向け】Webデザインの練習はえんぴつとノートから始める

ゆーへー

Webデザインって何から勉強したらいいのだろう?よくサイトコピーしてたくさん作れっていうけど、本当にそれでいいんだろうか?

こんにちは。ゆーへーです。
Webデザイナーになりたての方、先輩からパクったらえーんだって言われて、パクったものの。
まとまりのないサイトが出来てませんか?もしくは、パクリもとにないコンテンツがあったりして制作に時間かかってたりしませんか?

パクるのは、悪いことではないけど、丸パクリだと作りたいサイトが作れない場合が結構あります。
散々パクリまくってダメだと気付きデザインを見直した自分がその問題の解決案を提案します。

というわけで、

  • デザインに時間がかかってしまう方
  • うまくデザインがまとまらない方
  • これからデザインを勉強したい方

に読んでほしい。

本記事の内容

  • Webデザインもラフから入ろう
  • 良いサイトをパクる事から始めよう
  • ラフデザインの大切さは、初期段階に気づく
  • デザインの基本は同じ

では、さっそく(^^)/

Webデザインもラフから入ろう

ぼくは、「さー、デザインを起こすぞ!」って時、ノートや紙に適当にラフ案を作ってから作ります。

サムネみたいなこんなきれいじゃない!もっと雑!!
初期の初期。提案を出す前は、何が必要でどういう見せ方にするかなど、紙に起こしていきます。

✔ 紙に手書きで書くメリット

  • 手書きの方が早い
  • 余計な情報がなく、アイディアを出しやすい

最初の段階では、きれいさなんてのはどうでも良くて、どんなサイト、デザインにしていくかを考えるべきです。

手書きだと、デザインにコメントが書きやすく、余計な情報がないためアイディアをまとめやすい。
パソコンの方が慣れてるから!ってのであればそれでも良いですが、圧倒的に手書きの方が早いです。

illustratorやPhotoshopなんかでラフ作ってるとちょっとした余白とか気にしちゃいませんか?
色とか付けっちゃったりとか。初期段階では不要な作業です。

良いサイトからパクるところから始めよう。

ぱくろう!ぱくろう!ぱくろう!

学生時代とか、いろんなサイトを見てました。
就職してからも良いサイトをずーっと見てました。仕事中も(/ω\)

自分にないものをいくら考えても仕方ない。他の人からアイディアもらっちゃいましょう。

アイディアはどんどん盗んでOK。
良いサイトがあれば、じっくり観察する。
この表現かっこいいとかアニメーションが良いとか。余白のあけ方がいいとか。

どんどんパクればいい。アイディアをパクれ。動きをパクれ。色使いをパクれ。

引き出しが多い方が良い。▼よく見てるギャラリーサイトです。
>[初心者必見]見てパクれ!Webデザインの参考サイトギャラリー

使い方としては、作りたいサイトのイメージカラーで探す方がいいかなーって思います。
色が与える印象ってのがまぁだいたいあって、それにそって探すとイメージに近いサイトが見つけやすい。
※同業種とかでパクると、どえらい騒ぎになるかもしれないから絶対しないこと。

いうまでもありませんが、デザイン丸パクリだとまったく成長しません。
あくまでアイディアの引き出し増やすのにパクるのは良いという話です。

ラフデザインの大切さは、初期段階に気づく

少し話がそれますが、大阪の会社をやめて4年ほどデザインから離れてました。
そんで、地元のデザイン事務所に入った当初は、今までえんぴつで作ってたのをすっかり忘れ、パソコンでデザインパクリまくっていろいろサイトを作ってました。

パクって作るとたまに問題が出てくる事があります。

  • 一つのサイトからパクると完全にパクリ作品なのでNG
  • 複数のサイトからパクるとうまくまとまらない

ラフ書かずにやってきた当時は、デザインがうまくまとまらず悩んでいる時間がかなり多かった。
今思えば、案件がたくさんあったけど、なかなか終わらせれなかったのはこれが原因の一つだと思います。

デザインってのはまとまり、統一感が大事。

散々パクった結果わかったのは、寄せ集めなサイトはどこかで違和感が出るし、何を見せたいのかがわからなくなる
修正や予期せぬ追加ページがあるとあれれ?このパターンはどう見せればいんだろう?と悩む時間も増える。

アイディアの引き出しを増やすためにいろいろ見ることは大事だけど、なぜそのアニメーションや見せ方が良いのかを考えるべきだと思います。

デザインの基本はすべて同じ

紙もWebも基本は同じだと思います。見る媒体が違うだけ。

紙や新聞だとFパターンで作るなんて言いますが、Webも同じです。
基本は、右上から下に移動してみていきますよね。

デザインで注意すべきは、余白と整列

余白と整列を意識するだけでそれなりに見栄えの良いものができます。
整列しすぎると面白味のないものが出来てしまいますが、おかしくはありません。

ずいぶん前に買った本ですが、基本的な事が書いてある。

デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業

デザインは、適当ではできません。
ルールにそって作っていきます。

デザインに時間がかかる人がやるべきこと

  • 基礎知識を学ぶ
  • いきなり作らず、ラフのラフを作る
  • デザインのひきだしを増やす

ぼくは、バイト以外ではデザイン系の仕事しかやってきませんでした。
デザインってのは楽しく作りたいし、他に出来る事がぼくにはありません。

悩んで悩んで出した案が通って結果が出たら最高に気持ちいいです。
下請けなので名前は出せませんが、去年は旅行系サイトで珍しい賞もらったりしました。
僕だけの力でとったわけじゃないのですが、デザインが大企業に認められたのは嬉しかった。

今は、コーディング業メインですが、デザインもたまにしてます。
フリーランスは複数スキルがないと厳しいですから、デザインやっててよかったーと思う今日この頃。
今思えば最初のくっそ安い給料だったけど、下積み時代も無駄じゃなかったんだな。

▼デザインの基礎勉強にオススメの本はこちら▼

上で紹介した本です。バナーとか作るのにも役に立つ知識かと思います。
デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業

この記事を書いた人

Yuhei Katayama

【フロントエンドエンジニア】

2014年よりフリーランスとして活動開始、3年目。タイが好きでよく行く。人手不足を補うをもっとうに仕事しています。HTML、Wordpress、EC-CUBE、MakeShop、カラーミーショップ、楽天のカスタマイズ経験あり。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

赤ヒツジ先生~コーディングチェック~

このサービスは、コーディングのHTMLチェックではなく、デザイン通りにコーディングできているかをチェックするサービスです。