ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

TVリポーターの阿部祐二さんの娘さんが、日本代表ということで話題になった2017年のミス・ユニバースですが、すでに2018年の地方大会は始まっています。今回その地方大会である、岐阜大会の公式WebサイトをWebデザイン学科2年生が制作しました。

2018 ミス・ユニバース・ジャパン 岐阜大会 公式WEBサイト

Web制作授業

カリキュラムでも紹介したとおり、Webデザイン学科では、毎年2年生が「Web制作」として、実際のクライアントから依頼を受けてWebサイトを制作する授業があります。
今年は、ミス・ユニバース 岐阜大会運営委員会より依頼を受けて、4月よりオリエンテーション、企画発表、制作、ビューティーキャンプの取材・インタビュー、セミファイナル大会でのプレゼンテーション、そして公開と長期間にわたり、Webサイト制作を進めてきました。

制作したWebサイトの目的は「共感」です。
ミスコンというと、外見の美しさが注目されがちですが、ビューティーキャンプでは、歩き方やポージング、筋トレだけでなく、大人の女性としての教養や栄養面など内面の美しさに関するレッスンがあり、出場者の成長していく姿をこの公式Webサイトで紹介することで、「共感」と、大会に関わる方々の想いを伝えたいと考えました。

ビューティーキャンプ取材・インタビュー

セミファイナル大会直前のビューティキャンプに取材とインタビューのため、お邪魔してきました。

今年、最初のWCAN 2016 Springに参加してきました。
Webデザイン学科2年生の津田くんが、ライトニングトークで『「伝える」「伝わる」ピクトさんと仲間達』と題して、コミュニケーションの手段として絵文字、顔文字、ピクトグラムを紹介しました。

ライトニングトーク（英: Lightning Talks）とはカンファレンスやフォーラムなどで行われる短いプレゼンテーションのこと。様々な形式があるが、持ち時間が5分という制約が広く共有されている。
形としてのライトニングトークは1997年のPythonカンファレンスで初めて行われたとされている。その時点では単に「ショートトーク」と呼ばれていた。「ライトニング（Lightning：稲妻、電光石火）」という言葉が用いられるようになったのは、2000年6月に行われたYAPC 19100 Conferenceからとされている。その後技術的なカンファレンスに於いて、この言葉が浸透するようになっていった。

200名の前でさすがに、緊張しながらのプレゼンでしたが、今年はリオデジャネイロオリンピックもあり、ピクトグラムに注目するきっかけになればと思います。

7月11日(土)に建設されたばかりの名古屋商科大学 名古屋キャンパス 丸の内タワーにてWCAN 2015 Summerが開催されました。220名の参加者が入っていても、まだまだ余裕のある会場でした。
今回がWebデザイン学科1年生最初のWCAN参加で、さらに瀬川君がライトニングトークでプレゼンをしました。

内容はというと「アイドルファンがWebを学び始めて気づいたこと」ということで、趣味と実益を兼ねた内容です。最初、テーマを決めた段階では、SKE48色が強くなりすぎて、余り受け入れられないだろうということで、ももいろクローバーZ、モーニング娘などを含め、複数のアイドルのオフィシャルサイトを検証することになりました。

Webサイトを制作する場合、競合他社のWebサイトを分析して傾向を知ることはよくあり、今回はアイドルのWebサイトを調べるとともに、利用したツール、Webサービスの紹介もあわせて行うことにしました。目新しいものはありませんでしたが、彼にとっては初めて触るツールや事柄ばかりでしたので、時間のかかる作業だったと思います。それでも好きなアイドルのWebサイトなので楽しんでやれたんじゃないでしょうか。

その中から、比較的わかりやすい項目をピックアップして、検証して「なぜ、そうなるのか？」という仮説と見解を考えていきました。そこからさらに5分間という短い時間に収まるように削ぎ落していきました。

毎回、学生がプレゼンすると「5分ぴったりと終わるなんて、練習してるんですか？」と聞かれます。
もちろんしてますよ〜。
それも5分ぴたりと終わるようになるまで2・3日前から、ビデオに撮って何回もくりかえし行っています。WCANなど大勢の前や、コンテストの審査などでプレゼンをさせてもらう機会は、とても光栄なことで滅多にありません。しかし“練習不足が原因”の失敗で精神的に凹むのだけは、避けたいという想いがあり、本番前はなるべくプレゼンの練習に時間を割くようにしています。
いままでWCANで発表してきた学生達もそうでしたが、これからも事前の練習は確実に行っていきたいと思っています。

