Save 37% off PRO during our Black Friday Sale! »

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

Bcbe06266087609b9bcc73163d96fe08?s=47 Kazuhiro Tobita
October 01, 2021

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

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

Bcbe06266087609b9bcc73163d96fe08?s=128

Kazuhiro Tobita

October 01, 2021
Tweet

Transcript

  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!