case 00
このポートフォリオサイト
いま見ていただいているこのサイト自体を、1件目の事例にしました。どうやって作ったかを見せる場所が他に無かったためです。読み手はいま現物を見ているので、いちばん確かめやすい実例になります。
職業訓練中に制作しています。
課題
手持ちの素材が多すぎることが、いちばんの問題でした。公開したWebサイトが51本、バナーが12点、ほかに自分で作った業務アプリがあります。
全部載せると「作れる人」に見えて、「任せられる人」には見えません。私が希望しているのはディレクションの仕事なので、点数を並べるほど目的から遠ざかります。素材を足すことではなく、絞ることと、選んだ理由を書くことが今回の仕事だと考えました。
ターゲット分析
読み手を3者に分けました。知りたいことが違うので、1つの並びで全員を満足させることはできません。優先順位を決める必要がありました。
| 読み手 | 知りたいこと | 優先 |
|---|---|---|
| 作り方を見る読み手 | 工程を順番どおりに進めたか。判断の理由が書いてあるか | 2 |
| 制作会社の採用担当 | 一連の工程を通せるか。人に任せられるか | 1 |
| 将来のクライアント | 自分の困りごとを分かってもらえるか | 3 |
- 同じ読み手に向けた既存のポートフォリオを実測した 1ページ完結の縦スクロール型で、掲載作品は4点だけ。ABOUT → WORKS → CAREER → STRENGTHS → CONTACT の並び。前職の経験を「顧客視点での課題解決」という1本の軸に通していた
- ディレクター職の募集要項に並ぶ言葉を見た 求められているのは制作物の点数ではなく、進行管理・要件の整理・品質の担保
- 自分の手持ちを数えた サイト51本のうち24本は案件応募のために作ったモックで、実案件は多くない
- 決めた
- 点数で競わない。少数を深く見せる。掲載する事例は4件に絞る
- 決めた
- 本編は作品ではなく進め方（工程）にする。作品の一覧は別ページに逃がし、「どの工程ができる人か」が先に伝わる並びにする
- 決めた
- 優先する読み手は制作会社の採用担当。作り方を見る読み手が見る項目（スキル・自己PR・作品）は、その並びの中に収める
- 根拠
- 既存のポートフォリオも募集要項も、評価しているのは点数ではなく1件の進め方だったため
設計
決めたこと
- トップ1ページ（5ブロック）＋制作実績1ページ＋作品詳細2ページ＋工程6ページ＋事例4ページ
- 工程6本を同じ型で書く（意識していること／できること／AIとの分担／作ったもの／前職での経験）
- 事例4件を同じ型（6ブロック）で書く
見送ったこと
- 作品ギャラリーの作り込み（点数の証明は数字と一覧にとどめる）
- このサイトのための新しい制作物。これまで作ったものを組み直す
- 本文に足す装飾写真。情報を運ぶ図（線画アイコン）と現物のスクリーンショットだけを使う
進め方を本編にすると決めたので、前職の経験も工程ごとに分けて、各工程ページの中に置きました。ディレクションの募集でいちばん見られる部分であり、前職のプロジェクトリーダー10年が直接あたるところだからです。ただし前職の案件は守秘に関わるため、社名・案件名・規模・体制の人数は書いていません。
進め方
順番を先に決めて進めました。世界観 → 構成 → レイアウト → デザイン → 実装です。
| 作った資料 | 役割 |
|---|---|
| 方針資料 8月20日 | 何のために作るのか、何が伝わればいいのかを先に決めた。「作れます」ではなく「任せられます」と伝える、という一行がここで決まった |
| 構成案 8月25日 | 方針から「並びと作る順」だけを抜き出した作業用の1枚。この資料に沿って実装している |
着手前に方針を固めた記録が、そのまま残っています。手戻りを防ぐために、絵を描く前に文章で決め切るのが自分のやり方です。
いちばん時間がかかったのは「制作の進め方」の見せ方です。作っては見て、直しての繰り返しでした。
| 気づいたこと | やったこと |
|---|---|
| 工程の説明が読まれていない 1回目 | 頭で「多い」と決めず、まず文字数を実測した。工程の節だけで1,336字あった |
| 削り方が1つに決まらない 2回目 | 絞り方の方向を変えて3案作った（1行に削る321字／現物を並べる417字／開いて読む273字）。並べて比べられる形にしてから選んだ |
| 3案とも決め手に欠ける 3回目 | 「横一列に並べる・線画アイコンで視覚的に・view more で実物へ・文言は端的に」と条件を出し直し、D案を作った。画面に出る文字は238字（元の18%） |
| サムネを外すと現物が見えなくなる D案の副作用 | 飛び先として工程ページ6本を新設した。カードを軽くしたぶん、現物は工程ページで大きく見せている |
| 工程名が自社用語だった 4回目 | 制作会社3社と求人媒体3つの言葉を突き合わせ、業界で通じる6つの工程名に揃えた（ヒアリング・要件定義／設計／デザイン／コーディング／テスト／公開・納品） |
| 構成そのものが固まらない 通して | 構成モックをv1からv6まで作り直し、そのつど実際の画面で見て決めた。文章で議論せず、見て決められる形にしてから判断している |
AIとの分担
この事例は、AIとの回し方がいちばん素直に当てはまります。5つを1周として、何周も回しました。
| 順 | 担当 | やること |
|---|---|---|
| 1 | 私 | プロセスの指示。何を、どういう順で作るかを決めて渡す |
| 2 | AI | 分析。実測・比較・案出し |
| 3 | 私 | 確認・承認。この方向で進めてよいかを決める |
| 4 | AI | 作成。HTML / CSS と文章のたたき台 |
| 5 | 私 | フィードバック。直す・採らないを決めて戻す |
上の「直した経過」の6行は、すべてこのループの5番目から出たものです。品質を決めているのは3番と5番で、そこは人が持つと決めています。
- 出てきた案
- トップページに「AI活用」という独立したセクションを置き、使っている仕組みをまとめて見せる構成
- 直した後
- セクションごと廃止し、各工程ページと各事例の中に下ろした。トップに残したのは2行の脚注だけ
- 直した理由
- 「AIも使えます」という宣言では、自分の考えを持って使っているかは伝わらない。工程ごとに「何を渡して、何を自分で決めたか」を並べたほうが早いと判断した
結果
いま見ていただいているこのサイトそのものが結果です。公開前に通した検査の結果を載せます。
図は線画のSVGでその場で描いているため、画像の読み込みは発生しません。表示速度の実測値は、公開後に計測して追記します。