教育現場でのAffinity Designer活用。生田東高校の場合。

5.0
生田東高校 Affinity

前回、大嶺さんの大型商業案件における制作現場でのAffinity Designer / Photoの活用をレポートさせていただいたところ、当ブログ的にとても大きな反響がありました(→ 記事はこちら)。
他にも現場での活用報告が聞きたいなぁ……と思っていたところ、神奈川県立生田東高等学校の授業でAffinity Designerが活用されていることを耳にしましたので、早速担当教諭の大石智広先生にお願いして、教育現場での活用について教えていただきました。

生田東高校

生田東高校は、川崎市にある普通科の県立高校です。
ここでは「情報デザイン」という授業の中でAffinity Designerを使用し、生徒さんたち自身でロゴデザインやピクトグラムの制作などを行なっているそうです。

神奈川県警などが主催した万引き防止ピクトグラムコンテストでも、県内の大学生らに混ざって2名の生徒さんが最優秀賞と優秀賞に輝いたそうで、取り組みとしてもしっかり根付いている印象です。

僕ら40歳代にとってコンピュータ学習の授業は、ごくごく僅かなコマ数があっただけでした。
PC-8800シリーズで、5インチフロッピーディスクの一太郎を使った記憶くらいしか僕はありません。
でも最近の高校では、普通科の科目として「情報デザイン」というものがあり、グラフィックソフトや動画編集ソフトなどを活用し、ロゴ制作やピクトグラム制作などを実際にやっていくのだそうです。羨ましいですね。
「情報デザイン」という科目は文科省によって定められていますが、現状では、各高校の判断で実施するかどうか決めているそうです。
2022年度から高校生全員が必修で学ぶ科目「情報I」において、情報デザインがプログラミングと並んで重視されているとのことです。

教育現場でのAffinity Designer活用。生田東高校の場合。

学校でAffinity Designerを選択した背景

Affinity Designer

大石先生

Affinity Designerが、買い切りかつ低価格で利用できるベクター系のアプリだからです。

基本的には、教育委員会が選定したアプリケーションが一括で導入されますが、ベクター系のアプリケーションは導入されなかったので、学校でAffinity Designerは購入しました。
40ライセンスほどを一括購入するので、やはり予算感は無視できませんでした。

Affinityシリーズの大きな魅力は、やはりなんと言っても価格です。
6,000円前半で購入できるのは非常に魅力的だと思います。

一般論として、PC用アプリは価格に比例して性能・機能は本格化する傾向にあります。
そういう意味では、Affinityシリーズのような6,000円クラスの場合、入門用グラフィックアプリケーションとして有名なPhotoshop Elementsあたりと同格、またはそれより下というイメージがあると思うのですが、実際の機能としては上位版のPhotoshopやIllustratorなどに迫るレベルのアプリだという点を考えても、コストパフォーマンスが極めて高いことが理解できると思います。

情報デザインの授業で使われているAffinity以外のアプリケーション

Photoshop

大石先生

Affinity Designer以外では、PhotoshopとVideo Studio 2020を使っています。
これらは先ほど説明したように、教育委員会で選定されたものです。

画像加工、描画、動画編集を各学期単位で教えているので、3種類のアプリすべてを均等に時間を割いて教えています。

いわゆるグラフィック系のツールを一通り、通年で学ぶというイメージのようですね。
まだ業界標準とまでは言えないAffinity Designerですが、若い世代の生徒さんたちに使ってもらい、慣れ親しんでもらう……しかも1学期分を割いて使ってもらえるというのは、非常に大きな意義を感じます。
しかも冒頭のニュース記事のように、生田東高校さんではAffinity Designerを活用して既に実績を上げておられます。
将来、生田東高校のようなところから、Affinity Designerを活用して何事かをなし得る人材が生まれてきたとしたら、Affinityファンとしても嬉しいですよね。
期待せずにはいられません。

Affinity Designerを授業の中で、実際どのように教えたのか

大石先生

授業の組み立てですが、まずはベクター系の画像の処理の仕方と、操作の方法(特に「追加」「除外」「分割」などの操作)に慣れるため、トランプのマークなどを作成する練習を行います。

その上で、オリジナル国旗や自分のロゴなどのオリジナリティが必要な課題に取り組んでもらいます。

ピクトグラムについては、最初にピクトグラムの説明、ピクトグラムクイズ(ピクトグラムを示して、何を意味しているかあてさせる)を通してデザイン次第で伝わりやすくも伝わりにくくもなることを意識させます。
その上で、オリジナルのピクトグラムの作成に取り組んでもらいます。普段は、恋愛の状態(恋愛中とか、失恋中とか、片想い中とか、遠距離恋愛中とか)を表すピクトグラムをデザインしてもらっています。

この時は、他の生徒の見本を見せるくらいで、どう作るという操作については教えていません。
もうそれまでの課題で概ね理解していますね。
冒頭でご紹介した万引き防止ピクトグラムコンテストに応募したのは、恋愛のピクトグラムの後に授業時間が残っていたので、取り組ませました。

