未経験から内定をもらったポートフォリオの作り方

webデザイナーの転職活動で必要になるのがポートフォリオ(作品集)です。

デザインとコーディングの集大成であるポートフォリオは作るのにとても時間がかかりました。未経験での制作だったので、ネットとテキストの力を最大限に借りて制作しました。

走るとり
webデザイン初心者の僕が作ったポートフォリオのすべてです

 

ポートフォリオに載せた作品数

  • webサイト3点
  • バナーデザイン10点
  • DTPデザイン12点
  • デザインカンプ4点
  • エクセルで作ったPOP4点

 

webサイト

ポートフォリオサイト

ページ数:5ページ
参考テキスト:『HTML5/CSS3モダンコーディング』

webサイトを含めた全作品を載せるためのサイトです。

載せたテキストは

  • 簡単な自己紹介(趣味や職歴とか)
  • どれくらいのスキルがあるか(HTMLやCSSがどれくらいできるか)
  • サイトタイトル、コンセプト
  • 制作時間と制作環境
  • お問い合わせフォーム(フォームメーラーという無料のサービスを使用)

です。

ネット検索で「担当箇所も記載すると良い」と見たことがありますが、デザインもコーディングも担当は全て自分なのでとくに記載はしませんでした。

 

架空飲食店サイト

ページ数:5ページ
参考テキスト:『スラスラわかるHTML&CSSのきほん』
created by Rinker
¥2,178 (2019/12/09 04:12:15時点 Amazon調べ-詳細)

 

架空美容室

ページ数:5ページ
参考テキスト:『HTML&CSSとWebデザインが1冊できちんと身につく本』
created by Rinker
¥2,508 (2019/12/09 07:49:10時点 Amazon調べ-詳細)

 

飲食店と美容室のサイトを作るときにも簡単なコンセプトを設定し制作に取りかかりました。

例えばそのお店は新店なのかあるいはオープンして長い店なのかなど。

あとはサイトの色です。ベースカラーを決めると配色選びが楽になると思います。

架空サイトのテキストはネットサーフィンで見つけたお店の文章をコピペし、要点のみ加筆・変更して記載しました(よろしくないことなのでサイト自体に閲覧制限をかけてました)。

 

デザインカンプ

Photoshopを使い、ファーストビューのみのデザインカンプを4点制作。

ピクセル単位でこだわり実際に自分がコーディングをするときに迷わないよう気をつけました。

ここでも架空の美容室やファッションサイトをイメージしています。

 

作品数が足りない!という人にデザインカンプ制作はとくにおすすめです。

ファーストビューのみ作ればいいので、1サイト3時間もあれば完成します。
慣れれば30分くらいでシンプルなサイトはできちゃいます。

ファーストビューはサイトの印象を決める最も重要なデザイン箇所です。
はっきり言って、この箇所だけを見れば、デザインの良し悪しがわかります。
企業側もこの部分をうまく作り込める能力が求職者にあるか判定できれば満足するのです。

引用:最強ポートフォリオの簡単な作り方

 

走るとり
ページ数のかさ増しもできてGoodです!

 

バナーデザイン

PC・スマホ・車・サプリなど「僕はこんなデザインもできますよ!」というアピールの意味を込めて、いろんなデザインを作りました。サイズは300px × 250pxがメイン。

バナーデザインはデザインの基礎練習にももってこいだと思います。

 

DTP作品

フリーペーパーの紙面やチラシデザインといったdtpオペレーター時代(前々職)の制作物を載せました。

会社を辞めるときに制作物を手元に残しておいて正解でした。作品数が12点と他作品と比べてダントツに多いです。

 

エクセルデザイン

エクセルでデザインしたことってありますか…?

接客業(前職)をしていたのですが、接客の合間をぬってエクセルでチラシやポップを作っていました。デザイン関係の仕事ではなかったけれど、自主的にデザインに触れてきたというアピールに繋がると思い載せました。

 

使用した素材サイト

『ぱくたそ』は使いやすいのですが最近ではどこでも見かけます。写真によっては「あ、これぱくたそじゃん!」とわかってしまうので使用は少し控えてます。

個人的には『Unsplash』がお気に入りです。海外の素材サイトですが、綺麗さが半端じゃありません。使うとパッとしないサイトでも映えます。

 

ポートフォリオサイトが完成したら

公開しよう

アップローダーはFC2ホームページを使いました。無料登録できてアップロードも簡単です。

ただし無料なのでページ下に「Powered by FC2ホームページ」と表示されてしまいます。

完成したサイトをすぐ公開して転職活動したい!と思って使いましたが、本格的なポートフォリオサイトには向いていないかもしれません。

 

印刷しよう

ポートフォリオサイトは紙に印刷して製本します。

製本といってもファイルに閉じるだけですが、面接の際にも印刷したポートフォリオを中心に話すことが多かったです。

自宅にプリンターがあればいいですが、なければ最寄りのコンビニのプリンターで刷りましょう。データをpdf化にしてUSBスティックに入れます。あとはプリンターに差し込めば準備完了。

トンボあり、A3でカラー印刷し、自宅で裁断してファイルに閉じれば完成です。ちなみにファイルは100均のものを使いました。

印刷から裁断する作業に結構骨が折れるのと、セブンイレブンだとA3カラー印刷で1枚80円といい金額がします。

【履歴書・証明写真・ポートフォリオも!】コンビニプリンターでラクに印刷する方法

2019.02.10

ポートフォリオ(紙)の構成をまとめると以下のようになりました。

表紙

P1:目次

P2:プロフィール

P3・4・5・6・7・8:webサイト

P9・10:デザインカンプ

P11・12:バナーデザイン

P13・14・15・16:DTP作品

P17:エクセルデザイン

裏表紙

 

まとめ:ポートフォリオはデザイナーの命!

未経験webデザイナーの転職活動ではポートフォリオ制作が一番高い壁かもしれません。

はじめてで大変そうという気持ちと、未経験でもこだわりを持って作ろうという意識を持って制作に取りかかりました。

実際にwebデザイナーの仕事をしていけば必然的に作品も増えますし、スキルも上がっていきます。どんどんポートフォリオをアップデートして、自分だけの作品を作り上げていきたいです。

 

走るとり
こだわればキリがないのがポートフォリオ。一生をかけて作り上げるものなのかもしれませんね