webデザインの勉強ってどうやるの?

「webデザイナーになるには何を勉強したらいいの?」

「webデザインの勉強方法でおすすめはある?」

この記事ではそんな疑問に答えていきます。

目次

webデザイナーになるために必要なスキル

まずは、webデザイナーになるために必要な必須スキルのご紹介。

  • サイト制作の基礎知識
  • HTML
  • CSS
  • WordPress
  • Photoshop
  • Illustrator

これにJavascriptやJqueryの知識もあった方がいいですね。

ひとつずつ説明していきます。

サイト制作の基礎知識

  • webサイトを構築するサーバーの仕組み
  • webサイトの仕組み
  • webデザインの考え方
  • サイトの設計・構成

まず、サイトの仕組みやサーバーの仕組みなど、サイト周りの環境について学びます。

最初はサイト制作の概念を理解するのに時間がかかると思います。

HTML・CSS

webサイトを利用する時に、ボタンを押して商品を購入したり、フォームを入力して送信した経験は誰でもあると思います。

ボタンを作るだけならPhotoshopだけで作れますが、実際にボタンとして機能するように実装するのがコーディング作業。

インターホンのボタンを押すとピンポーンと鳴るように、内部で繋げる必要がありますが、そんな感じの事をサイト上でもやっているのです。

WordPress

WordPressは、HTMLとCSSがしっかりと身についた後で学びます。

ブログ機能のついたソフトウェア。近頃は企業のアフィリエイトに参入が増えたことで、wordpressを使ったサイト制作が増えています。このサイトでもwordpressを利用していますよ。

wordpressは、サイト制作の知識がなくても更新できるので、お客さんの方で更新作業ができる事も支持される理由。

1から実装しなくても、wordpressのプラグインという機能をインストールすれば、すぐに解決できることも多く、とても便利です

Photoshop

Photoshopは画像を加工するためのアプリ。

上の写真のような合成画像が作れるソフトで、webデザインではボタンやバナーを作成する時に活用します。

Illustrator

Illustratorは、上の画像のようなイラスト作成や、ロゴやバナーの作成に活用します。(赤べこに特に理由はない)

まずはwebデザインを勉強するために環境を整えましょう↓

webデザインの勉強に必要なツール

テキストエディタ

テキストエディタはHTMLの記述に必要なもの。上の写真のようにコードを記述してサイトを作ります。

実は、デフォルトでインストールされているメモ帳や、テキストエディタでもサイトは作れます。

でも、ものすごく使いにくい上に、実務の現場では決して使わないツールですし、専用のアプリケーションを使用した方が早く記述できます。

webデザインを勉強するにあたって、Adobe CCを購入する人は多いと思いますが、その中にDreamweaverというコード記述ができるアプリが含まれているので、それを利用すればOK。

Dreamweaverは、かつて動作が重くてユーザー離れが起こっていましたが、最近は動作も早くなり良好なようです。

私は、今はAdobeの契約をしてないので、無料のVisual Studio Codaを使用しています。

ワイヤーフレーム

ワイヤーフレームとは、サイト設計の骨格のこと。

デザインの下地みたいなものですね。ワイヤーフレームで画像ググれば出てくるから確認してみて!

私はIllustratorでワイヤーフレームを作り、Photoshopでボタンやバナーなどの部品を作って、ワイヤーフレームに当て込むというやり方で、ページデザインを作っていました。

でも、これは前の話で今の主流ではありません。

クライアントサイドからすると、フィードバックがやりづらい点もあるから、FigmaAdobe XDなど、現場で多く使われているツールを利用して作りましょう。

Figmaは無料で、XDは有料なんだけど、Adobe CCの中に含まれています。

どちらもよく利用されているので、両方触っておくことをオススメします。

Photoshop

PhotoshopはAdobe製品で単体で契約することもできるし、Adobe CCという全てのアプリが使えるプランに含まれています。

Photoshop単体だと1ヶ月契約で2,728円、全てのアプリが使えるAdobe CCだと1ヶ月6,480円です。

Illustrator

Illustratorも単体契約ができ、1ヶ月2,728円です。

サーバー

実は、サーバーを契約しなくても、webサイトは作れるし見れるのですが、サーバーにアップするまでの一連の流れを知っておかないといけません。

それに、wordpressのサイトを作る時にローカル環境(ネット上にアップしていない環境)だと、何かと構築に不便です。

自分のポートフォリオサイトを掲載するにも、サーバー環境は必要なので、レンタルサーバーの契約をします。

ちなみに私は、エックスサーバーを利用しています。早いし管理画面が初心者にも扱える仕様になっているので、使いやすいと思います。

動作確認用の別OSのパソコン

webサイトを納品する時は、必ずブラウザチェックをします。

MacのブラウザとWindowsのブラウザで表示が変わり、デザインが崩れる事があるので両方で確認します。

でも、これはあればという感じ。フリーランスwebデザイナーとしてやっていくなら必須だけど、就職するつもりなら、これだけの為に買うのは勿体ないかなと思います。

今はスマホが主流ですしね。

でも、「ここまでやってます!」と面接で話したらすごく評価はされると思う!

webデザインの勉強方法

  • スクールに通う
  • 動画で学ぶ
  • 独学で学ぶ

これの中のどれかを選ぶではなく、全部やります。

スクールに通いながら、動画を見て学び、足りないところは本を買って学びます。

