こんにちは！ WebクリエイタースクールデジLIG（デジタルハリウッドSTUDIO by LIG）運営スタッフのショウタです。
WebデザイナーやWebディレクターの転職活動に欠かせない「ポートフォリオ」。
デジLIGでは異業種からの転職をサポートさせていただいていますが、「どんな構成で作成すべき？」「企業に見られるポイントってどこ？」「どこまでのクオリティを求められる？」などポートフォリオに関する質問を多くいただきます。
そこで今回は、異業種から転職を成功させるためのポートフォリオ作成のポイントや、実際に未経験から転職を成功させたデジLIG卒業生のポートフォリオの作品例をご紹介！
これからポートフォリオを作成しようと思っている方は、ぜひ参考にされてください。
目次
そもそもポートフォリオとは？
ポートフォリオとは、自身のデザイン・ビジネススキルをアピールするための「作品集」のようなものです。
Webデザイナーになるために免許や資格は必要ではないものの、専門的なスキル・知識が求められる職業ですので、採用選考時には履歴書や職務経歴書とあわせて必ずポートフォリオの提出を求められます。
どれだけ口頭や文面で「クライアントの意向に沿った作品作りができます！」と伝えても、説得力がありませんよね。そこで、実際に制作したWebサイトやバナーを制作プロセスとあわせて見てもらうことで、入社した後にどんなふうに活躍してくれるのか想像してもらいやすくなります。
ポートフォリオをきちんと作り込むことは、未経験から転職を成功させる大切なポイントなのです！
デジLIG生のポートフォリオを紹介します！
それでは、参考にしていただきたいデジタルハリウッドSTUDIO by LIG卒業生が作成したポートフォリオを紹介していきます！
多くの方が未経験から半年の受講で作成したものとなっています！！
ゼロから構築した方や、ノーコードツールを用いて作成された方、PDFで作成された方とさまざまですが、制作時のポイントも伺いましたので、ぜひ参考にしてみてください！
💡デジLIG生の卒業制作もご紹介しています。あわせてご覧ください！ 未経験からここまで！Webデザインスクール卒業制作サイト22例を紹介
Shota Utsunomiya
菅野 友香さん
【STUDIO上野 2022年2月生/Webデザイナー専攻】
出典:Yuka Kanno Portfolio
💡制作時のポイント
菅野さん：自分はどんなデザインが好きか、自分はデザイナーとしてなにができるかを証明できるようなサイトにすること。そのために自分のことについて分析して、それを情報設計やデザイン、アニメーションに反映させました。
▼菅野さんのインタビュー記事はこちら 未経験からここまで！？SNSで話題”強カワ”魔法少女Webサイト制作に至るまで スクール卒業生に聞く！「未経験だった私たちがWebデザイナーになるまで」イベントレポート
Haruna Okumura
Shota Utsunomiya
大河原 菜穂さん
【STUDIO池袋 2023年9月生/Webデザイナー専攻】
出典:Naho Okawara Portfolio
💡制作時のポイント
大河原さん：前職の経験（百貨店販売員）から贈り物との縁があった事、絵本のように誰かの宝物になるようなサイトを作りたいという想いを込めて「絵本」「贈り物」をテーマにしています。
忙しい中サイトに訪れてくださった採用担当の方には要点が分かりやすく伝わるように、興味を持ってくださった方にはじっくり深掘りしてもらえるようなサイトを目指して情報設計を行いました。
福井 珠李さん
【STUDIO大宮 2023年10月生/Webデザイナー専攻+WordPress講座+Figma講座】
出典:juri-portfolio.com
💡制作時のポイント
福井さん：採用担当者の視点を意識し、情報をわかりやすく整理しつつ、写真やモックアップを活用して、 作品としても魅力的に見ていただけるようなデザインに。「会ってみたい」と思っていただけるようなポートフォリオサイトを目指しました。
▼福井さんのポートフォリオ制作過程はこちら！
未経験からWebデザイナーを目指す私のポートフォリオができるまで。
澤登 昂さん
【STUDIO大宮 2023年9月生/Webデザイナー専攻】
出典:Kou Sawanobori Portfolio
💡制作時のポイント
澤登さん：とにかく自分らしいデザインにしようと考えました。『デザインやものづくりを通して誰かを楽しませたい・感動してほしい』という想いを形にすることを目指しました。
むかし懐かしいPCをイメージし、レトロで遊び心あるデザインに。また、今後も動画や3DCGなどできることを盛り込んだレベルアップも考えているので、たまに遊びに来てくれると嬉しいです！
阿部 菜々さん
【STUDIO川崎 2023年1月生Webデザイナー専攻】
出典:Nana”s portfolio
💡制作時のポイント
阿部さん：全体的に「自然体さ」を表現できるよう、光と影を意識したデザインにしています。作品概要は読みやすさを第一にした情報設計に、メインビジュアルはサイトに訪れた人の印象に少しでも残りやすく、かつ私の少し個性的で楽しい人間性を表現できるように意識して制作しました。
岡田 大悟さん
【STUDIO池袋 2023年3月生/Webデザイナー専攻グラフィック経験者プラン＋LIG直伝！即戦力デザイン集中講座】
出典:DaigoOkada Portfolio
💡制作時のポイント
岡田さん：差別化と目的に向けた情報整理に注力しました。FVからWeb以外のさまざまな分野の制作実績も見せるようにして、「作ることが好き」という点を全面に出しました。また、各実績にジャンルごとにすぐに移動できるような導線にしています。制作ごとの詳細ページも重要な部分なので、プロセスや制作の詳細画像などをふんだんに盛り込みました。
▼岡田さんのインタビュー記事はこちら 独学フリーランスから企業Webデザイナーへ。卒業後も通い続けたくなるスクールの魅力とは？
Yohei Ueda
岸上 友希那さん
【STUDIO池袋 2023年8月生Webデザイナー専攻＋Figma講座】
出典:Yukina Kishiue Portfolio
💡制作時のポイント
岸上さん：採用担当者が注目するポイントである制作物が目立つような設計・デザインを心がけて制作しました。トップページには制作物の概要も記載し、一目で何を制作したのかがわかるようにしています。また、全体的に紙っぽいデザインにし、個性を出せるようにしました。一度作り直しを行いましたが、STUDIOは手軽に修正できる点がメリットだと感じました。
中崎 浩子さん
【STUDIO池袋 2023年3月生Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
出典:Hiroko Nakazaki Portfolio Site
💡制作時のポイント
中崎さん：ターゲットである制作会社の採用担当者様へ”何事も妥協せずに取り組む姿勢”や”デザインが好きな自分”が伝わるように企画しています。ノーコードツールでポートフォリオを制作する他のスクール生と差別化できるよう、独自CSSを書いて世界観に合わせた動くあしらいやスライダーなどアニメーションを活用しました。
神代 日向子さん
【STUDIO池袋 2021年11月生/Webデザインベーシック講座＋LIG直伝！即戦力デザイン集中講座＋UIデザインプラン】
出典:KUMASHIRO HINAKO PORTFOLIO
💡制作時のポイント
神代さん：忙しい方にも要点が伝わり、印象に残るサイトを目指しました。トップ上部に最重要の作品を、その下にウェブスキルと自身の概要を記載。FV（ファーストビュー）〜メッセージで思いを表現し、他の志望者と差別化。また、「デザインの可能性無限大」をコンセプトとし、見た目をつくるだけではないデザインの力と、範囲や限界を決めずに取り組む自分の意志を表現。”OPEN”と”PASSION”をキーワードに世界観をつくり上げました。
尾形 紗智子さん
【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
💡制作時のポイント
中越さん：採用担当者の立場に立って必要な情報を整理し、シンプルでわかりやすくすることを心がけました。あしらいやアニメーションも最低限にしています。また、文章だけだと伝わりにくいと思い、バナー以外の制作物は企画書のスライドを用意しました。
▼中越さんのインタビュー記事はこちら 「30代未経験で目指すのは怖かった」インハウスデザイナーへの道を切り拓いた元SEの挑戦。
Rurika Shimizu
野木 碧さん
【STUDIO川崎 2023年7月生/Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
出典:Nogi Aoi Portfolio Site
💡制作時のポイント
野木さん：ターゲットが求める情報を選択すること、優先順位が高い順に配置することを意識して情報設計を行いました。そのために、制作物の説明ページではポイントを整理し、適切な余白を設けて読み進めやすさを重視しました。
また、トップイメージで読み手の興味を引けるよう、色数を絞りアクセントカラーで目が止まるような配色をしました。
▼野木さんのインタビュー記事はこちら 未経験からUI/UXデザイナーへ。わずか1ヶ月の転職活動で内定を獲得するコツとは？
Ayuko Fujita
渡瀬 奈緒さん
【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
💡制作時のポイント
田上さん：「余白」を意識したデザインを作成していきたいという思いから、ポートフォリオも「余白」を多く取り入れたデザインにしました。内容はシンプルで誰が見てもわかりやすく伝わるようにしています。
デジLIG生の作品はどう評価されている？
「スクール卒は厳しい」という声も多い中、ネットや実際に活躍しているWebデザイナーの方々からも評価する声が多数あります。
卒業生の作品を見るとだいたいそのスクールの実力がわかるかと思います。個人的に凄いなと思うのは「デジLIG」ですね。
ディレクションからデザインまで一気通貫で取り組んでいるイメージです（しかも実案件）
卒業生の方々の作品https://t.co/iBdY9AXYAzhttps://t.co/lU97NhnHtK— きくちなごみ｜相談できるWeb/UIデザイナー・ディレクター (@75mix) February 3, 2023
WebスクールはデジLIGしかないんじゃないかってくらい卒業生が自分の実績を勇気持って晒してて素晴らしさしかない。
晒せる勇気を持つものだけが褒められる資格を持ってると思うし褒められた瞬間が本当にハマる瞬間だと思ってて
こういう若者たちの勇気や行動に学ぶことは多い。負けていられない。 https://t.co/olm6AR7UVX
— ムラマツヒデキ🍣クオートワークス (@muuuuu_chang) February 8, 2023
なんかデジLIGの卒業生のかたって即戦力っぽいかた多くてすごい。（広告ではありません）
— 西長正輝 / デザイナー アートディレクター (@n_masateru) June 4, 2024
デジLIG生の方のポートフォリオって総じてレベルが高い気がする、すごいなあ…https://t.co/Gmik2VrqxI
— kewpie (@kewpie_design) November 1, 2024
ポートフォリオの作り方
ポートフォリオをいざ作ろう！と思っても、何から始めればいいのか悩みますよね。それに、デザイン修正が簡単にできてしまうからこそ悩んでしまうと思います。
こちらの記事で「ポートフォリオ作りの手順」を詳しく解説していますので、ぜひ参考にしてみてください！ Webデザイナーのポートフォリオの作り方と参考サイト【未経験】
ななみん
ポートフォリオ作成時のポイント
① 見る側のニーズや状況に合わせて構成されているか
見る側、つまり採用担当者のニーズや状況を考慮して作成できているかは重要なポイントです。
未経験の場合は、「どんな人なのか」よりも先に「なにができるのか」を見たいという場合が多いです。制作実績までの導線は、ナビなども活用して構成することを意識してみると良いでしょう！
また実績ごとの紹介においては、ターゲット層や目的、制作意図などに加えて、担当範囲や作業時間など正確に記載することもポイントです！
② 制作意図・思考プロセスが言語化できているか
制作物の紹介をまとめる際には、想いやこだわり、苦労したポイントなどを記載したくなるのですが、採用の基準軸とは少しずれてしまいます。
情報設計やデザインにおいて、ターゲット層や目的に対して、どのように考えて、制作に落とし込んだのかという部分を自分の言葉で書くことによって、採用担当者の理解を深めることにつながります。
見る人のことを考えて、ダラダラと長く書くよりも、簡潔にまとめることで評価される場合もあるでしょう。
③ 行動量が見せられているか
異業種からの転職の場合、「Webデザイナーになるために、短期間でなにをしてきたのか」を見られていることも多いです！
スクールの課題が数点並んでいるだけでは、採用担当者にスキルや強みを理解してもらうことは難しく、主体的に考えて取り組んだ実績を載せられると良いでしょう。
また、サイト分析やバナートレースなどのインプット・アウトプット、卒業制作の作成記録といった学習中の取り組みを「note」などを用いて、情報発信するのも効果的です。
さいごに
ポートフォリオは、見る側である採用担当者に、自分自身のスキルやビジョン、デザインへの想いが伝わるように、「自己満足のポートフォリオ」になっていないか？ という部分を意識して作成することが大切なポイントです！
また、良いポートフォリオを作成されている卒業生の皆さんは共通して、スクール在籍中はもちろん、卒業後も自分自身で考えてたくさんの努力をされていました。
自主的なインプットやアウトプット、受講生同士での情報交換、現役クリエイターであるトレーナーに何度も質問をして、スキルやデザイン思考力を磨いてきたからこそ、説得力のあるポートフォリオが作成できたのだと思います。
頑張ることで、キャリアは拓いていけるということを、今回協力してくださった卒業生をはじめ、多くの転職を成功させたみなさんから感じています。学習中のみなさんもぜひ、自主的なインプットやアウトプットにも取り組んでみていただければと思います。
💡デジLIG生の卒業制作が見たい方はこちら！ 未経験からここまで！Webデザインスクール卒業制作サイト22例を紹介
Shota Utsunomiya
デジLIG（デジタルハリウッドSTUDIO by LIG）は、
- クリエイター業界に精通した運営スタッフによるポートフォリオ添削
- 現役デザイナーが講師だから現場に通用するスキルを身につけられる
- オンライン ＋ 土日・夜間開校だから通いやすい
- 受講生同士の交流が盛んだからモチベーションが持続しやすい
などの特徴があり、業界に通用するデザイン力を鍛えられるWebデザインスクールです。毎日説明会をおこなっておりますので、ぜひお気軽にお越しください！
