未経験からWebデザイナーになるには？何歳まで？ポートフォリオはどうやって作る？具体的なロードマップや学習方法を解説

Webデザイナーは、Webサイトのデザインや設計、コーディングなどを担当する職種です。独学でもしっかりと学習を積めば、誰でも未経験からでもWebデザイナーになれますが、Webデザイナーになるために必要なのが「ポートフォリオ」です。本記事では、実際に未経験からWebデザイナーになるまで何から始めればいいか、何歳まで未経験からWebデザイナーになれるか、Webデザイナー未経験者のポートフォリオ作りの過程について紹介します。

未経験からWebデザイナーになれる？

冒頭でもご紹介した通り、結論からいえば未経験でもWebデザイナーになることは可能です。実際にWebデザイナーの求人をみていると「未経験可」という文字を見かけることも多いでしょう。

ただし「研修あり」といった情報が記載されている求人でも、スキルや知識が全くもない状態で応募すると、企業から採用を見送られたり、入社してから「こんなはずじゃなかった」といった仕事内容をふられたりして後悔するケースも耳にします。未経験からWebデザイナーを目指すにしても、Webデザインに関するスキルと知識は、さわりだけでも身に着け、面接でアピールできるとよいでしょう。

未経験でも何歳までWebデザイナーになれる？

未経験からWebデザイナーを目指すにしても、30代・40代の人は「やめといた方がいいのではないか」といった不安を抱きがちです。「Webデザイナーとしてどのような企業への転職を考えているのか」「どのようなWebデザイナーになりたいか」といった本人の希望にもよりますが、技術さえ身につければ30代、40代など年齢を問わず何歳からでもWebデザイナーになれます。

ただし「未経験者は実務研修あり」といった求人は若年層を育成枠として採用することを予定しているケースが多く、30代後半～40代は、一通りのWebデザインのスキルと知識を身に着けた上での求人応募が一層おすすめです。そのうえで在宅副業やバイトでWebデザイナーを経験してから就職活動をするのがよいでしょう。

未経験からWebデザイナーを目指すなら始めるべきこととは？

そもそも、Webデザイナーの「未経験」とは「実務経験がない」ことを指しており、最低限のスキルや知識、趣味や学びの範囲でもWebサイトの制作経験はある人が対象です。求人情報に「未経験可」「先輩が指導してくれるので初心者でも安心！」という文言を見かけても、Webデザインに対しての知識がまっさらな状態でも評価してもらえるのは新卒や第2新卒くらいの年齢層までです。

つまり、企業が「未経験可」として求めているのはこれまでデザイナーとして働いたことはないものの、

・独学やスクールでコーディングやWebデザインの勉強をしていた
・趣味でサイトやアプリを作ったことがある

といった、Webデザイナーとして働くための基礎的なスキルや知識と制作経験、そして意欲がある人です。Webデザイナー未経験からポテンシャルを示すには、ポートフォリオの制作が欠かせません。しかし、Webデザイナーとしての実務が未経験の場合、どのようにポートフォリオを作ればよいのか、参考とすべき情報や使えるサイトなどを見ていきましょう。

Webデザイナー未経験者のポートフォリオづくりに必須なアイテムとは？

Webデザイナー未経験者がWebデザイナーになるには、Webデザイナーとして就職・転職を叶えるほかありません。Webデザインについて一定の知識やスキルがあっても、未経験者が就職・転職活動をする上でアピールポイントとしてポートフォリオが必要です。ポートフォリオ制作には、作業に適したパソコンやイラストソフト、エディターの準備が必須です。具体的にどのようなものが必要になるのか見ていきましょう。

Webデザイナーにおすすめのパソコンとは？

ポートフォリオに掲載する作品を作るには、Webデザインで必要になるパソコンやデザインソフト・エディターの用意が必要です。

まず、パソコンですが、Webデザインに必要なソフト、PhotoshopやIllustratorを快適に使用するために、ある程度の性能の高いパソコンが必要です。特に、デザインやコーディング、サイト検証などを同時進行で行う可能性がある場合、メモリが足りず、パソコンの動作が遅くなることもあります。後日、メモリの増設が必要にならないよう、パソコンのスペックはあらかじめ確認しておきましょう。具体的におすすめのスペックは以下の通りです。

