LogoMark.png

Portfolio のバックアップ(No.2)


Portfolio

 
ポートフォリオとは、直訳すれば「紙ばさみ」のことですが、我々が通常使う意味としては、デザイナーが就職活動の際に自己PRのツールとして用いる「作品集(業績集)」のことだと考えればよいでしょう。

デザイナー・クリエイターを募集する企業の採用担当者は、このポートフォリオを採用の判断材料として非常に重視しています。

ポートフォリオの規格

ポートフォリオに掲載するもの(例)

ポートフォリオのページ構成について

各作品に付ける補足情報(例)

ポートフォリオのレイアウト

リーフレット

さらに、一枚ものの自己紹介シートのようなものもあると便利です。つまりポートフォリオの内容のダイジェスト版です。履歴書に同封すれば、あなたの魅力がより伝わりやすくなります。




Portfolioサイトについて

Webポートフォリオ

紙のポートフォリオだけで勝負する時代ではありません。ブログあるいは本格的なWebページで、自分の作品情報をWeb上に公開するようにして、履歴書に URLあるいは検索キーワード(理想は実名、あるいはアーティストネーム)を添えられるとベストです。
 他とかぶらない、確実に一意でヒットするキーワードを作り出して、早期にWeb上での利用を始めると良いでしょう。


静的サイトと動的サイト

静的サイトとは、HTML+CSS+JavaScript によってクライアントサイドのみで完結するWebサイトです。一方、動的サイトというのは、WordPress に代表されるCMSのように、サーバーサイドでデータベースと連動して、記事情報を自動回収して表示できるようなものです。

みなさんがWeb上で見ているサイトの大半はCMS(動的サイト)なので、CMS風のサイトデザインを考えてしまいがちですが、残念ながら、それと同様の動きを静的サイトで実現するには非常に複雑なリンク形成が必要になります。

実現したい仕様を見極めて、静的サイトか動的サイトが、ふさわしい仕組みを検討して下さい。なお、動的サイトでは「投稿」を中心にする Blog 形式のものと、「ページ」を中心にまとめサイト的なものをつくる Wiki とでは、必然的にそれにふさわしいレイアウトが変わってきますので、その見極めも必要です。

シングルページで構成する場合

index.html を以下のようにセクションで区切って、縦一列で作ります。

portfolio_single.png

シングルページ+作品個別ページで構成する場合

index.html を以下のようにセクションで区切って縦一列で作ると同時に、個々の作品を独立した別の htmlページとして作成します。メインのページと作品個別ページのテンプレートを別のものとして制作します( style.css , work.css )。

portfolio_single_plus.png

マルチページで構成する場合

一般に以下のように複数の htmlファイルをつくります。
基本的には、すべてのページが同一のレイアウト構造になります。

html_css_2.png

付記

記事の分類方法.png

授業課題、プロジェクト、公募、自主制作・・様々ある作品を掲載する際、例えばイラスト / グラフィック / CG などのページ区分を考えてはみるものの、そもそも境界がはっきりしない・・。また、アナログとデジタルという分け方もあるし、制作年ごとに整理するという方法もある。・・と、カテゴリー分けについて悩むことが多いと思います。そんなときは、「分類しない」つまり「1作品1ページ」で作ってしまう・・というWordPress的な方法も検討する価値があると思います。

マルチページでWordPress風に構成する場合

トップページあるいは、ギャラリーページに作品の一覧サムネイルがあって、サムネイルのクリックで、個別作品のページにジャンプする・・というかたちでデザインしたい場合は、以下のように標準テンプレート(style.css)と作品個別ページのテンプレート(work.css)を別のものとして制作します。

portfolio_multi.png

サンプル

シングルページ・レスポンシブ

シングルページで構成する前提の雛形です。

マルチページ・レスポンシブ

複数のページで構成する前提の雛形です。