記事の詳細

ポートフォリオってなんですの?

普通に生きてきたらポートフォリオという単語自体にあんまり聞き覚えのないことでしょう。
ポートフォリオを直訳すると「折りかばん」「書類入れ」という意味で、「書類を運ぶ平らなケース」のことを示します。語源はイタリア語の「Portare:運ぶ」「foglio:シート」から。バインダーやファイルのようにまとめてきちっと整理してある、というよりも、もっとラフに、「紙を入れて運ぶ」のようなイメージをしていただければ大丈夫です。

このポートフォリオは、業界によって少しずつ意味が違います。検索すると「?」となることもありますが、おおむね以下のような感じ。

  • クリエイティブ業界においては「自己作品集」
  • 金融業界においては投資家が持っている株式や現金、不動産といった「金融商品一覧」
  • 教育業界においては個人個人の学習の軌跡や活動を記録し保管する「個人評価シート集」

いずれも共通しているのは「パッと見た時にそのシート集が何を意味しているのかわかる」ように作られている、ということです。

クリエイティブなポートフォリオなら「ああこういう意図でこういう目的で作られたんだな」金融業界なら「ああこの人の金融商品はコレとコレとコレで分散されているんだな」教育業界なら「ああ誰それの部活動の記録で上位に食い込んだんだな」などといったことですね。

クリエイティブ業界にポートフォリオってなぜ必要なの?

以上のようにポートフォリオというのは、「何かをプレゼンテーションするときにその過程と結果を同時に説明できるスライド」のような役割を持っていると言えます。
就職活動や転職活動においては自分を売り込んでいく作業が必須。自己紹介、という「自分プレゼンテーション」をスムーズに行うためにも、このポートフォリオって大切なんですね。
特にクリエイティブ業界では、この作品集がキーになることもしばしば。これがなければお話になりませんよ、なんてことが普通です。何せ、その作品こそがその人の売りになる業界ですから!
何一つクリエイティブな作品がない、ポートフォリオなしで面接に挑み、「気合で何とかします!」「頑張りで覚えます!」なんて言っても、そんなリスク背負ってくれる会社は一社もありません。せめて一つくらい何かわかる作品を出してください、と思うのが普通です。

もっと柔軟に考えると、ポートフォリオは作品版履歴書、みたいなイメージです。

(別にクリエイティブ業界だけにとどまりません。実は多種多様な業種にポートフォリオって有効だと思います。普通に営業職でもプログラム職でもアパレル系の店員希望でも、「私は大学時代にこんな活動をしました!」「これまでの仕事場ではこういった仕事を行ってきました!」といったことを、履歴書やエントリーシートだけでなく、写真やアルバムといったポートフォリオでわかりやすく実現してもいいわけです。)

WEBポートフォリオのハードルは年々上がっている?

自分が学生だったころはみんな自分のWEBサイトを持っていたものですが、今では結構少ないのでは……と思います。
WEBデザイナー志望でない、グラフィックやプロダクト、サウンドや工芸など、アート的デザインは多岐にわたるもの。ポートフォリオもなまのファイルなどになりがちです。
だがしかしそれはかさばる。そして、ポートフォリオを送ってくれ、という企業に送ってしまっては、もう一冊作らねばならない。
あの企業用、この企業用、ポートフォリオを使い分けるのは当然にしても、やはり時代はデジタルです。さくっと簡単に自分だけのポートフォリオサイトが作れたらいいなぁ……と思う人は多いのではないでしょうか。

そんな時に役立つのが無料ホームページ作成ツール。

大概のサイトがレスポンシブ対応になっているので、スマホやタブレットでも気軽に見ることができるし、また気軽に見てもらうことができます。

今回推していきたいのは「Adobe Portfolio」

Adobe PortfolioはどのAdobe Creative Cloudにも無償でついている簡易ポートフォリオサイトです。

いまやデザイナーという専門職でなくとも持っている人がいるというAdobeシリーズですが、これに「Adobe Portfolio」がついていて、それを利用している人はあまりいないように思われます。
一番安いCreative Cloudのプランは月額980円(年間11,760円)で、PhotoshopCCとLightroom、そしてAdobe Sparkも一緒に使えるようになります。
つまり、Adobeの製品をCloudプランで契約している人は、Adobe Portfolioがもうすでに使える状態になっているのです。お気づきでしたか?
アカウントやパスの管理は必要なく、すでにあるものを使ってポートフォリオを作れるのであれば、これに越したことはありませんね。