・CPU:Intel Core i5以上推奨
・メモリ:16GB
・ハードディスク:500GB以上
・OS:Windows10もしくはiOS最新版(強いこだわりがない場合Mac推奨)
・モニター:20インチ以上、フルHD（1920×1080）

Webデザイナーに必須のデザインソフト

パソコンに続いて、Webデザインに必要なデザインソフト、PhotoshopとIllustratorの準備をしましょう。

まず、Photoshopは画像編集作業で最も使用されているツールとして知られています。明度、彩度、色相などの色彩の3属性の調整により、簡単に軽度な補正や加工から複雑な画像処理を施すことが可能です。「レイヤー」「スライス」といった機能を利用し、複数の画像やデザインの切り出しができます。

Photoshop以外のツールでも編集可能なファイル形式での保存もできるので、画像処理や実際にワイヤーフレームにあてはめて包括的なデザイン作業を進めるのに便利なソフトです。

Illustratorは、Webデザイン上で使用する図柄に、直接図形やイラスト、テキストなどを書き込んだり、スタイライズやアビアランスといった機能を利用して複雑な加工を施したりできるソフトです。主にデザイン上のオブジェクトの加工に使用します。

Webデザインでは、Illustratorで作成したり素材を加工・編集したりしたオブジェクトをPhotoshopで包括的なデザインに落とし込むのが主流です。

未経験者におすすめしたい無料で利用できるテキストエディター

Webデザイン制作の現場で欠かせないコーディング、プログラミングで使用するのが「テキストエディター」です。パソコンにデフォルトで搭載されているメモ帳を利用するのもよいですが、プログラミング用のエディターを使った方が快適に作業を進められます。

Windows、Macのどちらのパソコンでも利用できておすすめなのはVisual Studio Codeです。便利なプラグインが多く、近年利用者が急増している人気のテキストエディターです。

また、Bracketsも、軽量で強力な最新のテキストエディターとして知られています。ビジュアルツールとエディターの組み合わせが可能で、Webデザインに必要な作業がサクサク進みます。

Windows使用者で日本語対応を希望する方には、TeraPadの使用がおすすめです。国産エディターのため説明文など全て日本語で記載されており、シンプルな機能が評判を得ています。

Visual Studio Code
Brackets
TeraPad

ポートフォリオ制作の大まかな流れ

ご紹介したWebデザインに欠かせないグッズがそろったら、ポートフォリオを作り始めます。ポートフォリオは、流れに沿って作り始めるのがよいでしょう。大まかなポートフォリオ作りの流れとしては

1．ポートフォリオの目的やアピールポイントを考える
2．ポートフォリオに載せる制作物を作る
3．ポートフォリオサイトを作る
4．ポートフォリオの定期的なブラッシュアップ

です。さらに細かく、各パートでの注意点やフォーカスすべき作業を見ていきましょう

1．ポートフォリオの目的やアピールポイントを考える

未経験者が就職活動のためのポートフォリオは、就職や転職を希望する企業をターゲットにした内容にする必要があります。つまり、就職・転職活動において選考をパスすることを目的にポートフォリオを作り始めましょう。「一緒に働きたい」「センスが自社にあっている」と思われるためには、就職・転職を希望する企業のホームページを参考にデザインやテイスト・サイトのタイプなどを選択する必要があります。

幅広いテイストのWeb制作を手掛けるWeb制作会社を受ける場合は、さまざまなWebデザインができると示せるポートフォリオが向いています。女性向けサイト、男性向けサイト、ECサイトなど複数のタイプのWebデザインページを制作しましょう。

企業内のデザイナー、つまりインハウスデザイナーを募集する企業には、業界のサービスや企業のホームページにあったテイストのWebデザインができるとアピールすることが大切です。特に、未経験者の場合、実績として紹介できる制作物や結果がないので「ターゲットを絞ってアピールできるか」がカギとなります。

また、どのようなWebデザインをしていきたいのか、これまで企画やマーケティングの実績があれば活かしたないようにする、制作の過程でかかった時間や参考にしたサイト・素材などもしっかり明記しましょう。

さらに、採用担当者が閲覧するのにストレスを感じないように、文字は読みやすいフォントやカラーを選ぶよう意識しましょう。

2．ポートフォリオに載せる制作物を作る

