こんにちは！ WebクリエイタースクールデジLIG（デジタルハリウッドSTUDIO by LIG）運営スタッフのショウタです。
WebデザイナーやWebディレクターの転職活動に欠かせない「ポートフォリオ」。
デジLIGでは異業種からの転職をサポートさせていただいていますが、「どんな構成で作成すべき？」「企業に見られるポイントってどこ？」「どこまでのクオリティを求められる？」などポートフォリオに関する質問を多くいただきます。
そこで今回は、異業種から転職を成功させるためのポートフォリオ作成のポイントや、実際に未経験から転職を成功させたデジLIG卒業生のポートフォリオの作品例をご紹介！
これからポートフォリオを作成しようと思っている方は、ぜひ参考にされてください。
自分のスキルを示すポートフォリオの作り込み次第で、転職活動やフリーランスとしての営業活動に大きく影響します。
デジLIG（デジタルハリウッドSTUDIO by LIG）は、
- クリエイター業界に精通した運営スタッフによる徹底したポートフォリオ添削
- 制作会社LIGが運営しているスクールだから高いデザイン性を学べる
- 現役デザイナーが講師だから現場に通用するスキルを身につけられる
などの特徴があり、業界に通用するデザイン力を鍛えられるWebデザインスクールです。毎日説明会をおこなっておりますので、ぜひお気軽にお越しください！
目次
そもそもポートフォリオとは？
ポートフォリオとは、自身のデザイン・ビジネススキルをアピールするための「作品集」のようなものです。
Webデザイナーになるために免許や資格は必要ではないものの、専門的なスキル・知識が求められる職業ですので、採用選考時には履歴書や職務経歴書とあわせて必ずポートフォリオの提出を求められます。
どれだけ口頭や文面で「クライアントの意向に沿った作品作りができます！」と伝えても、説得力がありませんよね。そこで、実際に制作したWebサイトやバナーを制作プロセスとあわせて見てもらうことで、入社した後にどんなふうに活躍してくれるのか想像してもらいやすくなります。
ポートフォリオをきちんと作り込むことは、未経験から転職を成功させる大切なポイントなのです！
デジLIG生のポートフォリオを紹介します！
それでは、参考にしていただきたいデジタルハリウッドSTUDIO by LIG卒業生が作成したポートフォリオを紹介していきます！
多くの方が未経験から半年の受講で作成したものとなっています！！
ゼロから構築した方や、ノーコードツールを用いて作成された方、PDFで作成された方とさまざまですが、制作時のポイントも伺いましたので、ぜひ参考にしてみてください！
菅野友香さん
【STUDIO上野 2022年2月生/Webデザイナー専攻】
出典:Yuka Kanno Portfolio
💡制作時のポイント
菅野さん：自分はどんなデザインが好きか、自分はデザイナーとしてなにができるかを証明できるようなサイトにすること。そのために自分のことについて分析して、それを情報設計やデザイン、アニメーションに反映させました。
▼菅野さんのインタビュー記事はこちら 未経験からここまで！？SNSで話題”強カワ”魔法少女Webサイト制作に至るまで
Haruna Okumura
大河原菜穂さん
【STUDIO池袋 2023年9月生/Webデザイナー専攻】
出典:Naho Okawara Portfolio
💡制作時のポイント
大河原さん：前職の経験（百貨店販売員）から贈り物との縁があった事、絵本のように誰かの宝物になるようなサイトを作りたいという想いを込めて「絵本」「贈り物」をテーマにしています。
忙しい中サイトに訪れてくださった採用担当の方には要点が分かりやすく伝わるように、興味を持ってくださった方にはじっくり深掘りしてもらえるようなサイトを目指して情報設計を行いました。
岡田大悟さん
【STUDIO池袋 2023年3月生/Webデザイナー専攻グラフィック経験者プラン＋LIG直伝！即戦力デザイン集中講座】
出典:DaigoOkada Portfolio
💡制作時のポイント
岡田さん：差別化と目的に向けた情報整理に注力しました。FVからWeb以外のさまざまな分野の制作実績も見せるようにして、「作ることが好き」という点を全面に出しました。また、各実績にジャンルごとにすぐに移動できるような導線にしています。制作ごとの詳細ページも重要な部分なので、プロセスや制作の詳細画像などをふんだんに盛り込みました。
▼岡田さんのインタビュー記事はこちら 独学フリーランスから企業Webデザイナーへ。卒業後も通い続けたくなるスクールの魅力とは？
Yohei Ueda
- こんなデザインを作れるようになりたい方はデジLIGへ！
- 現役デザイナーやマーケターによるLIVE授業を実施しており、他と差がつくデザイン力を身につけられます。就職サポートも充実！
>>デジLIG公式サイトへ
中崎浩子さん
【STUDIO池袋 2023年3月生Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
出典:Hiroko Nakazaki Portfolio Site
💡制作時のポイント
中崎さん：ターゲットである制作会社の採用担当者様へ”何事も妥協せずに取り組む姿勢”や”デザインが好きな自分”が伝わるように企画しています。ノーコードツールでポートフォリオを制作する他のスクール生と差別化できるよう、独自CSSを書いて世界観に合わせた動くあしらいやスライダーなどアニメーションを活用しました。
尾形紗智子さん
【STUDIO池袋 2021年11月生/Webデザインベーシック講座＋LIG直伝！即戦力デザイン集中講座＋卒業制作】
出典:sachiko ogata portfolio
💡制作時のポイント
尾形さん：実績の質よりも量でやる気をアピールしたかったので、ぱっと見で量と振れ幅を見せられるようなシンプルなデザインを心がけました。あしらいなどは悩みましたが、自分の雰囲気や性格から考えて、直線的でビビットなものより柔らかく全体を邪魔しないような表現をするようにしています。
ターゲットが採用担当の方で忙しい中見ていただくことが前提だったので、情報整理をして必要な場所に早く到達できるよう心がけました。
▼尾形さんのインタビュー記事はこちら 未経験からサイトデザイン対決企画にも挑戦！スクール学習でデザイン力を上げるポイントは？
Shota Utsunomiya
竜沢大悟さん
【STUDIO池袋 2022年5月生/Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座＋WordPress講座】
出典:Daigo tasuzawa portfolio site
💡制作時のポイント
竜沢さん：「自分が誰か」よりも先に「なにができる人なのか」をみせられるように、目的から逆算してサイトの構成を考え、WORKSを先に出しました！ ABOUTページの最後に、自分の人柄を知ってもらえるように、趣味や好きな写真を9枚選んで配置しました。
▼竜沢さんのポートフォリオ完成までの道のりについてこちらの記事もご覧ください。 スクール生のポートフォリオを現役デザイナーがガチフィードバック！その全貌を公開
Shota Utsunomiya
長岡千尋さん
【STUDIO池袋 2021年10月生/Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
出典:長岡千尋 ポートフォリオサイト
💡制作時のポイント
長岡さん：見やすさと情報整理をこだわりました。
- 制作物に目がいくよう、極力シンプルに。デザイン4原則を意識し、違和感やノイズを排除。
- どのページでも何を伝えたいのかぱっと見でわかるように。
- 個性を出す場所は棲み分けし、趣味のフィルムカメラのページを設けたり、InstagramやWantedlyの導線を設置。
▼長岡さんのインタビュー記事はこちら 仕事とWスクールを両立し、5社から内定！多忙の中転職を成功させた長岡さんにインタビュー！
Mio Kato
三本美和さん
【STUDIO川崎 2023年6月生/Webデザイナー専攻】
出典:MIWA_portforio
💡制作時のポイント
三本さん：採用担当の方の印象に残るよう、以下のことを意識して制作しました。
①学習中に知人から案件をもらい、クライアントワークとして見せられるものを増やした
②見た人にニッコリして欲しかったので、topとaboutの写真でチャーミングな仕掛けを用意
③成長意欲をアピールするため、トレースバナーを沢山乗せてインパクトを出した
中越詳人さん
【STUDIO北千住 2023年7月生/Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
出典:Shoto Nakakoshi portfolio
💡制作時のポイント
中越さん：採用担当者の立場に立って必要な情報を整理し、シンプルでわかりやすくすることを心がけました。あしらいやアニメーションも最低限にしています。また、文章だけだと伝わりにくいと思い、バナー以外の制作物は企画書のスライドを用意しました。
野木碧さん
【STUDIO川崎 2023年7月生/Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
出典:Nogi Aoi Portfolio Site
💡制作時のポイント
野木さん：ターゲットが求める情報を選択すること、優先順位が高い順に配置することを意識して情報設計を行いました。そのために、制作物の説明ページではポイントを整理し、適切な余白を設けて読み進めやすさを重視しました。
また、トップイメージで読み手の興味を引けるよう、色数を絞りアクセントカラーで目が止まるような配色をしました。
渡瀬奈緒さん
【STUDIO川崎 2023年9月生/Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
出典:Watase Nao Portfolio
💡制作時のポイント
渡瀬さん：とにかく制作物に目がいくよう、彩度を抑えた配色と心地よいと感じる余白を意識し作成しました。作品数が少ないこともあり、ポートフォリオ制作と並行して、制作物の質を高めていくことも大事にしていました。
トレーナーさんやレビュアーさんにたくさんフィードバックをもらい、その都度ブラッシュアップしていくことが大事だと感じました。
平井貴久さん
【STUDIO川崎 2023年6月生//Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
出典:Takahisa Hirai Portfolio site
💡制作時のポイント
平井さん：就職先の企業に貢献できること”と”自分の打ち出したい強み”の重なる部分はどこか？を逆算して考え、『企画力』と『ブログ・アフィリエイトをやってきた経験』をまず伝えたいと考えました。
なので、卒業制作で作った「麻雀友達が欲しい」というサイトをまずスライドアニメーションを活用しながらファーストビューで目に入れつつ、Worksの前にブログ・アフィリエイトをやってきた経験を伝えることにしました。
また、デザイン面では十分な余白や安心感を与える印象のある緑のアクセントカラーを使いながらゆったりとした人となりが伝わるサイトになるよう意識しました。
石原はるかさん
【STUDIO大宮 2024年6月生/Webデザイナー専攻 主婦・ママクラス＋即戦力デザイン集中講座】
出典:Haruka Ishihara PORTFOLIO
💡制作時のポイント
石原さん：企業担当者の方にストレスを感じさせないよう「みやすい」「わかりやすい」を意識して作りました。具体的には、ページの回遊がしやすいようにボタンを設置したり、情報を伝わりやすくするために綺麗に文字を組みました。
また、個性を出すために自分の要素である”丁寧さ” “誠実さ”をオレンジと緑のぼかしのあしらいや写真で表現しました。
▼石原さんのインタビュー記事はこちら 30代ママがこうして叶えた！育児と両立し未経験からWebデザイナーへ転職
Taiga Akiyama
黒沢瑛太さん
【STUDIO大宮 2021年5月生/Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
出典:PORTFOLIO_Kurosawa Eita
💡制作時のポイント
黒沢さん：Web以外の媒体のデザインに関しても、幅広く挑戦し経験を積んだことをアピールするため、チラシや名刺などのデザインも載せました。また、私がどこまでの範囲を、どの程度の早さでデザインできるのかを相手に理解していただけるように、手がけた範囲と作成時間を記載しました。
▼石原さんのインタビュー記事はこちら 独学からスクールを経て念願のUIデザイナーに！未経験者が書類選考を突破するには？
Rei Nakabayashi
渡邉香菜子さん
【STUDIO川崎 2022年7月生/Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
💡制作時のポイント
渡邉さん：制作物の工夫した箇所に、ピンポイントで説明を記載し、伝えたいことが一目でわかるようにしました。詳しく見たい場合のために作品画像下部にURLを記載。PDF上にはもっとも伝えたいことだけを載せ、見る側の負担を軽減しています。さらに、量より質！ を意識して、見てほしい順に掲載しました。実際の面接時も一つの作品に対して深掘りされることがほとんどでした。
▼渡邉さんのインタビュー記事はこちら 接客業からシステム開発会社のWebデザイナーに！転職成功のための学習方法とは？
Yu Nakayashiki
田上桃子さん
【STUDIO池袋 2022年2月生/Webデザイナー専攻】
出典:TAGAMI MOMOKO PORTFORIO
💡制作時のポイント
田上さん：「余白」を意識したデザインを作成していきたいという思いから、ポートフォリオも「余白」を多く取り入れたデザインにしました。内容はシンプルで誰が見てもわかりやすく伝わるようにしています。
ポートフォリオの作り方
ポートフォリオをいざ作ろう！と思っても、何から始めればいいのか悩みますよね。それに、デザイン修正が簡単にできてしまうからこそ悩んでしまうと思います。
こちらの記事で「ポートフォリオ作りの手順」を詳しく解説していますので、ぜひ参考にしてみてください！ Webデザイナーのポートフォリオの作り方と参考サイト【未経験】
ななみん
ポートフォリオ作成時のポイント
① 見る側のニーズや状況に合わせて構成されているか
見る側、つまり採用担当者のニーズや状況を考慮して作成できているかは重要なポイントです。
未経験の場合は、「どんな人なのか」よりも先に「なにができるのか」を見たいという場合が多いです。制作実績までの導線は、ナビなども活用して構成することを意識してみると良いでしょう！
また実績ごとの紹介においては、ターゲット層や目的、制作意図などに加えて、担当範囲や作業時間など正確に記載することもポイントです！
② 制作意図・思考プロセスが言語化できているか
制作物の紹介をまとめる際には、想いやこだわり、苦労したポイントなどを記載したくなるのですが、採用の基準軸とは少しずれてしまいます。
情報設計やデザインにおいて、ターゲット層や目的に対して、どのように考えて、制作に落とし込んだのかという部分を自分の言葉で書くことによって、採用担当者の理解を深めることにつながります。
見る人のことを考えて、ダラダラと長く書くよりも、簡潔にまとめることで評価される場合もあるでしょう。
③ 行動量が見せられているか
異業種からの転職の場合、「Webデザイナーになるために、短期間でなにをしてきたのか」を見られていることも多いです！
スクールの課題が数点並んでいるだけでは、採用担当者にスキルや強みを理解してもらうことは難しく、主体的に考えて取り組んだ実績を載せられると良いでしょう。
また、サイト分析やバナートレースなどのインプット・アウトプット、卒業制作の作成記録といった学習中の取り組みを「note」などを用いて、情報発信するのも効果的です。
さいごに
ポートフォリオは、見る側である採用担当者に、自分自身のスキルやビジョン、デザインへの想いが伝わるように、「自己満足のポートフォリオ」になっていないか？ という部分を意識して作成することが大切なポイントです！
また、良いポートフォリオを作成されている卒業生の皆さんは共通して、スクール在籍中はもちろん、卒業後も自分自身で考えてたくさんの努力をされていました。
自主的なインプットやアウトプット、受講生同士での情報交換、現役クリエイターであるトレーナーに何度も質問をして、スキルやデザイン思考力を磨いてきたからこそ、説得力のあるポートフォリオが作成できたのだと思います。
頑張ることで、キャリアは拓いていけるということを、今回協力してくださった卒業生をはじめ、多くの転職を成功させたみなさんから感じています。学習中のみなさんもぜひ、自主的なインプットやアウトプットにも取り組んでみていただければと思います。
デジLIG（デジタルハリウッドSTUDIO by LIG）は、
- クリエイター業界に精通した運営スタッフによるポートフォリオ添削
- 現役デザイナーが講師だから現場に通用するスキルを身につけられる
- オンライン ＋ 土日・夜間開校だから通いやすい
- 受講生同士の交流が盛んだからモチベーションが持続しやすい
などの特徴があり、業界に通用するデザイン力を鍛えられるWebデザインスクールです。毎日説明会をおこなっておりますので、ぜひお気軽にお越しください！