Adobe Portfolioの使い方

まずアプリを起動させましょう。ブラウザでこんな画面になります。

「Get Started Free」をクリックします。すると、いくつかのレイアウトベースが出てきます。
(英語では「最初に、下からレイアウトを選択します。これがあなたのポートフォリオの基礎になります。」「心配しないでも、このレイアウトはいつでも変えられますよ!」と書いてあります)

Adobe Portfolioを使ったポートフォリオの作り方【レイアウトベース】

「View a live example」でデモが見られます。

ざっくりとレイアウト紹介。

Andreas(アンドレアス)

比較的写真数、写真数が多い人向きです。トップページで一つずつのテーマを取り上げ、そのテーマの中に複数の写真、といったような構造で成り立っています。
ギャラリーはライトボックス仕様で、キャプションがあまりつきません。テキストで注釈を入れるよりも、がっつり写真や作品を数多く見せたい人向きのレイアウトです。

Matthias(マティアス)

サイドバーのようにテーマが並び、右側にずらりと写真が並びます。写真をクリックするとライトボックスのようになるのは共通です。トップページにも写真付きでテーマごとに写真が並びます。

Marta(マルタ)

上部メニューが固定になっているので、視線誘導に一役買っているレイアウトです。ロゴが常に上部中央に表示されるので、カラーリングを統一するとユーザーに印象を与えやすいサイトといえます。

Thomas(トーマス)

フルワイドの大胆な写真レイアウトが可能です。トップに見出しがついているのもデモサイトとしてわかりやすいですね。写真や作品の見せ方にこだわりたい人向け。

Lina(リナ)

あまり作品数のない人向きのレイアウト。数の少なさを写真の大きさでカバーするようなイメージです。オンマウスで詳細が見れるようになっていますが、スマホではそれがありません。

Sawdust(鋸屑)

こちらもあまり作品数のない人向きのレイアウトですが、テーマごとの種類は多いほうが見栄えがします。一ページ一ページ丁寧に書き込めるタイプです。

Mercedes(メルセデス)

ヘッダー部分に特徴のあるレイアウト。パッと見た感じを印象的にしたいのであれば、ロゴのあたりにこだわりをもつとよいでしょう。ページもシンプルに見ることができます。

Lukas(ルーカス)

固定メニューレイアウト。Martaと同じような雰囲気を持っていますが、比較的フォトグラファ向けのレイアウトといっていいでしょう。中のレイアウトもパネル式で見やすくなっています。

Linaを使ったサンプルサイトを制作します。

Linaの「Try this layout」をクリックし、サイトを実際に構築していきます。クリックすると「Welcome to your Portfolio.
Your Portfolio website has been created, but it’s looking a little bare. It will soon take shape as you create Pages! We look forward to seeing what you create!」と出てきますが、意訳すると「頑張ってつくってね!楽しみにしてるから!」といった意味です。ナイスな気遣いありがとうです。

「Take a tour」で使い方のレクチャーを受けることができます。

Adobe Portfolioを使ったポートフォリオの作り方【基本画面】

まずトップにロゴを設置しましょう。「INCLOOP」のところにカーソルを持っていくと、編集可能マークが出ます。ここから「Customize」をクリックすると、以下のようなメニューがダイアログとして表示されます。

Adobe Portfolioを使ったポートフォリオの作り方【カスタマイズメニュー】

左側の黒い部分がコンテンツとなっていて、「サイトタイトル」「サイトキャプション」「ロゴコンテナ」となっています。サイトタイトルとサイトキャプションは表示非表示がタブで切り替えられるようになっていますので、応じて変更しましょう。ここではすべて表示させるようにします。それぞれコンテンツをクリックすると、右の白い画面が切り替わります。

横に並ぶタブで「テキスト」「イメージ」「マージン」となっていますが、各々見ていきましょう。

ヘッダーを整える

