こんにちは！ WebクリエイタースクールデジLIG（デジタルハリウッドSTUDIO by LIG）運営スタッフの中西です。
WebデザイナーやWebディレクターの転職活動に欠かせない「ポートフォリオ」。
デジLIGでは異業種からの転職をサポートさせていただいていますが、「どんな構成で作成すべき？」「企業に見られるポイントってどこ？」「どこまでのクオリティを求められる？」などポートフォリオに関する質問を多くいただきます。
そこで今回は、異業種から転職を成功させるためのポートフォリオ作成のポイントや、実際に未経験から転職を成功させたデジLIG卒業生のポートフォリオの作品例をご紹介！
これからポートフォリオを作成しようと思っている方は、ぜひ参考にされてください。
- ポートフォリオなど各種書類添削
- 制作会社が教える面接対策
- 未経験可の求人も紹介可能！
登録・利用ともに無料！ クリエイターを目指す方はお気軽にご登録ください♪
そもそもポートフォリオとは？
ポートフォリオとは、自身のデザイン・ビジネススキルをアピールするための「作品集」のようなものです。
Webデザイナーになるために免許や資格は必要ではないものの、専門的なスキル・知識が求められる職業ですので、採用選考時には履歴書や職務経歴書とあわせて必ずポートフォリオの提出を求められます。
どれだけ口頭や文面で「クライアントの意向に沿った作品作りができます！」と伝えても、説得力がありませんよね。そこで、実際に制作したWebサイトやバナーを制作プロセスとあわせて見てもらうことで、入社した後にどんなふうに活躍してくれるのか想像してもらいやすくなります。
ポートフォリオをきちんと作り込むことは、未経験から転職を成功させる大切なポイントなのです！
デジLIG生のポートフォリオを紹介します！
それでは、参考にしていただきたいデジタルハリウッドSTUDIO by LIG卒業生が作成したポートフォリオを紹介していきます！
多くの方が未経験から半年の受講で作成したものとなっています！！
ゼロから構築した方や、ノーコードツールを用いて作成された方、PDFで作成された方とさまざまですが、制作時のポイントも伺いましたので、ぜひ参考にしてみてください！
💡デジLIG生の卒業制作もご紹介しています。あわせてご覧ください！ 未経験からここまで！Webデザインスクール卒業制作サイト23例を紹介
Akiko Nakanishi
菅野 友香さん
【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池袋 2024年5月生/Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
💡制作時のポイント
榊さん：一つ一つの作品にしっかり注目が集まるような構成を意識しました。ホバーやスクロールに合わせたアニメーションや細かなインタラクションを取り入れることで、自分の”好き”を表現しつつ、見る人の印象に残るサイトを目指しました。また、文字サイズにメリハリをつけることでリズム感を生み出し、単調にならないよう工夫しました。
かわかみ ゆいかさん
【STUDIO北千住 2024年7月生/Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
出典:かわかみゆいか
💡制作時のポイント
かわかみさん：サイト自体を自分自身と捉えて制作しました。自身が感じる美しさを表現しつつ、閲覧者にもその美しさを感じてもらえるよう心がけました。また、採用担当者の印象に残るよう「独自性」を意識し、大好きなグリッドデザインに挑戦。自身にとっても大きな学びとなったポートフォリオです。
阿部 菜々さん
【STUDIO川崎 2023年1月生Webデザイナー専攻】
出典:Nana”s portfolio
💡制作時のポイント
阿部さん：全体的に「自然体さ」を表現できるよう、光と影を意識したデザインにしています。作品概要は読みやすさを第一にした情報設計に、メインビジュアルはサイトに訪れた人の印象に少しでも残りやすく、かつ私の少し個性的で楽しい人間性を表現できるように意識して制作しました。
岡田 大悟さん
【STUDIO池袋 2023年3月生/Webデザイナー専攻グラフィック経験者プラン＋LIG直伝！即戦力デザイン集中講座】
出典:DaigoOkada Portfolio
💡制作時のポイント
岡田さん：差別化と目的に向けた情報整理に注力しました。FVからWeb以外のさまざまな分野の制作実績も見せるようにして、「作ることが好き」という点を全面に出しました。また、各実績にジャンルごとにすぐに移動できるような導線にしています。制作ごとの詳細ページも重要な部分なので、プロセスや制作の詳細画像などをふんだんに盛り込みました。
▼岡田さんのインタビュー記事はこちら 独学フリーランスから企業Webデザイナーへ。卒業後も通い続けたくなるスクールの魅力とは？
Yohei Ueda
高津 由輝さん
【STUDIO上野 2023年11月生Webデザイナー専攻】
💡制作時のポイント
高津さん：自分の「得意」を考えて差別化を図り、印象に残るサイト作りを意識しました。Web制作は、デザイナー・エンジニア・ディレクターなど、さまざまな人と協力して進める仕事です。その中で私は「優しくチームを支え、解決策を見つけられる存在」になりたいと思いました。この思いをファンタジーゲームの”ヒーラー”になぞらえ、優しさとサポート力を感じさせる世界観をデザインに取り入れました。
野口 安紀さん
【STUDIO池袋 2024年2月生Webデザイナー専攻+LIG直伝！即戦力デザイン集中講座】
出典:aki noguchi
💡制作時のポイント
野口さん：ビジュアル中心の構成で、写真や作品が引き立つレイアウトを目指しました。視覚的にインパクトのある導線を意識し、余白を活かしたデザインと大胆なタイポグラフィが特徴です。少しでも興味を持っていただけるよう工夫を凝らしました。
岸上 友希那さん
【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池袋 2024年3月生/Webデザイナー専攻＋LIG直伝！即戦力デザイン集中講座】
💡制作時のポイント
河西さん：忙しい採用担当者でも直感的に理解できるよう、「私らしさ」とスキルを視覚的に伝える設計にこだわりました。ターゲットと目的から逆算し、情報が入りやすい導線に。動きを加え、遊び心もアピールしています。
平井 貴久さん
【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生の作品はどう評価されている？
「スクール卒は就職が厳しい」という声も多い中、デジ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
「業界からも評価されるデザインスキルを身に着けたい」「本気で転職を目指したい」とお考えの方は、まずは無料の個別相談会へぜひお越しください！オンラインでも利用いただけます。
ポートフォリオの作り方
ポートフォリオをいざ作ろう！と思っても、何から始めればいいのか悩みますよね。それに、デザイン修正が簡単にできてしまうからこそ、どんなものが評価されるのか悩んでしまうと思います。そこで、ポートフォリオを作るにあたって以下3つのポイントを意識してみてください！
- ポートフォリオに載せる作品を作る
- 相手に「伝わる」ように作品の説明を考える
- 実際にポートフォリオを制作する
未経験デザイナーは最初にポートフォリオに載せる作品がないことがまず課題となります。作品作りの流れとしては、作品の決定から始め、目的・目標設定、ペルソナ策定、流入経路の検討、コンテンツ精査と組み立て、イメージボード作成、ワイヤーフレーム設計を経て、最終的なデザイン制作へと進みます。仮想のクライアントを想定した作品でも良いですが、実際のクライアントがいる作品の方が現実的な経験になります！
ポートフォリオには作品の説明を魅力的に言語化することが重要です。クライアント名、概要、ペルソナとその導き方、流入フロー、コンテンツアイデア、デザインアイデアなど、どのように考えて作品を制作したかがわかるよう説明を構成します。これによって制作プロセスが伝わり、ただ見た目だけではなく思考力も伝えることができます。
ポートフォリオには、メインビジュアル、コンセプト、プロフィール、作品説明、コンタクト情報などを含めます。まずどんなコンテンツを入れるか決め、イメージボードでデザイン方向性を定め、ウェブサイトのデザインを制作し、サイトに組み込みます。プロフィールには基本情報だけでなくスキルレベルなど、クライアントや企業が知りたい情報を重視して掲載することがポイントです。
こちらの記事で「ポートフォリオ作りの手順」をそれぞれ詳しく解説していますので、ぜひ参考にしてみてください！ Webデザイナーのポートフォリオの作り方と参考サイト【未経験】
ななみん
ポートフォリオ作成時のポイント
① 見る側のニーズや状況に合わせて構成されているか
見る側、つまり採用担当者のニーズや状況を考慮して作成できているかは重要なポイントです。
未経験の場合は、「どんな人なのか」よりも先に「なにができるのか」を見たいという場合が多いです。制作実績までの導線は、ナビなども活用して構成することを意識してみると良いでしょう！
また実績ごとの紹介においては、ターゲット層や目的、制作意図などに加えて、担当範囲や作業時間など正確に記載することもポイントです！
② 制作意図・思考プロセスが言語化できているか
制作物の紹介をまとめる際には、想いやこだわり、苦労したポイントなどを記載したくなるのですが、採用の基準軸とは少しずれてしまいます。
情報設計やデザインにおいて、ターゲット層や目的に対して、どのように考えて、制作に落とし込んだのかという部分を自分の言葉で書くことによって、採用担当者の理解を深めることにつながります。
見る人のことを考えて、ダラダラと長く書くよりも、簡潔にまとめることで評価される場合もあるでしょう。
③ 行動量が見せられているか
異業種からの転職の場合、「Webデザイナーになるために、短期間でなにをしてきたのか」を見られていることも多いです！
スクールの課題が数点並んでいるだけでは、採用担当者にスキルや強みを理解してもらうことは難しく、主体的に考えて取り組んだ実績を載せられると良いでしょう。
また、サイト分析やバナートレースなどのインプット・アウトプット、卒業制作の作成記録といった学習中の取り組みを「note」などを用いて、情報発信するのも効果的です。
ポートフォリオ作りにおすすめの動画
【未経験デザイナー向け】採用したくなるポートフォリオとは？ポートフォリオに関する疑問お答えします
未経験デザイナーのためのポートフォリオの作り方
さいごに
ポートフォリオは、見る側である採用担当者に、自分自身のスキルやビジョン、デザインへの想いが伝わるように、「自己満足のポートフォリオ」になっていないか？ という部分を意識して作成することが大切なポイントです！
また、良いポートフォリオを作成されている卒業生の皆さんは共通して、スクール在籍中はもちろん、卒業後も自分自身で考えてたくさんの努力をされていました。
自主的なインプットやアウトプット、受講生同士での情報交換、現役クリエイターであるトレーナーに何度も質問をして、スキルやデザイン思考力を磨いてきたからこそ、説得力のあるポートフォリオが作成できたのだと思います。
頑張ることで、キャリアは拓いていけるということを、今回協力してくださった卒業生をはじめ、多くの転職を成功させたみなさんから感じています。学習中のみなさんもぜひ、自主的なインプットやアウトプットにも取り組んでみていただければと思います。
💡デジLIG生の卒業制作が見たい方はこちら！ 未経験からここまで！Webデザインスクール卒業制作サイト23例を紹介
Akiko Nakanishi
デジLIG（デジタルハリウッドSTUDIO by LIG）は、
- クリエイター業界に精通した運営スタッフによるポートフォリオ添削
- 現役デザイナーが講師だから現場に通用するスキルを身につけられる
- オンライン ＋ 土日・夜間開校だから通いやすい
- 受講生同士の交流が盛んだからモチベーションが持続しやすい
などの特徴があり、業界に通用するデザイン力を鍛えられるWebデザインスクールです。毎日説明会をおこなっておりますので、ぜひお気軽にお越しください！