ポートフォリオに載せる制作物は、知り合いの企業やお店のサイトを作らせてもらったり、架空の商品やサービス、企業を宣伝するダミーサイトを作ったりするのが一般的です。制作期間や注力したポイントも一緒に解説すると、説得力が増すでしょう。　

掲載する作品は10点ほどが望ましいといわれています。多ければ多いほど、採用担当者の負担にもなりえるため「自信作を絞る」「スクールなどでの制作物はメインにしない」などが重要です。また、ポートフォリオに載せる制作物に対し、注意点が3つあります。

①デザインの4原則　②常時SSL化　③ダミーテキストの量

①ですが、ポートフォリオに載せる制作物はデザインの4原則「近接」「整列」「反復」「対比」にのっとって制作します。この原則を理解していないポートフォリオを提出すると面接までこぎつけるのも至難の業です。自信がない場合は、スクールの講師や実際にWebデザイナーとして活動している人などにチェックをしてもらいましょう。

続いて、ポートフォリオにアクセスする企業側にセキュリティ面で負担が掛からないよう、SSL化しましょう。SNSにポートフォリオを載せるのは個人の自由ですが、ポートフォリオに載せたSNSリンクから余計な情報が漏れることがないよう、SNSはアカウントは載せない方がよいでしょう。

ポートフォリオは架空のサイトではありますが「テキストテキスト」「ここにリンクを張る」など、ダミーテキストばかりだと採用担当者が見る気をなくす可能性もあります。ライターのようなオリジナルで完璧な文章は目指さなくてもよいので、ダミーテキストではなく、意味が通る文章を考えて入力しましょう。

また、求人応募用のポートフォリオに載せる制作物には、実際に存在する製品のプロモーションサイトという架空の設定で制作・掲載しても問題ありません。ただし、必ず実在のプロジェクトではなく架空・練習用で制作したことを明記するようにしましょう。Webサイト制作だけでなくページのデザインやロゴデザインといったデザイン力を見られるような作品も積極的に載せましょう。重要なのはそのデザインをするに至った課題感と制作の意図をしっかり伝えることです。

3．ポートフォリオサイトを作る

応募先企業にポートフォリオとして提出するポートフォリオサイトを制作します。基本的にポートフォリオの形式は自由です。下記3点は、必ずポートフォリオに載せましょう。

1. 自分のプロフィール
2. スキル
3. 自身の作品（ポートフォリオ用に制作したサイトやデザインなど）

履歴書だけでは伝わらない人物像や自己PRをプロフィールページに記載し、前職で身に着けたスキル、経験はしっかり記載しましょう。たとえば、マーケティングやWebディレクション、SEO、広告施策などに携わった経験があれば明記するのがおすすめです。一見、Webデザインとは無関係だと感じたり「マーケター職やディレクター職を進められるのではないか」と不安になったりするかもしれませんが、こうした経験があるWebデザイナーは「包括的なサイト構築ができる」「顧客理解が早い」「チームプロジェクトに慣れている」など好意的な見方をされることがほとんどです。

作品ページでは、実際に制作したWebページなどのスクリーンショットやリンクURLなどを掲載します。また、自信がある制作物や応募先企業のテイストに合う制作物から上部に載せるようにしましょう。

4．ポートフォリオの定期的なブラッシュアップ

ポートフォリオは一度作成して終わりではありません。定期的に更新し、最新のスキルや作品を追加することで、常に自分の成長をアピールできるようにしましょう。

例えば、最新のデザイントレンドや技術を取り入れた作品を追加することで、常に市場の動向に対応していることを示すことができます。また、初期の作品やスキルが向上する前の作品は、削除するか、目立たない位置に移動することで、現在の能力を正確にアピールすることに繋がるでしょう。

未経験者におすすめのポートフォリオの作り方3選

ポートフォリオ制作には、パワーポイント、いわゆるPPTを使用して作る方法とWebページ制作サイトを利用する方法と、Canvaで作成する方法の3つがあります。
Webデザイナー未経験者でも、スクールや独学で学んだことを活かせば、それなりのものが作れるはずです。Webデザイナーの場合はやはり専門でもあるWebサイトで作成するのが一般的です。両者の違いを見ていきましょう。

パワーポイントでポートフォリオ制作をする方法

