今回は、WEBデザイン初心者がやるべき３つの勉強について、実体験からの学びを踏まえて紹介します。
「WEBデザインは何から勉強をすれば良いの？」
「オススメの勉強方法は？」
こういった疑問をこの記事を読めば、解決できます。
Contents
WEBデザイン初心者がやるべき3つの勉強
まずは、WEBデザイン初心者がやるべき３つの勉強についてご紹介します。
- IllustratorとPhotoshop
- HTMLやCSSのコーディング
- JavaScript
① IllustratorとPhotoshop
1つ目は、デザインをする上で重要なスキルのIllustratorとPhotoshopの勉強です。
このツールは、Adobe社が提供しているソフトで、WEBサイトやチラシ、名刺などのデザインを作成する際に使います。
IllustratorやPhotoshopについて詳しく知りたい方は、以下の記事を読んでみてください。
IllustratorやPhotoshopを使うためには、Adobe Creative Cloudなどのライセンスを購入する必要がありますので、ご注意下さい。
② HTMLやCSSのコーディング
２つ目は、HTMLやCSSのコーディングの勉強です。
HTMLやCSS言語でコーディングを行うことで、IllustratorとPhotoshopでデザインしたWEBサイトを実際にブラウザ上に表示できるようにしていきます。
初心者の方には、HTMLやCSSのコードを見ると少し難しそうだと感じると思いますが、私の経験上、プログラミング言語の中でもHTMLやCSSは簡単な言語だと思います。
そのため、初心方でも積極的に勉強していくことをオススメします。
ちなみに、HTMLとCSSは以下のような役割になっており、２つの言語を組み合わせて使います。
| HTML | 文章の構造を作成 |
|---|---|
| CSS | 文字の色の変更や装飾 |
③ JavaScript
３つ目は、JavaScriptの勉強です。
JavaScriptは、HTMLやCSSと組み合わせることで、動きのあるWEBサイトを作成することができます。
例えば、JavaScriptを使うと、お問い合わせフォームの中でメールアドレスを入力する際に、適切な形式で入力されたかをチェックする機能を作ることができます。
このように、JavaScriptを使うと、ユーザーのデバイス上で即時にタスクを処理することができるようになります。
オススメの勉強方法
次に、これまで紹介した３つの勉強のオススメの勉強方法についてご紹介します。
① IllustratorとPhotoshop
まずは、IllustratorとPhotoshopのおススメの勉強法を4つ紹介します。
- 基礎を固める
- 説明を受けながら真似して作る
- 参考になる作品を見て、真似して作る
- 自身で考えて作る
基礎を固める
IllustratorやPhotoshopは、デザインのセンスだと言われることもありますが、天性的なスキルだけではありません。
まずは、IllustratorやPhotoshopを使うためには、基本ツールや使い方をマスターしなければなりません。
そのための勉強方法は、Youtubeを見ながら勉強をすることをオススメします。
「Illustrator 基礎」などど検索すると、沢山の動画がでてきますので、自身のレベルにあった動画を見つけて、まずは基礎を固めましょう。
説明を受けながら真似して作る
ある程度、基礎が固まってきたら、次は実際に説明を受けながらマネして作ってみましょう。
この勉強もYouTubeでできます。
例えば、「Illustrator 名刺」で調べると、名刺の作り方を紹介してくれる動画が見つかるはずです。
その時におススメの動画は、実際に作業しているPC画面を映しながら説明している動画です。
初めて、名刺などの制作物を作る場合に、言葉だけの説明だとなかな理解することができません。
そのため、真似して作る場合は、丁寧な説明動画を参考にしましょう。
参考になる作品を見て、真似して作る
次に、参考になる作品を見て、真似して作ってみましょう。
この勉強法は、自分が見た作品を同じように作るために、どうしたら良いかを試行錯誤することができます。
たとえば、目の前にあるポスターを作ってみるだけで、新たなデザインスキルを習得できます。
私は、WEBサイトを閲覧している際に表示されたWEB広告を作成しましたが、細かなデザインなど思ったより難しく、わからないことはネットで調べるので、とても勉強になりました。
自身で考えて作る
最後は、１からデザインの構成を考えて、作成してみましょう。
これまで、基礎を学んできたベースがあると思うので、まずは構成案から時間をかけましょう。
WEBデザイナーとして仕事をする際は、全て自身で考えてデザインを作る必要があります。
そのため、この勉強法は、より実践に近い勉強方法だと言えます。
② プログラミング言語のコーディング
次に、HTMLやCSS、JavaScriptのコーディングの勉強方法を3つ紹介します。
- プログラミングの基礎を固める
- WEBサイトを参考に作る
- 自身で考えて作る
HTMLとCSSの基礎を固める
まずは、HTMLとCSS、JavaScriptの基礎を固めていきましょう。
基礎を学ぶ上で重要なのは、以下の3点を理解することだと思います。
- 各言語の相関関係
- コードの基本ルール
- 基本の構造と要素
まずは、この3点を理解することで、各言語の理解も深まると思いますので、上記を意識して勉強されることをオススメします。
WEBサイトを参考に作る
次に、基礎を固めたら、WEBサイトを参考にしながら、実際に作成してみましょう。
例えば、参考にしたいサイトを開き、以下のコマンドを押すことで、ソースコードを出すことができます。（※Chromeの場合）
・Windows・・・Ctrl ＋ U
・Mac・・・option ＋ command ＋ U
まずは、この方法でソースコードを見ながら、WEBサイトを作成していきましょう。
自身で考えて作る
最後は、１からデザインの構成を考えて、作成してみましょう。
作成手順は以下のようなイメージです。
- 要件定義（誰にどんな情報を伝えるかを整理）
- PhotoshopやIllustratorを使ってサイトデザイン案を作成
- コーディング
WEBデザイナーも上記の手順を踏んでWEBサイトを作成しております。
おそらく、初めてだと1か月以上はかかると思いますが、全部の工程を作ることで、自信にも繋がると思いますので、ぜひ諦めずに作成してみましょう。
もっと効率的に学ぶ方法
最後に、もっと効率的に学ぶ方法があります。
それは、オンラインスクールに通うことです。
もちろん費用がかかるため、全ての方にオススメできる方法ではありませんが、より効率的に学ぶにはとても良い方法だと思います。
オススメのプログラミングスクールについては、以下の記事で紹介しております。
まとめ
今回は、WEBデザイン初心者がやるべき３つの勉強とおススメの勉強方法についてご紹介しました。
ここでご紹介した内容は、短期間でWEBデザインのスキルを身に付けたい方に、とても参考になる方法だと思いますので、ぜひ実践して頂けたらと思います。
