WEBデザインスクールの授業が一通り終わり、最終課題として個人製作(何を作っても自由)がありました。私は、今後WEBに携わっていきたいという思いから転職に使えるポートフォリオを作成すると決め、先日完成させることが出来ました。
本記事ではポートフォリオを作成してみて何を思ったのか、どんな風に作ってみたか等をまとめました。
ポートフォリオの目的
- 制作物一覧を表示させるためのサイト
- クライアントに制作物や私について知ってもらうためのサイト
- 採用試験に使うためのスキルシート
私が考えるポートフォリオの目的は以上３つと考えました。
主にお仕事をさせていただく上でのスキルを確認するものという部分が大きな目的になると思います。
ただ、ネット上で調べてみると３つ意外にも役割があるみたいで、他に上げるとすると２つありました。
- クライアントが求めるスキルがあることを証明するもの
- 制作物に対する考え方を伝える
似た意味ですが、より深みのある内容となっています。
クライアントが求めるスキルを証明する
UIに強みを持つWeb制作会社の採用面接に行く時は、自分のUIスキルがアピールしやすい資料を中心にポートフォリオをまとめ、グラフィックにこだわりの強い会社に面接に行く時は、グラフィックスキルをアピールしやすい資料を中心にまとめる、そういったアレンジが自然の流れであり、「転職活動で複数社の面接を受けたが、持っていったポートフォリオはすべて使い回しだった」といったことのないように注意が必要となります。
マイナビクリエイターより引用
とてもためになることが書いてありました。
制作会社によって強みとしている部分が異なるので自分が目指す方向に特化したポートフォリオが必要になるとのことです。
私はコーディングが楽しく、コーダーになりたいと思ったので今できる限りのコーディングで作成してみました。
制作物に対する考え方を伝える
自分が作った制作物を載せて終わってしまうと、完成品しか見れないため、制作の意図(構成、配色、サイズ等を選んだ理由)やどんなことを考えたかなどがわからないため、どのように考えたのかを載せることも大切とありました。
私の場合は制作物に対して、悩んだ部分等を入れることで、どのように考えて作ったかを入れてみました。
ただ、制作物に対して文字量が多いと見栄えが良くないので、内容をある程度まとめ、文字量の調整に少し苦労しました。
スキル等紹介
アコーディオンメニュー
記事ように簡易的に作ったので見栄えはよくないです（笑）
このような形でアコーディオンメニューをポートフォリオに搭載してみました。
アコーディオンメニュー自体初めて触り、どうすれば消したり表示させたりできるのだろうと悩んでいました。ネットで調べると実に様々なコードが紹介されており、たくさんある中でCSSだけで作れるものを選び実装しました。
今回はわかりやすいかなと思って、メニューという青い帯の下にオレンジの枠を表示させ、オレンジが伸びますよとアピールしていますが、ポートフォリオでは何もない状態となっています。
タブ切り替え
- メニュー
- メニュー
- メニュー
- メニュー
タブ切り替えに関して、タブをクリックすると中身が変わるようhtml,css,jQueryを使い表現してみました。
どうしたらタブと中身が連動するのか見当もつきませんでしたが、スクールの先生やネットの情報を駆使し、タブ切り替えを行えるようになりました。
この記事ではざっくりしたデザインとなっていますが、ポートフォリオでは画像に対してタイトル帯をつけたりして見やすくしています。
ポートフォリオ作成で一番悩んだ部分でもあり、今でも感動しています。
そしてこうした動きのあるコーディングが出来て楽しいという思いでいっぱいです。
その他
私の経歴をはじめ、各制作物に対してどこに悩んだか、制作時間、各制作物の画像、サイトであればリンク、今まで書いてきた制作日記へのリンク等を載せました。
制作日記→日記一覧ページ
細かいことですが、タイトルにあしらいを入れたり、タイトルと本文でフォントサイズを変え、メリハリも意識してみました。
あとがき
スキルとしてはまだまだだなと作っていて実感させられる場面が多く、できることは少ないですが、作ろうと思って新しいことに挑戦することでなんとなくでも形にできるんだなと制作活動を通じて思いました。
ワードプレスでこのように記事を書いていますが、今まではテーマをそのまま使うだけでしたが見出しに色を入れてみたり、ポートフォリオで使っていたcssやjQeryも載せてみたりと、やってみようと思ったら意外と何とかなるものだなと感じています。
時間はかかりますが・・・（笑）
ただ、今まで制作してきたことはちゃんと身についていて、ポートフォリオを作っているとき、なぜこの部分だけ余白が多くてほかの部分と違うのだろうといった場面や画像が収めたい範囲から飛び出してしまったときの対処等、自分で解決することが出来るようになってきていて、少しずつでも身になっていると実感出来ました。
スクールの力をお借りした場面も大いにありますが、それでも自分の手で形にできたことで少し自信が付きました！
久々のワードプレスですが、書き出すと止まらないのでかなり集中力をつけるためのトレーニングにもなるので不定期でも書き続けていこうと思います。
こんな感じでポートフォリオを作ってみた感想を終えたいと思います。
