ポートフォリオ制作[公開編] 職業訓練卒業時の作品サイトの構成と内容

職業訓練卒業時のポートフォリオ Webデザイン

今まで恥ずかしくてブログでは公開しなかった、職業訓練卒業時の自分のポートフォリオについての紹介記事です。ブログの記事が30記事になった記念に公開することにしました。

ポートフォリオサイトの構成

私のポートフォリオはこのような構成にしました。簡単な作りです。

ワイヤーフレーム(PC表示用)です

ABOUT:自己紹介とPCスキル
 ※企業側に提出する作品サイトには自分の写真を掲載
WORK:作品
BLOG:このブログへのリンク
CONTACT:お問い合わせ

作品の内容

ポートフォリオに書きたい内容

・自己紹介
・何のサイトか(サイト名)
・コンセプト
・ターゲット
・制作期間
・工夫した点

作品の説明について

自分のポートフォリオで工夫した点は、作品の説明をする詳細ページを作ったことです。

作品の説明文はどれくらいがいいのか悩みますよね。
→すっきりした箇条書きや、2〜3行程度でもシンプルで読みやすいと思います。作品のサムネールの横や下に簡潔に書いている人もいました。

私は非公開のサイトがあるので作品紹介の詳細ページを作成しました。
▼作品詳細ページはこんな感じです

PC画面とスマホ画面を並べました

私の場合は、例えば「予約するページでカレンダーが出てくるjQueryを使いました」など、ユーザーにとって使いやすいサイトを作る努力をしたことをアピールしました。

架空のサイトを多く作った理由

架空のサイトを作った理由は公開しやすいからです。

職業訓練の卒業制作(自由課題)では実在する観光施設のホームページを制作しましたが、学校関係者と企業の採用担当にのみ限定公開するという条件で制作させてもらいました。観光協会に画像素材の使用許可とダウンロードを申し込んで、その時に公開範囲を限定することを約束しています(閲覧するのにIDとパスワードの入力が必要)。一般に公開しない代わりに、詳細ページで内容を説明しました。

・初心者のポートフォリオのサイト作品は「架空のサイト」や「知り合いの人のお店(許可が必要)」など、公開しやすいものが良い。
・公開するのに許可が必要なサイトは必ず許可を取ること。

それぞれの作品(架空のサイト)にドメインを取得しないといけないのか?

答えはNO。それぞれの作品にドメインを取得しなくても作成できます。私は下層ディレクトリ(フォルダ)を使って1つのドメインで制作しました。下層ディレクトリは同一サイトとして扱われます。

もちろんそれぞれのサイトに独自ドメインを取得したい場合は、そのように制作してください(実際に運用されているサイトなど)。

作品サイト用にworksフォルダを作りました

別サイト扱いにしたい場合は複数作れるサブドメインを使うこともできます。
※サブドメインについてはこちら。

就職活動時の作品数やジャンルなど

以前の記事にも書いたのですが、5ヶ月間の職業訓練卒業時にはサイト作品が3〜5作品の訓練生が多数派のようでした。デザイン学校の学生さんならこれより多いかもしれません。私の場合は1社目の就活時はサイト作品は4作品で、バナーは後から追加しています。

ごん先生
ごん先生

ジャンルは偏らないようにいろんな業種やデザインを見せるようにしたいね

採用側はいろんなパターンが見たいと思うからね。(けどどうしても、私個人のクセや好みは出てしまう)。

著作権に気をつけて

当然のことですが、画像素材などは著作権フリー等の素材でライセンス(使用条件)を確認して利用を。

著作権、出版権、著作隣接権の侵害は、10年以下の懲役又は1000万円以下の罰金、著作者人格権、実演家人格権の侵害などは、5年以下の懲役又は500万円以下の罰金などが定められています。
なお、「懲役刑」と「罰金刑」は併科されることがあります

https://www.cric.or.jp/qa/hajime/hajime8.html 公益社団法人著作権情報センター

情報を発信する際に、市販の素材集(絵や写真など)やインターネットに素材を提供しているホームページなどでは、これらを利用する場合に権利者による許諾の必要がない旨を記載されていることがあります。しかし、そのような素材であっても、商業利用については制限がかけられていることがあるため、必ず規約をよく読んでから利用するようにしましょう。

https://www.soumu.go.jp/main_sosiki/joho_tsusin/security/enduser/attention/01.html 総務省

職業訓練卒業時のポートフォリオサイトはこちら

初めて作ったのでクオリティは高くないのですが、職業訓練卒業生のポートフォリオってこんな感じなんだ〜くらいの参考にお願いします。勉強中の人のサイトを探すのも難しいですよね。いきなりプロのかっこいいポートフォリオを見て自信喪失してしまう人には、ちょうどいいレベルかもしれません。

無断転載などご遠慮ください。制作当時のままなので表示がおかしい所など不備があります(あえてそのまま掲載してます)。スマホで見るとスマホ用のサイトが表示されます。

こんな感じですが就活1社目に受けたWeb制作会社のアルバイトと、2社目に受けたWeb制作会社(委託業務でバナー制作の在宅ワーク中)は、無事どちらも採用をいただきました。自分が制作したものでお給料をもらえるのはやっぱり嬉しいですよね。

今見ると色々できていないところばかりで恥ずかしいのですが、初心者の方に少しでも参考になれば幸いです。今後は、改修&以前よりレベルアップしたポートフォリオサイトを追加公開したいと思います。

これから修正していくとして、ポートフォリオが一通りできたらいよいよ公開です。

プロフィール
この記事を書いた人
いまみ&ごん

在宅Webデザイナーになった主婦です。前職は編集系の仕事をしていました。退職後にWebデザインの職業訓練校を経て、Web制作会社でアルバイトを経験。現在は在宅でバナー制作を中心にお仕事をしています。Twitterをフォローしてもらえると喜びます。

いまみ&ごんをフォローする
Webデザイン職業訓練
いまみ&ごんをフォローする
Webデザときどきプログラミング
タイトルとURLをコピーしました