テキスト
  • テキスト:テキストとして入れる言葉
  • フォント:フォントの種類とサイズ、行間の指定
  • 整列(Align):左揃え/中央揃え/右揃え
  • リンク:どこのページにリンクするのかを選べます。
  • タブ「ノーマル」:常時のテキストカラーと、フォントスタイル(太さ、アンダーライン、消去ラインなど)を選べます
  • タブ「ロールオーバー」:オンマウスした時のテキストの変化を指定できます。
イメージ

まず下部の「Upload image」でアップロードする画像を選びましょう。ここではロゴを選択します。

Adobe Portfolioを使ったポートフォリオの作り方【カスタマイズメニュー】

画像を選ぶと図のように画像がはいります。画像に対して以下のアクションが可能です。

  • 整列(Align):左揃え/中央揃え/右揃え
  • Alt Text:画像の代替となるテキスト情報。テキストブラウザや音声読み上げで必要な情報になりますのできちんと挿入しましょう。
  • リンク:どこのページにリンクするのかを選べます。
  • タブ「ノーマル」:常時のイメージについてのアクション。最大サイズと、イメージの置き換えなどが可能です。
  • タブ「ロールオーバー」:オンマウスした時に変化する画像を指定できます。
  • タブ「レスポンシブ」:スマートフォンサイズなどブラウザサイズが小さくなった時にどれくらいの高さを保持するのかを指定できます。あまりこだわりがない場合はさわらなくて大丈夫です。
マージン

余白のことです。画像に対して、上下左右、すべての余白を指定できます。

以上のことがサイトキャプションでも指定できます。

ロゴコンテナについて

ロゴの範囲がどこからどこまでかを指定することができます。基本はそのまま100%指定にしておきましょう。必要であれば上下のみマージンを取っておきます。

以上の作業で画面はこんな風になります。

Adobe Portfolioを使ったポートフォリオの作り方【カスタマイズメニュー】

Mastheadを作成する

メニューの「Masthead」のタブをオンにすると、以下のように画面が変化します。

Adobe Portfolioを使ったポートフォリオの作り方【Masthead】

Mastheadもさまざまなカスタマイズが可能で、メニューとしてはご覧の通りになっています。全部オンにするとこんな感じ。

Adobe Portfolioを使ったポートフォリオの作り方【Masthead】 Adobe Portfolioを使ったポートフォリオの作り方【Masthead】

イメージ

バックグラウンドを指定すると、表示する枠が点線で、画像の大きさを下のスライドで調節できます。

Adobe Portfolioを使ったポートフォリオの作り方【Masthead:background】

イメージオプション
  • ポジション:画像のポジションを指定できます。「Fix position of image on page scroll」にチェックをいれると、画像がスクロールと一緒に移動しなくなります。
  • リピート:画像が小さい場合は、画像をリピートさせるかどうか選べます。
  • サイズ:イメージで定めたコンテンツエリアに対して、1.コンテンツエリア内にすべておさめる 2.できる限りコンテンツエリア目いっぱいに入れる 3.イメージの大きさを変えない が選べます。なおコンテンツエリアはブラウザごとに変化するので、これに合わせた変化となります。差し支えなければ2がおすすめです。
カラーオーバーレイ

画像に色をのせられます。お好みで。

その他いろいろコンテンツはありますが、さまざまな効果をプラスするとこんな感じ。

Adobe Portfolioを使ったポートフォリオの作り方【toppage】

らしくなってきましたね

コンテンツを追加する

ここまでできたら次は左側のメニューや画面の「Add Page」を使って、ページを作っていきます。

Adobe Portfolioを使ったポートフォリオの作り方【add page】

左サイドバーの一番上か、画面中央の、プラスのボタンを押すと、以下のような画面が出てきます。

Page

新しくページを生成します。トップページには自動的にカバーとなる写真が入り、そのリンク先として新しくページが生成されます。(例:チーズケーキ/アップルパイ/ショートケーキ)

Lightroom Album

Adobe Lightroomで作成したアルバムをインポートできます。

Lunaはデフォルトでこの「Work」というスペースをもっています。(消せません)こちらにページを追加します。

Pageを追加する

Pageを追加すると、「Destination」をリンク元として、ページを生成することができます。

Adobe Portfolioを使ったポートフォリオの作り方【Desitination】

その後、ページを作成するときに、どんなコンテンツをページに作成するのかが選べます。

