【未経験転職】警察官からWebデザイナーを目指す私のポートフォリオサイト
前職で初めてバナーをデザインしたとき。
今までにないくらいの集中力で作業して、お昼休みも残り５分で。
「いや…デザインするのめっちゃ楽しいやん…」
デザインの楽しさに気づいてしまった2020年秋。
そしてデザイナーに転職するためのポートフォリオサイトが完成した2024年冬。
ついにここまできた～！嬉しい。
旦那さんに応援してもらえてここまで来られたなぁ。
旦那さんありがとう。
でもここからですね。転職活動！
ということで制作したポートフォリオサイト公開します。
制作期間は約３週間です。
プロフィール
・湘南在住
・8年続けた警察官からWEB制作のデザイナーを目指し転職活動中
（ポートフォリオサイトブラッシュアップ&追加の制作物を製作中のため、まだ書類はほぼ送っていません）
Xアカウント @kinomi_design
①目的
目的は、採用担当者の方に好印象を持ってもらうこと！
【分からないながらも要所要所の一生懸命さを出す】
未経験からのデザイナー転職。
そもそもがめっちゃハードル高いです。
「こんなもんでいいでしょう？」は絶対ダメだと思いました。
しかし、技術不足でまだまだ効率的な作業もできず、行ったり来たり。
前職は有休消化期間に入っているものの、8日に1回の当直勤務だけは継続しておりまして(今もやっています)。
有休をとれている日は、9時に起きてから次の日のお昼まで作業するような生活。
旦那さんとゆっくりアニメを見る至福時間も取れず(悲しい)、推しのライブDVDも封印し(悲しい)、合間合間で家事をする。
肌のコンディションはとっても残念な感じです。
そんな感じで毎日ひとり当直勤務(？)をしながらも、気になるところは放置せず、css設計を見直したり、分からないながらもseo対策やwebアクセシビリティを考慮して、今の自分が提供できる最大限のポートフォリオサイトを完成させました。
【身分をガンガンに明かす】
自分のキメキメ写真をバーン！と出しました。
逆の立場で考えると、顔や表情がわかるときの方安心するなぁ？と思いまして。(最初は写真を小さくしていたのですが、メンターさんから写真は大きくした方がいいですよ～とご指摘いいただいたので、ちょっとうざいくらい顔を主張しました)
あとは、プロフィールや思想についての文章は、ありのままの自分を表現するようにしました。
16Personalitiesを載せたり、プライベートも少し晒してみたり。
デザイナーとしての主張から大きく外れないくらいの自己表現をしました。
採用担当者の方に好印象を持ってもらうという目的に向け、分からないながらも要所要所の一生懸命さを出す / 身分をガンガンに明かすようにしました。
②テーマ
”公務員ってお堅いからデザインとかお分かりにならないでしょ？”を払拭できるようなおしゃれ感とミニマル
【フォントへのこだわり】
・HVMuseRegular
ファーストビューをおしゃれな雰囲気にしたかったので、デザイン性の強いこちらのフォントを大きく配置し、メインフォントとしても使用しました。
Instagramで海外のクラシカルなフォントをまとめている投稿から見つけ、「なにこれ可愛い…」と即購入。(海外サイトから約2,000円ほどで購入しました)
今まではAdobe Fontsで探していましたが、ひとつときめくようなフォントを取り入れると、サイトに愛着も沸いてすごくよかったです。
・DNP秀英角ゴシック銀Std 脱・Noto Sans Jpで選んだモリサワフォントです。
テックアカデミーで最初にインストールした"Noto Sans Jp"を使用したときは、「フォントでこんなにミニマルな柔らかい雰囲気が出るんだ…素敵」と思ったのを強く覚えています。
汎用性が高いNoto Sans Jpですが、せっかくのポートフォリオサイトだからほかの心ときめくベーシックな日本語フォント使ってみたいなぁ、とたどり着いたのが天下のモリサワフォントさん。モリサワフォントはアラサーデザイナー2人のポッドキャスト番組「たまにデザインFM」さんが”フォントといえばモリサワフォントだ”という話をしてて気になっていたので、「無料で提供されているモリサワフォント！」とテンションが上がりました。
DNP秀英角ゴシック銀Std は可読性が高く、柔らかいながらもどこかおしゃれな雰囲気で、今回のポートフォリオサイトのテーマにも合っているのでとてもお気に入りです。
修正：こちらのフォントは大日本印刷株式会社さん提供のフォントでした。
モリサワフォントさんが提供している「秀英体」シリーズのゴシック体を
【カラー】
ミニマルなサイトにしたかったので、最初はほぼモノクロにしようと思っていたのですが、性格上どうしても色を入れたくなってしまいました。
そして、なぜか青にひかれてしまうので、彩度低めの水色をアクセントカラーに。
ベージュと水色の組み合わせって、可愛いですね。きゅんです。
あとは、デザイン界では#000000の真っ黒は以下の理由で推奨されていないようなので、自然な黒色を適度に使用しました。
・人間の目は光と屈折量によって色を判断するため、明度差によって目に負担がかかる
・自然界にない色なので不自然
ということだそうです。
まとめると、公務員というお堅いイメージから良いギャップとなるようなおしゃれでミニマルなサイトを目指して工夫しました、というお話。
③ポートフォリオサイトにこだわってよかったこと
ポートフォリオサイトを工夫して制作すると学びと課題がいっぱい発見できた
【最初はノーコードツールで作ろうとしていた】
最初は、就職希望時期に合わせると時間が足りないから、制作物のwebサイトをデザインとコーディングして、ポートフォリオサイトはノーコードツールで簡単に制作した方がいいかな？と考えていました。
その旨をメンターさんに相談したところ、「ポートフォリオサイトをこだわって作った方が、採用担当者の人に”就職したい想い”がよく伝わるので、個人的にはこだわった方がいいと思いますよ」とアドバイスをいただきました。
そのときは「なるほどー。そうします。」と素直に聞き入れたのですが、ポートフォリオサイトを制作し終わった今、「いや～ポートフォリオサイトこだわってよかった！」と思っています。
そのほかたくさん相談に乗ってくださったメンターさんには本当に感謝ばかりです。
私がポートフォリオサイトをこだわって制作してよかったと思うポイントを紹介します。
【自分でこだわりポイントが説明できる】
と思う。(まだ面接一度も受けていないので笑)
私はもともと話が長いタイプですが、面接官の方に「ポートフォリオサイトでこだわったところはありますか？」と聞かれたらたぶん面接時間内に話きることができません。
それで落ちたら縁がなかったということで(求ム要約)
今回の転職活動で、制作物への深い理解があるというのは強みになると思っていて。
やりきらないと不安が拭えない性格の私にとっては良い方法だったと思います。
【山のような課題に気づき、向き合える】
ポートフォリオサイトをコツコツ制作していると、山のように高く、海よりも深い課題が襲い掛かってきました(震)
画像の書き出しサイズ、画像の解像度、トンマナの整合性が取れない、余白に謎の違和感、動かないjQuery、終盤で気づくコーディングの乱れ、クラス名のつけ方、webアクセシビリティやseo対策とは…？
今の私がポートフォリオサイトの制作に取り掛かる前の私と話すことができたら作業時間は大幅にカットされたことでしょう。
私は、残念なことに理解力があって器用にこなせるタイプではありませんので、地道に失敗しながら学ぶことしかできません。
前職の経験でも、失敗→改善の繰り返しで成長してきました。
今回の学びを生かして次の制作物に挑み、また課題が見つかり、また挑み、課題が見つかり…繰り返した先の私はデザイナーとして少しは成長できている(はず)。
【まとめ】
とりあえず面接決まりますように…
今回のポートフォリオサイト制作では多くの課題が出てきて、たくさんの発見がありました。
自分に向き合う時間になって、とってもプラスな体験にできたと思います。
ポートフォリオサイト制作はテンプレートを使用するというやり方もあるようなので、私の場合はポートフォリオサイトをこだわって制作してよかったな、というお話でした。
面接が決まらないことにはお話が始まりませんね。
とりあえず今のところは、学習での気づきをnoteにまとめてみようと思っています。
あとは祈るばかり！
最後までお付き合いいただきありがとうございました。またね～
kinomi
この記事が気に入ったらサポートをしてみませんか？