— CASE / EXPERIENCE DESIGN PROCESS

会員制ナレッジサイトの中に、
事例の特設ページをつくる。

大手企業の、業務改善を担う事業部の仕事です。事業部が名前を付けた「仕事の進め方の方法論」の事例を、既存の会員制ナレッジサイトの中に載せる。デザイン担当として入り、途中から進行(PM)も持ちました。ここでは画面ではなく、どこで何を判断したかを順に書きます。

ROLE
体験設計・デザイン → PM
PERIOD
9月〜11月
SCOPE
特設ページ・事例一覧・記事の型・事例画像の仕組み
既存サイトの中に、1ページを足す

— GOAL / ゴールを1文に

自分に近い事例を1本見つけ、社内で話せる材料を持ち帰る。
00
気づく自分の課題を、ここが扱っていると分かる
01
見つかる事例のカードを1枚開いた
02
伝わる課題から結果までを読み終えた
03
次に進める資料を1点ダウンロードした

どこか1つでも欠けると、その訪問はそこで終わる。だから「達成」は気持ちではなく、画面の上の行動で決めました。

PHASE 1

設計する — 誰に・どこまで・どの画面で

00前提

前提が変わった

新しいサイトを1つ立てる計画が、既存サイトの中の1ページに変わった。

前の計画で決めたことを捨てず、「そのまま使えるもの」と「前提が変わるもの」の表に分けた。既存サイトを知っている人が混ざる、検索で来る人の受け皿が要る、の2つが変わる点。

01相手

誰に、どこまで

チームの資料の中で、表と本文とでメインの相手が食い違っていた。揃わないと、ページの順番と分量が決まらない。

来た経路ではなく「何を知って来たか」で読み直した。既存サイトから来る人は方法論を知らず、検索で来る人は既存サイトを知らない。ゴールを1文にし、「また来たくなる」「ファンになる」は1ページでは作れないので捨てた。

02段階

体験の段階を、画面に割り当てる

相談の窓口は来年度に回り、実際のゴールは「会員登録してダウンロード」になる。営業から URL を渡された人には、登録が壁になる。

段階ごとに担う画面と「達成した状態」を決め、壁になりうる所を作る前に論点として出した。

03入口

課題の言葉で始める

方法論の名前は、来た人にはまだ通じない。

最初の画面を3案並べ、読む人の課題の言葉から始める案を推した。「気づく」とは方法論に気づくことではなく、自分の課題をここが扱っていると分かること。

04色

色に、説明できる理由を持たせる

型を借りた参考サイトの色の場所に、方法論の色をそのまま当てていた。意味と関係ない場所まで同じ色になっていた。

方法論の3つの考え(思想・仕組み・成果)に色を1つずつ当て、4色目は作らない。ページの流れも3つに重ね、キーカラーはこのページの立ち位置の色にした。意味と関係ない場所に出ている色を数えて 0 件にした。

05絵

世界観を先に固めない

ロゴが決まる前にメインの絵を作り込むと、世界観が先に決まってしまう。

作り込む案から作らない案まで5つ並べ、主役の形だけ後で差し替えられる案を推した。象徴になる形は、背景の素材にとどめた。

PHASE 2

作る仕組みまで — 削る・型に合わせる・回す

06削る

足すより削る

説明、まとめてダウンロードする箱、問い合わせの導線が盛られていた。

まとめてダウンロードを外した。まとめて落とされると、どの事例に興味を持ったのかが分からなくなるから。問い合わせは、既存の相談窓口と混ぜなかった。

07スマホ

スマホは既存の型で

スマホを新しく考えると、時間が足りない。

本番のスマホ画面を実測して部品を借り、一覧を組み替えた。浮いた時間を、記事と画像の仕組みに回した。

08記事

記事の型を、体験につなぐ

記事の書き手は、体験の段階を知らない。

記事の仕事を3つにした。自分に近い事例だ/うちでもできそうだ/上司に話してみよう。体験の段階と同じ並び。結果は「前 → 後」と期間で書く手引きにした。

09画像

事例の画像を、仕組みで作る

生成 AI の画像が似てくる。指示の8割が、毎回同じ文だった。

記事から拾う所(場面・場所・モノ)を厚くし、構図と光を重ねない。拾ったものを人が確かめる列を足し、1枚の絵から一覧用と詳細用の2サイズを切り出す。

10進行

回し方も設計する

議事が長くなり、決まったことが埋もれる。

会議は増やさない。議事の代わりに表を3つ(今週の線表/決めること/宿題)置いて毎週上書きする。最後の30秒で、決まったことを読み上げる。

— WHAT CARRIES OVER / ほかの仕事にも持っていけること

この仕事から言える、5つの型

1
作る前に、前提の食い違いを見つける

ターゲットの表と本文。前の計画と今の計画。

2
体験の「達成」を、画面の上の行動で決める

カードを1枚開いた。資料を1点落とした。

3
足すより削る。理由は「何が分からなくなるか」

まとめてダウンロードを外した理由。

4
色や絵に、説明できる理由を持たせる

意味との対応、測った数字、ページの立ち位置。

5
見た目の先の「作る仕組み」まで設計する

記事の手引き、画像の仕組み、会議の回し方。

守秘のため、会社名・サービス名・画面は載せていません。結果の数字はリリース後に追記します。

体験翻訳の実績をすべて見るCASES → 体験翻訳家として、頼めることREAD →