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

by Kazuhiro Tobita

Slide 1

Slide 1 text

サイボウズ2021年版ポートフォリオ勉強会サイボウズ株式会社デザイン&リサーチ飛田和浩

Slide 2

Slide 2 text

2021/10/01　 |　 Design&Research　 |　 2 飛田和浩サイボウズ株式会社 UX/UIデザイナー Kazuhiro Tobita 2021年10月入社の新卒デザイナー。アイルランドの Trinirty College Dublinで、コンピュータサイエンスとビシネスを専攻。2年間で400以上のポートフォリオを見る @tobik_jp

Slide 3

Slide 3 text

2021/10/01　 |　 Design&Research　 |　 3 はじめに

Slide 4

Slide 4 text

2021/10/01　 |　 Design&Research　 |　 4 学生のみなさんポートフォリオ作りはぶっちゃけ順調ですか？ 2021/10/01　 |　 Design&Research　 |　 4

Slide 5

Slide 5 text

2021/10/01　 |　 Design&Research　 |　 5 秋のデザイナー就活の悩みあるあるインターンに繋がらないでも理由がわからないインターンに繋がらないでも理由がわからない実際の就活で本当に通用するか不安実際の就活で本当に通用するか不安思い描くような理想の PFが作れない思い描くような理想の PFが作れない採用者の評価ポイントがわからない採用者の評価ポイントがわからない

Slide 6

Slide 6 text

2021/10/01　 |　 Design&Research　 |　 6 僕も2年間で作っては壊して...を5回繰り返してきました

Slide 7

Slide 7 text

2021/10/01　 |　 Design&Research　 |　 7 作品を通して、どうやったら自分を魅力的に伝えられるか「見せ方」って実は難しい

Slide 8

Slide 8 text

今日からでもすぐに実践できる UI/UXデザインポートフォリオで「伝わる」に特化したコツを持ち帰って就活本番に備えよう

Slide 9

Slide 9 text

2021/10/01　 |　 Design&Research　 |　 9 メモ OK! スクショ OK! 投稿はでぜひツイートを！ #cybozuuxcafe

Slide 10

Slide 10 text

2021/10/01　 |　 Design&Research　 |　 10 「伝わる」にこだわり抜いたポートフォリオを理解しよう今日の最終目標

Slide 11

Slide 11 text

2021/10/01　 |　 Design&Research　 |　 11 54 「伝わるポートフォリオ」の定 E4 「伝わるポートフォリオ」の構X B4 「伝わるポートフォリオ」のビジュア8 Q4 さいごに目次

Slide 12

Slide 12 text

2021/10/01　 |　 Design&Research　 |　 12 「伝わるポートフォリオ」ってそもそも何なのか？

Slide 13

Slide 13 text

2021/10/01　 |　 Design&Research　 |　 13 デザイン業界が、ポートフォリオ提出を求める理由デザイン力を見るのに最適なため履歴書より人となりが見えるためプロセスやツールの理解を測れるためデザイン力って何自分を分かってもらうには？書類選考一次面接二次面接最終面接内定

Slide 14

Slide 14 text

2021/10/01　 |　 Design&Research　 |　 14 ポートフォリオを作る意義〇〇を解決するためのアプリですこの制作から〇〇という学びを得ました作品ベース（主語が”This”） Works これまで〇〇してきました今は〇〇をしていますこんな作品を作りました実績ベース（主語が”I”）

Slide 15

Slide 15 text

2021/10/01　 |　 Design&Research　 |　 15 ポートフォリオを作る意義〇〇を解決するためのアプリですこの制作から〇〇という学びを得ました作品ベース（主語が”This”） Works これまで〇〇してきました今は〇〇をしていますこんな作品を作りました実績ベース（主語が”I”）採用担当そっか、努力は見えるけどデザイン力の判断が難しいなぁなるほど、これからの伸び代や魅力が見えてくるなぁ

Slide 16

Slide 16 text

2021/10/01　 |　 Design&Research　 |　 16 採用担当が真に知りたいデザイン力とは「伝わる力」のこと！ V 言語S V ロジカルな思考 V 構造S V ビジュアル表現意味理由スキル瞬間的に見ただけで把握できる次にどんな情報がくるか予想がついているから時間をかけて読み込むことで理解できる前提や背景知識をインストールする必要あり伝える伝わる

Slide 17

Slide 17 text

2021/10/01　 |　 Design&Research　 |　 17 採用担当が真に知りたいデザイン力とは「伝わる力」のこと！ V 言語S V ロジカルな思考意味理由スキル瞬間的に見ただけで把握できる次にどんな情報がくるか予想がついているから時間をかけて読み込むことで理解できる前提や背景知識をインストールする必要あり伝える伝わる V 構造S V ビジュアル表現じゃあどうすれば自分が「伝わる」？

Slide 18

Slide 18 text

2021/10/01　 |　 Design&Research　 |　 18 どうすれば自分が「伝わる」？ズバリ、メタ認知。

Slide 19

Slide 19 text

2021/10/01　 |　 Design&Research　 |　 19 ズバリ「メタ認知」こういう思考ならアウトプットはこうなるねポートフォリオポートフォリオ採用担当者わたし ...なんて考えるだろうなじゃあ直感的にするには図を入れて文章減らそう

Slide 20

Slide 20 text

2021/10/01　 |　 Design&Research　 |　 20 ズバリ「メタ認知」こういう思考ならアウトプットはこうなるねポートフォリオポートフォリオじゃあ直感的にするには図を入れて文章減らそう読み手（その企業の見方）に響いてるかどうかの判断はフィードバックがないと恣意的な憶測になってしまう！フィードバックが大事な理由 ...なんて考えるだろうなわたし採用担当者

Slide 21

Slide 21 text

2021/10/01　 |　 Design&Research　 |　 21 54 「伝わる」ポートフォリオの定義読み手に意図が「伝われば」よいポートフォリオになi 「伝わる」ためにはメタ認知で読み手の心情を予測すi 企業/採用担当で違う採用基準を知るには壁打ちあるのみ結論

Slide 22

Slide 22 text

2021/10/01　 |　 Design&Research　 |　 22 まだポートフォリオを作りきったことがなければ... 「どう作ったらいいかまだわからない...！」という方向けで、作り方のマニュアルとなる note記事をご一読いただけたら嬉しいです。

Slide 23

Slide 23 text

2021/10/01　 |　 Design&Research　 |　 23 GB 「伝わるポートフォリオ」の定) 'B 「伝わるポートフォリオ」のビジュア" 2B さいごに dB 「伝わるポートフォリオ」の構V 目次

Slide 24

Slide 24 text

2021/10/01　 |　 Design&Research　 |　 24 「伝わる」作品にするための構成はどうすればいい？

Slide 25

Slide 25 text

2021/10/01　 |　 Design&Research　 |　 25 表紙自己紹介目次作品さいごにポートフォリオの構成 t 自分の個性をそのまま見せることができる唯一のペーq t 掲載する作品のトンマナに揃えて、1番最後に作成必要な情 t ポートフォリオのタイト t 名前 / 所属

Slide 26

Slide 26 text

2021/10/01　 |　 Design&Research　 |　 26 表紙目次作品さいごに自己紹介ポートフォリオの構成 x 使えるスキルを自己評価で表していいかは意見が割れる　しかし結局作品から習熟度を判断するので載せてもよい必要な情 x 名前 / 所l x 簡単なプロフィールや自己紹m x スキル / 略歴

Slide 27

Slide 27 text

2021/10/01　 |　 Design&Research　 |　 27 表紙自己紹介作品さいごに目次ポートフォリオの構成必要な情E x カテゴリt x 作品名 / 何のためのアプリq x ロゴ / モックアッV x ページ番号（ノンブル） x まず先頭に「行きたい職種・業種の作品」を持ってく x 後半に取り組んだ活動や趣味は積極的に載せる

Slide 28

Slide 28 text

2021/10/01　 |　 Design&Research　 |　 28 表紙自己紹介目次さいごに作品ポートフォリオの構成作品紹介作品内容チーム制作は自分がどこを担当したか明記するのが大b コンセプトは2~3行で、読めば伝わる内容を簡潔に記載必要な情d コンセプw 制作時y 制作に至った理n 使用ツーm 作品のゴール

Slide 29

Slide 29 text

