久々の更新、後藤です。
最近とある学生に出会いまして、色々とアドバイスというかお話する機会をいただきました。
その中でポートフォリオサイトを企画して制作へと一連の流れでお話しました。
私もWEB業界に入る前に試行錯誤して作っていたなと思い、改めて今のトレンドも考えながら、
自分の中で作り方をまとめました。
今回の記事では学生のポートフォリオサイトを想定してご紹介します。
何かのヒント・参考になれば幸いです。
制作フロー
1.企画
学生の就職活動用ポートフォリオサイトであれば、ターゲットが企業担当者で、ゴール=CVがポートフォリオサイトを見て面接・採用を決めてもらえる事なので、自分を客観的にきちんと見て、まずはアピールしたいポイントを整理します。
2.ワイヤーフレーム
企画である程度打ち出す事（コンテンツ）が決まればワイヤーフレームでさらに整理していきます。「Cacoo」や「moqups」などのツールもありますが、私は勉強のために案件のワイヤーフレームは「Adobe XD」を使用しています。
3.デザイン
ワイヤーフレームを元にデザインしていきます。デザインで使用出来るツールも増えていますが、Adobe系「Photoshop」「Illustrator」をおすすめします。
また、スマホは今の時代は必須となってきているので、レスポンシブサイトを想定で制作します。
4.コーディング
エディタはなんでも良いですが、色々使ってみて自分に合うエディタを見つければ良いかと思います。 CMSは実績紹介がいくつもあったり、必要であれば導入を検討してみてください。
メインイメージ
メインイメージは、自分のカラーを出して個性をアピールするエリアになります。
グラフィックが強ければグラフィック。イラストが得意ならばイラストを。趣味で写真を撮ってれば、イメージを引いても良いです。
また、ファーストビューエリアなので、一番に見られるエリアです。文章もシンプルになるべくわかりやすく設置します。
プロフィール・ヒストリー
「名前」「所属」「趣味」などを紹介します。
基本のプロフィールはシンプルに書いて、経歴やこれまでの事はヒストリーでまとめるのが良いと思います。
スキル
デザインツール「Photoshop」「Illustrator」やエディタ「Atom」や「Sublime Text」など使用ツールを紹介したり、HTMLやSass(SCSS)、JavaScript、PHPの技術をグラフやビジュアルで視覚的にアピールするのも良いと思います。
プロセス
就職活動用であれば、このサイトを作るにあたってのコンセプトやこれまでやってきた勉強などを紹介します。 また今後やっていきたい事もこのエリアでアピールします。
作品
学生時代、制作してきた課題サイトなどがあれば載せます。
ただ数が重要ではないので、本当に見せたい作品をサイトを搭載します。
お問い合わせ
PHPなどで技術があれば、フォームを作って設置します。またメールアドレスだけの記載でも問題ないと思います。
まとめ
WEB制作の就職は実務経験がなければ、厳しいですが、私も含めて皆最初は未経験。会社に入り色々と経験していきます。
その第一歩の業界に入るには、ポートフォリオサイトは重要です。
技術や経験ももちろん見られますが、サイトを通して人間性も見られるので、伝え方など気をつけて制作してみてください。
