産技短展サイトの秘密

サイトコーディング

産業デザイン科1年ウェブコース5名が課題で制作しました!

池田卓真のイラスト

池田 卓真

向井大竜のイラスト

向井 大竜

佐々木空のイラスト

佐々木 空

大倉詩穂のイラスト

大倉 詩穂

中村美樹のイラスト

中村 美樹

どうも皆さんこんにちは、産業デザイン科1年の池田卓真です。

突然ですが皆さんにお伝えしたい

実はこの産技短展サイト・・・

産業デザイン科の1年生が作りました!!

ウェブデザインの学習を本格的に勉強を始めてから3ヶ月の時が経ちました。

課題を通じてウェブサイトをいくつか作りサイトの見せ方、文字の配置、レスポンシブについて考えられるようになってきました。

そこで自分たちの作った物を多くの人に知ってもらおう,見てもらおうとなり、今回の産技短展のサイトを作ることになりました。

産技短展ポスター

産業デザイン科の2年生の皆さんが産技短展のメインビジュアルを作ってくれました。

今年のポスターやリーフレットのものですね。

1年生のウェブコースはこれを軸にしてサイトデザイン案の展開を考えます。

それでは、デザイナーの卵の5人がサイトを作ったので一人ずつ見ていきましょう!

産業デザイン科の教員から

先生のイラスト

産業デザイン科ウェブコースの5名は、前期(1学年4月〜9月)で、ウェブサイトを構築するための技術(HTML、CSS)と画像編集ソフトの使い方を学び、後期(1学年10月)から、本格的にサイト構築のための企画や設計などを座学、実習を通して学んできました。

印刷物を主体とする広報物のメインビジュアルは、2学年の学生が行い、そのビジュアルを引き継いだ上で、「どのような情報を」「どのように」「どのような順番で」など、ウェブサイトで情報を伝えるために、それぞれが考えて、制作しました。

まだまだ発展途上の5人ですが、「情報を伝えるために」と考えながら、奮闘しております。至らない点もあるかと思いますが、どうぞ、暖かい目でご覧ください。

池田卓真

池田卓真の場合

まずは代表して僕の考えたデザイン案から見ていきましょう

このサイトは主に高校生の人たちに見てもらいたいなと思って作りました。産技短に「入る人」や「入ろうか迷っている人」に何をやっているのかを一番に伝えられるようなコンセプトで作りました。また、ポスターやリーフレットととのイメージが合うように注意してサイトを構築し、ハンバーガーメニューやアコーディオンメニューに挑戦しました。

ここで先生方からこのサイトに対するコメントを頂きました。

先生のイラスト

技術的に新しいことに取り組んだことが池田くんの挑戦だね。クリックすると内容が展開される(アコーディオンメニュー)やスマートフォンでの表示を意識した(レスポンシブ対応)などとメニュー表示に対応したんだね。

アコーディオンメニューは、内容の切り替えを少ないスペースで実現できる反面、見る人には気づきにくいところがあるので、展開してその中身を見てもらうための工夫があると、よりいいですね。

あとは、レスポンシブ対応が、まだコントロールできていないですね。仕組みや構造を理解して、作れるように頑張りましょう。

向井大竜

向井 大竜の場合

次は、同じウェブコースでずーっと一緒に僕と行動している向井君

個人的に彼が考えたデザイン案にはすごい興味があります!

そんな向井大竜くんの制作物がこちら

ターゲットは産技短への入学を考えている高校生です。落ち着きのあるサイトイメージとモノ造りのアイデアが浮き上がってくる表現をSVGアニメーションとJavaScriptで表現しました。また、スマートフォン用にハンバーガーメニューや会場へのアクセスがわかる地図を作成しました。

ここで先生方からこのサイトに対するコメントを頂きました。

先生のイラスト

アニメーションを使い、動きがあるサイトに挑戦したんだね。レスポンシブ対応(スマートフォンでの表示)も、基本的なことができていますね。

