みなさん、こんにちわ、たけいです。
今日はweb制作会社に就職するために作ったポートフォリオについて、記事を書きたいと思います。
みなさんは、ポートフォリオ、何を作ればいいか悩んでいませんか。
私はweb制作の勉強をし、ポートフォリオを作る時、何を作ればいいかわかりませんでした。
今はweb制作会社に勤務し、なんとかエンジニアしてますが、「あの時、もしポートフォリオの作る方向性をミスったら、就職できてなかったかも」と思っています。
なので、今回は「ポートフォリオって何を作ればいいの？」と思っている方向けに書きたいと思います。
ポートフォリオ作成の作戦
ポートフォリオを作る際、何もデザインとか考えていなかったので、無計画のまま、思いのままポートフォリオサイトを作成していました。
結果、作成ができず、途中であきらめかけていました。
しかし、色々情報を収集して、「ポートフォリオって結局、みんな似たり寄ったりじゃね？」と思ったので、以下のポートフォリオを作りました。
①自己紹介サイト
②架空のボウリングサイト
③isara模写
④バナー
順番的には、①→③→転職活動開始→④→②→転職活動終了みたいな感じでしたが、その中でも、特に重要視したポイントを３つ紹介します。
①公開できるものを作る
まずはネットに公開できるものを作りましょう。
なぜなら、転職をする際は、企業や転職エージェントにポートフォリオのURLを送り、ネットに公開されたポートフォリオを見ながら聞かれるからです。
そこでオススメするのが、ポートフォリオとして公開していいっすよと言われているやつを「お言葉に甘えて」と徹底的に作ること。
そして、ポートフォリオとして公開しちゃいましょう。
ポートフォリオに公開していいと言われてるものは後に紹介します。
②あまりクリエイティブなものを作らない
エンジニアとして現場に入ると、爆速で成長できます。
なので、早くポートフォリオを作って、面接して採用されるのがベストです。
そこで、ポートフォリオの作成に時間をかけてはいけません。
では、どういう風に時間を削るかというと、画像の配置はどうするかとか、文章の位置はどうするかみたいな、ある意味時間がかかるものに、時間を使わないものを作ることです。
オススメは、好きなサイトを模写して、文章と画像を差し替える方法ですね。
なぜオススメかというと独自性がでるからです。
①で述べた「ポートフォリオに公開していいやつを作って公開しましょう」ってやつですが、１つ懸念点があり、
多くの人がポートフォリオとして公開しているので、企業の採用からすれば、「このデザイン、なんか見たことあるぞ」って思われる可能性があることです。
Twitterで「ポートフォリオできました！」と公開してる人がいますが、デザインが同じで、画像と文章を変えただけのものがいくつかあります。
「あー、あれを参考にして作ったのね」と１発で分かってしまうくらいなので、独自性があるポートフォリオを用意するのもポイントだと思います。
③最低2つ作る、欲を言えば3つ以上
ポートフォリオですが、多いことに越したことはないです。
人によりますが、ポートフォリオは1つだけよりも、2つの方がやる気を感じますし、3つ4つとなると、「web制作が好きなんだな」と印象を与えることができます。
私の経験談ですが、1つできても正直自信がなかったので、2つ目も作りました。
そして、転職活動してみようかなと思い始めたので、転職活動したんですが、なかなか採用には繋がらなかったので、「採用されるまで、ポートフォリオを作り続けよう」と決心しました。
そこから、3つ目、4つ目と作り、「これだけやれば文句ねーだろ」と思えてきました。
こんな感じで、ポートフォリオを作ることで自信が出てきて、行動することができたのは確かです。
オススメのポートフォリオのネタ
では、ポートフォリオとして公開できるオススメのネタを紹介します。
①自己紹介サイト
まずは自己紹介サイトですね。
どんな感じに作るか、参考サイトをリンクしますので、このように作ってみてください。（JavaScriptでオシャレな動きをつける必要はありませんよ！）
https://showtaki.com/startkit/
ちなみに他の人の自己紹介サイトを見ると、Bootstrapで作られたテンプレートを使ったようなものが多いですが、個人的には、１からコーディングしたのがいいと思います。
なぜなら、その方が力がつくし、自分のためになるし、
面接の時に、「これ１から作ったのですか？」の質問に
「そうです！１からでなく０から作りました」とドヤ顔で答えることができるからです。
テンプレートって、画像と文章を帰るだけなので、コーディングの力が全くつかないんですよ。
一方、自分で１から作る方が、画像を丸くするのはどうやるのか、横に並べるのはどうやるのかなど、コーディングの力がつくので、オススメです。
②くりのすけさんのnoteをやる
私がweb制作会社に就職が決まった時くらいからtwitterで登場したくりのすけさん。
ちょうどいい価格で、コードが書かれたnoteを販売しています。
しかも、それを使って作ったサイトをポートフォリオにしていいとおっしゃっていますので、こちらもぜひ「お言葉に甘えて」と、参考にしてポートフォリオを作っちゃいましょう。
ちなみに個人的には、くりのすけさんnoteで作ったポートフォリオをよく見かけます。
なので、それだけを作って企業に面接しに行ったときに、「このデザイン結構見るなぁ」と思われるかもしれません。
そのことから、2つ目以降のポートフォリオとして、作成するのがいいと思っています。
③isara模写をする
模写した後、ポートフォリオとして公開していいと唯一言われているサイトです。https://isara.life/
ちなみに、サイト模写はコーディングを極めるにはめちゃくちゃいい方法なんですが、このisaraのサイトは、オススメ模写サイトの中でも難易度がめちゃくちゃ高いサイトです。
私も実際３週間くらいかかりました。
ですが、このサイトには、サイト制作に必要な知識と技術がびっしり詰まっていて、このサイトを早く作れるなら、相当自信持っていいと思います。
そして、現場でも通用します。
なので、このサイト、模写して欲しいです。
あと、現場に行けば、サイト模写みたいに、こういう風にサイト作って下さい」とデザインが渡されるですよ。
つまり、エンジニアの仕事って、見本をただコーディングして、PCに表示されるようにコピーすることなんですね。
それって、サイト模写してることと変わらないんですよ。
サイト模写って、見本をコピーするものなので。
したがって、模写はエンジニアになってから必ずやることなので、早い時期から模写することにオススメします。
なお、isara模写して作ったサイトは、ドメインとってネットに公開しちゃうと違法になるので、ページをスクリーンキャプチャにしたものを公開しましょう。
④企業サイトを模写して、パクる
この方法は、ポートフォリオを作るときにやっていなかった方法ですが、YUJIさんが効率のいいポートフォリオの作り方として紹介していて、なるほど！と思ったので、お勧めしました。
実際、私も個人で稼ぐための実績作りとして、ポートフォリオを作っているのですが、この方法でつくっています。
どっかのサイトを模写して、画像と文章を差し替える。
この方法をとると、先ほど述べたように、いちいちデザインを考えなくていいので、めちゃくちゃ楽なんですよ。
それに模写してるってことで、アウトプットをしてますし。
先ほども述べたように、独自性が出る方法なので、ポートフォリオのネタの1つとして公開するのをオススメします。
（模写するサイトのロゴや会社名は絶対に変更して下さいね）
⑤Photoshopでバナーを作る
Photoshopでバナーとから作らなくてよくね？って感じですが、
web制作会社では、サイト内の画像の変更業務があり、その際に画像をPhotoshopサイズの変更する、もしくは色を変えた上で、画像の変更をします。
なので、HTMLやCSS並みの必須スキルになります。
なので、バナーを作れるのは、「Photoshop、ちょっとできますよ」とアピールできると思います。
マストではありませんが、Photoshopのポートフォリオがあるといいのかなと思います。
ちなみに、バナーは1時間くらいでできますよ。
これでポートフォリオにできるし、なんか作ってる感あるし、Photoshopを使ってるので、現場に入ったとき、理解しててる部分があるので、損は絶対にありません。
ちなみに、話がそれますが、YouTubeのサムネイルってPhotoshopで作成してるんです。
あと、PhotoshopでできたデータをPSDと言うんですが、「このデザインでコーディングして下さい」と渡されるデザインデータがPSDかXDなんですよ。
なので、現場ではPSDのデザインデータから、色とか画像とか、幅とか、様々な情報をゲットして、コーディングします。
以上から、Photoshopが必要なスキルであるのはわかるかと思います。
ポートフォリオを早く作って転職しよう
よくtwitterでプロゲートを繰り返して、完璧な状態になってからポートフォリオを作ろうとする人がいますが、早く就職して、仕事をした方がエンジニアとして成長できます。
なので、1日でも早くポートフォリオを完成させて、転職活動して内定と勝ち取りましょう。
それにポートフォリオですが、1つできると何か安心します。
そして、2つ目作るのがめんどくさいと思ってきますが、そこをなんとか作り、運がいいと採用されるかもしれません。
そして、ポートフォリオが3つもあると、もうやる気をアピールするには十分だと思いますよ。
なので、頑張ってください。
一応、このブログでポートフォリオのことを書きましたが、もし他に何か聞きたいことがあれば、ぜひTwitterにてご連絡ください。
また、2020年5月から、無料でオンラインで転職相談を開始しました。
ぜひ私と面談してみたいと思っている方は、TwitterのDMで連絡をいただけたらと思います。
今回もブログをご覧いただきありがとうございました。
これからもよろしくお願いします。
