ツールの使い方は教えない。Webデザイナー志望者の「自走力」を育む授業とは。

デジタルツールを使いたい！と思ったら、書店やインターネットで手軽に情報を手に入れられる時代。ソフト自体に基本的な操作方法を解説する「チュートリアル」が用意されていることも増えました。

例えば今回取り上げる「Webデザイン」の分野でいうと、多くのWebデザイナーが愛用するAdobe XDもチュートリアル動画が充実しています。Adobe公式Youtubeチャンネルでは、XDの操作方法に加えてプログラミング言語の仕組みなど、Webデザインに関する基本的な知識が自学自習できるようになっています。

▲Adobe XDのチュートリアル動画（Adobe公式より）

一方で、「基本」のその先に進むためにどうスキルアップを図ればよいのか、立ち止まってしまう方もいるでしょう。

Webデザイナーの仕事はデザインやコーディングに留まらず、企画立案、クライアントやチーム内のコミュニケーション、競合分析、サイト設計など多岐にわたります。こうしたスキルを身につける場として、現役デザイナーの教員から学ぶことができるのがDHUの特徴です。

今回のnoteで紹介するのは、DHUの2・3年生が履修する授業、「Webデザイン演習II」。授業を担当する塩谷正樹先生に、授業でどのようなことを伝えているのか、初心者がつまずきやすいポイントとその乗り越え方などを聞きました。

塩谷 正樹（しおたに まさき）准教授
webfarm代表。デジタルハリウッド総合Proコース2期生（1995年）。 コース終了時からフリーのCGデザイナーとして3Dを中心に活動し、 福井産業情報センターや企業での特別講師など人材育成にも従事。その後、Web制作会社や広告代理店にて、Net'z TOYOTAをはじめ、雑誌関連のWebサイトや広告などの制作を経験し、現在はWeb制作を中心に地域の情報化推進活動などにも参加している。

Webデザイン演習Ⅱってどんな授業？

——Webデザイン演習Ⅱの授業内容について教えてください。

はじめにお伝えしたいのは、Webデザイン演習IIは、Webデザインツールやソフトウェアの使い方を学ぶ授業ではないということです。大切なのは「何で作るか」ではなく「何を作るか」。学生には、ユーザーが使いやすいサービスの制作を目指してもらいます。

加えて、PCサイトだけでなくスマートフォンやタブレットなど、デバイスごとの使いやすさを考慮したデザインができるようになることも目標にします。

——なるほど、かなり実践的なのですね。授業はどのような流れで進んでいくのですか？

具体的な授業の流れは下記の通りです。基本的に実際の作業は授業外で行ってもらい、私やティーチングアシスタント（以下：TA）が段階的にチェックをすることで、ブラッシュアップの機会を多く体験することが狙いです。

・企画発表
・ワイヤーフレーム（設計図）のチェック
・デザインチェック
・試作品のチェック
・最終発表

——デザインの現場でも、おおよそこのような流れで納品へ向かっていくのでしょうか？

制作会社や案件によって異なりますが、Webサイトのデザインとして納品する際はおおむね同様です。この授業では、社内に複数人のデザイナーがいる環境で、ひとつの案件に対して複数案出す状況を想定しています。

そのため、履修生は初回の授業から、ひとりの「Webデザイナー」として制作に挑んでもらうようにしています。

2021年度のWebデザイン演習IIの課題は「新たなサブスクリプションサービスを考えて提案する」でした。5、6名ごとに6つのグループに分かれ、世界のお酒や日本各地の郷土料理、就職活動に関することなどさまざまなサービスが提案されました。

▲「ユーザーの目的」「共通のテーマカラー」など、サービスを設計する上で必要なことを整理するために、Zoomのブレイクアウトルームで話し合いが進められた

グループのメンバーはチームメイトであり、ライバルでもある。まずは個人で制作を進めてもらい、誰のデザインを原案にしてチームの成果物にするのかを決めます。

原案を決める段階では、個々人のプレゼン力が問われます。企画書のどの部分がデザインに反映されているのか、ユーザーの使いやすさのためになぜこのレイアウトでなければいけないのか。グループによっては話し合いの末に新たな折衷案を生み出すこともあり、実際の現場に近い状況を体験できるんです。

未経験者でも「自走」できる仕組み

——授業ではグループワークやフィードバックの機会に重きを置き、実作業は授業外で、ということですが、特にWeb未経験の学生がつまづくことはないのでしょうか？

教員・TAと学生はSlack（学内SNS）でつながっており、自宅でも質問できる体制を整えています。自発的に質問をしてもらえればなるべく丁寧に解説するように心がけています。

この授業の主旨は「グループワークを通して、お互いの意見を尊重しあい、より良い作品を制作すること」。ツールの使い方を身につけることを主眼には置いていないので、Webデザインツールの使い方は動画教材で補完してもらっています。

実際に手を動かして、わからないことがあれば適宜自分で調べる。プロも実際にそうやって作業しているので、あえて教員が話したことをインプットさせる内容にしていないんです。

ただ独学ではわからないことはもちろん出てきます。そのような場合も、グループ内で話し合うことができますし、私を含めTAもついていますので、疑問を解決することは可能です。

——そうしたサポートがあれば、Web初心者の学生でも安心できますね。

はい。Webデザイン演習IIを受講する学生のうち、コーディング経験者と未経験者の割合は半々くらい。最初は経験の差を感じてしまう学生もいるでしょうね。

ただ経験者はコーディングの実装可能性を考えられる分、それによってデザインに縛りができてしまうことがあります。初心者であれば何にもとらわれず自由に発想することができ、デザインの可能性が広がるという側面もあります。

グループワークをするのは、実際の現場に近いワークをしてもらうねらいもありますが、同時に、経験者と初心者の学生たちが議論を交わして相互作用が生まれることも期待しています。

デザインに正解はありません。たとえ教員サイドが経験豊富だからといって、「こうすべきだ」と指導するのは学生の成長の機会を奪うことになります。グループワークのときは議論を活性化させるような質問をし、なるべくフラットな立ち位置でサポートをしています。

自発的なインプットによって手札を増やす

——最後に、これからWebデザインを学ぼうと考えている学生へメッセージをお願いします。

Webデザイン初心者の学生の中で起こりがちなのが、「オリジナリティ」にこだわりすぎてインスピレーションを受けることを避けたり、インプットを怠ったりすることです。

デザインの練習として良い作品を模倣することは、全く問題ありません。インプット無しにアウトプットはできないので、世に出ている作品を模倣して、自分の手札にすることで、身勝手なデザインから抜け出すことができます。

今回紹介したのは「Webデザイン演習II」ですが、ひとつ前の「Webデザイン演習Ⅰ」ではWebサイトの分析を行います。

良いなと思ったWebサイトを自分で選んでもらい、構成や要素、そのサイトから受ける印象などをまとめた分析レポートを作成する時間を取っているんです。そこで、配色やフォント、レイアウトなど何がしっくりくるのか感覚的にわかってくる。もちろん自分の作品とするのはNGですが、どんどん真似をすることで自分の手札が増えていく感覚になるはずです。

見て、研究して、観察して、調査して、自発的なインプットを大切にしてほしい。自分で頑張って見つけたものは必ず自分の中に残っていくので、良い作品に触れ続けることがWebデザインを仕事にする近道だと思っています。

＊

DHUでは「Webデザイン演習II」のような実践的な科目に加えて、Webマーケティング、iOSやAndroid用のアプリ開発など、WebデザインやWebプログラミング全般に関する授業を受けることができます。

「興味がわいた」「もっと詳しい話を聞きたい」という方は、ぜひDHUのオープンキャンパスや説明会にご参加ください！

▼デジタルハリウッド大学公式HP
https://www.dhw.ac.jp

▼OPEN CAMPUS GUIDE 2021
https://www.dhw.ac.jp/p/ocguide

▼資料請求
https://www.dhw.ac.jp/form/shiryo