Progate スライド画像の進化過程

Progateのレッスン制作チームがコンテンツについて語る連載企画。
今回は、現在作成中のNode.jsのレッスンを題材にして、スライド画像が作られていく様子を紹介していきます。

株式会社Progateの佐藤（@310ma3）です。教材制作チームで画像制作のリードをしています。

Progateレッスンの楽しさや分かりやすさを支えているスライド画像...一見、何の変哲もないコードやイラスト達なのですが1枚1枚相当な変遷を辿って作られています！

はじめに ~全体の工程~

画像を作り始めるには「何をどの順番で教えるか」というスライド全体の構成が大まかに決まっている必要があります。構成を作る作業は企画者が行い、画像制作者はその構成をもとに作業を始めます。

画像制作には大きく3つの工程があります。各工程は後ほど詳しく紹介していきます。
1. 要件を固める
2. レイアウトを考える
3. 要素を考える

今回は各工程に担当を振ってチームで作業を進めていきます。

3つの工程の後はレビューと修正を繰り返しながら質を高めていきます。全ての画像はこの工程を踏みながらバージョンを重ねて洗練されていきます。今回紹介するスライドはまだ制作途中のものですが、既にバージョン11まで練られています...（あと3バージョンぐらいで終わらせたいな...）

使用ツールは基本的にFigmaです。スライドの一番最初に表示されるシェア画像のみIllustratorを使っています。

1. 要件を固める

要件とは「何を伝えたいのか」を文書化したものです。これを決めておかないと、あとで方向性を見失って泥沼にはまってしまうことも。
要件を固める作業は以下のように進みます。

1.伝えたいことを理解する
・スライドを良く読んで分からない「技術」と「企画者の意図」を洗い出す
・それを調べたり、質問したりして潰す
2.伝えたいことを整理する
・伝えたいことを箇条書きにして優先度順に並び替える
・スライド全体の構成を作った人と認識を合わせる

今回の要件をまとめた状態がこちらです。

・redirect
・指定したURLに遷移する
・遷移先の処理も実行される←注釈で書く。
・画面が遷移する挙動が伝わるように
・express要るかどうかは流れが正しく見えるか次第

この要件からブレないように最後まで作業を進めていきます！

2. レイアウトを考える

ここから図解していくのですが、まずは手書きや仮画像の組み合わせといったラフな画像でレイアウトを検討していきます。案に対して、改善できそうな所を見つけて修正していきます。

・コードを分割せずに表現してみる
・文言を「リダイレクト」に変える

・位置関係がねじれてても見やすい工夫を試す
・もう一周回る感を出すか検討する

「もう一周回る感を出す」というような要件が現れることもあるので、「1. 要件を固める」工程と行ったり来たりします。

さらに、レイアウトがスカスカになる時は他の画像やスライドとくっつけたり、逆に詰め込みすぎなものは分割したりと、構成にまで影響が及ぶこともあります。

3. 要素を考える

ある程度レイアウトが見えてきたら各要素を丁寧に描いていきます。ここでは要件の優先度順にパッと情報が理解できるかという観点で形や色などを詰めていきます。

・位置関係のねじれのレイアウトは一旦諦める
・色数を減らす
・コードのindex同士の結びつきを目立たせる

・左右の図の結びつきを検討する図の結びつきを検討する
・リダイレクトが一番目立つようにする

今回は「図の関係性」や「要素の繋がり」といったレイアウトから大きく見直すべき問題が出てきたので、「2. レイアウトを考える」工程に戻って検討し直しました。

（再び）2. レイアウトを考える

再びレイアウトを検討して出来たのがこちら。

各要素の繋がりが認識できるように矢印で繋ぎつつ、全体の要素を減らしてスッキリさせることができました。これでチーム全員が納得するレイアウトになりました。

（再び）3. 要素を考える

先程の画像の要素を1つずつ検討すると以下のような改善点が挙がりました。

・タイトルを消す
・黄色は変える
・リダイレクトをより目立たせる

これを修正すると...

こうなりました！ここで最初に挙げた要件がちゃんと満たされているか確認してみましょう。

※（）内は注記です
・redirect（一番目立っていてOK）
・指定したURLに遷移する（OK）
・遷移先の処理も実行される←注釈で書く。（コードを載せたのでOK）
・画面が遷移する挙動が伝わるように（OK）
・express（Node.jsに変更）要るかどうかは流れが正しく見えるか次第（サーバーの画像が無くても伝わったので不要とした）

要件もしっかり満たせていますね。
この画像はまだ作成段階で、これからさらに多くの視点でレビューを進めていきます。どう進化していくのかはお楽しみに！

最後に

今回紹介した制作方法はチームでスクラムを組みながら進めています。その様子はまた別の記事で近い内に紹介します。

教材作り全体の話は同じチームの前嶋が以下記事にまとめてくれていますので興味が湧いた方は是非読んでみてください！

前の記事はこちら

次の記事はこちら

コンテンツチームに興味を持ってくれた方はwantedlyから気軽に連絡をいただければと思います！

最後まで読んでいただきありがとうございました！