生田東高校 情報デザイン
実際に生徒さんが授業中にAffinity Designerで制作した作品。

ここは皆さんも非常に興味があるんじゃないかと思います。
実際にAffinity Designerを生徒さんに使ってもらう時、イントロダクションを経て、生徒さんたちにとって興味のある課題を提示して取り組ませ、その取り組みに対してどのようなフォローをしていくのか……1学期分を授業に使えるので思ったより駆け足感がなく、ちゃんと段階を踏みながら教えているなぁという印象を持ちました。

僕らの世代では、こういう授業は、商業高校の情報処理科でもなければあり得ない内容なので、普通科高校でこういう授業があることが正直驚きでした。
しかし実際のところ、生徒さんたちがAffinity Designerを受け入れ、本当に問題なく使えているのでしょうか?

プロのデザイナーさんは仕事で使っている以上パソコンやデザインツールに一定以上は習熟しているのが当たり前で、たとえ10年以上Illustratorを使っていたのをAffinity Designerに乗り換えたとしても、経験や知識、スキルで乗りこなすことができるというのは、まあ、なんとなく理解できます。

でも、今度の相手は一般の高校生です。
今どきの中高生はスマホが基準になっているため、パソコンはあまり使わない家庭も多いようです。中にはパソコンの利用自体に習熟していない生徒さんもいるわけで、そのような生徒さんにもAfinity Designerを使った授業は受け入れられたのか、少しドキドキしながら聞いてみました。

Affinity Designerは生徒たちに受け入れられたか

Affinity Designerは生徒に受け入れられたか

大石先生

Affinity Designerを使っている時の生徒の印象として、特に苦しんでいる様子はありません。
追加や、分割などのどれを使ったら望んだデザインになるか、などは悩んだりしますが、操作自体に苦しむということはあまり見られなかったと思います。
ほぼ、Affinity Designerがここを押したらこうなる、というように、直感的に操作できるからだと思います。

Photoshopを1学期で利用しているので、そこで慣れているというのもあると思います。Adobe製品とAffinityシリーズは、操作感もよく似ていますので。。

僕の心配は杞憂だったようです。
PhotoshopやIllustratorをはじめとするグラフィックツールは、とにかくボタンが多く、特殊な用語、操作手順も覚えることが多いので、チャレンジしても挫折する人が多い分野だと思いますが、通年でじっくりと取り組むという姿勢に加え、Affinity Designerの直感的な操作感もあって、特に大きな問題も起きずに受け入れてもらえているようです。

確かに僕も、初めてAffinity Designerを触った時にそれほどの違和感を感じずに慣れていったような気がします。
それまでずっと何年もPhotoshopやIllustratorを使ってきたのに、数日使っているうちにAdobeの感覚が残って困るなぁ、という感じがなくなっていたのを思い出しました。
当時はまだAffinity Designerもベータ版でしたが、その頃からSerifさんは直感的なインターフェースを目指していたんだと思います。

Affinity Designerを教材として使い、良かったこと、悪かったこと

大石先生

Affinity Desginerの良い点は、コスト面ですかね。。。イラレ並みの機能を使えてかつ低価格。
また、インターフェースが優れていて直感的に使いやすいように思います。
個人的にはイラレに近い操作感に助かっています。

弱点ですが、やや重ね順(レイヤー)の操作がやりにくいです。
思ってもないグループに入ってしまったりします。

大石先生は、Affinity Designerのポイントとして、この直感的な操作感を非常に評価していらっしゃるようです。

Affinity Designerは、業界標準のIllustratorと同じく、画面左端にツールチップが並び、右端に各種機能が表示されるという画面構成です。ここまではIllustratorと大きな差は感じられません。両者の操作感も比較的近く、Illustratorを10年以上使っていた人がAffinity Designerに切り替えたとしても、ゼロから覚え直すほどの違いはないところもメリットではあります。

しかし、「直感的に使いやすい」と評価するポイントは、ただ単に似ているからというわけではありません。
例えば詳細パネルで調整すると、リアルタイムにアートボードで反映されます。詳細パネルで調整して確定すると反映される、というIllustratorよりも直感的で分かりやすいはずです。
また、今回のように生田東高校さんで取り組んでいたピクトグラム作成などの作業をする場合、Affinity Designerには図形ツール内に最初から多様な図形サンプルが入っています。Illustratorでハートマークを作るのは手間がかかりますが、Affinity Designerなら一発です。

Affinity Designer 図形

中でも特に注目したいのは、Affinity Designerはいわゆる「ドロー系」「ペイント系」両方に対応したアプリとして設計されており、画面左上の「ペルソナ」を切り替えることで、Photoshop的な使い方、Illustrator的な使い方の2種類を同時にこなすことができるというビックリ仕様だという点です。
つまり、例えばIllustratorではビットマップ形式の画像を扱うことは難しかったのですが、Affinity Designerではピクセルペルソナに切り替えれば、そのままビットマップ画像をPhotoshopライクに加工することができるわけです。

