【実例あり】未経験Webデザイナーのポートフォリオ制作

学習&転職法
Webデザイナーに転職したい人
Webデザイナーに転職したい人

Webデザイナーに転職するためにポートフォリオは必須らしい。でも未経験者のポートフォリオって一体どんな風に作ればいいんだ…?

そのような疑問にお答えします!

私(@nkichiishi)はアラサー未経験から、約3ヶ月でWebデザイナーに転職しました。
そして未経験からWebデザイナーになるためになるには、勉強もさながら、なんと言っても就職活動が大変だった思い出があります。

そして就職活動に必須なのが「ポートフォリオ」。

日頃Twitterを眺めていると、Webデザイナー未経験の方が「ポートフォリオ作りました!」と言って公開してくださっているのを目にします。
中には「アナタ本当にミケイケンデスカ???」というクオリティの方も。勉強量の差なのか…センスなのか…はたまたお母さんに作ってもらったのか(小学校の自由研究みたいに)。

そして未経験の方はなおさら「皆どんなポートフォリオを作ってるんだろう?」と気になりますよね。

そこで今回は私がWebデザイナーとして就職する前、未経験の頃に制作したポートフォリオの中身を公開します
プライバシーの観点から一部ポートフォリオ内のリンク、画像、文章は差し替えている箇所がありますが、ソースコードは当時のままです。

「未経験でこのくらいのポートフォリオで就活してたよー」というのを実際見て感じていただければ幸いです。

※以下のリンクより飛べます

TOPとフッターにGIF画像を使ってる奇抜なポートフォリオになっています。

このポートフォリオに加えて、今だからこそ感じるWebデザイナー未経験のポートフォリオ制作でやっておいたほうがいいこともまとめました。

Webデザイナーを目指す方や、就活中という方は是非参考にしてみてください!

スポンサーリンク

ポートフォリオ作りの流れ

私が未経験の頃に作ったポートフォリオに沿って、作り方を解説していきます。
当時参考にしたサイトのリンクも貼っていますので、同じように作りたい方はそちらもチェックしてみてくださいね。

載せる作品を作る

Webデザイナーを目指すやる気満々な人
Webデザイナーを目指すやる気満々な人

よっしゃ!!転職活動するのにポートフォリオサイトつくるぞぉぉ!!!!

と言っていきなりポートフォリオサイトを作ったところで「載せる作品」がなければ意味ないですよね。
「あれができます!これもできます!」って言葉で書かれてても、実績がないと全く説得力がありません。Webデザイナーを目指すとしたら実際に制作した「Webサイト」「バナー」「デザイン」等々。

一番おすすめ、というかできればやって欲しいのは「実在するお店や、実際に使うことを想定したWebサイトを最低でも一つ作る」ことです。

物言いがきつい転職志願者
物言いがきつい転職志願者

いやそれたまに聞くんだけど、実在する店の知り合いとかいないしそんな営業力あるわけないじゃん?未経験だよ??ちゃんと未経験の立場になって考えて??

実際に使うことを想定したWebサイトというのは、未経験者にとって若干ハードルが高いかもしれません。
しかし他人が使うことを想定したWebサイトを作ることで、以下の恩恵が受けられます。

  • 面接時に話のネタになる
  • 他人と意見のすり合わせる難しさを知れる
  • 誰かのためにサイトを作る楽しみを味わえる
  • 自分が運営するサイトではないため、ちゃんとやらなければという気持ちが高まる
  • その分やる気も高まる
  • スキルも高まる
  • 「これってもう私・僕・俺Webデザイナーじゃね???」という気持ちになれる
  • なんとなく自信がつく

サイトを作らせてくれそうな人を探す

家族、親戚、知人、知人の知人、いつも通ってるお店の人、Twitterで、Instagramで、Facebookで「ホームページを作る仕事に就こうとしている」ことや「ホームページ作りませんか」と公言してみてください。「えーじゃあ作って!」と言う人が出てくるかもしれません。

それらでなかなかみつからなければ「ココナラ」などのサービスを使って簡単なサイトやバナー制作案件を受注するのもいいと思います。

しかし他人から対価をもらってWebサイトを制作する上では自分の力量に見合ったWebサイトの依頼を受注することが大切です。

自分の力量に見合ったというのは、今の知識+調べればなんとかできそうという範囲の依頼
受注したはいいものの「自分では完成しきれませんでした…」は言語両断。最悪の場合、損害賠償問題になるので注意してください。

自分が使うことを想定したサイトを作る

実際に使うことを想定したWebサイトで言えば「自分が使うことを想定したサイト」を制作するのも手だと思います。

例えば写真が趣味だったらカメラや撮った写真を紹介するサイトだったり、キャンプ好きだったらおすすめのキャンプ地やキャンプ道具を紹介するサイトなど。
自分の趣味に関連するWebサイトは作っていても面白いと思います。

