ポートフォリオに制作過程は載せる?ワイヤーフレーム・ラフの見せ方|採用担当の目線

転職・キャリア

※本ページはプロモーションを含みます
レンガ壁の明るい作業スペースで、女性が手書きのワイヤーフレームに書き込み、男性講師がノートPCの完成したWebサイトのデザインを指して話している

ポートフォリオに、完成したデザインだけを並べている。ラフやワイヤーフレームも載せたほうがいいって聞くけど、本当?

途中の画面を見せると、かえって未熟に見えないか心配。どこまで見せればいいんだろう。

AKIAKI

全部を見せる必要はありません。でも、「なぜこのデザインにしたか」が伝わる途中の1枚は、完成画面と同じくらい役に立ちます。

ポートフォリオの作り方を調べていると、「制作過程も載せよう」という話をよく見かけます。とはいえ、ラフやワイヤーフレームはあくまで途中のもの。完成していないものを見せていいのか、迷う人も多いと思います。

私はWebデザイナーとして10年以上働き、採用に携わってきた5年のあいだに、Webデザイナー志望者のポートフォリオも見てきました。この記事で答えるのは、「未経験のWebデザイナー志望者は、ポートフォリオに制作過程をどこまで載せればいいか」という問いです。

※ここで書いているのは、私が事業会社で採用に関わっていた範囲での見方と、一般的な考え方です。応募先によって見るところは違うので、募集要項に指定があればそれに合わせてください。

※料金・制度などは、特に断りがない限り2026年10月時点の公式サイトなどの情報です。

この記事を書いた人
AKI

全くの未経験から独学とスクールを経てWebデザイナーへ転職。その後Webデザイナー・Webディレクターとして働き、現在は本ブログの運営やWebサイト制作を通じてデザインに携わる。IT業界経験20年以上。
運営者情報とこのサイトが書かないこと

結論:途中の全部ではなく「考えた跡」が分かる部分だけ載せる

📝 制作過程の載せ方(1作品あたり)
  • 完成画面が主役:最初に目に入るのは完成したデザイン
  • 途中は1〜3枚:ワイヤーフレーム、比べた案、直す前と後など、判断が分かるもの
  • 1枚に1〜2行の説明:「何を決めた段階か」「なぜそうしたか」
  • 目的とターゲットを先に:誰に向けて、何を解決する作品かを最初に書く

制作過程は、作品の「理由」を見せるための材料です。きれいに作った途中画面を並べることが目的ではないので、判断の分かれ目になった部分だけを選べば十分です。

採用担当が制作過程で見ていること

私が面接で評価していたのは、作品のクオリティより、どう考えて作ったかという思考プロセスでした。完成度の高い作品があっても、「スクールの課題です」「どう工夫したかは特に…」で終わってしまうと、判断の材料が残りません。

反対に、参考にしたサイトを挙げて「ボタンの位置をこう工夫しました」と話せた人は、印象に残っています。制作過程をポートフォリオに少し載せておくと、この「どう考えたか」が、面接の前から伝わります。

AKIAKI

面接では「この作品で工夫した点は?」とよく聞きます。ポートフォリオに途中の判断が書いてあると、そこから質問を始められるので、話がぐっと具体的になるんです。

📌 関連記事:Webデザイナーの面接でよく聞かれる質問と回答例|採用担当が見ているところ — 作品について面接で聞かれることと答え方

載せると伝わるもの・載せなくていいもの

載せると伝わるもの 載せなくていいもの
ワイヤーフレーム(情報の順番を決めた段階)手書きのメモや落書きをそのまま全部
比べた2〜3案と、選んだ理由似たような案を10枚並べること
直す前と直した後(見やすさがどう変わったか)作業時間の記録や、ツールの操作画面
配色・文字の大きさを決めた理由のメモ説明のない途中画面だけ
スマートフォン表示で変えた点完成していないページを「作品」として載せること

途中画面には、必ず短い説明を添えてください。説明のない途中画面は、見る側には「未完成のもの」にしか見えません。「スマートフォンで営業時間がすぐ見えるよう、情報の順番を入れ替えた」のように、1枚につき1〜2行で十分です。

📌 関連記事:採用担当が見るポートフォリオのNG・OK|未経験Webデザイナーが落ちる原因と直し方 — 採用担当が見るポートフォリオのNGとOK