見た目の部分では、文字の扱いに意識を向けてみよう。グラフィックデザインでは、「文字組み」と呼ばれる、視覚伝達デザインの基本を勉強するといいね。文字の大きさや行間など、これらに意識するだけで、まとまった印象になります。

佐々木空

佐々木 空の場合

次は、最近自分のことをナマケモノなんじゃないかと感じている空ちゃん

佐々木空ちゃんの制作物がこちら

ターゲットは産技短を進路の一つに考えている高校生です。理由は、産技短の学生がなにをしているのか、なにを学べるのかを伝えたいです。コーディングは今回が初めてでデザインモック通りに作れるようにがんばりました。

ここで先生方からこのサイトに対するコメントを頂きました。

先生のイラスト

サイト計画から、モックアップ(サイトの試作・完成イメージ)の作成、コーディング(HTMLとCSS)まで、ひととおりの工程ができましたね。

一連の工程をふまえ、計画を立てたり、構造を意識して構成したりと、全行程を経験することで、次回のサイト制作に活かせるものがたくさんあったと思います。

次は何をテーマに課題制作を進めましょう?

大倉詩穂

大倉 詩穂の場合

次は、デザインするのが大好きで自分の作ったものに深い思い入れを込められる詩穂さん

そんな大倉詩穂さんの制作物がこちら

ターゲットは産技短に入学を考えている学生で、これを期に学校に興味を持ってもらい、物作りっていいなと思ってもらえるサイトにしたいと思いました。

ここで先生方からこのサイトに対するコメントを頂きました。

先生のイラスト

ビジュアル・見た目を作り上げるところは、かなりできてきていますね。

視覚的にもメインイメージで使われている特徴的な2色を画像に(デュオトーン)使ったり。技術と視覚を組み合わせ、視差効果(パララックス)にも使いましたね。画像の加工や色使い、内容の構成やレイアウト、余白の使い方など、だいぶ、できるようになってきています。

このまま、細かいところまで気を配り、精度をあげて行きましょう。

ただ、制作に時間がかかってしまったのが、残念です。与えられた広報物のビジュアルイメージと、サイトのイメージを合わせる所に時間を使ってしまったのでしょうか?

中村美樹

中村 美樹の場合

次は、今回の産技短展サイトの大元となるサイトを作った美樹さん

これにはすごいの言葉しか出ません

そんな中村美樹さんの制作物がこちら

今回のサイトは時間がなかったので早く作ろうと思いました。ターゲットは老若男女に設定しました。jQueryを使ってグローバルナビや視差効果に挑戦しました。レスポンシブデザインを作るのに四苦八苦しました。情報の見やすさを意識して作成しました。

ここで先生方からこのサイトに対するコメントを頂きました。

先生のイラスト

今回、特設サイトのベースになったデザインであり、そして、色々な項目に挑戦しましたね。

技術的にはアニメーションを盛り込み、画面サイズに合わせてスタイルシートを切り替えたり(レスポンシブ)、マウスカーソルをのせることで(ホバー)と表示項目を切り替えるなど。視覚的にもメインイメージで使われている特徴的な2色を画像に使ったり(デュオトーン)。技術と視覚を組み合わせ、視差効果(パララックス)を使ったり、多くのことができるようになってきましたね。

画像の上に文字がかかる部分などは、下地に半透明の地色を置いたり、文字と画像が被らないようにしたりなど、文字や地図を見やすくなるための工夫をしましょう。見た目ももちろん大事ですが、それ以上に情報を伝えることが重要です。

まとめ

皆さん5人の制作物を見てどうだったでしょうか?

僕たちは今回のこの課題で初めて学校の外の人に見てもらうということでいつも以上に気合の入った制作になりました。

また、それぞれの挑戦したこと、意識しないといけないこと、いろんな発見がある課題になりました。

僕たちはこれからもっと成長します。

まだまだ未熟なデザイナーの卵ですが、1歩ずつ前に進んでいきたいと思います。

ここまで見ていただきありがとうございます!

以上、池田 卓真でした。