2017.08.06 [日] 夏休みは、高校へ出張講座を行っています。
夏らしい暑さが続いていますが、お元気でしょうか。
講師のカワグチです。
高校の夏休み期間を利用して、高校生や先生向けにWeb制作基礎講座を開催しています。 7月に訪問した出張講座の内容などを紹介したいと思います。
フリーツールでWebデザイン
プロの現場では、Adobe PhotoshopやIllustrator, Sketchなどを使ってWebサイトやアプリのUI(ユーザーインタフェイス)などをデザインをします。
しかし、高等学校などでは、高価すぎたり、そこまで高機能は必要ないということで、グラフィックソフトを利用した実習などがなかなかできません。

そこで愛知県立衣台高等学校では、フリーで利用できる画像処理ソフト「GIMP」とベクターソフト「Inkscape」を使って、Webデザイン基礎講座を開催しました。


GIMP講座
GIMPでは、画像の明るさや色調補正や傷の修正、ぼかしたりする効果などの機能を解説しました。
クリッピングマスクもできるので、GIMPだけでWebサイトのデザインデータ作成ができるかも(((o(*゚▽゚*)o)))と思ったりしたのですが、日本語の文字ツールが貧弱だったり、書き出し機能もWeb用にはできていなかったりで、レイアウトや文字、画像の書き出しなどはInkscapeを利用します。


Inkscape講座
Inkscapeは、ベクターツールということでIllustratorの代替ソフトとして、よく利用するかと思いますが、実は画像の書き出し機能が充実していて、レイヤー毎に画像として書き出せたりします。感動!
もちろん、ベクターツールとしての機能も充実しているので、パスファインダなどグラフィック作成もあり、ボタンやバナーなどのパーツを制作するのもお手軽にできます。


今回は、GIMPとInkscapeの基本操作の解説と、ワイヤーフレームからWebサイトのデータ作成までの実習だったのですが、時間としては、1日ではちょっと足りないかもしれません。
この2つのソフトは、インターネット上でもリファレンスやチュートリアルがすぐ見つかります。
また、インプレスから「できるクリエイター GIMP 2.8独習ナビ」や「できるクリエイター Inkscape 独習ナビ」という本も出版されています。
Webサイトの設計
どんなWebサイトにするのかを決めるためには、具体的な制作の前にWebサイトの情報設計をします。
三重県立尾鷲高等学校の商業部では、10月の尾鷲市内を中心に開催されるイベントのWebサイトを制作しています。
イベントに参加する人、Webサイトを利用する人をイベント参加前、参加中、参加後にわけて、それぞれに必要なコンテンツを考えていきました。


スマートフォンを中心に考えて、ワイヤーフレームを制作してもらいました。

情報設計のワークショップ後は、Photoshop Elementsの機能解説と、Bracketsを使ってHTML+CSSの基礎講座を行いました。
朝から夕方まで、一気に説明して作業などしてもらいましたので、大変だったかと思います。お疲れさまでした。
Webデザイン出張講座の問い合わせ
Webデザイン学科では、夏休みに限らず、高校でのWebサイト制作出張講座を行っています。
今回の「企画・設計」「デザインツール」だけでなく、「HTML+CSS講座」や「Webプログラミング(JavaScript)」ご利用の教科書の解説など、ご要望に合わせることも可能ですのでトライデントコンピュータ専門学校までメールか電話でお問い合わせください。
また、トライデントコンピュータ専門学校の情報系学科では、情報処理技術者試験対策セミナーなども開催されています。
他の学科での高校生および教諭対象の講座なども、気軽にご相談ください。
- 関連記事
-
- 高校「Web制作」出張講座2018 (2018/09/15)
- 夏休みは、高校へ出張講座を行っています。 (2017/08/06)
- 愛知商業高校ホームページ制作 (2011/02/28)
- 愛知商業高校Webサイト制作 (2010/10/08)