本文へ移動
うぇぶ、ひゃっくり|Webサイト100選
  • ホーム
  • はじめまして
  • サイトについて
  • お問い合わせ
うぇぶ、ひゃっくり|Webサイト100選
  • ホーム
  • はじめまして
  • サイトについて
  • お問い合わせ

カテゴリー

  • Webデザイン分析 (26)
  • 考えごと (17)
  • 学んだこと (13)
  • 学習ログ (10)
  • AI活用ログ (4)
  • 制作記録 (3)
ホーム制作記録卒業制作のポートフォリオで意識したこと|Webデザインの専門校での学びの記録

卒業制作のポートフォリオで意識したこと|Webデザインの専門校での学びの記録

制作記録 | Webサイト制作やWordPressテーマ制作、UI改善、実装メモなどを記録しています。 「作る過程」も含めて共有することで、実践的な学びにつながる内容を目指しています。

2026/09/29 制作記録 約13分
卒業制作のポートフォリオで意識したこと|Webデザインの専門校での学びの記録

卒業制作のポートフォリオで意識したこと|Webデザインの専門校での学びの記録

卒業制作のポートフォリオを作り始めたとき、一番悩んだのは「何を見せればいいのか」ということでした。

技術力をアピールしたい気持ちもありましたが、完成して振り返ると、自分らしい学びや挑戦が伝わる作品になったように感じています。

ひゃっくり君
ひゃっくり君
卒業制作のポートフォリオって、何を一番意識して作ったの?
背伸びをせず、等身大の自分を見せることかな。何をどう学んで成長したのかが伝わることを一番大切にした。
AIMI.
AIMI.

この記事でわかること

  • 自分らしさが伝わる構成の考え方
  • 一番気に入っている作品と苦労したこと
  • 制作スケジュールの立て方
  • 今作り直すなら大事にしたいこと

結論

卒業制作のポートフォリオは、上手な作品を並べるより、学んだ過程と自分らしさが伝わる作りを大事にしました。参考にしたサイトの良いところを組み合わせ、自分の理想を足して形にしています。

等身大の自分が伝わる構成を意識した

Webデザインの専門校の卒業制作ポートフォリオ(作品の一覧)

実際の卒業制作のポートフォリオは「AIMI PORTFOLIO」で見られます。

作品は「Study(授業課題)」と「Original(自主制作)」に分け、それぞれを技術ごとに絞り込めるようにしました。

  • Webサイト
  • バナー制作
  • JavaScript
  • PHP
  • WordPress
  • Webデザイン

「どんな作品を作ったか」だけでなく、「何を学びながら制作したのか」が伝わる構成を意識しています。

色見本の本

Photo by Balázs Kétyi on Unsplash

また、ポートフォリオサイト自体もHTML・CSS・JavaScriptを使って自作しました。

作品を並べるための「器」も作品の一部だと考え、学習の成果が伝わるサイトづくりを目指しました。

一番気に入っている作品

ひゃっくり君
ひゃっくり君
一番思い入れがある作品はどれ?
料理をテーマにしたオリジナルサイトかな。企画書づくりから考えて、自分で形にした作品だよ。
AIMI.
AIMI.

一番気に入っているのは、料理(クッキング)をテーマにしたオリジナルサイトです。企画書づくりから始めて、制作まで自分で手がけました。

企画の段階で作りたいことを全部詰め込んでみたところ、「これはアプリだね」と言われました。

そこで学んだのが、目的によって、サービスの届け方(Webサイトにするか、アプリにするかなど)を変えるという考え方です。やりたいことの幅が一気に広がった気がして、その瞬間はとてもワクワクしました。

まずは、そのアプリのWebサイトを思い描いて作るところから始めました。学校としては卒業課題でしたが、私にとっては、やっとスタートラインに立ったばかりだと感じた作品です。

卒業制作の料理アプリのサイト「KITCHEN LOGIC」のトップ画面

料理アプリのサイト「KITCHEN LOGIC」(卒業制作で作った架空のサイトです)

子ども向けの世界観を統一したかったものの、イメージに合うフリー素材が少なく、必要な画像を一枚ずつ生成していきました。

以前は子ども写真を専門に撮影するカメラマンとして仕事をしていたこともあり、子どもの表情や雰囲気には特にこだわりがあります。

その経験をWebデザインに生かせたことも、このサイトへの思い入れにつながっています。

一番苦労したこと

何度も描き直したスケッチ

Photo by Amélie Mourichon on Unsplash

ひゃっくり君
ひゃっくり君
AIを使えば画像はすぐ完成するんじゃないの?
実はそこが一番大変だったよ。構図やサイズが思いどおりにならなくて、何度も生成し直した。
AIMI.
AIMI.

AIを活用したことで制作スピードは上がりましたが、その分、画像の微調整には時間がかかりました。

「ここに配置したいのにサイズが合わない」「人物の向きが違う」といったことが何度もあり、Chromeの検証ツールを見ながらレイアウトを調整し、AIへの指示文(プロンプト)も繰り返し修正しました。

