採用担当者に聞く!未経験WEBデザイナーがポートフォリオで押さえるべきポイント4選【就職】

公開日 :

  • WEB ノウハウ

はじめまして!AndHA新入社員のマサヒロです。

2年ほど前からWEBデザイン・コーディングの勉強をはじめ、30代を目前に一念発起。異業種から未経験転職で、11月よりWEBデザイナーとしてAndHAに入社しました。

同じように未経験者がWEBデザイナーとしてWEB制作会社へ就職を目指す場合、避けては通れない道、それがポートフォリオサイト制作ですよね。

そこで今回のブログでは、ポートフォリオサイト制作にあたって最低限押さえるべきポイント4つを、実際にAndHAで採用担当を務め、業界経験10年以上、WEBデザイナーを経て現在はWEBエンジニアチームのリーダーでもあるクマガイさんにインタビューしました。

今回の記事は以下のような方におすすめです。


  • WEBデザイン未経験者でWEB制作会社へ就職・転職を考えている
  • デザインは勉強してきたものの、自分でサイトを作ったことがない
  • これから企業のWEBデザイナー求人へ応募を予定している

なかなか聞けない採用担当者目線でのお話。今後のポートフォリオサイト制作や、コーディング学習のひとつのマイルストーンとして活用していただければ幸いです!

大前提:未経験で就職を希望するならWEBデザイナーとしてのポートフォリオサイトは絶対必要!

マサヒロ:
クマガイさん、本日はインタビューのお時間をいただきありがとうございます!よろしくお願いします。

クマガイさん:
よろしくお願いします!

マサヒロ:
今回のインタビューでは未経験WEBデザイナーがポートフォリオサイト制作で押さえるべきポイントというテーマでお話を伺っていきたいと思います。

早速ですが、未経験でWEBデザイナーを目指す場合、ポートフォリオサイトは必須。この認識はまず間違いないでしょうか?

クマガイさん:
そうですね。WEB制作会社へ就職・転職を希望するのであればポートフォリオサイトは必ず用意しておきましょう

特にWEBに関する制作会社への応募ということなら紙資料やPDFではなく、WEBで見れる状態にしておくのが必須と思った方が良いと考えています。

(1) (デザイナー志望だったとしても)コーディングができているか

クマガイさん:
例えば学校でデザインをやっていてデザイン作品はある、応募に関してもデザイナー寄りです!という人だとしても、最低限HTML・CSSを使って自分がデザインしたWEBサイトをコーディングできるところ。そこまでは勉強しておくとどの会社でも評価は高いと思います。

未経験入社はどの会社もハードルが高いから、「デザインしかやりません!」という人と、「デザインが得意ですがコーディングも勉強して形にしてきました!」という人では将来的な仕事の任せ方や、未知のことへ挑戦するポテンシャルの伝わり方もかなり違ってくると思います。

マサヒロ:
技術面だけでなく挑戦できる人かどうか、という点も見られているということですね。

クマガイさん:
そうですね。デザイナーの立場だとしても「形が作れる」だけではダメで、自分の作ったものがそもそも実装できるのかというところの実装イメージも同時に考える必要があります。

だから今のWEBデザイナーには「めちゃくちゃすごいデザイン作ったけど、どう実装すれば良いかは知りません!」というスタンスでなく、マークアップ(※)含めコーディングも知っておくということが求められている時代だと思います。

※マークアップとは、文書構造(テキスト)や視覚表現(装飾)などの情報を、コンピューターが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくことを意味します。

https://mynavi-creator.jp/blog/article/what-is-mark-up

マサヒロ:
僕もPhotoshopやXDで作ったデザインを、初めて自分でコーディングしていくときにすごい苦労した記憶があります。でもその後、別のデザインに取り掛かるときには視野が広がっていた気がしました!

クマガイさん:
入社後も実際にデザインの仕事をすることになったとき、Photoshopなどのデザインツールでできることがコーディングしていくときにどう作用するかなど、知っているか知っていないかでは大きな差になってくると考えています。

(2)HTMLの構造はしっかり考えられているか

クマガイさん:
次に、HTMLが正しくマークアップされているか、品質チェックもしています。

極論、h1タグやsectionタグなどを使わず、divタグ、spanタグ、pタグだけでマークアップしてもCSSで見た目を整えれば見れるWEBサイトは作れてしまいます。
ただ、それではSEOの面では評価されないし、「Googleで検索したときの順位を上げたい」というお客様からの要望が来たときに応えられないことになってしまいます。