Affinity Designer ラスターモード

このように、インターフェースをIllustratorに寄せてきているだけでなく、さらに考え抜いて、その上の使いやすさを追求していくのがAffinityシリーズの良さだと思います。

反面で、レイヤーの操作がやりにくい、というのも各所で聞いています。
レイヤー周りではAdobe製品の方が一歩リードしている感じがあり、今後の改良に期待するところですが、マスク、クリッピング、グループ化などで微妙にマウスポインタの置いた位置によって意図しない結果になりやすいので、もうちょっとスラッといく操作ができるように工夫されるといいな、とは僕も思っています。

ただ、Affinityシリーズの進化はかなりいい感じで進んできているので、さほど遠くない未来には解消されるかもしれませんね。

Affinity Designerを教材として採用することに心配はなかったか

Affinity Designerは生徒に受け入れられたか

ここまでお聞きして、ふと思ったことを大石先生にぶつけてみました。

生徒さんたちにとっては、将来、会社などで、学校で使ったことのあるアプリの経験が活きてくると思います。
Affinityシリーズは正直まだ業界標準とまでは行かないと思いますが、その点で不利になるとか、そういう心配はしませんでしたか?

大石先生

Affinity Designerはかなりイラレと同じ感覚で操作できると思うので、そんなに問題なく乗り換えられるのではと思います。
以前、Gravitなども使っていましたが、それよりもイラレに近いと思います。

また、そもそもの目的は特定のアプリケーションに習熟することではなく、デザインの過程や理論(色の組み合わせやグリッドなどなど)を理解することなので、そのアプリが業界標準ではなくても、使いやすいものであれば問題ないと考えています。
その点、Affinity Designerは使いやすく、教えたいことを変なところで苦労することなく教えることができます。

なるほど。
確かに「理論を教えるのであって、アプリの使い方を習熟させることが目的ではない」というのは、その通りですね。
それでもインターフェースや、設計思想がまったく異なるアプリに慣れると、心情的にどうしても苦手意識が芽生える気がしていました。選択の幅は広い方がいいはずですからね。
ただ、Affinity Designerなら、業界標準のIllustratorと使い勝手も似ており、将来的に就職先で支給されたものがIllustratorであったとしても問題なく乗り換えできそうなのは、教育現場としても心強いかなと思いました。

生田東高校さんにおける今後のコンピュータ学習への取り組みとは

大石先生

生田東高校の情報科では、1年生全員が学ぶ科目「社会と情報」に加え、選択科目として、デザインなどを学ぶ「情報デザイン」、プログラミングを学ぶ「アルゴリズムとプログラム」の2つの科目を用意しています。情報やコンピュータを学びたいみなさんの希望に応えられるカリキュラムになっていると考えています。これは、普通科の学校としてはかなり先進的な取り組みです。

再来年からはカリキュラムが新しくなりますが、引き続き、情報やコンピュータを学べるカリキュラムを用意していく計画になっていますので、情報系に興味がある方はぜひ、生田東高校に注目してください。

正直、羨ましいなぁ、と……
僕の時代はコンピュータ学習なんてあってないが如しでしたし、現在僕の住んでいる地域ではあまり良い評判を聞いていません。小学生の息子は授業でパソコンを使うらしいですが、ネットワークが不調で中止になったとか、パソコンが起動しなくて授業時間が10分しかなかったとか、そんな話がちょくちょく聞こえています。近くGIGAスクール構想で1人1台のパソコンが支給されるそうですが、どうやらWindowsでさえないそうです。

現状では、恐らく自治体のコンピュータ学習への基本的な理解をはじめ、教育委員会や学校側の取り組みの本気度、そして所属する教員の練度などの揃わなければならない要素があるため、全国均一のクオリティが提供できていないように感じます。生田東高校さんのように、地域でしっかり取り組む姿勢ができているところは、現状そんなに多くはないでしょう。

今回は、教育現場でのAffinity Designerの活用についてお話を聞かせていただきました。
Affinity Designerが教育現場でも十分活用されていることを知ることができ、とても興味深かったです。
大石先生のおっしゃっていたように、「デザインの過程や理論」を学ぶことが本筋であり、特定ツールの使い方を学ぶことが目的ではない以上、できるだけ短い期間で習熟でき、かつ、必要十分な機能が一通り備わっているAffinity Designerは、教材として最適と言えるのかも知れません。
極めて安い価格帯で、性能は業界標準のツールと甲乙競えるレベルに達し、使い方は直感的。もちろん今回大石先生に挙げていただいたレイヤーの問題など、細かい点に言及すればマイナス面がないこともありませんが、それを補って余りある魅力に溢れたアプリです。
Affinity Designerに限らず、Affinity PhotoやAffinity Publisherも教育権場で活躍できる日が来ることを期待しています。

今回は大石先生、お忙しい中をありがとうございました!

生田東高校のホームページはこちらです!