AI画像は便利ですが、思い描いたイメージをそのまま形にするには、試行錯誤が欠かせないことを実感しました。

授業で習っていないことにも挑戦した

授業で学んだ内容だけで満足せず、気になったことは積極的に挑戦するようにしました。

スマートフォン向けのレイアウトやアニメーションなど、授業では扱わなかった内容も、自分で調べたり先生へ質問したりしながら取り入れています。

カリキュラムの範囲だけにとどまらず、自分から学びに行く姿勢が、作品全体の完成度を高めてくれたと感じています。

まわりの反応

作品全体については好意的な感想をいただくことが多く、自信につながりました。

一方で、AI画像については「やっぱり写真のほうが温かみを感じる」という意見もありました。

AI画像にも魅力はありますが、写真ならではの空気感や、その瞬間にしか撮れない表情には別の価値があることを改めて感じました。

卒業制作の発表のときは緊張で声が震えましたが、ほかの受講生から「色づかいが好き」と声をかけてもらえたのがうれしかったです。

制作スケジュールの管理について

卒業制作は約1か月という限られた期間だったため、最初に大まかなスケジュールを立てて制作を進めました。

デザインを決めてからコーディングへ進み、最後に素材を調整する流れを想定していましたが、実際は何度も行き来することになりました。

計画どおりに進まないことも含めて、制作現場では柔軟に対応する力が必要なのだと学びました。

今後の更新予定

ひゃっくり君
ひゃっくり君
卒業したらポートフォリオは完成なの?
完成ではなく、ここから育てていくものだと思っているよ。新しい作品が増えるたびに更新していく予定だよ。
AIMI.
AIMI.

ポートフォリオは卒業時点で一区切りにはなりますが、それで終わりではありません。

新しい制作物が増えるたびに更新し、自分の成長記録として残していきたいと考えています。

制作を振り返って得た自信

ひゃっくり君
ひゃっくり君
完成したときはどんな気持ちだった?
「最後までやり切れた」という達成感が一番大きかったかな。それが今の自信につながっている。
AIMI.
AIMI.

卒業制作を完成させたことで、「自分にもここまでできるんだ」という自信が生まれました。

技術的に完璧な作品ではないかもしれませんが、最後まで取り組んだ経験そのものが、その後の制作活動を続ける大きな支えになっています。

一から作ったオリジナルサイトで知った「形にする難しさ」

ポートフォリオの中で一番時間をかけたのは、オリジナルサイトの制作でした。
課題とは違い、テーマから構成、デザインまで、はじめて一から自分で手がけた作品だったからです。
頭の中ではイメージができているのに、いざ形にしようとすると思うように表現できない。その難しさを、この制作で初めて実感しました。
一からサイトを作ったことで、自分の力が足りない部分もはっきり見えました。納得できるまで勉強を続けようと覚悟が決まったのは、この瞬間です。

構成について「なぜこの形にしたのか」と聞かれたときは、参考にしたサイトをいくつか掛け合わせたうえで、自分の理想を加えたと答えました。
ゼロから考えるのではなく、良いと感じた部分を組み合わせて自分なりに作り変えることも、デザインの大切な考え方のひとつだと感じています。

形にするときに一番つまずいた余白の話は「Webデザインの勉強で一番つまずいたこと|余白と最初の画面に悩んだ話」でくわしく書いています。

今作り直すなら、流行より「伝わりやすさ」を一番に

見やすく整ったWebページのラフ

Photo by Amper on Unsplash

もし今ポートフォリオを作り直すなら、はやりのデザインを取り入れることよりも、情報をどう伝えやすく工夫するかを一番に考えると思います。
見た目の新しさは時間とともに変わっていきますが、見る人にとって分かりやすいことの価値は変わりにくいからです。
卒業制作を経て、デザインを見る目が少し変わったことも、大きな学びだったのかもしれません。

この記事のまとめ

ひゃっくり君
ひゃっくり君
卒業制作って作品を作るだけじゃないの?
そうだね。どんなことを学び、どう挑戦したのかを伝えることも、ポートフォリオの大切な役割だよ。
AIMI.
AIMI.

卒業制作のポートフォリオは、「上手な作品を並べる場所」ではなく、「学びの過程と成長を伝える場所」だと考えています。

背伸びをするよりも、自分らしく取り組んだことや工夫したことを丁寧にまとめることで、その人ならではの魅力が伝わります。

これからも新しい作品を追加しながら、ポートフォリオもこのブログも少しずつ成長させていきたいと思っています。

私のプロフィールは「はじめまして」、これまでに作ったWebサイトやデザインは「ポートフォリオ」にまとめています。制作のご相談は「お問い合わせ」からどうぞ。

よくある質問(FAQ)

Q. AI画像だけでポートフォリオを作っても大丈夫ですか?

A. AI画像を活用すること自体は問題ありません。ただし、どのように制作し、どんな工夫をしたのかを説明すると、自分らしさが伝わりやすくなります。

Q. ポートフォリオは卒業後も更新したほうがいいですか?