1作品の見せ方の例

順番 載せる内容の例
① 作品の概要地域のパン屋さんを想定したWebサイト。忙しい朝でも、スマートフォンで営業時間と場所がすぐ分かることを目的にした
② 完成画面トップページとスマートフォン表示
③ ワイヤーフレーム「営業時間を一番上に置く」と決めた段階の画面と、その理由を1行
④ 比べた案写真を大きく見せる案と、情報を先に見せる案。目的に合わせて後者を選んだ理由を1行
⑤ 振り返り次に作るなら、写真の選び方をもっと工夫したい、など

※架空の作品を例にした書き方です。ご自身の作品に合わせて書き換えてください。

③と④のどちらか1つだけでもかまいません。大切なのは、完成画面のすぐ近くに「なぜそうしたか」が書いてあることです。採用担当は1つの作品に長い時間をかけられないので、ページを何回もめくらないと理由にたどり着けない構成は避けましょう。

📌 関連記事:ポートフォリオを開いて最初の30秒|採用担当が本当に見ているもの — ポートフォリオを開いて最初の30秒で見られていること

チーム制作・スクールの課題のとき

チームで作った作品やスクールの課題は、自分が担当した部分の途中経過だけを載せましょう。ほかの人が作った画面を自分の制作過程のように見せると、面接で詳しく聞かれたときに答えられなくなります。

課題の作品でも、自分で考えた部分は必ずあるはずです。「課題の指定はここまで、ここからは自分で決めた」と分けて書くと、どこを見ればいいかが採用担当に伝わります。

📌 関連記事:チーム制作の作品はポートフォリオに入れていい?担当範囲の書き方|採用担当の目線 — チーム制作の作品の載せ方

制作過程の見せ方は、一人で考えると正解が分かりにくいところです。作品の見せ方まで相談したいときは、就職・転職のサポートがあるスクールを使うのも一つの方法です。

作品の見せ方まで相談したい人には、Winスクールという選択肢があります。受講生・卒業生向けの就職・転職サポートとして、提携する転職サービスのキャリアアドバイザーによる履歴書・職務経歴書の添削や、模擬面接のアドバイスが用意されています。無料カウンセリングは来校かオンラインで、所要時間は約1時間です。

※出典:Winスクール公式サイト「就職・転職サポート」「無料カウンセリング・受講相談のご案内」

Webデザイナー Winスクールの公式サイト

\ ポートフォリオの作品と説明を、まとめて見てもらいたい人へ /

Winスクールの無料カウンセリングを予約する

よくある質問

Q:ポートフォリオに制作過程は必ず載せるべきですか?

A:必ずではありませんが、1〜3枚あると「どう考えて作ったか」が伝わりやすくなります。完成画面を主役にして、判断が分かる途中の画面だけを添えましょう。

Q:ワイヤーフレームは手書きでもいいですか?

A:手書きでもかまいません。読み取れる形で撮影し、何を決めた段階かを短く書き添えましょう。

Q:途中の画面を見せると、未熟に見えませんか?

A:説明を添えれば、未熟には見えません。説明のない途中画面だけを並べると未完成に見えやすいので、1枚に1〜2行の理由を書きましょう。

Q:制作過程はどこに載せればいいですか?

A:作品の詳細ページで、完成画面のすぐ下に載せるのがおすすめです。別のページに分けると、採用担当がたどり着く前に閉じてしまうことがあります。

まとめ:完成画面の横に「なぜ」を1つ置く

AKIAKI

制作過程を全部見せる必要はありません。一番迷ったところを1枚だけ選んで、なぜそうしたかを書いてみてください。それだけで、面接での作品の話がずっと楽になると思います。

📝 この記事の要点
  • 制作過程は、作品の「理由」を見せるための材料
  • 採用担当は、完成度より「どう考えて作ったか」を見ている
  • 載せるのは1〜3枚。ワイヤーフレーム、比べた案、直す前と後など
  • 途中画面には、1枚に1〜2行の説明を必ず添える
  • チーム制作や課題は、自分が担当した部分の途中経過だけ

まずは、ポートフォリオの中で一番見てほしい作品を1つ選び、制作中に一番迷ったところを1行で書き出してみてください。その判断が分かる画面が残っていれば、それが最初に載せる1枚です。

関連記事