webデザインの勉強

【私のポートフォリオの解説】未経験webデザイナーの転職活動で使用|参考例

【参考例の解説】未経験webデザイナー転職・就職活動で使った私のポートフォリオのバナー

こんにちは!
未経験からweb制作会社に就職しましたshioです❋

以前ポートフォリオの作り方についての記事を書いたので、

今回は私が実際に未経験からweb制作会社に転職する際に作ったポートフォリオを見ながら、どんな工夫をしたのかなどを解説します。

これからwebデザイナーを目指す方のお役に立てれば嬉しいです^^

▼ポートフォリオの作り方はこちらでご紹介してます

ポートフォリオのTOPページ

メインビジュアル

ポートフォリオのメインビジュアル

ヘッダーメニューは左上に固定し、いつでも見たいページを見られるようにしました。
名前の部分を押すとトップページに戻れる仕様です。

WORKS(制作したもの)

ポートフォリオのWORKS部分の画像制作物はすぐ見られるように一番上(メインビジュアルのすぐ下)のセクションに持ってきました。
採用担当者が1番見たいコンテンツは自己紹介よりも制作実績だからです。

制作物の画像にマウスを乗せると、その作品についての説明が出てくるようになっています。

スマホ版では制作物の画面の下に最初から表示させました。

ABOUT(私について)

ポートフォリオのABOUTの部分の画像

切り替えの部分にはサイトの雰囲気に合う自然(花)の写真を使いました。

サイト全体に丸を使ったデザインを使用しているので、優しい色を使ったカラフルな丸を散らしました。

カラフルにした理由は、子どもと関わる仕事をしていたことを記載してある部分なので、明るい雰囲気を出したかったからです。

ポートフォリオのWORKSページ(制作物の解説)

メインイメージ

左右に矢印を固定しておくことで、採用担当者が好きなタイミングで次の作品のページを見られるようにしました!(矢印は中のコンテンツと被らないように調節)

PC/iPad/スマホのモックアップ画像を使うことで、パッと見てレスポンシブ対応であることが分かるようにしました。。

ページ全体

ポートフォリオの卒業制作のページの画像

1ページ全体はこのような感じです。
このページは卒業制作で作ったwebサイトなので1番詳しく書きました。
全ページこのボリュームだと、ちょっと多いかもしれません。笑

制作物のページで記載するべきこと

  1. 制作期間(何にどのくらいの時間を使ったか分かるとより良い)
  2. 担当した部分(デザイン・コーディング等)
  3. 使用ソフト(Illustrator等)
  4. 対応機種(レスポンシブ対応しているか)
  5. 実際のページへのリンクボタン
  6. デザインコンセプト
  7. ペルソナ(ターゲット)
  8. なぜそのようなデザインにしたのか
  9. 課題、反省

制作期間・担当箇所・使用ソフト・対応機種等

スマホで見たポートフォリオの画像

デザインの説明

このようにサイトのキャプチャ上に番号をふって、右にコメントを書いていく仕様にしました。
どこの説明をしているのか伝わりやすい
と思います。

卒業制作に関してはこちらの記事に詳しく書いています。

【デザイン未経験者の卒業制作】デジタルハリウッドLIGで猫カフェwebサイト制作のバナー
【デジタルハリウッドLIGの卒業制作】デザイン未経験から猫カフェwebサイト制作こんにちは、shioです。 今回は私がデザインスクール(デジタルハリウッド STUDIO by LIG)で作った卒業制作をご紹介し...

ポートフォリオのABOUTページ(スキル/自己紹介)

ポートフォリオのABOUTページの画像

トップページと統一感が出るように心がけました。

スキル部分は星の数(★★★★✩ こんなようなもの)であらわす方法がありますが、私の場合は未経験で、自信を持って★を付けられなかったのでできることを書くかたちにしました。

shio
shio
余談ですが・・・
アルパカは、北海道のアルパカ牧場で撮った写真です。
可愛い瞬間を撮影できました♪

▼ピンタレストで保存してね📌♡

【私のポートフォリオの解説】未経験webデザイナーの転職活動で使用|参考例のピンタレストの画像

おわりに

ポートフォリオは就職活動で一番大事なものなので、
自分をアピールできるように工夫し、
見てもらう人のことを考えながら楽しんで作ってくださいね^^*

ポートフォリオの作り方・ポイントの記事

webデザイナーの就職活動で使うポートフォリオの作り方のバナー
【ポートフォリオの作り方・ポイント】未経験からwebデザイナーに転職したい方へこんにちは、webデザイナーのshioです^^ 私はほぼ未経験で制作会社のwebデザイナーに転職しました。 未経験からwebデザ...

簡単に作れるポートフォリオの記事

resumeでwebデザインの簡単なポートフォリオを作りました!のアイキャッチ画像
resumeでwebデザイナーの簡単なポートフォリオを作りました!【レビュー】こんにちは! webデザイナーのshioです^^ 最近resumeというツールでデザインした制作物をまとめています。 ...

ポートフォリオ公開しました!

ポートフォリオを公開しました【未経験からwebデザイナーへ転職用】の画像
ポートフォリオを公開しました【未経験からwebデザイナーへ転職】動画で解説転職活動で使ったポートフォリオを公開しました! こちらのポートフォリオは私が転職活動で使用したものです。 デザイナーになる前に制...

実際にサイトとして見られるよう、公開しました^^!

▼こちらをClickすると見られます

shioのポートフォリオのバナー
制作会社のwebデザイナー
shio
webデザイナーshioのアイコン
未経験からwebデザイナーに転身。 最近はインテリアにハマっています^^ webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと| webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきたいです。よろしくお願いします^^
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー