viewsProgateのレッスン制作チームがコンテンツについて語る連載企画。今回は、現在作成中のNode.jsのレッスンを題材にして、スライド画像が作られていく様子を紹介していきます。株式会社Progateの佐藤です。教材制作チームで画像制作のリードをしています。~全体の工程~画像を作り始めるには「何をどの順番で教えるか」というスライド全体の構成が大まかに決まっている必要があります。構成を作る作業は企画者が行い、画像制作者はその構成をもとに作業を始めます。画像制作には大きく3つの工程があります。各工程は後ほど詳しく紹介していきます。要素を考える今回は各工程に担当を振ってチームで作業を進めていきます。3つの工程の後はレビューと修正を繰り返しながら質を高めていきます。全ての画像はこの工程を踏みながらバージョンを重ねて洗練されていきます。今回紹介するスライドはまだ制作途中のものですが、既にバージョン11まで練られています...(あと3バージョンぐらいで終わらせたいな...)使用ツールは基本的にFigmaです。スライドの一番最初に表示されるシェア画像のみIllustratorを使っています。要件を固める要件とは「何を伝えたいのか」を文書化したものです。これを決めておかないと、あとで方向性を見失って泥沼にはまってしまうことも。要件を固める作業は以下のように進みます。1.伝えたいことを理解する・スライドを良く読んで分からない「技術」と「企画者の意図」を洗い出す・それを調べたり、質問したりして潰す2.伝えたいことを整理する・伝えたいことを箇条書きにして優先度順に並び替える・スライド全体の構成を作った人と認識を合わせる今回の要件をまとめた状態がこちらです。・redirect・指定したURLに遷移する・遷移先の処理も実行される←注釈で書く。レイアウトを考えるここから図解していくのですが、まずは手書きや仮画像の組み合わせといったラフな画像でレイアウトを検討していきます。案に対して、改善できそうな所を見つけて修正していきます。要件を固める」工程と行ったり来たりします。レイアウトがスカスカになる時は他の画像やスライドとくっつけたり、逆に詰め込みすぎなものは分割したりと、構成にまで影響が及ぶこともあります。要素を考えるある程度レイアウトが見えてきたら各要素を丁寧に描いていきます。ここでは要件の優先度順にパッと情報が理解できるかという観点で形や色などを詰めていきます。レイアウトを考える」工程に戻って検討し直しました。レイアウトを考える再びレイアウトを検討して出来たのがこちら。各要素の繋がりが認識できるように矢印で繋ぎつつ、全体の要素を減らしてスッキリさせることができました。これでチーム全員が納得するレイアウトになりました。要素を考える先程の画像の要素を1つずつ検討すると以下のような改善点が挙がりました。・タイトルを消す・黄色は変える・リダイレクトをより目立たせるこれを修正すると...こうなりました!ここで最初に挙げた要件がちゃんと満たされているか確認してみましょう。※()内は注記です・redirect(一番目立っていてOK)・指定したURLに遷移する(OK)・遷移先の処理も実行される←注釈で書く。(コードを載せたのでOK)・画面が遷移する挙動が伝わるように(OK)・express(Node.jsに変更)要るかどうかは流れが正しく見えるか次第(サーバーの画像が無くても伝わったので不要とした)要件もしっかり満たせていますね。この画像はまだ作成段階で、これからさらに多くの視点でレビューを進めていきます。進化していくのかはお楽しみに!最後に今回紹介した制作方法はチームでスクラムを組みながら進めています。森塾運営のスプリックス(http://sprix.jp/)に新卒入社。教材開発1989年兵庫生まれ。岡山県立大学で情報デザインを専攻。デザインしたものを動かしたいという思いからプログラミングを独学。BlogProgateの教材制作を行っているチームのブログです。