プログラミングコースを始める方へ

コースをはじめる方へ

このたびは にご興味をもってくださってありがとうございます。

このコースでは、現在のWeb制作において必要不可欠なスキルの1つであるWebデザインの中でも、特にHTML・CSSによるコーディングに特化して授業を行っていきます。

Webデザインってなんだろう?

みなさんは「Webデザイン」という言葉を聞いて、どんなことを思い浮かべるでしょうか?どんな仕事をしているように思いますか?

もともとデザインとは、ポスターやチラシを作ったり、服や車・建物などの機能や見栄えがよくなるように、文字・図形・写真・イラストなどを組み合わせて「美しく設計すること」です。

ポスターやチラシは紙に印刷するものなので、印刷に適したグラフィックツール(Adobe Illustratorなど)を使って作成します。そして作られたデータを機械で印刷することで最終的な成果物を生み出すことができます。

建物や車などの立体のものはCAD(キャド)と呼ばれる3Dの設計支援ツールを使って作成します。こちらは紙に印刷することでは完成しませんから、もっとたくさんの人の手が必要です。建物だったら建設会社・大工さん、車だったら大規模な工場やエンジニア(技術者)さんたちが力を合わせて、ようやく最終的な成果物が生まれます。

Webサイト制作の流れと、Webデザインの役割

Webデザインも他のデザインと同様に、あらゆるものを組み合わせて整理をし、Webサイトを見てくれる方に伝えたいことがわかりやすいように設計をすることを意味します。

Webサイト制作の工程は、ざっくりと以下のような流れになります。

  1. 企画を作る
  2. ワイヤーフレームを作る(下書きのようなものです)
  3. Photoshopなどを使ってデザインカンプを作る(最終成果物に近い見本です)
  4. HTML・CSSでコーディングする
  5. プログラムを組み込む
  6. サーバーを用意し、データをアップする
  7. 公開する

これらの工程の中にWebディレクター・Webデザイナー・エンジニアなど、様々な専門スキルを持った人たちがチームを組んで仕事をするのが一般的です。(もちろん技術を身につければこれらを一人でこなすこともできます)

そしてこの工程の中で、Webデザイナーが担うのは主に2〜4の仕事になります。

Webサイトというものは、ポスターのように1枚の絵で出来ているわけではなく、クリックして動く場所があったり、文字を打ち込んで送信する機能があったりします。なのでPhotoshopなどでキレイなページを描いただけでは完成ではありません。HTMLとCSSという言語を使って、インターネットブラウザー(Google Chromeなど)で見れるような形にして作る必要があります。その工程が4の「HTML・CSSでコーディングする」になります。

このようにWebデザインに必要な知識は、範囲が幅広いため、N予備校のWebデザイン授業ではコースを2つに分けて提供します。1つはグラフィックデザインコース、上の工程の3を主に学ぶことができます。もう1つが今見ていただいているHTML・CSSデザインコース、主に4を学ぶことができるコースです。

HTML・CSSデザインコースの主な内容

本コースは、HTML・CSSのコーディングに必要な基礎的なスキルを⾝に付けることができるコースです。

HTML・CSSの使い⽅だけではなく、JavaScriptを⽤いたインタラクティブなインターフェースや、レスポンシブウェブデザインなど、実際の制作現場で⾏われているWebデザインの⼿法を学べます。

⾼機能エディタ「Visual Studio Code」を活⽤し、効率よくコーディングを⾏うためのコツも伝授します。

進め方のコツ

授業内では、なるべくみなさんにコーディングになれてもらうために、たくさんコードに触れる機会を設けたいと思っています。デザインには興味があるけれど、プログラミングはちょっと苦手…という方は、少しだけ大変かもしれません。ですが自分で書いたコードによってWebデザインが表現され、それが公開されて世界中の人に見てもらえるようになれば、きっとコーディングも楽しくなるでしょう。

勉強のコツですが、とにかくすべてを覚えようとは思わないでください。だいたい把握したら次へ行く、という気持ちで進めていただければ構いません。実はあまり覚えることはありません。ルールをいくつか覚えれば、細かいところは作りながら調べていけば大丈夫です。そのかわり、わからなかったら調べてみる(ググってみる)くせをつけましょう。

最新の技術はどんどん変わっていくので、わからないことがあったら調べて試してみる、そういう癖をつけるのが、プロのWebデザイナーへの近道です。

スポンサーリンク

Posted by エスパパの娘