さて、今回アイドルということもあり、あまり受け入れられなかった方もいらしたかもしれませんが、「最初テーマを聞いたときは、ここまで調べてるとは思わなかった」と仰ってくださる方もいましたので、頑張って良かったのではないでしょうか。調べた内容以外にも細かい部分でこだわってたりします。

そのへんの想いは、本人のブログにも書かれていますので、ご覧ください。

WCAN SUMMER 2015に登壇させていただきました！｜たいしょん倶楽部

本番のセッション内容についても、参加した学生のブログに感想などが書かれています。

• 「WCAN 2015 Summer」｜WF1でBLOG 2015
• WCAN 2015 Summerに参加してきました｜miki's weblog

また、WCANのサイトにもセミナーの様子が紹介されています

• WCAN 2015 Summer が終了しました｜WCAN お知らせ

今回の経験は、今後のWeb制作の勉強にもいかしていけると思います。貴重な機会をいただきありがとうございました。

集中授業の最終日にWebデザイン学科2年生前期授業「Webサイト制作」の発表会を行いました。

かっぱ商店街（笈瀬本通商店街）

http://oise.jp

かっぱ商店街（笈瀬本通商店街）名古屋駅西にある商店街です。数年前、先輩たちが制作したサイトがWordPressを狙った攻撃にあって改竄されてしまい、記事や店舗情報が読めない状態になってしまい、リニューアルの依頼でした。


メンバー：山崎伊清、池田大地、笠井政慶 、水野裕太
以前のイラストを利用した親しみやすい雰囲気は継承しつつ、PHP製のオリジナル店舗情報システムもすべてWordPressで実装し、ページ全体の情報設計にも考慮したWebサイトになっています。これで、店舗情報やブログの更新もひとつの管理画面でできるようになりましたので、商店街の人が情報を発信しやすくなっています。


かっぱ商店街の中西さん、湊さんにもお越しいただきました。終了後は、今後の運用や、要望など聞く事ができました。

ネイルサロン maua

http://maua.jp

マウアさんは個人で経営されているネイルサロンです。以前、名古屋市内にあった店舗を尾張旭市に移転され、現在運営しているアメーバブログだけでなく、Webサイトを開設したいという新規制作の依頼でした。オーナーとお客様へのアンケートを実施し、何度も打ち合わせを重ねて制作をしています。


メンバー：鈴木庸孝、伊藤鮎美、西山隼平、松岡祐弥
打ち合わせの回数は、他のグループに比べて圧倒的に多かったので、最終的にクライアント、制作者ともに納得のWebサイトになっています。デザインは、メインターゲットである“若すぎない大人の女性”を意識して空気感のあるレイアウト、色味になっています。またお店の特徴である、ネイルのデザインもわかりやすくギャラリー化し、さらにオリジナルのアップロードシステムを組み込みました。入力項目を限定する事で更新のしやすさも考慮しています。また、ほとんど（約9割）のお客様がリピーターということで、初見で行きやすいようにメニュー、料金も明瞭で細かく表示してあります。まだ実装が完了していませんが、予約システムを導入する事で、さらに集客に結びつける施策も用意しました。


マウアのオーナー森下さん。株式会社アンティー・ファクトリーで活躍中の卒業生、石黒くんも、セキュリティー面と予約システムについてのアドバイスをしてくれました。

株式会社アイテムカンパニー

http://www.item-c.jp/

販売代行の株式会社アイテムカンパニーさんのWebサイトはあったのですが、汎用のテンプレートで制作されていたため、業務内容がわかりやすく、人材採用にも利用できるWebサイトにリニューアルして欲しいとの依頼でした。


メンバー：河地芳明、栗山総一、田中睦翔、森瑛幹

まずは、一般の人にはあまり馴染みのない“販売代行”についてわかりやすく解説するとともに、目的である問い合わせ件数の増加、人材採用などを明確に分離し誘導できるように情報設計に気を配りました。ビジュアルに関しては、学生にお任せという事でユーザーの動きを邪魔しないように大きめなブロックでわかれています。会社のメインカラーである赤を中心にして、内容が引き立つように背景に色を入れていません。お問い合わせフォームのページもファーストビューに考慮したUIになっています。


森先生からは「ユーザー層から1秒かかるトップページは離脱しちゃうよ」とトップページのローディング時間についての指摘をもらいました。また今回は、名古屋のWeb制作会社の方もお越しいただきました。株式会社アビリティコンサルタントの菅沼さんからは、お問い合わせフォーム上のQ&Aが増えた場合や、電話番号でのお問い合わせに関しての質問がありました。

