WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

WEBデザイナー未経験者のためのポートフォリオ作成手順

WEBデザイン未経験者が作るポートフォリオ

実務未経験のWEBデザイナー志望の人がアルバイトや派遣など、職業WEBデザイナーとして採用されるためにどうしても必要なものがポートフォリオです。

しかし実務経験もなしに作品を作ることも、ポートフォリオを作ることは難しいと思います。実務経験のないWEBデザイナー志望の方が作るべきポートフォリオを具体的に説明します。

WEBデザイン未経験の人用に、Photoshop・Illustratorで使用できるポートフォリオテンプレートを作りました。こちらの記事内にリンクがありますのでご自由にお使いください。

ポートフォリオとは

WEBデザイナーのポートフォリオは、自分のスキルや技術を人に伝えるための作品集です。デザインスキルだけではなく、製作期間・制作意図・プロジェクト規模・担当フェーズなど、WEBデザイナーとしてどのような立場にいたのかも重要視されます。

プラスアルファでDTPや動画編集・写真撮影などができるのであれば、実績をまとめる必要があります。これらはすべてWEBデザインと密接な関係にあり、企業としては思わぬ掘り出し物が見つかったと思うところもあります。特にDTPと写真は外注費用の削減や、新規事業担当としてのニーズがあります。

そういった意味では自分を売り込む素材のすべてがポートフォリオといってもいいと思います。

採用担当が知りたいこと

実務未経験では承知の上で、どのくらいのデザインができるのかを把握しなければなりません。技術的な面では実務経験のあるWEBデザイナーに劣ることはわかっているので、どの程度の期間で戦力になるかというポテンシャルを重視しています。

ポートフォリオを作るために必要な作品

この2つです。どのようなものでも良いのでWEBサイトが作れるという実績が必要です。わかりやすい例を上げると企業のコーポレートサイトや、通販のECサイトを真似して作ってみることをおすすめします。そうすることでPhotoshopの基本操作とコーディングの基礎ができているという証明になります。

WEBサイトの中にバナーを入れればWEBデザイナーとしての現在の技術をアピールすることができます。

Illustratorを使用してWEBデザイナー経験者用のポートフォリオに近づけるように内容を作っていくと効果的です。制作するにあたり素材やデザインインスピレーションが欲しい方はこちら。

WEBデザイナーがはじめて転職をするとき、一般的な会社員とは決定的に違うものが1つあります。それが自分の実績と作品を載せるポートフォリオです。WEBデザイナーの転職を成功させたいな

Photoshopによるデザインカンプ

Photoshopで作るデザインカンプ

WEBサイトのトップページをPhotoshopでデザインします。この完成見本をデザインカンプといいます。これを作るのが未経験者の作るポートフォリオの第一歩です。

HTMLとCSSによるコーディング

デザインカンプとイメージがずれない程度にコーディングを行います。デザインカンプとセットでポートフォリオを作ることで、他のWEBデザイナーがデザインしたデザインカンプをきちんとコーディングできるかが分かります。

javascriptによる機能の実装

デザイン現場ではフリーのjQueryをHTMLに組み込んでアコーディオンメニューや、タブ切り替えメニューを使うことがあります。HTMLとCSSを扱うことができれば、フリーのjQueryライブラリを組み込むことは難しくないので、可能であればポートフォリオ用に作るウェブサイトにjavascriptで動くコンテンツを入れましょう。

レンタルサーバーにアップロードする

ノートパソコンを持っていれば面接に持ち込んで自分の作ったWEBサイトをみてもらうことができますが、持ってない人は前もってレンタルサーバーと契約して自分の作品をアップロードしておきます。

私の経験から、WEBデザイン未経験者は自分でレンタルサーバーを借りてHTMLファイルをアップロードできるスキルを持っている人は少なかったので、この一連の流れができるのであれば採用担当の人にとっては好印象だと思います。

HTMLとCSS・javascriptなどで作られた静的ページと呼ばれるものをアップするならレンタルサーバーのスペックは必要ありませんので月129円から使えるさくらインターネットがコストパフォーマンスが高いです。

WordPressのようなPHPで作られているブログを運営してWEBデザイナーとしての開発スキルを磨いたり情報発信をしたいのでしたらそこそこのスペックのレンタルサーバーを使用しないと表示が遅くユーザーが離脱します。

私が運営している20万PV/月のブログではエックスサーバーを利用しています。古いユーザーでも最新のサーバーに簡単に移動するサービスや案内を出してくれるレンタルサーバーで、長く使うなら安心できるホスティングサービスです。

作った作品を元に紙のポートフォリオを作成する

未経験者WEBデザイナー志望の方のメインとなる仕事です。作った作品を使って自分の技術を採用担当者にアピールできるように「デザイン」します。最低限ウェブサイト1つとバナー5個は必要です。

WEBデザインのみ勉強してきた初心者の方はIllustoratorを使うのは難しいでしょうからPhotoshopで作成してしまっても問題ありません。サイズはA4用紙を推奨します。

表紙

イラストが得意なら絵を書いてもよいですし、写真が得意ならキレイな写真を使ってもよいでしょう。すべてが自分の技術をアピールするための素材です。もちろん白紙にフォントを載せるだけでもかまいません。

ウェブサイト

紙のポートフォリオのデザイン例

左側にPhotoshopで作成したデザインカンプを載せ、左側に概要を説明するのが基本的なスタイルです。

バナー

仕事としてWEBサイトやバナーを作っている実務経験者とは違い、未経験の方はコンセプトなしに「なんとなく」作ってしまうことが多々あります。そのあたりは相手が未経験者であっても採用担当の人は気にします。

ポートフォリオ上にきっちり制作意図やこだわりを書いて、面接での受け答えに備えましょう。

ポートフォリオをファイルに入れる

A4のクリアファイルに制作した紙のポートフォリオを入れます。表面見開きの段階でプレゼンすることになりますので、それに合わせてキレイに見えるようなデザインにすることをおすすめします。そのために私は左がデザインカンプ、右が詳細説明という組み方を基準にしています。

ポートフォリオができたら求人に応募して面接へ

これで未経験ながらWEBデザイナーとして道を歩みたい人としての最初の準備としては万全です。早速求人を探しましょう。

WEBでのポートフォリオが不安な人は1週間の間、無料でプロの講師がついてコーディングを教えてくるプログラミング 無料体験サービスなどを使えば金銭的な負担がなくHTMLとCSSを採用先の面接で見られても恥ずかしくないコードにすることができます。

実務未経験の場合はWEB制作会社は少なく、どこかの中小企業のWEB制作部門といったケースが多いです。時給もよくて1000~1200円程度だと思われます。しかし実際のWEBデザインの現場に入るとスキルが一気に伸びますので、まずは待遇などを気にせずにデザインができる場所を選ぶことをおすすめします。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST