サイボウズ デザイン&リサーチ ポートフォリオ勉強会2021

2021年10月1日に開催された「Cybozu ポートフォリオ勉強会2021 Vol.1 基礎編」の登壇資料です。

1. サイボウズ2021年版 ポートフォリオ勉強会 サイボウズ株式会社 デザイン&リサーチ 飛田 和浩
2. 2021/10/01　 |　 Design&Research　 |　 2 飛田 和浩 サイボウズ株式会社 UX/UIデザイナー Kazuhiro Tobita 2021年10月入社の新卒デザイナー。アイルランドの Trinirty College Dublinで、コンピュータサイエンスと ビシネスを専攻。2年間で400以上のポートフォリオを見る @tobik_jp
3. 2021/10/01　 |　 Design&Research　 |　 3 はじめに
4. 2021/10/01　 |　 Design&Research　 |　 4 学生のみなさん ポートフォリオ作りは ぶっちゃけ順調ですか？ 2021/10/01　 |　 Design&Research　 |　 4
5. 2021/10/01　 |　 Design&Research　 |　 5 秋のデザイナー就活の悩みあるある インターンに繋がらない でも理由がわからない インターンに繋がらない でも理由がわからない 実際の就活で本当に 通用するか不安 実際の就活で本当に 通用するか不安 思い描くような理想の PFが作れない 思い描くような理想の PFが作れない 採用者の評価ポイントが わからない 採用者の評価ポイントが わからない
6. 2021/10/01　 |　 Design&Research　 |　 6 僕も2年間で作っては壊して...を5回繰り返してきました
7. 2021/10/01　 |　 Design&Research　 |　 7 作品を通して、どうやったら 自分を魅力的に伝えられるか 「見せ方」って実は難しい
8. 今日からでもすぐに実践できる UI/UXデザインポートフォリオ で「伝わる」に特化したコツを 持ち帰って就活本番に備えよう
9. 2021/10/01　 |　 Design&Research　 |　 9 メモ OK! スクショ OK! 投稿は でぜひツイートを！ #cybozuuxcafe
10. 2021/10/01　 |　 Design&Research　 |　 10 「伝わる」にこだわり抜いた ポートフォリオを理解しよう 今日の最終目標
11. 2021/10/01　 |　 Design&Research　 |　 11 54 「伝わるポートフォリオ」の定 E4 「伝わるポートフォリオ」の構X B4 「伝わるポートフォリオ」のビジュア8 Q4 さいごに 目次
12. 2021/10/01　 |　 Design&Research　 |　 12 「伝わるポートフォリオ」って そもそも何なのか？
13. 2021/10/01　 |　 Design&Research　 |　 13 デザイン業界が、ポートフォリオ提出を求める理由 デザイン力を見るのに最適なため 履歴書より人となりが見えるため プロセスやツールの理解を測れるため ” デザイン力って何† ” 自分を分かってもらうには？ 書類選考 一次面接 二次面接 最終面接 内定
14. 2021/10/01　 |　 Design&Research　 |　 14 ポートフォリオを作る意義 〇〇を解決するための アプリです この制作から〇〇 という学びを得ました 作品ベース（主語が”This”） Works これまで〇〇 してきました 今は〇〇 をしています こんな作品を 作りました 実績ベース（主語が”I”）
15. 2021/10/01　 |　 Design&Research　 |　 15 ポートフォリオを作る意義 〇〇を解決するための アプリです この制作から〇〇 という学びを得ました 作品ベース（主語が”This”） Works これまで〇〇 してきました 今は〇〇 をしています こんな作品を 作りました 実績ベース（主語が”I”） 採用担当 そっか、努力は見えるけど デザイン力の判断が難しいなぁ なるほど、これからの伸び代や 魅力が見えてくるなぁ
16. 2021/10/01　 |　 Design&Research　 |　 16 採用担当が真に知りたい デザイン力とは「伝わる力」のこと！ V 言語S V ロジカルな思考 V 構造S V ビジュアル表現 意味 理由 スキル 瞬間的に 見ただけで把握できる 次にどんな情報がくるか 予想がついているから 時間をかけて 読み込むことで理解できる 前提や背景知識を インストールする必要あり 伝える 伝わる
17. 2021/10/01　 |　 Design&Research　 |　 17 採用担当が真に知りたい デザイン力とは「伝わる力」のこと！ V 言語S V ロジカルな思考 意味 理由 スキル 瞬間的に 見ただけで把握できる 次にどんな情報がくるか 予想がついているから 時間をかけて 読み込むことで理解できる 前提や背景知識を インストールする必要あり 伝える 伝わる V 構造S V ビジュアル表現 じゃあどうすれば 自分が「伝わる」？
18. 2021/10/01　 |　 Design&Research　 |　 18 どうすれば自分が「伝わる」？ ズバリ、メタ認知。
19. 2021/10/01　 |　 Design&Research　 |　 19 ズバリ「メタ認知」 こういう思考なら アウトプットは こうなるね ポートフォリオ ポートフォリオ 採用担当者 わたし ...なんて 考えるだろうな じゃあ直感的にするには 図を入れて文章減らそう
20. 2021/10/01　 |　 Design&Research　 |　 20 ズバリ「メタ認知」 こういう思考なら アウトプットは こうなるね ポートフォリオ ポートフォリオ じゃあ直感的にするには 図を入れて文章減らそう 読み手（その企業の見方）に響いてるかどうかの判断は フィードバックがないと恣意的な憶測になってしまう！ フィードバックが大事な理由 ...なんて 考えるだろうな わたし 採用担当者
21. 2021/10/01　 |　 Design&Research　 |　 21 54 「伝わる」ポートフォリオの定義 ‘ 読み手に意図が「伝われば」よいポートフォリオになi ‘ 「伝わる」ためにはメタ認知で読み手の心情を予測すi ‘ 企業/採用担当で違う採用基準を知るには壁打ちあるのみ 結論
22. 2021/10/01　 |　 Design&Research　 |　 22 まだポートフォリオを作りきった ことがなければ... 「どう作ったらいいかまだわからない...！」 という方向けで、作り方のマニュアルとなる note記事をご一読いただけたら嬉しいです。
23. 2021/10/01　 |　 Design&Research　 |　 23 GB 「伝わるポートフォリオ」の定) 'B 「伝わるポートフォリオ」のビジュア" 2B さいごに dB 「伝わるポートフォリオ」の構V 目次
24. 2021/10/01　 |　 Design&Research　 |　 24 「伝わる」作品にするための 構成はどうすればいい？
25. 2021/10/01　 |　 Design&Research　 |　 25 表紙 自己紹介 目次 作品 さいごに ポートフォリオの構成 t 自分の個性をそのまま見せることができる唯一のペーq t 掲載する作品のトンマナに揃えて、1番最後に作成 必要な情† t ポートフォリオのタイト” t 名前 / 所属
26. 2021/10/01　 |　 Design&Research　 |　 26 表紙 目次 作品 さいごに 自己紹介 ポートフォリオの構成 x 使えるスキルを自己評価で表していいかは意見が割れる 　 しかし結局作品から習熟度を判断するので載せてもよい 必要な情ˆ x 名前 / 所l x 簡単なプロフィールや自己紹m x スキル / 略歴
27. 2021/10/01　 |　 Design&Research　 |　 27 表紙 自己紹介 作品 さいごに 目次 ポートフォリオの構成 必要な情E x カテゴリt x 作品名 / 何のためのアプリq x ロゴ / モックアッV x ページ番号（ノンブル） x まず先頭に「行きたい職種・業種の作品」を持ってく• x 後半に取り組んだ活動や趣味は積極的に載せる
28. 2021/10/01　 |　 Design&Research　 |　 28 表紙 自己紹介 目次 さいごに 作品 ポートフォリオの構成 作品紹介 作品内容 ˜ チーム制作は自分がどこを担当したか明記するのが大b ˜ コンセプトは2~3行で、読めば伝わる内容を簡潔に記載 必要な情d ˜ コンセプw ˜ 制作時y ˜ 制作に至った理n ˜ 使用ツーm ˜ 作品のゴール
29. 2021/10/01　 |　 Design&Research　 |　 29 表紙 自己紹介 目次 さいごに 作品 ポートフォリオの構成 作品紹介 作品内容 必要な情S pr 課題抽c ir 解決仮e `r 開発検証 ” 作品毎にページ数や熱量に偏りが極力出ないように注’ ” 作品に合うプロセスのチョイスが大事
30. 2021/10/01　 |　 Design&Research　 |　 30 課題抽出 Problem 解決仮説 Solution 王道の作品内容フロー t 要件定i t アプリページ構e t マネタイズマッX t ビジネスモデル t t t デザインプラ… t スプリント計画 なぜ解決するか ‘ なにを解決するか ‘ t 市場調z t 競合分u t t t インタビュw t 共感マッX t ペルソナ設定 アンケート ‘ ヒアリング ‘ t t ストーリーボー t ジャーニーマッX t 感情曲線 インサイト発見 ‘ t t ¥ 仮実装 ワイヤーフレーム ‘ プロトタイプ ‘ t A/Bテス¸ t テスト分u t t ガイドライン フィードバック ‘ 開発検証 Development 問題提起 リサーチ 解決への仮説 コンセプト設計 UIデザイン 検証・修正 ( *は特に入れておきたいプロセス )
31. 2021/10/01　 |　 Design&Research　 |　 31 表紙 自己紹介 目次 作品 さいごに ポートフォリオの構成 必要な情E b メッセーg b 載せきれなかった作品リンQ b SNSリンク b 個人のメッセージや意気込みを伝えられるペーg b ポートフォリオに載せきれず、でも見せたい作品リンク
32. 2021/10/01　 |　 Design&Research　 |　 32 2. 「伝わる」ポートフォリオの構成 ƒ UI/UXデザインのプロセスを1つ1つ知るところからスターq ƒ なぜそのプロセスを採用したかを面接でも説明できるようv ƒ 正しいプロセスを踏める＝UI/UXデザイン理解への証明になる 結論
33. 2021/10/01　 |　 Design&Research　 |　 33 DA 「伝わるポートフォリオ」の定1 )A 「伝わるポートフォリオ」の構8 $A さいごに dA 「伝わるポートフォリオ」のビジュアE 目次
34. 2021/10/01　 |　 Design&Research　 |　 34 「伝わる」作品に仕上げる ビジュアル表現は？
35. 2021/10/01　 |　 Design&Research　 |　 35 トンマナと余白 v 全ページのマージンは統一するとキレf v 作品それぞれに合うカラー2~3色を決2 v 文字の大きさ・太さを決定（6,8の倍数） タイトル：36px・W6 小見出し：18px・W6 端書き　 ：12px・W3 例
36. 2021/10/01　 |　 Design&Research　 |　 36 文字量 2 箇条書きは2~3行、12~14字だと負担I 2 詰まって見えたら、行間と字間を広げ( 2 段組み全体が長方形に収まるとスッキリ 長くて読みにくい 図 + 短い文章 2021年7月X日、大学構内で8名の回答者 からアンケート回答を得た。 そのうちの5名は一人暮らしをしていて さらにその中の2名は料理が不得意なので 外食（コンビニ）で済ませている日が 多いことがわかった。 回答者全員が、私の大学が推奨する 「3食栄養宣言」の存在は知っていたが、 行動に移せていないことも判明した。 大学生8名にアンケートを実施 そのうち2名は普段自炊をせず コンビニで3食を済ませている 例
37. 2021/10/01　 |　 Design&Research　 |　 37 視線誘導 s 余白は「視線の通り道」になY s 自分の目がスムーズに動けば「伝わる) s Z/N/F型を意識して文章や図をレイアウト 例
38. 2021/10/01　 |　 Design&Research　 |　 38 3. 「伝わる」ポートフォリオのビジュアル f 1つの作品/作品全体のトンマナ・フォント・カラーを統y f 「文字文字しい」と自分が感じるなら、読み手も同じ気持I f 図&文章レイアウトの余白で、読み手の視線をコントロール 結論
39. 2021/10/01　 |　 Design&Research　 |　 39 FC 「伝わるポートフォリオ」の定2 0C 「伝わるポートフォリオ」の構9 &C 「伝わるポートフォリオ」のビジュア! RC さいごに 目次
40. 2021/10/01　 |　 Design&Research　 |　 40 新卒デザイナーとして伝えたいこと まだ「デザイナー」でないあなたも 既に立派な「クリエイター」である
41. 2021/10/01　 |　 Design&Research　 |　 41 新卒デザイナーとして個人的に伝えたいこと 「デザイナーになる」という選択肢でなくても モノづくりと対峙し続ける限り 肩書きに関係なく素敵なクリエイターです
42. 2021/10/01　 |　 Design&Research　 |　 42 Thank you!