専門学校や大学のようにじっくり時間をかけて勉強できる環境ならまだしも、それができないのなら、webデザインを身につけるにはハードに勉強をやるしかありません。

webデザインは独学できる?

webデザインの独学は、趣味でやる分にはいいですが、仕事にするには危険です。

例えば、家作りを独学で学んだ建築家が居たとします。その人の作った家に住みたく無いですよね?「本当に大丈夫なのか?」と思います。

ちゃんと建築を学んだ、プロの建築家が作った家に住みたいとやっぱり思います。

webサイトでも同じ事が言えるので、本気で目指すならちゃんと知識を身につける為にプロから学びます。

特に時間とお金がある人は、社会人向けスクールより、専門学校や大学に行って学んだ方がよく身につくし、就職には近道です。

スクールを選びのコツ

  • 課題が実践的
  • 講師が現役のwebデザイナー
  • 質問しやすい環境
  • 質問へのレスが早い
  • 通学制

課題が実践的

1番重視すべきなのは、講師が現役のデザイナーである事と、課題が実践的であることです。

私が行ったスクールもそうだったのですが、課題に出てくる簡単なサイトを組み立て「できました!」みたいなスクールがけっこう多いんですよね。

でも、デジハリでは、実務案件が課題で出ますし、テックアカデミーでは、コース終了後、必ず1ヶ月以内に仕事を紹介し、納品まで講師に相談できるサービスがあります。(テスト合格後)

少々ハードですが学べることは大きいと思います。

質問しやすい環境

webサイト制作で初心者がつまづくポイントは、わからない所があった時に一人じゃ解決できないところ。

先生に聞けば1発でわかるのに、聞く事ができない環境だと、1日ならまだしも1週間くらい溶かしてしまうこともあります。。

通学なら講師の数が生徒10人に対して2人くらいいると安心です。

オンラインのスクールなら、フィードバックを24時間に必ず返信してくれること。画面共有で質問できることがマスト。

上に書いたデジハリとテックアカデミーは両方とも画面共有ができます。

通学制

通学制で、なおかつクラスで授業を受けるタイプだと、かなり成長できるのでオススメ。

ひとりで学習しているより、みんながいる方がモチベーションも上がるし、お尻に火がつきます。

人の作品を見る事はとても勉強になるし、何より人脈が広がります。

webサイト制作はひとりで行う孤独な作業。壁にぶつかった時に相談しあえる同士がいると心強いです。

最近は、ツールの使い方は動画教材で覚えて、サイト制作の段階になったらオンラインや対面授業というスタイルが増えてきています。

このスタイルだと毎週通わなくてもいいので、仕事をしながらでも学びやすい環境になっています。

webデザインの勉強にかかる期間目安

スクールの勉強にかかる期間目安
  • 基礎講座…3ヶ月
  • 基礎+実践的講座…6ヶ月

私は3ヶ月の講座に通った経験がありますが、HTMLとCSSの書き方と、Adobeツールの使い方しか学べなかったので、全くオススメできません。

それにわからない所が出てくるのは、自分でサイト制作をするようになってからなので、その前に講座が終わってしまうと、質問ができないです。

3ヶ月の学習で、やっとツールを使いこなせるようになっただけの人を、webデザイナーとして雇ってくれるところは少ないでしょう。

正社員で就職したいなら尚更、半年〜1年は勉強期間と決めて、打ち込んだ方が結果的に良いと思います。

webデザインの勉強に役立つブログ

webクリエイターボックス

webクリエイターボックスは、海外でwebデザイナーの仕事をしていたmanaさんが書いているブログ。

web業界は移り変わりが早いので、英語サイトを見れればいいんだけど、読みにくいので躊躇してしまうこともあります。

でも、Manaさんのブログを見れば、最新のwebデザイン情報をいち早く入手できるので、よく見ていました。

あと、サイトの作り方について、とても丁寧に解説してくれるので、初心者にもわかりやすいと思います。

バズ部

バズ部は主に、SEO対策についてと、wordpressの使い方の記事を参考にしていました。

本よりもバズ部の方が参考になることもありました。

有料級の価値ある情報をわかりやすく教えてくれます。

PHOTOSHOP VIP

photoshop vipは、フリー素材が充実しています。

無料ブラシの素材でクオリティの高いものが多く、よく利用させてもらっていました。

惚れ惚れするような格好いいロゴや、画像加工の仕方などが学べます。

見ているだけでワクワクして、デザインのインスピレーションが湧きます。

まとめ:webデザインの勉強について

「webデザイナーってこんなに勉強することが多いのか…」と、この記事を見て疲れてしまったかもしれません。

でも、実はここに書かれていることは、ほんの一部で、他にSEOの知識や、プログラミングの知識、場合によっては、マーケティングの知識が求められることもあります。

まずは、基本からコツコツと学んでいきましょう!

それでは、一緒にがんばりましょう!チャオ♪

↓この記事がちょっとでも良いと思ったら、ぜひポチッとお願いします^^↓

ブログランキング・にほんブログ村へ 人気ブログランキング
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

未経験から在宅のフリーwebデザイナー歴5年→アフィリエイター歴6年くらい(1年目数万円→2年目→300万ちょっと→3年目目以降600万〜800万)→3年ブランクを経て再びブログに挑戦中。主婦ブロガー。
デザイナー時代から在宅で仕事をしてきた為、もう外で働けない人。
家にいながらお金を稼ぐ方法を、四六時中考えています。

コメント

コメントする

目次