【グラフィックデザインコース】智勇館でのスクーリング授業の風景

こんにちは、グラフィックデザイン／情報デザインコース業務担当非常勤講師の伊藤です。

12月9日と10日の2日間、瓜生山キャンパス智勇館でグラフィックデザインⅢ－４「ウェブデザイン２」の授業を今回、私が担当させていただきました。その時の様子をお伝えいたします。

必修の科目なのですが、このウェブデザイン２（ウェブデザイン１もですが）は、「コーディング」というこれまでのデザイン授業で習うものとは雰囲気の違う実習をメインに行います。マウスを使って図形を作ったり、画像を補正するような作業とは違い、コードと呼ばれる英語らしき文字をキーボードでタイピングしていく作業は、慣れていないとそれはそれは大変です。そのためか、授業に出席する際に苦手意識を持っている人も少なくないようです。

本カリキュラムのメインテーマは、bootStrapというフレームワークを利用したサイトコーディングです。

フレームワークとは、一定のルールに沿ってコーディングを効率的に、簡単に進めることのできる開発用ツールです。プロのウェブ制作現場で導入されることも多く、実際にbootStrap自体がX（Twitter）の開発過程で生まれてきたものということもあって有名なフレームワークのひとつとなっています。

ツールを使うとはいえ、やはり普段コーディングをしたことのない人にとって、未知のツールを使いこなすことはとても難しいチャレンジになります。この授業ではそういったコーディングのテクニックに捉われずに、できるだけデザインとコーディングとの関連性であったり、それぞれの意味についてハンズオン（実際に手を動かして導入から学んでいく演習）を通して理解してもらおう。という講師のひそかな想いがありました。

そんな中で、初日は講師と１対１の面談を行って、デザインを確認します。ウェブデザインはどうしても紙面と違って制約が大きいため、コーディングできるデザインなのかどうかをアドバイスするかたちになりました。

そして実際に２日目にコーディングのフェイズに入るとみなさん、非常に真剣に作業に集中している様子。

でも「コーディング」ってそもそもなんなのでしょうか？

優秀なAIが出てきたりして、今後自動化されていくことで、このような作業はウェブデザインに本当に必要なのでしょうか？

そういう疑問の声を聞くこともあります。私自身、コーディングそのものの工程はおそらく今後のウェブデザインのフローの中で省略可されていくのではないかと考えているひとりです。

しかしながら、そうなったとしてもコーディングの知識は今後優れたウェブデザイン（あるいはもっと未来のデジタルコンテンツ）を作るうえで欠かせないものだとも思っています。それは印刷の多くの工程が自動化されて省力化された今の時代でも、活字の知識や紙の知識を持つことをデザイナーが求められるように、ウェブデザインの根底を担っている「コード」について知っておくことはウェブデザインをするうえで重要なスキルだからです。

では、コードについてもう少し詳しく見ていきましょう。まず、コーディングと一口に言っても、ウェブ制作において使われる言語は主に３種類あります。

一つ目がHTML（HyperTextMarkupLanguage）です。

HTMLの役割は、ウェブサイトの情報の構造化です。「アウトライン」とも言われますが、文字と写真から構成されるサイトの情報を、適切に整理していく（タグ付け）ことを行います。（これを「マークアップ」とも呼びます）これによって、それぞれの要素のビジュアルにかかわらず、「これは『タイトル』だ」とか「これは『画像』だ」とかいう情報をHTMLに持たせることになります。

実はウェブサイトはこのHTMLだけでも成立してしまうのです。世界で一番最初に公開されたウェブサイトは、このHTMLだけで作られており、タグとしての情報だけしかありませんでした。

これはどういうことかというと、画面で見るとただ大小の文字が並んでいるだけのページに見えるのですが、コード自体に上記の構造化された情報を持っているため、人間以外のロボットがHTMLを読んだとしても、意味が理解できることになります（これがウェブのすごいところです）

 



そして二つ目がCSS（スタイルシート）と呼ばれる、人間が目で見たときに理解を助けるためのスタイリングを行う言語です。

主にデザインのイメージとしては、このCSSを記述してビジュアルをウェブページに反映していくことになります。先ほど説明したフレームワークは、このCSSのテンプレートのようなものだと捉えるとわかりやすいかもしれません。

そして最後にjavaScriptと呼ばれる言語で、これはウェブサイトの「ふるまい」を主に担当しています。例えばユーザーがスイッチをクリックしたりタップすると、メニューが表示されたり格納されたり、お申し込みフォームを入力する際の入力チェックを行うなどの多くの機能を担うための言語になります。

さて、いろいろな言語がありますが、この中で最もウェブデザインをするうえで大切なのは、実はビジュアルやレイアウトを決めるCSSではなく、HTMLだと私は思っています。なぜなら情報を構造化することで初めて、その情報に最も適しているビジュアルが決まってくるからであって、ウェブデザインの方法論としてこの構造化ができるかどうかで、そのデザインの質が変わってくるといえるでしょう。

マークアップという作業はまさに情報を構造化していくことなので、これができるデザイナーのほうが、より良いウェブデザインを作ることが可能になるということですね。

授業のなかでは、こういったデザインとコーディングの関係性を伝えさせていただきました。

みなさんもテキスト課題や卒業制作の際にコーディングをすることになったら、少しでもコーディングの意味を考えながら制作してみてください。

オンライン入学説明会開催中（1月～3月毎月／コース別）

コース紹介ぺージ（大学公式HP）