モーションエレメンツさん主催のウェビナー。
「Figmaで差をつける！印象に残るポートフォリオテクニック」
に参加しました。
ポートフォリオはforiioさんで作成しているのですが、
Figmaでも作成してみたいので参考にさせていただきました。
しかし、アーカイブ動画は月2150円払わないと見れない鬼畜ぶり。
講師は株式会社カケハシのキャシさんでした。
・世界のUIデザイン市場規模：
15億9600万ドル（2021年）→63億8300万ドル（2031年）
・デザイナーとして差別化するための強力なポートフォリオは必須
・ポートフォリオは、デザイナーのスキルだけでなく、その人の考え方やアプローチを伝える手段となる
・採用担当者は量より質を重視
１．ポートフォリオの目的
ポートフォリオの目的１
希望の仕事への扉を開く
ポートフォリオの目的２
自分の価値を納得させる
問題解決能力のアピール
２．採用担当者が求めるもの
・関連した経験・専門知識
・課題や問題をどう解決したか
・直面した困難にどう対処したか
・チームプレイヤーとしての働き方
※７秒
採用担当者がポートフォリオを読み進めるか離脱するか決める時間
採用担当者が求めるものを提供する
採用担当者のペインポイントを解決できる
書類通過率約90％のAbove the fold
(キャシさんのポートフォリオ)
A DESIGNER WITH A TWIST AND CURIOSITIES.
BORN IN JAPAN,RAISED GLOBALLY.
・ポートフォリオの構成要素 ランディングページ
直観的動線
ユーザー（採用担当者）が迷わず必要な情報や作品にアクセスできるように設計する。
最高のお仕事
最も代表的な仕事や成功したプロジェクトを全面に押し出し、採用担当者の注意を引き付ける
明白なCTA
「もっと見る」や「コンタクトする」など、次のステップへの導線を明確に示すことで採用担当者がアクションを起こしやすくなる
ランディングページ：掲載するお仕事
・掲載するプロジェクト数は3-5個が適切
・専門知識とキャリア目標、ビジョンを反映しているもの
・過去・現在・将来の３つの点を繋げる
・将来のキャリア方向性を示すもの
・初心者が直面する問題
ポートフォリオに載せるお仕事がない…
お仕事するにはポートフォリオが必要というジレンマ
解決方法は「情熱プロジェクト」
純粋な興味を起点に取り組むプロジェクトで、
自分のスキルを効果的にアピール可能
参考までに私は実際に存在するコーヒーチェーン店の架空Nativeモバイルアプリを作成（一番最初に作った）
情熱プロジェクトサンプル
ポートフォリオ構成要素:残りの項目
・About
・Contact
SNSリンク。海外だとリンクトイン
キャシさんのポートフォリオは過去の仕事を見る訪問者が圧倒的に多い
ポートフォリオの構成要素：離脱を加速するNG集
・ツール習熟度を表示するグラフ
・一方的にデザインへの想い
・熱量のない架空プロジェクト
架空プロジェクトに取り組むことが問題ではなく熱さがない
・最終デザインのオンパレード
戦略的な構築方法・見せ方
優れたケーススタディを書く
1.概要・プロジェクト期間
2.課題・プロセス・解決方法・結果の詳細
3.チームについてと自分の担当領域を明白にする
4.ビジュアルを多用し、デザインプロセスを視覚的に示す
スケッチ、ワイヤーフレーム、
ケーススタディサンプル
情熱プロジェクトであることを明記
HEROイメージは最終成果物のモック
・訪問者に先を読んでもらうにはここのタイトルがとても大事
・担当領域
・実施期間
・プロジェクトを通して達成したこと
・使用ツール（ペン、紙から書く）
・概要とゴール
・取ったアプローチ
・ケーススタディのサブセクションはこの図のデザインプロセスの各ステップに対応している構成
・コラム幅は548pxにしている。（一行80文字程度が読みやすい）
・Outcomeを数値化して重要なポイントを一目で把握可能にしておく
・ちょっと面白いネタ的なものを混ぜておくと面接時のウォークスルー時のアイスブレイクになる。
・ユーザー定義
・ジャーニーマッピング
ユーザージャーニーマップ設計では作成者の情報設計スキルが如実に現れる部分なので、ベストを尽くしたOutcomeを載せよう
・初期のスケッチ、グレースケールワイヤーフレームの移り変わりを掲載しておくと採用担当者はみんな喜ぶ
・最後に完成形のワイヤーフレーム
・完成形のプロトタイプ
・本物のポートフォリオではInVisionのプロトタイプを実際に触ってもらえるようにしている。
・情熱プロジェクトで学んだこと
・他のプロジェクトが見たい人はフッターから移動できるようになっている
戦略的な構築方法・見せ方
公開方法を考える
Webサイトがベスト
デジタル領域がデザイナーポートフォリオの場合はWebサイトがベスト。
Figmaのプロトタイプ、Notion、ノーコードプラットフォームなど複数の選択肢あり
PDFは大丈夫？
PDFしかないのはNGだが、例えばWebサイト版で簡易的な内容のみ載せている場合など補足資料として詳細なケーススタディをPDFで作っておいて、必要な状況で共有するのはとても有効
戦略的な構築方法・見せ方
個人的にやってみたいことは…
・Figmaでテンプレート作成
Figmaのオートレイアウトやコンポーネント機能を上手く組み合わせて、テンプレートを作る。
・プラグインを使ってみる
例えばFigma to StudioやFigma To Webflowのようなプラグインで簡単に公開できるようになっているので試してみたい
・更新が肝心
ポートフォリオは定期的に更新し、新しいスキルやプロジェクトを追加する。デザイントレンドの進化に合わせてデザインや
レイアウトを見直す
自分だけの道に忠実であれ。
デザイナーの道のりは人それぞれ。
あなた自身を受けれて、
それをポートフォリオで輝かせよう
Thank You!
Katherine Tachibana
@UIAlchemist
■Q&A
Ｑ．受託制作会社からプロダクト制作の企業様への転職を目指す場合、どのような目線で作品を選択すると良いかお伺いしたいです。
A.受託からインハウスのデザイナーになりたいってことですかね、
デザイン会社がどういう領域のプロダクトをやっているか、わかっているならすべてカバーする。
Q．未経験でポートフォリオを制作する際は情熱プロジェクトを含むワークスを先頭にその次にスキル紹介や自分についてのアバウトページを設けたほうがいいということであってますか？
A．仕事のページをトップページに。アバウトページを見ている人はあんまりいない。
Q．ネーミングやライティングのセンスはどのように磨かれたのですか？
A．自分がユーザーの気持ちになると全部読まないですよね。その視点で常に考えている。自分はセンスないです。
ポートフォリオの作り方ですごく良いエネルギーをもらいました。
キャシさん、本当にありがとうございました。
コメント