NPO法人 不登校・発達支援ネットワークSeedsAPP様「新感覚教材memo:Re」ウェブサイトデザイン、イラストカット、ディレクションを担当いたしました

横浜市にある、NPO法人 不登校・発達支援ネットワークSeedsAPP様が運営する、漢字学習に困難のある子どもたち(ディスレクシア(読み書き障害))に向けた、漢字を楽しく覚えることができるオンライン教材「新感覚教材memo:Re(メモリ)」のサイトを制作いたしました。
本案件は所属していた株式会社ルールにて担当したものです(実績公開許可はいただいております)
「新感覚教材memo:Re」公式サイト
※私が関わった当時よりデザインが追加・変更されている部分がありますのでご了承ください。全体のトンマナはそのままです。
本サイトはmemo:reの取り組みや開発の背景を紹介している「本体サイト」と、
オンラインで漢字を学べる「教材サイト(視聴覚編、象形文字編)」に分かれています。
両方をひとつのWordPressで制作しており、オンライン教材という独自のシステムが必要なため、オリジナルテーマで対応いたしました。
本体サイトの制作について

本体サイトで担当した作業範囲
・制作ディレクション(コーダーへの指示出し、クライアントとのやりとり、クオリティチェック)
・ワイヤーフレーム
・サイトデザイン
・イラストカット
本体サイトは、全く新しい教材である「memo:re」とは何かを紹介するサイトです。また、漢字学習に困難のある特性(「ディスレクシア」と「ディスグラフィア」)についても紹介しています。
基本的には教育者、保護者等が見ることを前提としています。
クライアント様から、楽しい雰囲気のデザインにしてほしいという要望があり、かわいらしく楽しげな色合いで、「楽しく覚えて忘れない」という教材のキャッチフレーズに合うように、わくわくするデザインになりました。
本体サイトにおいては、ワイヤーフレームとデザインを行い、コーディングは社内のコーダーにバトンタッチして任せました。
打ち合わせへの同席、クライアントとのやりとり、コーダーへの指示など、ディレクションの役割も担当しています。
教材サイトの制作について
教材サイトで担当した作業範囲
・制作ディレクション(プログラマとのやりとり、クライアントとのやりとり、クオリティチェック)
・ワイヤーフレーム(教材プロトタイピング)
・サイトデザイン
・プログラマとの仕様相談
・WordPressカスタム投稿作成/テーマテンプレートコーディング(HTML,CSS,PHP)
・イラストカット
・教材用イラストレーターとのやりとり
教材サイトは「視聴覚編」「象形文字編」に分かれており、それぞれが異なるアプローチで漢字を学べます。
こちらはもちろん、子どもたちが学習することが前提のため、スマートフォンまたはタブレットで閲覧・操作することがメインになると想定してデザインしています。
WordPressのカスタム投稿タイプをそれぞれ作成し、今後も漢字問題を簡単に追加できるようにしています。
視聴覚編、象形文字編ともに、どのように学習し問題を解くか、の体験設計のイメージは、クライアント様の中に具体的にあったので、それをどのようにWordPressで組んで実現するか…の実装面の設計をしました。
プログラミングは私の不得手な領域のため、JavaScriptのプログラミングが得意なクリエイター仲間を紹介してアサインし、相談を重ねて教材の仕様およびカスタムフィールド設計を固めました。
社内でWordPressのカスタム投稿・カスタムフィールドとJavaScriptのプログラムの橋渡しの知識・想像力を持つ人員が私だけだったので、教材サイトにおいては、カスタム投稿・カスタムフィールドの作成とテーマのテンプレートPHPの出力コーディングは私が担当し、プログラマがJSを組むのと同時並行して、CSSのスタイリングを行うという形で完成させました。
また、プログラムの仕様に合わせてイラストのデータも調整が必要になったため、担当イラストレーターとも直接やりとりしました。
制作したイラスト



本体サイト内のイラストカット2点と、教材サイト内のイラストカット2点を制作しました。
男の子と女の子は、当初ミニキャラの等身でラフを提案しましたが、対象の年齢が小学校高学年〜なので、幼すぎて見えるとのフィードバックを受け、高学年に見えるように等身を上げました。
※イメージキャラクターの「シーズくん」は既存のマスコットですが、教材サイト内で既存ポーズでは足りない上記の2点のみ、クライアント様の許可のもと、私の方で追加制作しています。
※教材サイトの教材内イラストは、クライアント様があらかじめアサインしていた別のイラストレーターさんが担当しています。
この案件での動きについて
本案件時に所属していた会社では、少人数体制のため1人がカバーする範囲がとても広いことが多かったのですが、本案件では特に多岐にわたるポジションを対応いたしました。ページ設計、デザイン、イラスト、コーディング、多方面の人々とのやりとり等々…
特に、自分以外のイラストレーターに対しディレクションとしてやりとりをしたり、外部プログラマと協力した制作は初めての経験となりました。
自分自身が思っているよりも、広範囲の知識とスキルを持っていると自覚することができた機会でした。
NPO法人 不登校・発達支援ネットワークSeedsAPP様について
横浜市にある、不登校児、発達特性児の支援をされているNPO法人です。
「子どもは未来の社会そのものである」という認識のもと、多様な子どもたちの社会自立を見据えた育みを実現すべく、学校と学校外の有機的な連携を可能とするスキーム作りを基盤に、教育相談、人財育成、学習等支援、教材研究及び開発・普及に取り組んでおります(公式サイトより引用)