更に挙げるとウェブアクセシビリティ品質達成もこれからの制作では重要課題となっています。

だから、「新しい技術を幅広くやれます!」という人も、その気持ちはキープしたまま一度自分の書いたHTMLの構造をしっかり見直して、セマンティックなHTMLになっているかを考慮してみてほしいと考えています。

新人プログラマーがセマンティック・マークアップを学習してわかったこと。

and-ha.com

マサヒロ:
確かに僕が入社してからクマガイさんに初めて薦めていただいた書籍は『HTML解体新書』でした。

クマガイさん:
実際に表示されている情報だけでなく、ポートフォリオサイトのコードが正しくマークアップされているとコーディングチームからの評価は高くなります。

(3)レスポンシブ対応はされているか(様々な見られ方を想定しているか)

マサヒロ:
次に自分のポートフォリオサイトをコーディングするにあたって、レスポンシブ対応についてはどうでしょうか?

クマガイさん:
レスポンシブ対応も必須だと思って制作を進めた方が良いと思います。

これはAndHAの場合ですが、応募で送って頂いたポートフォリオサイトは、大きいディスプレイサイズ、小さいサイズ、各種スマートフォンやブラウザごとの違いなど、異なる環境で見たときにどういうふうに見え方が変わるのかというところもよくチェックしています。

どのサイズで見ても破綻しないように設計しようという意識が持てているかが大事なので。

そういう意味ではレスポンシブ対応は前提条件として抑えておく必要があるし、その一歩先として様々な環境で見たときの見え方まで意識して設計できる人が求められていると思っています。

マサヒロ:
今はWEBサイトを多くの人がスマートフォンで見ますからね。

クマガイさん:
そうですね。
他に見え方へのこだわりという点でいうと、ホバーアクションなどのあしらいがどう設定されているかも書類選考の時点でよく見るところですね。

ポートフォリオサイトは自分で企画・デザイン・コーディングまで行うから、その分「この人は裏側や細かな部分をどこまで作り込む人なのかな」というところは様々な角度から見ています。

(4)WEBサーバーへのアップロード、SSL化はされているか

マサヒロ:
次にポートフォリオサイトの公開についてですが、SSL化までした上で公開しておくというのが良いでしょうか?

クマガイさん:
最低限になるけれどもサイト公開にあたって以下の3項目はやっておきましょう!


  1. WEBサーバーを用意
  2. サイトのSSL化
  3. サーバーへアップロードして各種ブラウザから閲覧できるようにする

マサヒロ:
転職活動でポートフォリオサイトを作ったときには色々調べながら進めていました。はじめての時はかなり苦戦した記憶が・・・。

クマガイさん:
WEB制作会社なのでもちろんWEBで見れる状態で用意いただけると私たちも評価しやすくなります。

上記以外だとポートフォリオのGitリポジトリを提出していただいたりすると実際の画面以外での努力値が見えてくるのでエンジニア目線としても更に評価も高まります。

番外編:日々のアウトプットができている人か

クマガイさん:
最後に、これは少しポートフォリオサイトからは話題が逸れるところですが、日々アウトプットしている人は評価が高いです。
例えばTwitterやnoteなどで自分が制作する上で気づいたことや解決策をまとめている人などですね。

ポートフォリオサイトとなると自分が制作を終えたものを掲載することがほとんどのケースですからなかなかやっている人は少ないと思いますが、このアウトプットを継続してできている人は他の会社を目指す上でも「おっ」と思われる部分はあると思います。

マサヒロ:
AndHAに入社して、僕も日々アウトプットの大切さを実感しています。

クマガイさん:
私たちも「その人が今、何ができるか」はもちろん大事ですが、それと同じか、それ以上に「その人が今後、どう成長していけるか」を特に知りたいと思っています。

トライしていることのレベルやクオリティは別として、まずはぜひ積極的にアウトプットする習慣、これをつけてみると自分にとっても良い評価に繋がると思います。

まとめ

マサヒロ:
クマガイさん、本日はインタビューのお時間をいただきありがとうございました!

採用担当者からはポートフォリオサイトを通して、技術的なことだけでなく、ものづくりへの姿勢や人間性までもが見られているということがわかりました。

クマガイさん:
こちらこそありがとうございました!

これからWEB業界を目指す人もぜひ数年後の自分をイメージして、目標を持った上でWEBの世界を進んでいっていただければと思います!

合わせて読みたい!