Webデザイナーへの第一歩!ポートフォリオの作り方

スポンサーリンク
ポートフォリオの制作Webディレクター

Webデザイナーとして活動するために必要なものとしてポートフォリオがあります。

ポートフォリオはWebデザイナーにとって履歴書のような立ち位置にあるものですので、企業の面接その他人に見せることを前提に作っていく必要があります。

今回は未経験者の方がポートフォリオを作る方法について紹介していきます!

ポートフォリオとは?

まずポートフォリオがどんなものか説明していきます。

ポートフォリオはWebデザイナーが自己紹介、自分の作品、持っているスキルなどを紹介するためのWebページです。

具体的には

  • メッセージ
  • プロフィール
  • 作品
  • 使えるスキルなど
  • 連絡先   etc.

と言う感じです。

そのため、転職活動をするときにはポートフォリオを充実させることで効率的に採用担当者にアピールすることができます。

ポートフォリオの作り方

ポートフォリオを作るためには基本的なHTML, CSS, Javascriptの技術が必要です。

ゴールとしては以下のようなサイトを作るイメージです。

Garden Estúdio
Somos a Garden, um estúdio reconhecido internacionalmente focado na criação de experiências digitais. Usamos todo o nosso conhecimento para ajudar nossos client...

これは個人ではなくて企業のものですので、最初に作るものとして参考にするというより、「ポートフォリオってここまで作り込めるんだな」くらいに見ておいてもらえると良いかと思います。

このようなクオリティの高いポートフォリオサイトをみることで、自分が作るべき形が見えてくるので勉強のためにもクオリティの高いポートフォリオサイトを定期的に探して見ることは必要です。

載せる情報のピックアップ

ポートフォリオはアピールに使うものなので自分のプロフィールやスキルなどのピックアップをしっかりしておく必要があります。

たとえば、

ツール言語その他
Adobe Illustrator
Adobe Photoshop
HTML
CSS
Javascript   
Vue.js
React.js
MySQL
Github
サーバー関連知識
 

と言う感じで各ジャンルごとにまとめて書き出して見るといいと思います。

目標のポートフォリオを探す

目標のポートフォリオを探します。たくさんの作品をみることで自分の作品を作る際にも審美眼を養うことができます。

好みのポートフォリオがあればそのサイトのコードを覗かせてもらって(Chromeのデベロッパーツールなど活用)どういう実装をしているか調査して模倣していきましょう。

部分的にも模倣できれば一気に自分のつくりたいサイトに近づきます。

実装

実装を行います。この辺りのサーバを用意するなどの具体的な手順についてはオンラインスクールなどで学ぶことをお勧めします。(理由は次の章)

ポートフォリオのイメージ図を紙に書き起こしてから作成していくと無駄に迷わずに済みます。

必須で載せたい情報は以下です。

  • 自己紹介(名前、顔写真、生年月日、大学など)
  • コーディングスキル(どれくらい習熟しているか)
  • 使えるツール
  • 使えるサービス(WordPress、AWS、Githubなど)

その他の載せるコンテンツについては後に書く注意点を確認しながら絞っていくと良いでしょう。

ポートフォリオの作り方を学ぶ

ポートフォリオサイトを学ぶ方法はいくつかあります。

  • 本から学ぶ
  • オンラインスクールで学ぶ
  • セミナーにいく

というのが代表的です。

おすすめはオンラインスクールで学ぶ > セミナー > 本の順番です。

本で学ぶのは最適解じゃない?

本を使った勉強は体系的に学べると言う部分では他の方法と遜色ないのですが、一点プログラミングを学ぶと言う点で非常にネックになる部分があります。

それは手を動かしながら見るのが大変と言う点です。

そんなに大変じゃないでしょ?」という意見もあるかと思いますが、


タイピングをしながら本を開き、うまく行かない場合に本とディスプレイを行ったり来たり見ながら修正する。。。(しかも本にはの構文をディスプレイにはコピペできないから手打ち)


というのはすでに勉強の妨げになります。

本はある程度自分で知識をつけた上で、それらを見返し自分の中でまとめるために使うのが良いでしょう。

オンラインスクールで学ぶ

おすすめはオンラインスクールです。メリットをサクッとまとめます。

メリット

  • 短い時間で動画でまとまっているので、コツコツ理解を進めることができる。
  • 動画なので何度も再生ができ、必要に応じて一時停止をして考えることができる。
  • わからない場合に講師にメッセージを送って質問することができる。

オンラインスクールはニーズに合わせていろんな種類があります。

最近は機械学習コンテンツ(AI)などを押しているところが多く、

「申し込んでみたらWebデザイナー関連のコンテンツがなかった。。。」

とならないようにきちんと確認して申し込みをしましょう。
Webデザイナー向けコンテンツが充実しているオンラインスクールはこちらのページで紹介してます。

ポートフォリオを作る上での注意点

ポートフォリオの作り方を学んだらいよいよ自分のポートフォリオを作っていきますが、その時に気をつけていきたいポイントがいくつかあります。

ポートフォリオサイトを作品群に入れておく

未経験者の方が自分で初めてのポートフォリオを作った時には、他の作品がないのでそのポートフォリオサイト自体を作品としていれるのがいいです。

スクリーンショット、紹介文、その他の情報を適宜入れておきましょう。

代表作に絞ってポートフォリオに載せる

クオリティが低いものを混ぜてぱっと見の印象をよくするより、渾身の作品に絞ってポートフォリオに載せる方が印象がいいです。

例えばオンラインスクールでカリキュラムでポートフォリオを作った場合、教材のマイナーチェンジぐらいのものが出来上がる可能性が高いです。

そういったものは載せてもいい印象はないので気をつけましょう。

Webページ以外の作品も入れる

Webデザイナーとしての作品はwebページ以外のものがあります。

  • アイコン
  • 書体
  • サンプルのソースコード
  • ロゴ

など。

そのため、Webサイト以外の作品も定期的に作ってポートフォリオに載せられるようにしておくと良いです。

とはいえ、自分のWebデザイナーとしての方向性がコーディング寄りなのかそうじゃないのかで載せるべきコンテンツが変わるので、自分のなりたい方向性を決めておくことが重要です。

例えばマークアップエンジニア志望なのにロゴや書体、アイコンを載せるよりもソースコードを載せる方が印象がいいですよね?

まとめ

今回はポートフォリオの作り方についてまとめました。

ポートフォリオを作るのはWebデザイナーとして活動するための第一歩です。
Webデザイナーに転職を考えている方はまずポートフォリオを作ることを目標として必要な知識を学んで行くと、最速で無駄なく学ぶことができるでしょう。

タイトルとURLをコピーしました