📌 この記事のポイント

• 紙とWebの大きな違いは「動き」があること

• 動きの役割は、分かりやすさ・興味・らしさの3つ

• 前提は、デザインの質とプロセスの丁寧さ

• 選考担当者は、見る価値があるかを数秒で判断する

• 応募先のタイプから、何をどこに見せるか逆算する

2026年9月23日更新

Webポートフォリオの動きは、読み手の理解を助けるためにある

Webポートフォリオに入れる動き（インタラクション）の目的は、見た目を派手にすることではなく、読み手が作品を理解しやすくなることです。動きをうまく使うと、分かりやすさ、興味、その人らしさの3つを伝えられます。

2026年9月12日の「NOT DESIGN EXPO」で、UIデザイナーのヒデさんは「インタラクションを味方につける」というテーマでWebポートフォリオの話をしました。ヒデさんは本業でUIデザイナーとして働きながら、副業でWeb制作に関わり、NOT DESIGN SCHOOLのUIメンターも務めています。この記事では、その考え方を実例とともに整理します。

紙・PDFとWebの違いは「動き」

紙とWebのポートフォリオの違いとは、Webには動き、アニメーション、インタラクションを入れられることです。講演でヒデさんが参加者に違いを聞くと、チャットにはさまざまな答えが集まりました。

どれも正解ですが、ヒデさんがいちばん大きな違いとして挙げたのが「動き」でした。

ただし、前提があります。なんでも動かせばいいわけではありません。 デザインのクオリティや、制作プロセスの丁寧さが担保されていることが先で、そのうえで動きを味方につける、というのがヒデさんの考え方です。

役割1｜分かりやすさを出す（説明と画面を一緒に見せる）

1つ目の役割とは、読み手が作品を理解しやすくなるように、情報の見せ方を助けることです。

例えば、Webサイトの縦長のデザインを見せる場合、よくある見せ方は2つです。

ヒデさんが紹介した、デザイナーのAtsuki Iinoさんのポートフォリオ（iino-design.com）では、制作実績のページが途中から2カラムになっていました。左側で縦長のデザインをスクロールして見られ、右側にはデザインの意図が固定で表示される。 見ている場所と説明が、常にセットになっています。こうした小さな動きが、ポートフォリオではとても大切になると話していました。

役割2｜興味を引く（選考担当者は数秒で判断している）

2つ目の役割とは、忙しい選考担当者に「もっと見たい」と思ってもらうことです。

ヒデさんによると、ポートフォリオを見る選考担当者の多くは、普段の業務をしながら選考も担当しています。そのため、見る価値があるかどうかを数秒で判断していると考えたほうがよいそうです。

紹介された、デザイナーのShizuku Morohoshiさんのポートフォリオ（morohoshi.site）では、制作物のサムネイルにカーソルを合わせると、別の角度から見たビジュアルがちらっと見えるようになっていました。「これ何だろう？」と、次を見たくなる意味のある動きです。

役割3｜らしさを作る（コンセプトを動きで後押しする）

3つ目の役割とは、その人が大切にしていることや、らしさを、動きで引き立てることです。

ヒデさんが紹介したのは、デザイナーになって間もない、Naho Okawaraさんのポートフォリオ（naho-okawara.com）でした。コンセプトは「贈り物のようなデザインを」。相手のことを考え、思いを込めてデザインすることは、贈り物をすることに似ている、という考えです。

• 百貨店に勤務していた経歴があり、お客様と接する中で身につけたヒアリング力や提案力を生かしたい

• そのコンセプトを後押しするインタラクションや、「贈り物」を強調するカルーセルの動きを使っている

経歴、コンセプト、動きがひとつにつながっていて、その人らしさが伝わります。駆け出しのデザイナーでも、こうした見せ方はできます。

3つの役割は、順番に重ねていく

3つの役割は、どれか1つを選ぶものではありません。まず分かりやすさを整え、その上で興味を引き、最後にらしさを乗せる、という順番で重ねていくと考えると作りやすくなります。

ヒデさんも、まずはデザインの質や制作プロセスの密度で興味を引き、その上でインタラクションを使うのが立派な戦略だと話していました。分かりやすさが足りないまま動きを足すと、かえって読みにくくなることがあるので、順番を意識してみてください。

応募先のタイプで、見られるポイントは変わる

選ばれるためにもうひとつ大切なのが、応募先を意識してポートフォリオを設計することです。ひとくちにWebの会社と言っても、企業のタイプやデザイナーの仕事は違います。ヒデさんは、ざっくり3つに分けて説明していました。

行きたい場所から、見せ方を逆算する

まずは、自分がどこで働きたいのか、目指すデザイナー像をはっきりさせます。そのうえで、ポートフォリオの戦略を考えます。

例えば、デジタルプロダクトの制作会社を目指すなら、次のような組み立て方が考えられます。

