メニュー

ピストグループ株式会社 | 未経験の私でも半年でWEBデザインを習得できた、たった7つのSTEP
文系の私でもトレンドのテンプレートなどを参考に独学でウェブデザインを習得できた7つのステップをご紹介します。
22774
single,single-post,postid-22774,single-format-standard,ajax_updown_fade,page_not_loaded,,select-theme-ver-2.2,wpb-js-composer js-comp-ver-4.5.2,vc_responsive

未経験の私でも!半年でWEBデザインを習得できた、たった7つのSTEP


本記事で学べる内容

未経験でもWEBデザインを習得できる

習得するまでの近道を知れる

WEBデザインを学んでみたい、WEBデザイナーになりたい、自分WEBサイトから情報を世の中に発信したい、このような目標を持っている方は非常に多いのではないでしょうか?

 

ですが、WEBデザインというと『HTMLやCSSが難しそう』『どこから始めればいいか分からない』など、日常的にWEBサービスにはよく触れているが、それをどのように習得していくかという道筋は全くもって見当がつかないものだと思います。

 

私も初めはあなたと全く同じで、プログラミングの本を読んでも全く分かりませんでしたし、そもそもデザインという所において全くセンスがありませんでした。(学生時代美術の成績は平均以上をとった事がありません)

 

そこで今回は、未経験の私が半年でWEBデザインを習得出来た7STEPをご紹介したいと思います。

目次

1.まずはグラフィックデザインを学ぶ

・1-1.illustrator・photoshopを導入する

・1-2.デザインの原理・原則を学ぶ

・1-3.徹底的に模倣する

2.WEBサイトを作る

・2-1.HTML・CSSを学ぶ

・2-2.参考サイトを見ながら要素に触れる

・2-3.テンプレートを手順通り作ってみる

・2-4.参考サイトを完全コピーする

3.まとめ

1.illustrator・photoshopを導入する

WEBデザインとなるとまずは、HTMLやCSSなどを想像されると思いますが、私の場合は先にグラフィックデザインを学びました。当初はそこに理由などなかったのですが、あとあとグラフィックデザインを先に習得しておいてよかったと痛感しました。その理由は、

 

・グラフィックデザインを習得しておく事で表現の幅が広がる

・他との差別化を図りやすい

 

そもそも、WEBデザインする際に自分の頭の中のものを創造できるツールがなければ思い通りのWEBデザインを作り上げることは難しいですよね。

1-1.illustrator・photoshopを導入

WEBデザインする際に必ずといっていいほど必要になる、illustrator・photoshopなどのグラフィックソフト。大抵どのウェブ制作会社でも、上記の二つが使われています。

illustratorもphotoshopもプロ用のソフトで無料では出回っていません。今、二つのソフトを使えるようにするにはAdobeが提供する月額5000前後のプランに加入して環境を整える必要があります。

初めの段階で月額5000円は大きいと思うかもしれませんが、使い方を覚えたら日常生活でも活用できる機会が多いので、使ってて良かったと思えると思います。

1-2.デザインの原理・原則を学ぶ

世の中にある芸術やデザインというものは、感覚や感性によって作られているものだと思いがちですが、実はそうではなく(一部そういう方もいらっしゃいますが)ほとんどの作品は、ロジックや数字的根拠によって作らています。

デザインの原理・原則ならWEBNAUTさんのこのページを参考にされると良いと思います。原則を4階層に分けて説明されており、最初の段階で読むにはもってこいだと思います。

1-3.徹底的に模倣する

1-1、1-2が終われば次はようやく、実践に入っていきます。初めからオリジナルなクリエイティブなものを作るのではなく、まずお手本となるようなものを選んでそれを完全コピーしてみましょう。お手本も1-2で学んだデザインの原理・原則を取り入れたサイトなどをお手本にすると良いでしょう。

完全コピーすることをパクリだと嫌悪感をいだく人もいるかもしれませんが、それがデザイン上達の一番の近道です。レイアウトや写真の配置、フォントの種類など、全てを模倣してそこから色々なことを吸収してきましょう。

『あ、ここの余白の取り方上手だな』とか『フォントがサイトのイメージとあってるな』とか。

そうしていくうちに、オリジナリティを出す引き出しが増えていきますので、それまでは我慢して模倣に徹することをオススメします。

2.WEBサイトを作る

2-1.HTML・CSSを学ぶ

今は本屋で参考書類などをわざわざ買わなくても、ネットでHTML・CSSについて無料で学べるサービスが充実しています。

その中でも、オススメしたいのが『ドットインストール』です。

私以外にも評価されている方は多いですが、私は実際に使ってみて、基礎中の基礎から学べることができ、動画が説明してくれるのでとにかく分かりやすいです。

また、1つの動画が3分程度なので、サクサク見れます。学び始めて間もない方は分からない言葉も多く、嫌になることが多いですが、これならサクサク学べると思います。

2-2.参考サイトを見ながら要素に触れる

ある程度HTML・CSSの用語を理解してきたら、次は参考にしたいサイトを構成している要素を検証してみましょう。

あなたが参考にしたいと感じた所は、どの様に作られていて、どう表現されているのか。2-1で学んだ用語の復習としてもいいと思います。

とにかく、良いデザインを形作っている要素を自分の引き出しにしまう感覚で要素にたくさん触れてみてください。

2-3.テンプレートを手順通り作ってみる

次は、本やネットにある見本通りのコードを書き、WEBサイトを作ってみる。参考書を買うのがもったいないと思う人はネットでもかまいません。書き写しでも一からサイトを作ってみるとある程度、WEBデザイン、HTML.CSSに対する理解は深まります。

説明を読んで覚えることも必要ですが、インプットしたことをアウトプットすることで技術の定着は早いと思いますので是非一度お試しください。

2-4.参考サイトを完全コピーする

ここまでくれば、ある程度WEBサイトを作れるようになっているはずです。ですが、デザインの構図を考えるための経験値がまだ足りていない状態なので、とにかく参考にしたいWEBサイトを完全にコピーしたものを作ってみましょう。

 

そうすると、自分のデザインの引き出しが増えていきますし、自分がまだ覚えていないHTML.CSSを認識することもできます。

 

初めは出来ないことが多くもやもやするかもしれませんが、そうやって出来ないことに一つづつ線を引いていくと、そのサイトが完全にコピーできた頃には、かなりのデザイン力と技術が身についています。

3.まとめ

最後にまとめとして、

初めはとにかく『模倣する』ことから初めて下さい。

 

完全に模倣することができて初めて、オリジナリティを発揮することができ、一から創造することができます。

 

最初はHTML.CSSなどのコードやillustratorやphotoshopの使い方などで苦戦することもあるかもしれませんが、その過程を『楽しみながら、苦労しながら』経験を積んでいくことで、確実にステップアップしていけますので

是非、この記事を参考に頑張ってみてくださいね。

この記事をシェアする

<li class="fa fa-male" style="vartical-align:middle;"></i> <h4>この記事を書いた人</h4>

中野ゆうた-ウェブデザイナー-
愛媛県大洲市出身のウェブデザイナー。主にPhotoshop,Illustratorを使ったデザイン制作を担当。