Adobe Portfolioを使ったポートフォリオの作り方【Pagecontents】

  • Files :ファイルをアップロードすることができます。主に画像となります。
  • Text :テキストを挿入することができます。
  • Embed :様々なメディアを挿入することができます。Youtubeやグーグルマップといったタグで何かを共有する場合はこれを使います。
  • LightroomPhotos :lightroomから写真を選ぶことができます。
  • CCFiles :AdobeCloudに入っているファイルから選ぶことができます。
  • PhotoGrid :複数の写真を選んでグリッド形式に表示することができます。
  • Form :コンタクトフォームなどが設置できます。

Adobe Portfolioを使ったポートフォリオの作り方【Grid】

Photo Gridを選んでみました。編集マークで様々な編集が可能です。

  • Reorder Page :ページを更新します。
  • Edit Grid :順番を並び替えられます。
  • Width :横幅を指定できます。
  • Margin :上下のマージンコントロールができます。
  • Delete Grid :グリッドを排除することができます。

ページコンテンツのメニューはメニューバーに常に表示されています。

 

フォトグリッドがページに表示されたら、適当に文字を入れます。文字をドラッグして選択している状態で、文字は編集が可能です。また、編集ボタンを選択することで、テキストボックスのサイズを変更したり、マージンをとったり、テキストを排除することができます。

コンテンツとコンテンツの間にカーソルをもっていくと、追加する項目を選ぶことができます。

Adobe Portfolioを使ったポートフォリオの作り方【Text】

Adobe Portfolioを使ったポートフォリオの作り方【コンテンツ追加】

編集が終わったらサイドメニューバーの「Save Page」でページを保存しましょう。

Adobe Portfolioを使ったポートフォリオの作り方【トップからのリンク】

トップページからリンクされているのがわかります。

ページの見出しやキャプションは、サイドバーメニューの「Edit Info」で行うことができます。
Adobe Portfolioを使ったポートフォリオの作り方【ページの編集】

Edit Infoで編集した内容は、ページのヘッダー部分の編集ボタンを押すと、表示非表示が選べます。

Galleryを追加する

デフォルトのWorkは「ギャラリー」と呼ばれるカテゴリに属しており、このギャラリーは増やすことができます。Pageを選択したときのプルダウン一番下か、左サイドバーの「Add Content」で追加することができます。

Adobe Portfolioを使ったポートフォリオの作り方【Galleryの追加】 Adobe Portfolioを使ったポートフォリオの作り方【Galleryの追加】

Work2のギャラリーをつくりました。ここにもページを生成することができます。

例えば、カテゴリーとして

学校の課題作品……デッサン、色表現、立体
自分で請け負った仕事……友人のミニライブフライヤー、アルバイト先でのチラシ制作
卒業制作……写真集を作成したので、その写真がたくさん

などといったものがあった場合、

「学校の課題作品」がギャラリーにあたるカテゴリーになり、

「デッサン」「色表現」「立体」がそのPageとなり、デッサンの写真や実物がPage Contentになります。

PageのなかにPageを入れることはできないので、ギャラリーをうまく使うことがページを上手に作るコツになります。

その他の使い方

コンテンツの横幅やそろえの位置などを自由に変化させることができます。また、カラム数やマージンも自由に変化できます。元がレスポンシブデザインになっているので、よくわからない人はそのままのほうがいいでしょう。
上記2点、ページとギャラリーの追加の仕方さえわかれば、写真をそろえるだけでポートフォリオサイトを作ることができます。

左サイドバーにある歯車アイコン「Edit your Setting」でWEBサイトの詳細を決定

AdobePortfolioはグーグルアナリティクスをセッティングできるシステムをデフォルトで持っています。また、ドメイン(URL)も自分の思うとおりに変更可能、ウェブサイトのタイトルや、メタで入れるディスクリプション、メタタグ、ファビコンなども設置可能パスワードを入れることもできますので、プライベートなサイトとしても機能します。

公開作業は「Publish site」をクリックするだけ。
そして、ブラウザがあればどこでも編集可能な気安さ。お手軽ですね!

実作業時間30分のクオリティでもこんな感じに作れます。

https://incloop-tshirt.myportfolio.com/

使い方がわからない場合はお気軽にお問い合わせをどうぞ!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る