• キービジュアル：ビジュアルスキルが求められるので、グラフィックの力を見せる

• 最初の制作物：いちばん見られる場所なので、サービスの設計やコンセプト立案など、上流の工程が色濃く出る事例を置く

動きを入れる前のチェックリスト

動きを入れる前のチェックとは、その動きが3つの役割のどれに当たるかを、入れる前に確かめることです。どれにも当たらない動きは、入れなくても困りません。

公開前に確かめること

• スマホで見ても、同じ情報にたどり着けるか

• 読み込みに時間がかかりすぎていないか

• 動きを止めたい人のために、動きが多すぎないか

• 作品そのものより、動きのほうが目立っていないか

会社のタイプ別｜先頭に置く作品の例

先頭に置く作品とは、選考担当者が最初に見る、いちばん大事な作品です。ヒデさんの逆算の考え方をもとに、会社のタイプごとの例をまとめました。

事業会社を目指すなら、実在のサービスの改善案を自主制作するのも1つの方法です。その場合は、自主制作であることを明記し、公開されている情報だけで考えたことが分かるようにしてください。

駆け出しでも、らしさは作れる

「贈り物」の事例は、デザイナーになって間もない方のポートフォリオでした。経験が少なくても、前の仕事で身につけたことや、デザインで大切にしたいことは、誰にでもあります。

例えば、接客の仕事をしていたなら「相手の話を聞くこと」、事務の仕事をしていたなら「情報を整理して伝えること」がコンセプトの種になります。これまでの経験を言葉にし、それを後押しする動きを1つ選ぶだけでも、ポートフォリオにその人らしさが生まれます。

校長の見解｜動きは、読み手が理解しやすくなるかで判断する

もちは、NOTでUIやWebを学ぶ生徒のポートフォリオを見る時にも、ヒデさんの話と同じことを感じています。

• 動きは飾りではなく、読み手が理解しやすくなるかで判断する。 動かすかどうか迷ったら、「これで伝わりやすくなるか」を基準にすると決めやすいと思っています

• 行きたい会社がはっきりすると、最初の作品に何を置くかが決まる。 迷っている時ほど、応募先から逆算してみてほしいです

• サイトでもPDFでも、自分らしさが伝わる形を選んでいい。 ヒデさんも、Webデザイナーだからといってサイトが必須ではないと話していました

限界と注意点

• 動きが多すぎると、表示が重くなります。 読み込みに時間がかかると、見てもらう前に離脱されることがあります

• スマホやホバーできない環境でも見られるか確認しましょう。 カーソルを合わせた時の動きは、スマホでは表示されません

• 紹介した事例は、ご本人が公開しているポートフォリオです。 講演で紹介された作品として掲載しています。見た目や作品は更新されることがあるので、最新の内容は各サイトで確認してください

• 会社のタイプ分けは、講師によるざっくりとした分類です。 同じタイプでも、会社ごとに求める人物像は違います

Webポートフォリオの考え方についてよくある質問

Webデザイナー志望なら、ポートフォリオサイトは必須ですか？

必須ではありません。ヒデさんは、自分らしさが伝われば、PDFなどでもまったく問題ないと話していました。PDFは紙面が固定されるので、見てほしい順番に視線を誘導しやすいという良さもあります。

スライドとサイト、どちらで作ればいいですか？

見せる相手と目的で選んでください。サイトは一般に公開して見てもらいやすく、スライドは特定の会社だけに送りたい時に向いています。

インタラクションを作るには、コードが書けないとだめですか？

Figma、Studio、Framerなどのノーコードツールでも、ホバーやスクロールの動きは作れます。まずは使い慣れたツールで試してみてください。

どんな動きを入れればいいか分かりません。

「この動きで、作品が理解しやすくなるか」「もっと見たいと思ってもらえるか」「自分のコンセプトが伝わるか」の3つで考えると決めやすくなります。

テンプレートで作ったポートフォリオでも大丈夫ですか？

大丈夫です。作品の見せ方や説明が丁寧であれば、テンプレートでも十分に伝わります。そのうえで、作品ページの見せ方など一部に動きを加えると、らしさを出しやすくなります。

動きのある作品は、PDFでどう見せればいいですか？

PDFの中に、動画のリンクやQRコードを載せる方法があります。動きの一場面を数枚の画像で並べて、変化が分かるように見せるのも効果的です。

動きを作るのに時間をかけすぎてしまいます。

動きは、作品の中身が整ってから最後に足すのがおすすめです。まずは作品の説明と画像をそろえ、残った時間で「分かりやすさ」に効く動きを1つだけ入れてみてください。

他の人のポートフォリオの動きを参考にしてもいいですか？

参考にするのは問題ありませんが、そのまま真似るのは避けましょう。なぜその動きなのかを考え、自分のコンセプトに合う形に置き換えると、らしさにつながります。