未経験から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．ポートフォリオサイトを作る

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

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などを掲載します。また、自信がある制作物や応募先企業のテイストに合う制作物から上部に載せるようにしましょう。

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

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

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

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

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

Webページで作成する方法

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

未経験から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デザイナーを本気で目指したいという気持ちがあり、Webデザイナーになるために必要な準備を一つずつこなせば、年齢や経験に関係なく、必ず道は開けます。

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