実際に私が作ったサイト

私は当時通っていた美容室の方にお願いして、その美容室のサイト制作をさせていただきました。それこそ「えーじゃあ作って!」という具合に。
流石にいくつもの実店舗のWebサイトを作る気力と余裕と体力がなかったので、実店舗のWebサイトはひとつにとどまりましたが…。

その作らせてもらったサイトを含め、載せている実績は以下のようなものです。

  • ポートフォリオサイト全2ページ
  • 実際の美容室のサイト※掲載では内容がダミーになっています(全6ページ
  • 架空の寺社巡りサイトTOPページのみ
  • 架空の病院のサイトTOPページのみ
  • オンラインスクールで作った架空のコーポレートサイトをWordPress化したもの全3ページ
  • オンラインスクールで作った架空の通販サイト全3ページ
  • バナー等のトレース10個

ポートフォリオサイトを作る

載せる作品がいくつか完成したら、実際にポートフォリオサイトの制作です。 
以下、実際に載せた情報を詳しく解説していきます。

自己紹介

自己紹介

自己紹介の画像は「これ本当に自分か?」と思うくらいとびっきりのベストショットを掲載します。
第一印象はやっぱり大事です

とびっきりのベストショットをPhotoshopでさらに修正し「毎回写真撮る時にこの顔ができたらいいのに…」と思いながらポートフォリオの自己紹介写真を作ったのは私です。

注意点として、個性を出しすぎた写真を掲載するのはやめましょう。
履歴書のような写真は必要ありませんが、変な顔をしていたり、キラキラの加工をしていり、ウェーイ!みたいな写真はただただ印象を下げるだけです。

実績紹介

実績一覧

実績一覧から詳細情報をみるためにページ移動するとちょっと手間かなと思ったので、ポップアップで詳細を見れるようにしています。

実績詳細

ポップアップを出してその中に情報を入れ込むやり方は、以下の記事を参考にしました。

CSSだけで実装!画像をクリックしてポップアップ表示する方法
画像をクリックしたら、ポップアップしてかっこよく表示したい!そんなことってありますよね。今回は、JavaScript等は使わずにCSSだけで実装するポップアップのやり方をご紹介します。

PCやスマホの画面にはめこむモックアップ用素材はWeb上で入手できます。
Photoshopを使ってスクリーンショットを当てはめ、スマホと並べました。

これでもうモックアップ素材に困らない!スマホ、タブレット、デスクトップほとんどすべてのデバイスが揃ってる -Devices
スマホ、スマートウォッチ、タブレット、コンピュータ、ディスプレイなど、ほとんどすべてのデバイスが網羅されたモックアップ素材を紹介します。 iPhone 11 Pro, Google Pixel 3など

実績紹介を掲載するにあたって「制作期間・コンセプト・工夫した点」などの詳細情報は必ずいれておいたほうが良いです。それがないと「ただ作りました」状態になってしまうので。

スキル紹介

スキル一覧

主なスキルと、それらが今どのくらいできるのかを簡単に書きました。
たまにスキル欄で、スキルレベルをグラフや★の数で表していることもありますが、個人的に自分のスキルレベルって数値化するの激ムズだと思います(未経験者の場合特に)
基準がよくわかりませんし、仮に基準があったとしてもそれは人によって様々です。

「HTML検定2級」や「WordPress検定3段」などがあればわかりやすいんですが…。笑

お問い合わせフォーム

お問い合わせフォーム

お問い合わせフォームをphpファイルで作成しています。
と言っても当時はphpの知識なんて皆無だったので(今もかも)以下の記事を丸々参考にして制作しました。

【PHP】コンタクトフォームの作り方 第1回「HTMLとCSS」
Bootstrap, Google Fonts を最新のバージョンに更新しました。(2021年7月2日) ここまでの記事はこちら 第1回は「HTMLとCSS」です。 まずは Bo

しかし作っておきながら、この問い合わせフォームは必要性をあまり感じません。笑
というのも未経験の方が制作会社などに応募する際は、転職サイトだったり、会社のWebサイトから問い合わせたりすると思うので…。
そのポートフォリオサイトから案件を獲得するとなれば話は別ですが。
載せるとしたもメールアドレスを貼っとくだけもいいのかなと。

メールアドレスを載せる際の注意点として、アドレスを直張りするとスパムロボットに収集されて迷惑メールが大量にきてしまう場合があります。
万が一メールアドレスを記載する際は、以下のサイトで暗号化して掲載するのがおすすめです。

メールアドレス暗号化(メール暗号化ツール)
メールアドレス暗号化ツール。メールアドレス収集ロボットに収集されないメール暗号化を簡単に行えます。エンティティ化だけで満足されている方はご注意ください。

ポートフォリオサイトをサーバーにアップする

ポートフォリオサイトを制作したら、作ったものをサーバーにアップしなければなりません。

サーバーにファイルをアップしてWebサイトを公開するためには、独自ドメインの取得とレンタルサーバーを借りるという手続きが必要です。

サッパリな女性
サッパリな女性

どんなサーバーを借りたらよいのかサッパリわかりません。

どんなレンタルサーバーを選べばよいかわからない方は、目的別におすすめのレンタルサーバーをまとめた記事もあるので参考にしてみてください。

少し抜粋すると、目的が「ポートフォリオの掲載」だけならリトルサーバー 、「今後Webサイトやブログ運営もしていきたい」と考えているならConoHa WING がオススメです。

ポートフォリオサイトで気にした方が良いこと

次にコンテンツとは別に、ここを気にするとポートフォリオの印象がもっと良くなる点を4つ挙げます。

デザインの4原則に沿っているか

初心者で一番やってはいけないのは、完全オリジナルでWebサイトのデザインをすることです。

ポートフォリオサイトで個性を出すのは大事な要素の一つかもしれませんが、それはデザインの原則に沿っているのが大前提。

デザインの原則の基本は「近接・整列・反復・強弱」の4つです。
サイトを制作する際にはこれらをまず意識し、それからオリジナリティを出していってください。

(最初からオリジナリティに走ると、高確率で醜いサイトになります)

常時SSL化されているか

未経験の方のポートフォリオを拝見していると、常時SSL化していない方が意外と多いです
セキュリティ云々もそうですが、どんなWebサイトでもSSL化されてないとちょっと残念だなぁという気持ちになります。

Googleも常時SSL化されてないサイトに厳しくなってきており、検索ランキングにも少なからず影響が出始めています。
今では以下のようにアドレスバーに安全ではなさそうな警告も出てしまいますしね。

「保護されてない通信」とでるChromeのアドレスバー
Chromeでの表示
「安全ではありません」とでるSafariのアドレスバー
Safariでの表示

ポートフォリオサイトなのでそこまでセキュリティ的な部分は気にしなくても良いとは思いますが、SSL化は「常識の範囲内」なので設定しておきましょう。

最近のレンタルサーバーではコントロールパネルから無料で設定できるので、かけてない方は一度見直してみてください。

「ダミーテキスト」を極力減らす

架空のサイトを制作した際、全てが「ダミーテキスト」や「ここにタイトルがはいります」などの文章だと練習で作りました感が強くなってしまいます。

ポートフォリオで一番評価すべきものはデザイン力やコーディング力であることは変わりないですが、コンテンツはそういったサイト作りに対する「姿勢」が滲み出るところでもあります。

かと言って全てをそれなりの文章にするのは大変です。
例えばコーポレートサイトであれば、ファーストビューで見える会社名やナビメニュー、キャッチコピーを考えてみたりするだけでも印象が変わります。

このように架空サイトを制作する際は「架空だけど実在しそう感」を出すことも大切です。

SNSは載せない

最後は良くなる点というか、気にした方が良い点として、自身のTwitterなどのSNSは基本的に載せない方が無難です。

どうでもよい独り言やネガティブ発言、狂気的な雄叫び、「草」などというつぶやきを晒すのは、ただただ印象を下げるだけです。
フォロワーが何千、何万人といて「自分はこれだけ影響力があります」というアピールとしての掲載や、完全なる勉強アカウントであればまだ良いですが、そうでなければSNSを掲載するメリットはありません。

まとめ

ここで紹介したポートフォリオを引っ提げて、実際私もWebデザイナーを目指し転職活動をしていました。
そして今改めてみると、間違いなくもっと良いものが作れる自信があります。
自分で言うのもなんですが、それだけ成長したということですね…はい。

ちなみにこのポートフォリオサイトに掲載しているもの全ては、独身ニートでWeb制作の勉強を初めてから毎日狂ったようにパソコンにかじりつき約3ヶ月で制作したものです。
ぜひ取り入れるところは取り入れて、「ナンジャコレ…」と思うところはスルーしてください。泣

あと作ったものはTwitter等にあげるのがオススメです!現役の方からフィードバックをもらって、よりよいサイトに仕上げてください。タイムラインに流れてくれば、私も見ますねヽ(´ー`)

実際の転職活動の記録は以下の記事に掲載してありますので、よろしければこちらも参考にしてみてください。

つな

アラサーからWebデザイナーになりました。前職は医療従事者。都内に勤める道産子です。このブログでは私自身が未経験から転職した体験を元に、Webデザイナーを目指す方に役立つ記事、スキルアップに繋がる情報を主に発信しています(適当な日記もたまに)。
Twitter:@nkichiishi

つなをフォローする
学習&転職法
スポンサーリンク
つなをフォローする
Webデザイナーどうでしょう

コメント

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