A. はい。新しい作品や学びを追加することで、自分の成長や現在のスキルを伝えやすくなります。

Q. ポートフォリオには何点くらいの作品を載せるべきですか?

A. 決まった数はありません。私のポートフォリオは、授業課題(Study)と自主制作(Original)に分け、技術ごとに絞り込めるようにしました。数が多いときほど、1点ずつ「何を学んだか」を説明しておくと、見る人に伝わりやすいと感じています。

Q. ポートフォリオサイトはどんな技術で作りましたか?

A. HTML・CSS・JavaScriptで自作しました。フレームワーク(作るための便利な土台)は使わず、素の書き方にこだわることで、基礎力が伝わる作りを意識しました。

Q. 就職活動でポートフォリオはどのくらい見られますか?

A. 見られ方は会社によって違いますが、授業では「なぜそう作ったのかを説明できること」が大切だと教わりました。作品の見た目だけでなく、意図を言葉で説明できるように準備しておくのがおすすめです。

参考・引用元

  • Adobe Portfolio
  • Adobe Firefly(日本語公式)
  • Behance

関連記事

  • Webデザインの専門校で学んだことの全体像|6か月で学べたこと
  • Adobeクリエイティブカレッジに入校してみた
  • Webデザインの勉強で一番つまずいたこと|余白と最初の画面に悩んだ話

うぇぶ、ひゃっくり|Webサイト100選

この記事をシェア

X(Twitter) LINE Facebook
#ポートフォリオ制作 #職業訓練校

この記事が役に立ったら、他の学習記事もチェック!

学習記事一覧へ →
‹ 前の記事 教員はなぜ「準備が仕事」と言われるのか?講師として実感した授業の裏側 教員はなぜ「準備が仕事」と言われるのか?講師として実感した授業の裏側 次の記事 › AI教育は2026年どう変わる?知識・学び方・先生の役割の変化 AI教育は2026年どう変わる?知識・学び方・先生の役割の変化

関連記事

Webデザイン分析記事に人間味が大切な理由|使う人の目線で見る5つのポイント

Webデザイン分析記事に人間味が大切な理由|使う人の目線で見る5つのポイント

なぜWebデザイン分析記事は「人間味」が重要なのか Webデザイン分析記事を書く...

2026.09.11 12分で読める
このブログの色と雰囲気を決めるまで|好きなものから決めた配色

このブログの色と雰囲気を決めるまで|好きなものから決めた配色

このブログの色と雰囲気を決めるまで 「うぇぶ、ひゃっくり」を作るとき、自分好みの...

2026.10.13 10分で読める

Webデザイン100選まで

残り 74 サイト

26 / 100 件

プロフィール

AIMI.

AIMI.

Web制作と学びの記録

Webデザインと子どもに関わる仕事をしながら、 日々の「気づき」や「なぜ?」を大切にしています。 仕事のこと、学んだこと、子どもの成長や教育について考えたことを、 自分なりに整理しながら記録しています。

カテゴリー

  • Webデザイン分析 (26) ›
  • 学習ログ (10) ›
  • Webデザイン (2) ›
  • プログラミング (6) ›
  • 参考書 (2) ›
  • AI活用ログ (4) ›
  • 制作記録 (3) ›
  • 学んだこと (13) ›
  • 考えごと (17) ›

人気の記事

  1. 1 HTMLとは?ゼロからWebページを作る基本と、私が最初に作ったページ
    HTMLとは?ゼロからWebページを作る基本と、私が最初に作ったページ

    2026.06.30

  2. 2 Webデザイン初心者におすすめの参考書は?図解の本が合った私の選び方
    Webデザイン初心者におすすめの参考書は?図解の本が合った私の選び方

    2026.10.05

  3. 3 CSSとは?できること・書き方の基本と、余白でつまずいた私の練習法
    CSSとは?できること・書き方の基本と、余白でつまずいた私の練習法

    2026.07.15

アーカイブ

  • 2026年10月 (10)
  • 2026年9月 (10)
  • 2026年8月 (11)
  • 2026年7月 (10)
  • 2026年6月 (11)
  • 2026年5月 (10)
  • 2026年4月 (11)

タグ

  • #Webデザイン分析26
  • #心理学16
  • #Webデザイン学習15
  • #初心者向け12
  • #子育て・教育12
  • #AI活用9
  • #プログラミング教育6
  • #職業訓練校5
  • #効率化・タイパ5
  • #ポートフォリオ制作5
  • #歴史・思想4
うぇぶ、ひゃっくり|Webサイト100選

一度見たら、止まらない。Webデザインの連鎖。 実在するWebサイトの分析と、子ども向けプログラミング教室で教える経験から、「わかりやすく伝える」工夫を言葉にしています。

カテゴリー

AI活用ログ Webデザイン分析 制作記録 学んだこと 学習ログ 考えごと

サイト情報

ホーム はじめまして サイトについて お問い合わせ

© 2026 うぇぶ、ひゃっくり|Webサイト100選.