未経験からWebデザイナーになる場合、「何から始めたらいいのか？」「どんなソフトや道具が必要なのか？」など、分からないことだらけだと思います。
僕も未経験からWebデザイナになりましたが、当時は何から始めたらいいのか全く分からない状態でした。
これからWebデザイナーになろうとしている方に向けて、過去の自分の経験を基にWebデザイナーになるまでの流れを解説します。
また、必要なスキルやソフトについても触れていきます。
目次
未経験からWebデザイナーになるまでの流れ
まずは結論から。
未経験からWebデザイナーになるまでの流れは下記の通りです。
- 必要なソフトや道具を揃える
- 必要なスキルを身につける
- ポートフォリオを作成する
- Web制作会社に入社する
Webデザイナーになるために資格や学歴は必要ありません。
必要とされるスキルを身につけ、そのスキルをしっかりアピールすることが重要です。
ひとつずつ詳しく解説していきます。
Webデザイナーに必要なソフトや道具を揃える
Webデザイナーになるために必要なソフトや道具は以下の3つです。
- パソコン
- グラフィックソフト
- テキストエディタ
ひとつずつ解説していきます。
Webデザイナーに必要なパソコン
Webデザイナーになるためにはパソコンは必須です。
グラフィックソフトを動かすためにパソコンにはある程度のスペックが要求されます。
すでにパソコンを持っている場合でも、自分のパソコンがグラフィックソフトを動かせるスペックか確認しましょう。
僕が必要と思うパソコンのスペックは以下の通りです。
- CPUはCore i5以上
- メモリは16GB以上
- ストレージはSSDが理想
CPUはCore i5以上を選びましょう。
Core i3だと処理速度が遅く、グラフィックソフトの動作がもたつく可能性があります。
メモリは多いに越したことはありませんが、最低でも16GBは必要だと思います。
グラフィックソフトは多くのメモリを消費するため、メモリ不足になるとパソコンやソフトが固まり、作業中にストレスを感じてしまいます。
ストレージはSSDが理想的です。
HDDと比べて、パソコンやソフトの起動や動作が段違いに速くなります。
ただし、SSDは高価なので予算が厳しい場合は、SSDとHDDを組み合わせてあるパソコンでも大丈夫です。
僕が使っているiMacは、SSDとHDDと組み合わせたフュージョンドライブというストレージです。
Webデザイナーに必要なグラフィックソフト
Webサイトのデザインを作成するためにはグラフィックソフトが必要です。
Webデザインで主に使われているグラフィックソフトは以下の3つです。
- Adobe Photoshop
- Adobe Illustrator
- Adobe XD
各ソフトの特徴を簡単に解説します。
Adobe Photoshopの特徴
以前はWebデザインで一番使われていたソフトがPhotoshopです。
基本的には画像編集ソフトですが、機能が豊富なのでWebサイトのデザインからバナーのデザインに使われています。
最近はIllustratorやXDでWebデザインする方が増えてきましたが、Photoshopでデザインする方もまだまだ多いです。
仮にWebサイトのデザインで使わなかったとしても画像編集で必要になります。
Adobe Illustratorの特徴
元々は印刷物をデザインする際に使われることが多かったソフトです。
ポスター、フライヤー、ロゴなどのデザイン作成を得意とします。
バージョンアップを重ねるごとにWebデザイン向けの機能が追加され、今ではIllustratorをメインで使うWebデザイナーも少なくありません。
また、イラスト素材や背景素材などはIllustratorのデータで配布されていることが多く、それらの素材を開く際にも必要になります。
僕もWebサイトをデザインする際はIllustratorをメインで使うことが多いです。
Adobe XD
PhotoshopやIllustratorと比べると歴史が浅く、ここ数年で登場したソフトです。
Webデザインに特化した機能が豊富なことや、動作が軽いことなどからXDを使うWebデザイナーはどんどん増えています。
ワイヤーフレームというWebサイトの設計図や、プロトタイプを作成する際に使う方も多いです。
今後、XDを使うWebデザイナーは増えていくと思うので、揃えておいて損はありません。
Adobeの利用プランについて
XDは無料で利用できますが、PhotoshopとIllustratorはサブスクリプションなので利用している限り料金が発生します。
Adobeには様々な利用プランがありますが、一番おすすめのプランはAdobeの全てのソフトが利用できる「コンプリートプラン」です。
「コンプリートプラン」であれば、PhotoshopとIllustratorを利用できますし、その他にも様々なソフトを利用することが出来ます。
PhotoshopとIllustratorは単体で契約することも出来ます。
Photoshopを単体で契約する場合は、「Photoshop 単体プラン」より「フォトプラン」の方がお得です。
Adobe Creative Cloudのおすすめプランについては、以下の記事で詳しく解説しているので良かったら読んでみてください。
Webデザイナーに必要なテキストエディタ
WebサイトはHTMLやCSSという言語で作られていて、そのHTMLやCSSを書くために必要なソフトがテキストエディタです。コードエディタとも呼ばれます。
Macには「テキストエディット」、Windowsには「メモ帳」というソフトがインストールされていますが、テキストエディットやメモ帳もテキストエディタです。
テキストエディットやメモ帳でHTMLやCSSを書くことも出来ますが、HTMLやCSSを書くことに特化したテキストエディタを使った方が効率的です。
僕がおすすめのテキストエディタは以下の3つです。
- Adobe Dreamweaver
- Visual Studio Code
- Brackets
それぞれのテキストエディタの特徴を紹介します。
Adobe Dreamweaverの特徴
DreamweaverはPhotoshopやIllustratorと同じくAdobeが開発しているソフトです。
構築中のWebページのプレビューを見ながらHTMLやCSSを直感的に編集でき、HTMLやCSSの入力補助が充実しているので初心者におすすめです。
初心者のうちはDreamweaverは使いやすいですが、HTMLやCSSに慣れていくとVisual Studio Codeなどに移行する場合が多いと思います。
Visual Studio Codeの特徴
Visual Studio CodeはMicrosoftが開発しているテキストエディタです。
無料で利用できるのに機能が豊富で動作も軽くとても使いやすいです。
拡張機能やデザインテーマが数多く公開されているので、自分好みに機能やデザインをカスタマイズすることができます。
テキストエディタに関しては、とりあえずVisual Studio Codeを選んでおけば間違いありません。
僕の周りのWebデザイナーやプログラマーもVisual Studio Codeを使っている方が多いです。
Bracketsの特徴
BracketsもAdobeが開発しているテキストエディタです。
HTMLをリアルタイムでプレビューできる「ライブプレビュー」や、CSSを効率的に編集できる「クイック編集」など、HTMLやCSSのコーディングに特化した機能を持っています。
また、拡張機能をインストールすることで必要な機能を追加することもできます。
HTMLやCSSのコーディングにおすすめのテキストエディタについては、以下の記事で詳しく紹介しているので良かったら読んでみてください。
Webデザイナーに必要なスキル
WebデザイナーにはWebサイトをデザインするスキルと構築するスキルが必要になります。
必要なスキルをひとつずつ解説していきます。
グラフィックソフトの操作
Webサイトやバナーのデザインを作成するためにPhotoshop、Illustrator、XDを使いこなす必要があります。
ただし、WebデザインではPhotoshopやIllustratorの一部の機能しか使わないので、全ての機能を使いこなす必要はありません。
くれぐれも全ての機能をマスターしようとは思わない方がいいです。
HTMLとCSS
WebサイトはHTMLという言語で作られていて、CSSという言語で装飾されています。
HTMLとCSSの知識がないとWebサイトを構築したり更新したり出来なため必須スキルとなります。
ちなみにHTMLとCSSでWebサイトを構築する作業をコーディング と言います。
レスポンシブWebデザイン
現在はスマートフォンでWebサイトを見る方が多いため、Webサイトをスマートフォンで見やすいように最適化する必要があります。
ひとつのHTMLをCSSによってスマートフォンとパソコンでデザインを変える手法を「レスポンシブWebデザイン」といいます。
まずはHTMLとCSSでWebサイトをコーディングできるようになることが大切ですが、HTMLとCSSに慣れてきたらレスポンシブWebデザインにも挑戦しましょう。
以下の記事でレスポンシブWebデザインについて解説しているので、良かったら読んでみてください。
JavaScript
HTMLとCSSでコーディングしたWebページは、JavaScriptで動きを付けることが出来ます。
例えば、画像をスライドさせたり、スクロールに合わせて要素をアニメーションさせたり色々な動きを実装することができます。
JavaScriptの使いどころは多いので、HTMLとCSSの次に身につけたいスキルです。
WordPress
WordPressとは元々はオープンソースのブログソフトでした。
しかし、カスタマイズ性の高さから現在ではWebサイト制作に使われることも多いです。
世界中のWebサイトの3割から4割はWordPressで作られていると言われています。
実際に僕が携わるWebサイトも8割以上はWordPressで作られています。
Web制作の現場でWordPressのスキルを求められることは多いので、ぜひ身に付けておきたいスキルです。
ポートフォリオを作成する
Webデザイナーに必要なスキルを学んだら自分のスキルをアピールするためのポートフォリオを作成します。
PhotoshopやIllustratorでデザインカンプを作る
まずはPhotoshopやIllustratorを使ってWebサイトのデザインカンプを作ります。
Webサイトのトップページだけでもいいので、異なるテイストのデザインカンプをできるだけ多く作りましょう。
ポートフォリオは多い方がアピールになりますし、PhotoshopやIllustratorの練習にもなります。
HTMLとCSSでコーディングする
デザインカンプが完成したら、デザインカンプを基にHTMLとCSSでコーディングします。
ソースコードのインデントを揃えたり、コメントを付けたり見やすいソースコードを意識してコーディングした方がいいです。
余裕があればレスポンシブでコーディングしたり、JavaScriptで動きを付けたりした方がアピールになりますが、まずはHTMLとCSSできちんとコーディングできていることが大切です。
WordPressでWebサイトを構築する
HTMLとCSSでコーディングしたWebサイトをWordPressで構築できればかなりのアピールポイントになります。
場合によっては即戦力として見てもらえるかもしれません。
ただし、WordPressの学習には少し時間が掛かるのでHTMLとCSSのポートフォリオが完成したら就職や転職活動を開始した方がいいと思います。
仕事を探しつつWordPressの学習を同時進行するのがオススメです。
Web制作会社に入社する
Webデザイナーに必要なスキルを身につけたらいきなりフリーランスになるという道もありますが、僕はWeb制作会社に入社して経験を積む方がいいと思っています。
Web制作会社はさまざまなジャンルのWebサイト制作に携わることが出来るので面白いし勉強になります。
Web制作会社で経験を積んだ後にフリーランスとして独立するのも全然ありです。
Web制作会社に入社するためにはどれくらいのスキルを持っているかを重視されます。
スキルをアピールするためにはポートフォリオが有効なので、ポートフォリオは出来る限り作り込んでおきましょう。
就職や転職活動にはエージェントを使うといいです。
もしスクールに通っている場合はスクールが仕事探しを手伝ってくれる場合もあります。
未経験からWebデザイナーになるまでのまとめ
Webデザイナーに求められるスキルは増えてきていますが、まずはPhotoshopやIllustratorの使い方を学び、HTMLとCSSでWebサイトをコーディングできるまでを目指しましょう。
そこまで出来るようになれば、ポートフォリオを持って仕事探しを始めた方がいいと思います。
アピールできるスキルは多いに越したことはないので、仕事探しと同時進行でレスポンシブWebデザイン、JavaScript、WordPressなどのスキルを学習し、スキルが増えるたびにポートフォリオに加えていきます。
以上が未経験からWebデザイナーになるための流れでした。
webデザイナーを目指している方の参考になれば嬉しいです。