ポートフォリオ(作品集)について

ポートフォリオとは

ポートフォリオとは作品集のことです。 就職活動の際に自分の人となりやスキルを企業にアピールするために使用します。 プロのデザイナーでも新しいクライアントを開拓するために使用します。 自分がどういう人間で、どういった技術をもっているかが分かるような ポートフォリオを作りましょう。

ポートフォリオについての参考ページ

その他にも「ポートフォリオサイト デザイン 学生」などのキーワードで検索すると、参考になるサイトが沢山出てくるので研究してみましょう。 参考:優れたデザインの学生ポートフォリオサイト集-その2 | takashi178.me

 制作手順

まずはどのようなポートフォリオサイトにするか計画を立てましょう。

サイト名、デザインコンセプトを決める

サイト名

サイト名を考えて、ロゴマークを作成してください。ロゴマークは、既存のフォントを加工したり、手描きのラフをトレースして書き起こしたり自由にデザインしてください。 「Welcome to my homepage」「ようこそ○○○○のホームページヘ」といった名前は古い印象を与えてしまうのでやめましょう!「あえて直球で!」という考え方もありますが、センスを疑われる場合もあるので難易度が高いです。 自分の名前からアレンジしてみたり、好きな言葉や色などから連想してみたり、色々と考えてみましょう。

デザインコンセプト
  • デザインのテーマ(クール、ナチュラル、アナログ、和風など)
  • メインで使用する色やフォント
  • 写真素材やイラスト素材

 

掲載する内容を決める

自己紹介
  • 名前(写真や似顔絵などもあわせて乗せるとイメージが伝わりやすい)
  • プロフィール詳細 学校名・出身地・趣味・TwitterやFacebookのURLなど、公開しても大丈夫なものだけにしてください。好きなものマップを作りなおして掲載するのもよいかもしれません。
  • スキル ソフト名や技術名を書きましょう。5つ星評価などで各スキルの習熟度をあわらす方法もあります。
  • デザイン関連の資格・実務経験・受賞歴など
作品
  • 作品名
  • 作品に関する情報 制作時期・製作時間・担当箇所・使用ソフト・作品の説明など。 実際に公開されているサイトであればリンクも貼っておく。

作品が多くなった場合はジャンル分けをして見やすくするなどの工夫をしましょう。

問い合わせフォーム

サイトを見た企業の方から連絡をもらえるようにフォームを設置しておきましょう。 最低でも以下の3つの項目は入力してもらう必要があります。

  • 名前
  • メールアドレス
  • 内容

メールアドレスをそのまま載せることもできますが、 スパムメールが来る可能性もあるので 使用するアドレスをポートフォリオ用に別途用意するなどしましょう。 (メールのチェックは忘れずに!)

その他

たとえば制作活動の記録ブログや、日々勉強したことなどをまとめるブログなども、自分がどんな活動をしているのかを知ってもらうのに役立ちます。 記録をつけることで記憶にも定着しやすくなるので、就活とは関係なしにおススメです。

ページ構成を決める

自己紹介、作品、問い合わせフォームといった情報を どのように見せるかを決めましょう。 例えばトップページに「自己紹介」又は「作品一覧」を載せてしまう見せ方や、すべての内容を1ページにまとめて縦に長いサイトにするという見せ方もあります。

ワイヤーフレームを作る

PhotoshopやIllustratorでワイヤーフレームを作成しましょう。 前項で決めた内容とページ構成をもとに、 どのようにレイアウトするかを図にまとめてください。 この時点では文字や画像の配置場所や大きさなどがわかれば大丈夫です。 細かいデザインはこのあと行います。 ワイヤーフレーム

デザインデータの作成

最後にPhotoshopでデザインデータを作成します。 WEBデザインのポートフォリオは当然WEB上に公開しておくのがベストなので デザインが終わったらコーディングをしてWEBサーバー上にアップしましょう。 WEBサーバーについては「WEBデザインについて知ろう」内の「WEBサイトを作るには」以降を見てください。

紙(印刷物)でポートフォリオを作る場合

WEBデザイナーの場合は基本的にWEB上にポートフォリオを作成することが多いですが 印刷したものを求められることもあります。 その場合はプリンタで印刷したものをファイルなどにまとめたポートフォリオを作成します。後半はアナログでの作業になるので、紙質を工夫するなどWEBではできない表現もできます。

※ 印刷の場合は解像度等の問題もあるので、必要になった場合は先生に相談してください。

最後に

制作を進めていく途中で、内容が変更になっても構いません。 まずは最初にイメージできる範囲でいいので、計画をまとめましょう。 また、ポートフォリオ自体が完成しても そこに掲載する作品も作らなければ意味が無いので 並行して作品づくりも考えておきましょう。 就活が終わったとしても、将来、転職や独立をする際に ポートフォリオが必要な場面があるかもしれません。 一度完成しただけで満足せずに、つねにバージョンアップしていきましょう。

色の使い方

色の使い方「配色」について勉強しましょう。「配色」とは複数の色を組み合わせること、または組み合わせた色合いの事をいいます。
まずは色を使うにあたって必要な色の表し方から勉強してみましょう。

続きを読む

文字のデザイン(タイポグラフィ)

イメージイラスト_タイポ
文字をページ上に配置するための技法、つまり文字のデザインを「タイポグラフィ」といいます。
文字要素自体の置き方以外にも、書体の種類や選び方なども重要なポイントです。
WEBデザインでは技術的な制約から実現が難しい部分もありますが、デザイン要素の1つとしてはとても重要です。
続きを読む

画像の使い方

「画像」とはイラスト、写真、図表などのビジュアル素材のことです。
文字だけのデザインの場合、それなりに工夫をしていなければ読者はそのデザインになかなか興味を持ってくれませんが、そこにイラストや写真が1つ入るだけで雰囲気がガラッと変わり、読者が興味を持つきっかけを与えてくれます。 続きを読む

レイアウトのルール07 流れ

イメージイラスト_動線
イメージや文字がページ上に形作る道筋のことを「流れ」といいます。
「流れ」を意識することでこちらの意図が伝わりやすくなります。 続きを読む

レイアウトのルール06 バランス

イメージイラスト_バランス
バランスとは、デザイン要素の釣り合い、均衡、調和のことです。
バランスが良い=全ての要素の見かけ上の重さが、かたより無く分散されているという事になります。
初心者は全ての要素を一箇所に固めてしまったり、逆にページの隅々に分散させてしまいがちです(整列と似ていますね)。 続きを読む

レイアウトのルール05 反復

イメージイラスト_反復
デザイン要素を繰り返し配置する事を「反復」といいます。
「反復」を使用すると、ひとつにまとまった構成をデザイン上に作り出すことができます。 続きを読む

レイアウトのルール04 整列

イメージイラスト_整列
デザイン上の各要素の位置を他の要素の位置と揃えることを「整列」といいます。
初心者は変化をつけようとして、ついつい色々な位置に要素を配置してしまいがいがちですが、まずは綺麗に揃えることから始めましょう。 続きを読む

レイアウトのルール03 コントラスト

イメージイラスト_コントラスト
複数の要素を比べた時に現れる、色、大きさなどの差・違い(対比)のことを「コントラスト」といいます。
「強調」と似ていますが、以下のような違いがあります。

コントラスト→見た目の変化をつけて読者の興味を引くための手法
強調→デザイン要素の意味をふまえた上で使用する手法 続きを読む

レイアウトのルール02 強調

イメージイラスト_強調
デザイン上で重要な要素を様々な方法を使って目立たせることを「強調」といいます。
伝えたいメッセージをより効率的に伝えることができます。 続きを読む