こんにちは！ 駆け出しデザイナーのななみんです( ´ ▽ ` )ﾉ
未経験からデザイナーを目指すためには欠かせない「ポートフォリオ制作」。私自身も未経験からLIGのデザイナーとして働くにあたって、たくさん悩みながら、楽しみながらポートフォリオづくりに取り組みました。
前回に続き、今回もポートフォリオの作り方について、これまでインプットしてきたことや現役デザイナーの方々にいただいたアドバイスなどを踏まえつつ、まとめていこうと思います！
あらためてポートフォリオの作り方の手順をおさらいします！
前回の記事では、【載せる作品づくり編】として、ポートフォリオに載せるための作品づくりのヒントについてお伝えいたしました。
そして、今回は【作品まとめ編】として、「作品を言語化してまとめる方法を考える」ことを、私が実際に作った作品の事例とともにお話しします(＾ω＾)
ポートフォリオの添削いたします！
Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。弊社のスクールでは、ポートフォリオに使えるWebサイト制作を0からサポート！ ポートフォリオ添削もいつでも受付中です！
目次
ポートフォリオの作り方【作品まとめ編】
愛情をたっぷり込めて必死に作ったポートフォリオに載せる作品たち。これらをポートフォリオへ魅力的にまとめるために、相手に「伝わる」ように作品の説明を考えていきます。
作品の説明とは、「どのような手順で作品を制作したのか」「どんな特徴をどのように表現したのか」ということを言語化することです。作品づくりの際にも、ある程度は言語化ができているかと思いますが、今回はそれをもう一度まとめ直す必要があります。
「え、せっかく言語化したのにまたまとめ直すの！？」
と思うかもしれませんが、ここでのまとめ直しは重要です。
なぜなら作品をつくりながら言語化したことは、自分にとってわかりやすい自分主体の表現になっているはずです。一方、今回改めて行なうの作品の言語化は、作品をはじめてみた人にも伝わるように、相手主体で考える必要があります。
「なんとなくではなく、考えてデザインしたんだな」ということが相手に伝わるように、作品の説明をていねいに言葉にしていきましょう( ´ ▽ ` )ﾉ
私が制作した美容院のサイトの場合は、こんな流れで作品を言語化しました！
- 言語化の流れ
-
- クライアント名
- 概要
- ペルソナ
- ペルソナを導く流れ
- 流入フロー
- コンテンツアイデア
- デザインアイデア
また、それぞれの項目の下に、「一言でまとめた文」を記載しました。
前職のデザイナーの先輩からアドバイスをいただき、確かに！！！ と思ったことだったのですが、ポートフォリオをご覧いただく担当者さんは、たいてい忙しいためポートフォリオの隅々までご覧いただけるとは限りません。
各項目を一言でまとめた文をはじめに添えることで、各項目における伝えたいことの概要が担当者さんの頭に入りやすくなります。
それでは、ひとつずつ説明していきます！
クライアント名
クライアントさんの名前です。
美容院サイトはクライアント案件というわけではなかったので、実在する美容院の経営者さんを仮想クライアントさんと定めました。
概要
「こんなサイト！」とサイトを一言でまとめたタイトルと、簡単な説明を添えました。
タイトル：来店前から居心地の良さを感じてもらうようなサイト
説明文：美容院は競合が多く差別化が図りにくいため、ターゲティングとターゲットに合わせた訴求が重要となります。そのため、ペルソナ策定と導線設計には重きを置きました。
ペルソナ
前回の記事【載せる作品づくり編】と同じペルソナを準備しました。
ペルソナを導く流れ
ペルソナを導く流れは、前回の作品づくりをしたときの内容をもとに、相手に伝わるようにするために下記二点に気をつけて整理し直しました。
伝えたいことの優先順位を決める
作品づくりの際は、かなりの量のデータを用いてロジックを組み立てペルソナを導いていましたが、これをすべて載せるとなると読む気がしないな……と思いました。
伝えたいことの優先順位を考えてなるべく情報をシンプルにし、データの順番なども組み立て直しました。また私の場合は、ポートフォリオサイトを作ろうと考えていたため、作品のトップページと同じページに載せる情報と下層ページに飛ばす情報のすみ分けも行いました。
グラフもデザインし直す
作品づくりの際は、さまざまなサイトからグラフをスクショしたりデータを持ってきてグラフ化したりしていたため、サイトのトンマナに合うようにすべてのグラフを作成し直しました。
グラフの作成も、大事なデザインです。相手に伝わりやすくするために、グラフ内の文言の修正やデザインの統一なども行いました。
流入フロー
こちらも、ペルソナを導く流れと同様に、相手への伝わりやすさを意識しつつ構成し直しました。
コンテンツアイデア
ペルソナや流入フローを定めた上で、どのようなコンテンツがあれば良いのか考えたことを書き出します。
ペルソナが美容院に求める条件として、「居心地の良さ」や「特別感」というキーワードが出てきました。そのため、どのようなコンテンツがあればペルソナに「居心地の良さ」「特別感」を感じてもらえるか、という切り口からコンテンツを考えて、優先順位をつけました。
デザインアイデア
上記コンテンツアイデアに同じく、ペルソナや流入フローを定めたうえで、デザインで工夫したことをまとめます。
ここでは、「情報設計」と「デザイン」の2つに分けます。
「情報設計」では、コンテンツをなぜその配置にしたのかという理由を書きます。「デザイン」では、世界観やテイスト、色、フォント、形などに関して、なぜそのデザインにしたのかという理由を記載します。
美容院サイトの場合は、情報設計とデザインを下記のようにまず一言でまとめました。
情報設計：共感から予約に繋げる導線づくり
デザイン：居心地の良さを表現すべくなるべくシンプルに、でも強弱は忘れずに
そのあとに、情報設計・デザインにおいてこだわったポイントを箇条書きで記載しました。
ポートフォリオの媒体を選ぶ
載せる作品や作品の説明文ができあがったら、あとはポートフォリオに載せるだけです。
ポートフォリオのまとめ方は、ポートフォリオサイトとしてサイトにまとめる方法、WordやPowerPointにまとめてPDFで出力する方法、画像にしてフォルダにまとめる方法などさまざまです。
時間の兼ね合いなどもあるかと思いますが、私としては、「ポートフォリオサイトを作る＞PDFで出力する＞フォルダにまとめる」方法が良いかと思います。
ポートフォリオサイトのメリット・デメリット
| メリット |
|
|---|---|
| デメリット |
|
ただし圧倒的に時間がかかりますよね……。
時間がない場合は、PowerPointやWordでまとめたものをPDFで出力したり、フォルダにまとめたりすることでも良いかと思います。その際は、なるべくデザインの意図を含めたり、作品をわかりやすくまとめたりするなど工夫すると良いでしょう。
時間がない人にはSTUDIOがおすすめ
ちなみに私の場合は、「時間がないけどポートフォリオサイト作りたい！！」と思っておりました……矛盾してる……。
ですがそんなときに、「STUDIO」というサービスに出会いました。
STUDIOは、コードを書かずにWebサイトを作れるサービスです。いくつかテンプレートもあるのですが、1からデザインを作ることも可能です。STUDIOの詳細は、下記記事でも紹介されているので、ぜひ覗いてみてください。 【デザイナーに朗報】コーディングなしでWebサイト制作が完結する最強ツール発見。
ゆうこ
私の場合は、ポートフォリオのワイヤーフレームやデザイン・ポートフォリオ内の画像はPhotoshopを用いて作成し、コーディング代わりにSTUDIOを用いてサイト制作を行いました。
STUDIOは、質問や困ったことがあればチャットで相談することができます。何もわからなかった私は、この機能をとおしてSTUDIOの方々にたくさん助けていただきました。初心者でも直感的に使いやすい仕様になっているのでおすすめです。
次回はいよいよ作品集制作編！
今回はポートフォリオに載せる作品のまとめ方について書いていきました。
次回は【作品集制作編】として、いよいよポートフォリオの作り方について記載しようと思います！
引き続きよろしくお願いします( ´ ▽ ` )ﾉ
▼働きながら♪ 授業の合間に♪ Webデザインを勉強するなら……
ポートフォリオの作品づくりもサポート！ LIGが運営するWebデザインスクール卒業生の作品も覗いていってね！ デジLIG「Webデザイナー専攻」卒業生作品（卒制）を紹介します！
Ten Tanaka
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