紅茶専門店 Liyn-an

尾張旭市にある紅茶専門店 Liyn-anさんは、喫茶店の経営はもちろん、海外の紅茶の買い付け、業務用紅茶の販売、おいしく紅茶を飲むための研究や論文執筆、本物の紅茶の普及など、尾張旭市を紅茶で有名になった中心的なお店です。今回は古くから積み上がってきたコンテンツを整理して、新たに業務販売用のWebサイトを制作してほしいとの依頼でした。


メンバー：伊吹賢也、小林裕仁、高橋雅人、横井翼
現在あるメイン紅茶専門店 TEAS Liyn-anのサイトと通販サイトに加え、業務用のサイトを開設する事で販路を明確にして、それぞれのお客様に合った情報を提供することが目的になります。業務用サイトは商品の情報だけでなく、購入したお店が美味しい紅茶を提供できるように、奥の深い紅茶の世界、技術、知識を幅広く知ってもらいたいという、オーナーの堀田さんの想いも具現化します。今回はそのために、膨大な紅茶記事を分かりやすく分別し、ユーザーに迷わず情報を提供するためのシステムをWordPressを利用して実装する事になります。
残念ながら、まだトップページと数ページしか制作ができていませんが、トップページには、記事へ誘導するリンクがたくさん用意されていますので、設計思想と上手く組み合わされば、面白いサイトになるのではと期待してます。


リンアンの堀田さんには「楽しみにしています！」と激励いただきました。期待にお応えしたいですね。株式会社アルタの田中さんからも、ご意見をいただきました。

会場の後ろには各グループのWebサイトが閲覧できるようになっていました。

終了後には、アンケートにもお答えいただき、発表会内では聞けなかった、貴重なご意見も伺えました。改善の目安に致します。ありがとうございました。


発表会を終えて、ホッとした一幕。さて来週からは、後期の通常授業が始まります。今回のWebサイト制作も完成させることはもちろん、コンテストも卒業制作も始まりますので、頑張っていきましょう！

12月21日（土）に名古屋国際会議場にて今年最後のWCAN「WCAN 2013 Winter」が開催されました。恒例のLightning TalkにWebデザイン学科の高橋くんが「 CSS3を使っていろいろ表現しようと試みた！」と題してCSS3を使った作品を解説して、Web制作の新しい可能性について話をしました。






5分という短い時間内にコンパクトに要点をまとめて発表をしましたので、まだまだ言い足りない部分はブログに追記されています。スライドとTwiteerの#wcanと合わせてご覧ください。

また、WCAN 2013 Winterと合わせて募集されていた来年2014のロゴデザインコンテストの最終作品4作品に、2年生の石黒くんの作品がノミネートされました。



残念ながら、優勝は逃しましたが、入賞ということでおめでとうございます！折り紙好きだとは、全然知りませんでしたw。



発表を待つ緊張の瞬間（真ん中）。

今回は他の学校の学生さんの数も増えてきたようです。各地のWebセミナーの中でも、参加者の平均年齢が断然若くなっていますね。
1年間、WCANの運営などアップルップルの皆さんありがとうございました！
来年もお世話になります。

9月14日（土）に名古屋国際会議場で開催された「WCAN 2013 Autumn」に参加してきました。秋のWCANは例年、3会場×複数セッションから個人で選択して参加します。各会場の本セッション開始前のセッション0として学生のライトニングトークが盛り込まれており、10分間で学習の成果などを発表することができます。Webデザイン学科の1年生水野くんも「Web歴半年!? プログラムど素人の僕がThree.jsを使って3D描画にチャレンジしてみた」という内容で、発表を行いました。





WebGLのライブラリ「Three.js」を利用してMetasequoiaでモデリング、BlenderでモーションをつけてJSONにエクスポートしています。初めて触る3DCGのソフトウェアやThree.jsに苦労しながらも何とかプレゼン中に動かすことができました。


下記のスライドにWebGLや動作環境、キャラクターデザインから3DCGキャラクター制作、Three.jsでの表示に至るまでの工程も紹介されていますので、ぜひご覧ください。


＜ソースコード＞【WebGL特集】第5回：Blenderでアニメーション出力（mox-motion）
three.js_r60で上手く動作せず、悩んでいたところ大変助かりました。


ずっと忙しなく動いているので、ボタンで動作するようにしたいですね。
※スマートホンでは表示されません。PCでGoogle Chromeもしくは、Firefoxの利用で表示されます。
本セッションについては、またこんど紹介します。