Webデザイナーになるには？未経験のための実践的フロー

2022年2月8日

Webデザイナーになりたいけれど、未経験からWebデザイナーになるのは難しいと考えていませんか？特に、30代からの未経験スタートではもう遅いと考えている人は多いのではないでしょうか。

実務経験がない分、経験者より不利になることは否めないものの、未経験からWebデザイナーになった人はたくさんいます。独学でWebデザイナーになることも決して不可能ではないのです。

そこで今回は、未経験でも独学でWebデザイナーになるための実践的フローを解説します。Webデザイナーになるために揃えておくべきもの、Webデザインやツールの勉強方法、身につけておくべきスキルなどについてまとめました。

＜この記事に関連する記事＞

Webデザイナー案件を提案してもらう

Webデザイナーとは？職務範囲は意外と広い

Webデザイナーとは、WebサイトやLP、バナーのデザイン作成を担当する職業のこと。サイトのレイアウトや配色、ロゴなどを作り上げるのがWebデザイナーの仕事です。美しく、かつ機能的なサイトになるよう、創意工夫することが求められます。

会社の規模やポジションによっては、HTML/CSSのコーディングやディレクション、サイトの分析改善まで行うことも。Webデザインの周辺業務を一手に担うこともあるので、Webデザイナーの職務範囲は拡張性が高いといえるでしょう。

関連記事：Webデザイナーの仕事内容から案件提案まで

Webデザイナー案件を提案してもらう

Webデザイナーに向いているのはこんな人！

Webデザイナーとして大切なことの1つに、クライアントの要求を満たすデザインを作り上げることがあります。ただ自分の好みでデザインを行っていても、それがクライアントの要求とずれていては、それは自己満足にすぎません。クライアント志向で仕事ができる人に向いているといえます。

また、コツコツした作業に耐えられる根気も必要です。複雑なサイト、大規模なサイトであればあるほど、作業量も膨大になります。クライアントからちょっと直して欲しいと要望をもらうこともあるので、根気強くデザインに向き合えることが重要です。

サイトを作り上げるには、Webディレクターやエンジニアなど、さまざまな職種の人と関わることになります。それぞれの意図や要望を汲み取るコミュニケーション能力も必要なので、コミュニケーションが苦手な方はあまり向いていないでしょう。

Webデザイナー案件を提案してもらう

未経験からWebデザイナーになるための実践的フロー

ここからは、未経験から独学でWebデザイナーになるための実践的フローをお伝えします。

1.必要なものを用意する

まずは、Webデザイナーになるために揃えておくべきものを解説します。ある程度の費用が必要ですが、自分への投資だと考え、最初に必要なものを揃えておきましょう。

PCは高スペックなものを用意しておく

PCがないことにはWebデザインができませんので、まずはPCを用意しましょう。一台目のPCであれば、外部で打ち合わせがあったときに持ち運べるノートPCを選ぶのがおすすめです。WindowsかMacかによって使えるソフトや使い勝手に違いがあるので、OSを最初に決めた方がよいでしょう。

Macはフォントの質が高い、グラフィック性能が優れているといった特徴があるため、Macを使うWebデザイナーは多いですが、Windowsでも問題ありません。

PCは高い買い物になりますが、スペックを落とすのはあまりおすすめではありません。さまざまなソフトを起動させるため、スペックの低いPCでは作業効率が落ちてしまいます。

Photoshop（フォトショップ）をインストールする

画像編集、加工ソフトのPhotoshop CC | Adobe Creative Cloud

Photoshopは、Adobe（アドビ）社が販売している画像編集ソフトです。無料、または価格が安い画像編集ソフトもありますが、Webデザイン業界ではPhotoshopを使うのが一般的であるため、Photoshopは購入しておいた方が間違いありません。

現在、パッケージ版の販売は終了しているため、ダウンロード版のAdobe Photoshop CC、または総合パッケージのAdobe Creative Suiteで購入します。

単体のPhotoshop CCもCreative Suiteも月額制となっており、プランによって使えるソフトと月額料金が異なります。一部の機能を制限し、価格を抑えたAdobe Photoshop Elementsという製品もありますが、プロのWebデザイナーを目指すならPhotoshop CCを購入しておいた方がよいでしょう。

Illustrator（イラストレーター）をインストールする

グラフィックデザインソフトのIllustrator CC | Adobe Creative Cloud

Illustratorは、Adobe社のグラフィックデザインソフトです。こちらもPhotoshopと同じく、パッケージ版は販売終了しており、ダウンロード版のみの販売となっています。

Illustratorは拡大縮小しても画質が粗くならないベクター画像を扱うソフトであるため、ロゴデザインやアイコンなどのイラスト作成を得意としています。

Photoshopはピクセル（画素）を用いたビットマップ画像（ラスター画像）を扱うソフトで、画像加工が得意です。IllustratorとPhotoshopはそれぞれ扱う画像や機能が異なるため、用途に応じて使い分けます。

テキストエディタは好みで選んでOK

HTMLでWebサイトを作成するには、テキストエディタが必要です。HTMLファイルやCSSファイルは、OSに標準搭載されているテキストエディタ（Windowsはメモ帳、Macはテキストエディット）でも編集はできますが、必要最低限の機能しかないため、機能が充実しているテキストエディタを使いましょう。