Microsoft社の資料作成ソフト「Microsoft PowerPoint」はポートフォリオ作成によく使われるツールです。使い慣れている人も多く、創作物をまとめるのに適しています。

ただし、動画などの動きのあるコンテンツを紹介したい場合には動作が遅くなることなることもあるため、注意が必要です。ポートフォリオの中でも、デザイン力だけでなく、ディレクター経験のある人は企画書や提案書の作成などをはじめとしたプレゼンテーション能力をアピールするのに効果的です。

Webページで作成する方法

動きのあるコンテンツや、Webサイト全体を紹介したいときは、Webでポートフォリオサイトを新しく制作するのもよいでしょう。動画もグラフィックも魅力的に掲載でき、ページ全体のデザインも含めたスキルを総合的にPRできます。

Canvaで作成する方法

近年でおすすめのツールとして挙げられるのが「Canva」です。Canvaは、直感的な操作で豊富なテンプレートや素材を使えるデザインツールで、未経験者でもプロフェッショナルな仕上がりを実現できます。

Canvaのメリットの一つは、その使いやすさです。ドラッグ＆ドロップの操作で画像やテキストを簡単に配置でき、豊富なテンプレートから選ぶことで、時間をかけずに見栄えの良いポートフォリオが完成します。また、カスタマイズも容易で、自分のブランドカラーやフォントを使用して独自性を出すことも可能です。

さらに、Canvaはオンラインで動作するため、作成したポートフォリオはURLを共有するだけで、簡単に他の人と共有できます。これにより、応募先の企業やクライアントに手軽に閲覧してもらうことができます。Webデザイナーとしてのスキルをアピールするために、動的なコンテンツを組み込むことは難しいかもしれませんが、ビジュアル面でのインパクトを強調したい場合には非常に有効なツールです。

ポートフォリオの作成に関しては、「一目置かれるWebデザイナーのポートフォリオ！作り方や注意点について解説」の記事も参考にしてみてください。

未経験からWebデザイナーになるロードマップ

Webデザイナーになるためのスキルの習得は集中的に勉強して3ヶ月～半年で、仕事と並行して勉強をすると、約1年ほどで習得するのが目安です。

そのため、大まかな勉強のスケジュールや、「○月までに○○ができるようになる」という目標を予め立ててから学習を進めると良いでしょう。

では、実際にWebサイトを制作するために身につけなければいけない知識や学び方を紹介します。

良いデザインを「まねる」

未経験のうちはどんなデザインが「良い」のか、言葉で説明するのに苦労するかもしれません。デザイナーとして活躍するためには感覚とセンスの良さが問われるように見えます。ですが、実は良いデザインほど、論理的な根拠に基づいて設計されていることが多いのも事実です。

そのため、「なぜこのデザインが良いのか」を深く分析し、理解する力が求められます。デザインを勉強するときは出来るだけたくさんのモノに触れることが重要になりますので、自分が憧れているデザイナーの作品やギャラリーサイトを見るのもおすすめです。また、日々の生活で溢れているデザインからも学べることはたくさん存在します。

良いデザインの構成要素をインプットしたら、今度はアウトプットの練習もしましょう。デザインを受け取る側と、相手に伝える側では同じデザインを見ても気になる点が異なります。どうしたらこちらの意図するものが相手に伝わるのかを考え、試行錯誤を繰り返すことが重要です。

さらに、未経験のうちは自分が良いと思ったデザインを真似てみるのも有効的な学習方法になります。インプットとアウトプットを重ね、自分の引き出しを増やしましょう。

未経験者はデザインソフトの基礎的な機能と画像編集を覚えよう

Webデザイン業務において、Photoshopは重要なソフトです。サイトやバナーのデザインをするときに使うため、使用頻度が最も高くなるのではないでしょうか。

Photoshopは慣れれば簡単に操作できるようになります。最初のうちはいろんなツールやメニューバーを選択肢して、どこに何が配置されているか覚えるところから始めましょう。画像の補正や切り抜きといった基礎的な使い方は理解しておきたいですね。

また、Webデザインの現場で多用されるIllustratorも学んでおきましょう。ベタやグラデーションのオブジェクト作成、アウトライン化で形を変えるといった簡単な操作やベジェ曲線を身に着けるとよいでしょう。

未経験者はHTML/CSSから学ぼう

