この授業は次のような方におすすめです。
・未経験でWebデザインの仕事がしたくて就職や転職をする方
・ポートフォリオを作るコツを知りたい方
この授業を受け終えたら、ポートフォリオの作り方を理解でき、見事就職を勝ち取ることができるかもしれませんよ!
どうぞ最後までご覧になってください。
ポートフォリオって何?

転職するためにはポートフォリオが重要

ポートフォリオを作るなら紙かWebか?

コーディングを主にしたWebデザイナーや、フロントエンドエンジニアを目指している場合は、ポートフォリオサイトだけでも大丈夫だが、デザイン重視のWebデザイナーになりたいのならば、紙のポートフォリオも作りましょう。
Webデザインのポートフォリオを作る際に意識したい2つのこと

・デザインスキル
・デザインで伝える力
・デザインのスキル
・コーディングのスキル
・今のトレンドを取り入れた表現方法
など、自分ができることを訴えましょう。
また、自分の思考方法を表現することで、デザインをする上で、デザイン力だけでなく、会社やクライアントの悩みを解決する力があることをアピールしましょう。
そして、どんな根拠を持ってデザインしたのかを伝える力も求められます。
問題を解決するときの思考プロセスをポートフォリオに載せることが大切です。
ポートフォリオを作る3つの流れ

1.ポートフォリオに使う作品を作る
2.作品を言語化してまとめる
3.ポートフォリオ作成開始!
1.ポートフォリオに使う作品を作る

例えば、次のような流れで作っていくと良いです。
・作る作品を決める
・目標設定
・ペルソナを考える
・流入フローを考える
・ペルソナのニーズを満たすことを考える
・コンテンツを組み立てる
・デザインの方向性を決める
・ワイヤーフレームを作る
・デザインを制作する
作る作品を決める
目標設定
・目的 ⇨ 新しいお客さんを増やす
・目標 ⇨ 新しいお客さんがレストランに予約をする
ペルソナを考える
ペルソナ設定とは、ターゲットになってくれる仮の人物像を定めることを言います。
・作ったWebサイトをどんな人が見てくれそうなのか
・どんな人に見てもらいたいのか
といった、属性や生活、行動などを考えます。
・32歳、女性、会社員
・2つ年上の彼氏がいる
・仕事が忙しくて、外食することが多い
・若い頃と比べて少し太ってきたので運動をしようとジムに通い出した
・情熱的で負けず嫌いな性格

流入フローを考える
それを考えることによって、PCファーストのWebサイトにするかスマホファーストのWebサイトにするかを決めたり、デザインやコンテンツに必要な要素や優先した方がいい要素を決める参考になります。
・昼休みの時間に、外食をするために美味しいレストランをなんとなく探す
ペルソナのニーズを満たすコンテンツを考える
・彼氏と楽しく食事をする
・居心地が良い
・パエリアと食後のデザートが美味しい
・接客がスマートな中に温かみがある
①ピザと食後のデザートが美味しい
②接客がスマートな中に温かみがある
③居心地が良い
コンテンツを組み立てる
さっきデザイニャーが決めたコンテンツの優先順位に沿って、ヘッダー、コンセプト、特徴というように全体の流れを決めていきましょう。
その後に、ヘッダーには何のコンテンツを入れるのか、といった詳細を詰めていくとうまくいきます。
それぞれの項目ごとに、どういった感情を持ってほしいかを考えましょう。ターゲットの感情の流れを考えながら、どういった表現いすれば良いか、ここは写真がいいか文字で伝えるべきかなどを、ターゲットの目線で考えることができます。
・ユーザーがWebサイトを訪れてから予約をするまでにどんな感情の流れになるか
・レストラン側が伝えたい情報の優先順位を考える
デザインの方向性を決める
ペルソナ像と対象物の世界観の2軸から、理想のイメージをできる限り想像して、思いつくイラストや写真などを1つのボードに集めていきましょう。



ワイヤーフレームを作る
デザインを制作する
作ったワイヤーフレームを見ながら写真、イラスト、文章やキャッチコピーを入れていきます。
・デザインの基礎
・らしさを表現する
デザインの基礎
・近接
・整列
・対比
・反復
デザインの基礎を学ぶためには、次の2つの本をおすすめします。



らしさを表現する
らしさのデザインのコツをつかむには、次のことを観察しましょう。
・全体のテイスト
・余白感
・大きさ
これをするのは簡単ではありませんが、考えながら作ることは、まだ作品数が少ない未経験のデザイナーにとっては大事なことなので、チャレンジしてみましょう。
2.作品を言語化してまとめる

作品の説明とは、
・どんな手順で作品を作ったのか
・どんな特徴をどんなふうに表現したのか
ということを言語化することを指します。
次のような流れで言語化していきましょう。
・クライアントの名前
・概要
・ペルソナ
・ペルソナを導いていく流れ
・流入フロー
・コンテンツのアイデア
・デザインのアイデア
3.ポートフォリオ作成開始!

ポートフォリオに加えるべきなのは次の5つの項目です。
・自己紹介、スキル
・プロジェクト名
・デザインのコンセプト
・工夫したポイントをアピール
・制作する時に担当した領域とスキルの説明
自己紹介、スキル
・氏名
・顔写真
・生年月日
・職歴
・保有資格とスキルのレベル
・得意分野
・自己PR
もし、実際に受注したデザイン案件があったら、どのくらいの規模のもので、どのようなことを担当したのかや、金額についてなど、具体的に記載していきましょう。
プロジェクト名
ファーストビューのキャプチャーと一緒に担当したプロジェクト名を記載しましょう。
デザインのコンセプト
どのようなターゲットを意識しているのか、デザインの考え方や目的を書いておく必要があります。
工夫したポイントをアピール
問題解決をするために工夫したポイントに加えて、デザインを作るときにこだわった部分もポートフォリオに記述しましょう。
制作する時に担当した領域とスキルの説明
何人かで作ったプロジェクトの場合、自分がどの領域を担当したのかを記述しましょう。
・PhotoshopやIllustratorを使ったデザインの能力
・コーディング力
・JavaScriptなどのプログラミング力
・WordPressのスキル
採用する企業側にあなたのWebデザインの能力を示すような説明文を添えましょう。
参考になるポートフォリオサイトをご紹介

まとめ

・ポートフォリオって何?
・転職するためにはポートフォリオが重要
・ポートフォリオを作るなら紙かWebか?
・Webデザインのポートフォリオを作る際に意識したい2つのこと
・ポートフォリオを作る3つの流れ
・1.ポートフォリオに使う作品を作る
・作る作品を決める
・目標設定
・ペルソナを考える
・流入フローを考える
・ペルソナのニーズを満たすことを考える
・コンテンツを組み立てる
・デザインの方向性を決める
・ワイヤーフレームを作る
・デザインを制作する
・デザインの基礎
・らしさを表現する
・2.作品を言語化してまとめる
・3.ポートフォリオ作成開始!
・自己紹介、スキル
・プロジェクト名
・デザインのコンセプト
・工夫したポイントをアピール
・制作する時に担当した領域とスキルの説明
・参考になるポートフォリオサイトをご紹介
私たちは頑張るあなたを応援しています!