使えるテキストエディタはWindowsかOS Xかによって異なりますので、それぞれの代表的な無料テキストエディタをいくつか紹介します。

▼Windowsの無料テキストエディタ

・サクラエディタ
・TeraPad（テラパッド）
・Notepad++（ノートパッドプラスプラス）

▼Mac用の無料テキストエディタ

・mi（ミ）
・CotEditor（コットエディター）

▼Windows・Mac両対応の無料テキストエディタ

・Sublime Text（サブライムテキスト）
・Atom（アトム）
・Emacs（イーマックス）
・Vim（ヴィム、ヴィアイエム）

書籍で基礎知識をインプットする

Webデザインを独学で勉強するなら、いくつか書籍を揃えておきましょう。PhotoshopとIllustratorの使い方、HTML・CSSの基礎、Webデザイン、JavaScript・JQuery、タイポグラフィ、できればWordPressも勉強しておいた方が仕事の幅が広がります。

JQueryとは、JavaScriptを簡単に記述できるように設計されたJavaScriptライブラリです。またWordPressは、個人ブログから企業サイトまで幅広く活用されているオープンソースのCMS（コンテンツマネジメントシステム）で、難しい知識がなくても簡単に機能性に優れたサイト・ブログを作成することができます。

▼Photoshop関連書籍

・世界一わかりやすいPhotoshop 操作とデザインの教科書
・Photoshop 10年使える逆引き手帖
・プロの現場で使われている Photoshopの「超速」テクニック

▼Illustrator関連書籍

・Illustrator 10年使える逆引き手帖
・Illustrator 10年使える逆引き手帖【CC/CS6/CS5 対応】【Mac OS X & Windows 対応】 (ああしたい。こうしたい。) | 高野雅弘
・10倍ラクするIllustrator仕事術

▼JavaScript・JQuery関連書籍

・確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ) | 狩野祐東
・Web制作の現場で使うjQueryデザイン入門

▼タイポグラフィ関連書籍

・タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック

2.本業の傍ら、コツコツ勉強する

仕事をしながらWebデザインの勉強をするのは大変ですが、スクールに通わず独学でWebデザイナーになることは十分可能です。書籍で学習するのに加えて、Webデザイナー向け資格の合格を目指して学習するのもいいでしょう。

関連記事：Webデザイナーにおすすめの資格11選【ホームページ作成にも役立つ】

コーディングの勉強については、ネットで検索すればHTML、CSS、JavaScript、JQuery、WordPressなどのチュートリアルやノウハウがたくさんヒットします。書籍ではなかなか勉強が進まないという方には、無料動画でプログラミングが学べる「ドットインストール」で学ぶのもおすすめです。Web制作初心者向けのレッスンが充実しており、各動画3分以内に収められているので、毎日コツコツ勉強しやすいですよ。

HTML入門 (全24回) - プログラミングならドットインストール

3.アウトプットが重要！自分でポートフォリオサイトを作ってみる

知識のインプットができたら、Webサイトをひとつ作ることを目標にし、徐々にステップアップしていきましょう。制作するWebサイトは自分のポートフォリオサイトを兼ねるのがおすすめです。ポートフォリオサイトとは、自分の制作実績をまとめたサイトのこと。Webデザイナーがスキルや経験をアピールするために必ず必要となるものです。

未経験からWebデザイナーとして就職したり、案件をもらったりするのは非常に難しいのが実情。資格を持っていたり、スクールに通っていたりするだけでは認めてもらえないことの方が多いでしょう。

しかし、しっかりとしたポートフォリオサイトを持っていれば実力を認めてもらえることもあります。自分の知識やスキルのすべてを注ぎ込んだポートフォリオサイトを作ることが、Webデザイナーになる一番の近道といえます。

またクラウドソーシングサービスで副業を始めるのもよいでしょう。クライアントの要望を受けて実際のデザインができますし、何より実績作りになります。

関連記事：未経験でも簡単！Webデザイナー向けポートフォリオの作り方やコツを解説
関連記事：クラウドソーシングサービスのおすすめ10選【副業やフリーランスに】

4.会社選びは慎重に！自分にあった環境を選ぶ

十分なスキルが身についたら会社選びを考えましょう。クライアントの仕事を請け負う制作会社がいいか、自社サービスを運営する事業会社がいいかは人それぞれです。しかし、デザインスキルを早く上げたいという方は、制作会社の方がおすすめ。さまざまな会社のデザイン案件を担当できますし、先輩Webデザイナーがたくさんいるのでノウハウの吸収がしやすいのがメリットです。

以下の記事ではWebデザイナーの会社選びについて解説しているので参考にしてみてください。

Webデザイナー案件を提案してもらう

まとめ

今回紹介したような実践的フローを踏めば、未経験・30代からであってもWebデザイナーになることは可能です。実務経験がない点や、独学の場合は専門学校やスクールで学んだ経験がない点が不利に働きますが、しっかりとしたポートフォリオサイトさえ用意できれば実力の証明ができます。また、未経験からスキルを身につけた姿勢もアピールできるポイントになるでしょう。

Webデザイナー案件を提案してもらう

役に立った／参考になったと思ったら、シェアをお願いします。