どうも、Tommy(@SitommyBlog)です。
私が、独学・スクールで学んだことをお伝えしようと思います。
今回は、実際転職活動に望むにあたって、どのように勉強をしていけばいいかいまいちわからない方向けに私自身がやって来たことを紹介しようと思います。
結論から言うと、未経験の方のポートフォリオのクオリティーはそこまで期待はしていないということです。
クオリティーより、技術をどの程度身についているかを知りたいことと、人間性などの方を注目して見ています。
未経験1年ちょっとでできることなんて知れていますので、クオリティーを上げるためにポートフォリオを凝るよりも、技術や知識を覚えて簡易的なポートフォリオを作ってしまって早く転職活動することを強く勧めます。
5つのアドバイスをお伝えします。実際、私がこのように作業をした経験談ですので参考にして見てください。
独自ドメイン・レンタルサーバーを借りる
まずは、独自ドメイン・レンタルサーバーを借りるところからスタート。
独自ドメイン・レンタルサーバーの契約については別の記事で紹介しています。
私のオススメベスト3を紹介しています。
よかったらどうぞ。
独自ドメインは、サイトのURLに当たりここでは最終的にポートフォリオを作成したいのでそのURLになります。
レンタルサーバーは、その名の通りサーバーを借りるところで、ポートフォリオを公開するためにはデータをアップロードし保管する場所が必要です。
こちらも契約しておきましょう。
言語とツールを学ぶ
言語というのは、つまり、
- HTML
- CSS
- JavaScript
- 余裕があればPHP
ですね。
そして、コーディングする際に必要なツールがあります。それは、
- Photoshop
- Illustrator
になります。
どちらもAdobe製品になってきます。
ほとんどの現場で扱っているソフトになり、たまに『Sketch』というMac専用ソフトも扱っている会社もありますが、『Photoshop/Illustrator』をおさえておくことは大事だと思います。
デザイナーからデザインが届き、それを元にコーダー・マークアップエンジニアはコーディング作業をするのですが、デザインをカットしていかなければなりません。
通称『スライス』といいます。
このスライス作業は『Photoshop又はIllustrator』で行います。
そのため、ソフトの使い方も覚えておかないとそもそもコーディングできないという自体になってしまいます。
現場、会社によっては、デザイナーがスライスした状態でデータをもらうケースも聞きますがほとんどないと思いますし、コーディングする人がスライスをしないと意図した通りにコーディングが組めなくなってしまう恐れもあります。
Adobe製品は安いものではないのですぐ買えるものではないとは思いますが、現場では必ず扱うものですのであったほうがいいとは思います。スクールに通うとなると学割が効くので買いやすい価格になりますが、独学の場合は標準の価格になります。
私がオススメしているのは、『ヒューマンアカデミーたのまなアドビソフトウェア通販』というものがあり、ストリーミングの動画講座がセットになっているものがあります。
Adobe製品は画像編集やイラスト制作だけでなく動画編集など様々なソフトがあり、その全てが揃っているAdobe CCを買うことが出来ます。
ストリーミングの動画講座もついているのでこちらを見れば理解しやすいでしょう。
気になる方は是非どうぞ。
話を戻しますが、私が関わってきた会社全てが主に、『Photoshop』をメインとして作業をしておりました。『Illustrator』は、イラストやLogoやSVG変換等で使用していました。
こういったツールも、覚えておくと就活の加点ポイントになるでしょう。
Webサイトをトレースする
言語もある程度覚え、ツールを多少扱えるとなれば次は実践になります。
就活で必要になるポートフォリオは未経験者にとってはあくまでも外枠に過ぎないので中身を作らなくてはいけない。つまり、作品をいくつかポートフォリオに乗せて見てもらうので作品作りをしましょう。
ただ、初めから0からWebサイトを作るのは非常に困難だと思います。
なので私がオススメしたいことは、現在世に公開してあるWebサイトをトレースし、それを作品としてポートフォリオに載せるということです。
まず、気に入ったサイトをスクリーンショットをしPhotoshopで確認する。
気に入ったサイトのスクリーンショット画像を下地にして、参考にしながら装飾されているテキストなどは改めて自分で作り直す。画像に関しては、フリー素材からダウンロードしてきました。
ここで養われるのは、ツールの使い方はもちろんのことテキストの間隔や行間、余白の使い方などを真似るということです。
私は、デザイナーでもありたいのでここまでしましたが、エンジニア志望でコーディングのみの方はスライスの練習だけでも問題ないです。実際画像等はWebサイトから基本的に取って来れます。それを使用してコーディングを始めてもいいかと思いますがなるべく、スライス出来るところはしていきましょう。
全てのページをトレースする必要はなく、私は主に『TOPページ・下層1ページ・下層の下層があれば1ページ・お問い合わせページ』の4ページ程度をトレースしていました。
コーディングに入る際は、なるべく検証ツールでソースを見ずに自分で組むようにしていきましょう。
参考のサイトと同じようにレイアウトできるのか、動きをつけられるのか、そういったことを意識して組んで行きましょう。お問い合わせページのシステムは難しいと思いますので後回し、もしくはしないという判断にしていました。
フロント側さえできていれば問題ないでしょう。
私の場合は、後回しにしてシステム部分はスクールでマンツーマン授業の際に先生と作り上げるという風にしていました。
実際に、1つのWebサイトをトレースするだけで格段にスキルがアップします。また、全体像が見えやすくなり2回目のトレース作業が格段に短縮できます。できれば2サイトほどトレースを勧めます。そして、2サイトは別のジャンルがいいですね。
1つは、確実にコーポレートサイトもしくは学校サイトが良いと思います。私は、とある中高一貫学校のサイトをトレースさせていただきました。
もう1つは、別のジャンルがいいですね。かわいい系でも、クール系でも、おしゃれ系でも問題ありません。ただ、ポートフォリオに必ず載せておきたいのは、『コーポレートサイトもしくは学校サイト』だと思います。
なぜなら、結局コーポレートサイトの案件が多いからです。
まずは、コーポレートサイトらへんからやっていくことをオススメします。
余裕があればオリジナルサイトを制作する
もし、時間的にも余裕があればオリジナルのサイトを制作しましょう。ディレクトリー構造からマークアップまで全て一人で出来るようにならばもう問題ないでしょう。あとは、経験を積むだけです。
もちろんオリジナルサイトですので、タイトル名や電話番号は実際に使われていないものにしましょう。
私の場合、友達がフリーカメラマンをしていたのでその人のWebサイトをテーマに作りました。実際にいなくても、そういう設定にしてWebサイトを作ってみてはどうでしょうか。トレースと違って、とても難しいですがめっちゃ楽しかったです。
ポートフォリオを制作する
ようやく、ポートフォリオ制作に取り掛かります。ポートフォリオは、オンライン版とオフライン版を用意したほうがいいでしょう。つまり、Webと紙です。
書類審査で必要になってくるのが、Webのポートフォリオです。面接当日に必要になってくるが、紙のポートフォリオになります。
私の経験上、書類審査でWebポートフォリオを送ったとしてもあまり深く見られていないケースがありました。担当者も忙しいので。
面接時に、URLを口頭で伝えて見てもらうケースもありましたが紙でも用意しておりますと面接現場で見せることで自己PRも含めて自ら説明が出来るメリットがあり、好印象を受けました。
こういうところで悩んだけど、こういうやり方を見つけ解決出来たとか。こういう機能をつけることによってユーザーはアクセスしやすいのではと思いました。など、自ら考えて行動したことをスラスラっと話せるわけです。
もちろん、エンジニアなのでWebポートフォリオは必須ですが、紙ポートフォリオもあれば面接時に優位に立てますので是非作ってください。
まとめ
私が経験上に基づいたアドバイスでした。というか、私が実際に行動した内容でした。独学にしろ、スクールにしろ作業するのは本人に変わりはなく、どのように組み立てていけばいいのかさえ理解できればあとは手を動かすだけだと思います。
今後も私の【経験談】をもとに記事を増やして行きます。
また、プログラミングを現在勉強している人にはこちらの記事を是非読んでみてください。