未経験の場合は、HTML/CSSから学習を始めるのがおすすめです。サイト制作の仕組みを理解している状態の方が、使いやすいデザインを考えやすくなるためです。

HTMLはWebページを制作するためのマークアップ言語です。ページに表示する文字や画像、リンクなど文書の構造を指定する役割を担います。

一方、CSSはWebページのスタイルを指定するものです。レイアウトやデザインの調整はCSSで行うことが主流です。具体的には以下のような修正はCSSで行います。

・border-radiusプロパティを活用して角の丸い枠を作る
・text-shadowプロパティやbox-shadowプロパティを駆使して文字やボックスに影をつける

HTMLとCSSは言語の中でも最も基礎であるため、短期集中で学ぶのが良いでしょう。

JavaScriptやjQueryを習得してリッチなWebサイト制作を目指す

JavaScriptやjQueryの知識は、未経験からWebデザイナーを目指すフェーズでは必須とは言えません。ですが、ゆくゆくは学ぶ可能性が高く、覚えておくと表現の幅が広がり便利です。

JavaScriptは「経過時間によってサイトのヘッダー画像を変更する」「サイトを訪問したユーザーに対して小さなポップアップを表示する」といったWebサイトに動きをつける時に使用する言語です。

JavaScriptを活用することで、HTML/CSSのみの静的なページと比べ、より良いUIを設計できます。ただし、JavaScriptの記述はプログラミング初心者の方にとって苦戦しがちなポイントです。

そこで、jQueryと呼ばれるJavaScriptをより簡単に記述できるようにしたオプション機能を予め理解しておきましょう。jQueryにより短いコード記述で思い通りのUIを実装できます。

Webデザインのトレンドを追っておく

デザインの世界は常にアップデートしており、新しいトレンドや技術が次々と登場します。未経験からWebデザイナーを目指す方は、最新のデザイントレンドや技術を常に追いかける習慣をつけましょう。

例えば、モバイルファーストのデザインやレスポンシブデザイン、ミニマリズムなどの最新トレンドを学ぶことで、実際の仕事で役立つ知識とスキルを身に付けることができます。トレンドを追いかけるには、デザイン関連のブログやポートフォリオサイト、SNSなどを活用するのがおすすめです。

また、他のデザイナーとの交流を通じて情報を共有し、自分自身のスキルアップにつなげることも重要です。

最新のトレンドを取り入れることで、より魅力的でユーザーフレンドリーなデザインを提供できるようになります。

プロジェクト管理スキルの重要性も理解しておこう

Webデザイナーとして働く際には、デザインスキルだけでなくプロジェクト管理スキルも重要です。特に、フリーランスや在宅で働く場合、自分でプロジェクトを進行管理する必要があります。

未経験者でも、プロジェクト管理スキルを磨くためにできることはいくつかあるでしょう。例えば、趣味でサイトを作る際にチームを組んでプロジェクトを進めることは、管理スキルを磨くために有効なプロセスとなります。友人やオンラインコミュニティで知り合った仲間と協力して、共同でサイトを制作することで、実際のプロジェクト管理を体験することができます。

このようなチームプロジェクトでは、役割分担を明確にし、スケジュールを立てて進行状況を管理することが重要です。ガントチャートやタスクリストを活用して、プロジェクトの進行状況を視覚的に把握し、効率的にタスクを進める練習をしましょう。

Webデザイナーに必要なスキルセットについては、「Webデザイナースキルセット一覧！将来性高いスキルと最低限必要なスキル」の記事も参考にしてみてください。

学習方法のパターン

未経験からWebデザイナーになるロードマップとして、特に習得したい技術についてご紹介しました。

中にはそれらの技術を習得するための学習方法について疑問を持たれた方もいるのではないでしょうか？そこで、未経験者がWEBデザインを学ぶための学習方法のパターンと、それぞれの特徴とメリット・デメリットについて解説します。

独学

独学は、自分のペースでWebデザインを学びたい方に最適な方法です。インターネットには豊富な無料教材やチュートリアルがあり、YouTubeの動画やブログ記事、オンラインコミュニティを活用すれば、基礎知識から応用技術まで幅広く習得できます。

独学の魅力は、自分の都合に合わせて学習計画を立てられることと、低コストで始められる点です。独学を進めることで自主性が養われ、問題解決能力も向上します。