2021/10/01　 |　 Design&Research　 |　 29 表紙自己紹介目次さいごに作品ポートフォリオの構成作品紹介作品内容必要な情S pr 課題抽c ir 解決仮e `r 開発検証作品毎にページ数や熱量に偏りが極力出ないように注作品に合うプロセスのチョイスが大事

Slide 30

Slide 30 text

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デザイン検証・修正 ( *は特に入れておきたいプロセス )

Slide 31

Slide 31 text

2021/10/01　 |　 Design&Research　 |　 31 表紙自己紹介目次作品さいごにポートフォリオの構成必要な情E b メッセーg b 載せきれなかった作品リンQ b SNSリンク b 個人のメッセージや意気込みを伝えられるペーg b ポートフォリオに載せきれず、でも見せたい作品リンク

Slide 32

Slide 32 text

2021/10/01　 |　 Design&Research　 |　 32 2. 「伝わる」ポートフォリオの構成 UI/UXデザインのプロセスを1つ1つ知るところからスターq なぜそのプロセスを採用したかを面接でも説明できるようv 正しいプロセスを踏める＝UI/UXデザイン理解への証明になる結論

Slide 33

Slide 33 text

2021/10/01　 |　 Design&Research　 |　 33 DA 「伝わるポートフォリオ」の定1 )A 「伝わるポートフォリオ」の構8 $A さいごに dA 「伝わるポートフォリオ」のビジュアE 目次

Slide 34

Slide 34 text

2021/10/01　 |　 Design&Research　 |　 34 「伝わる」作品に仕上げるビジュアル表現は？

Slide 35

Slide 35 text

2021/10/01　 |　 Design&Research　 |　 35 トンマナと余白 v 全ページのマージンは統一するとキレf v 作品それぞれに合うカラー2~3色を決2 v 文字の大きさ・太さを決定（6,8の倍数）タイトル：36px・W6 小見出し：18px・W6 端書き　：12px・W3 例

Slide 36

Slide 36 text

2021/10/01　 |　 Design&Research　 |　 36 文字量 2 箇条書きは2~3行、12~14字だと負担I 2 詰まって見えたら、行間と字間を広げ( 2 段組み全体が長方形に収まるとスッキリ長くて読みにくい図 + 短い文章 2021年7月X日、大学構内で8名の回答者からアンケート回答を得た。そのうちの5名は一人暮らしをしていてさらにその中の2名は料理が不得意なので外食（コンビニ）で済ませている日が多いことがわかった。回答者全員が、私の大学が推奨する「3食栄養宣言」の存在は知っていたが、行動に移せていないことも判明した。大学生8名にアンケートを実施そのうち2名は普段自炊をせずコンビニで3食を済ませている例

Slide 37

Slide 37 text

2021/10/01　 |　 Design&Research　 |　 37 視線誘導 s 余白は「視線の通り道」になY s 自分の目がスムーズに動けば「伝わる) s Z/N/F型を意識して文章や図をレイアウト例

Slide 38

Slide 38 text

2021/10/01　 |　 Design&Research　 |　 38 3. 「伝わる」ポートフォリオのビジュアル f 1つの作品/作品全体のトンマナ・フォント・カラーを統y f 「文字文字しい」と自分が感じるなら、読み手も同じ気持I f 図&文章レイアウトの余白で、読み手の視線をコントロール結論

Slide 39

Slide 39 text

2021/10/01　 |　 Design&Research　 |　 39 FC 「伝わるポートフォリオ」の定2 0C 「伝わるポートフォリオ」の構9 &C 「伝わるポートフォリオ」のビジュア! RC さいごに目次

Slide 40

Slide 40 text

2021/10/01　 |　 Design&Research　 |　 40 新卒デザイナーとして伝えたいことまだ「デザイナー」でないあなたも既に立派な「クリエイター」である

Slide 41

Slide 41 text

2021/10/01　 |　 Design&Research　 |　 41 新卒デザイナーとして個人的に伝えたいこと「デザイナーになる」という選択肢でなくてもモノづくりと対峙し続ける限り肩書きに関係なく素敵なクリエイターです

Slide 42

Slide 42 text

2021/10/01　 |　 Design&Research　 |　 42 Thank you!