ただし、自己管理が求められるため、計画をしっかり立てることが重要です。また、質問ができる相手が限られるため、モチベーションの維持や独りよがりにならないようにする工夫が必要です。

独学でWebデザインを学ぶ方法については、「独学でWebデザイナーを目指す！必要なスキルから勉強方法まで」の記事も参考にしてみてください。

スクール

専門のWebデザインスクールは、効率よくスキルを身に付けたい方に向いています。スクールでは、現役のWebデザイナーや業界のプロフェッショナルから直接指導を受けられ、実践的なカリキュラムが用意されています。体系的に学べるため、独学では得られない深い知識や技術を習得することが可能です。

また、スクールでは、同じ目標を持つ仲間と学ぶことで切磋琢磨し合い、学習意欲を高めることができます。

直接指導を受けられる環境は大きなメリットですが、受講料が高額になる場合があり、通学の手間もかかるため、スクール選びは慎重に行う必要があります。また、カリキュラムに沿って学ぶため、自由度が低いことも考慮しておきましょう。

職業訓練校

職業訓練校は、公共機関が運営する教育機関で、特に失業中の方やキャリアチェンジを考えている方におすすめの学習方法です。Webデザインの基礎から実践までを無料または低料金で学ぶことができ、資格取得を目指すことも可能です。

職業訓練校では、実践的なカリキュラムが提供され、就職支援も充実しているため、学んだスキルを活かして早期に就職することが期待できます。

カリキュラムが固定されているため、自由度は低いものの、体系的に学べる点や手厚いサポートが受けられる点は大きな魅力です。職業訓練校を活用することで、確実にスキルを身に付け、就職活動を有利に進めることができるでしょう。

未経験者は副業からWebデザイナーを始めるのも◎

上記でご紹介した学習方法を経てWebデザインの知識を一通り身に付けた後は、いきなり転職活動をするのではなく、まずは副業からWebデザイナーとしての一歩を始めるのもおすすめです。副業からWebデザイナーとしてキャリアをスタートさせることのメリットとしては以下のような点が挙げられます。

スキルアップと収入の両立

副業Webデザイナーの最大のメリットは、スキルアップと副収入を同時に得られることです。本業で経済的な基盤をしっかりと保ちながら、実践的なWebデザインの経験を積むことができます。

実務を通じて最新のデザイントレンドやツールの使い方を習得しつつ、着実に収入を増やせる点は大きな魅力となっています。

多様な案件で副業からでも始めやすい

副業Webデザイナーには様々な案件があり、自分の興味やスキルに合わせて仕事を選べます。バナー制作、ロゴ作成、Webサイト制作など、幅広い選択肢があります。特に初心者でも取り組みやすい小規模な案件から始められるため、段階的にスキルを磨きながらステップアップすることが可能です。

時間や予算に応じて柔軟に案件を選択できる点も、副業として取り組みやすい理由の一つです。

キャリアアップの可能性

副業での経験を積むことで、Web業界への転職だけでなく、フリーランスWebデザイナーとしての独立などのキャリアチェンジも視野に入れることができます。実績を積み重ねる過程で、クライアントとの関係構築やプロジェクト管理のノウハウも自然と身についていきます。

実践的なポートフォリオを蓄積できる

副業としてWebデザイナーのキャリアをスタートさせることで、転職時に実際の案件で制作したデザインをポートフォリオとしてアピールすることができるようになります。架空の制作物ではなく、実際のクライアントのニーズに応えて作成したデザインは、より説得力のあるポートフォリオとなります。

制作実績が増えるほど、自身の強みや得意分野も明確になっていくでしょう。

未経験でも意欲とポートフォリオがあればWebデザイナーを目指せる

「未経験」というのは転職において不利であることがほとんどです。しかし、それでもWebデザイナーを本気で目指したいという気持ちがあり、Webデザイナーになるために必要な準備を一つずつこなせば、年齢や経験に関係なく、必ず道は開けます。

そのためには、Webデザインに必要なアイテムを入手し、基礎的な知識や情報を身に着け、自分のポテンシャルを示せる、ポートフォリオ制作が重要です。まずは、自分で情報収集をし、Webデザインの学び方を選択し、順序だててポートフォリオを作ってみましょう。