前回までで、どんなWebサイトを制作するか決まりました。では、久しぶりにホームページ・ビルダー14を起動したいと思います。
以前、サイト設定したフォルダにWebサイトを構成するフォルダを作っていきましょう。
index.htmlは最初に作ったファイルで、こちらがTOPページのファイルになります。
さらにJavaScriptのファイルを入れておく「js」、写真などを入れる「images」、スタイルシートを入れる「css」とそれぞれフォルダを作ります。
うぇ～～～～～～～ぶ2016公式Webサイト
お忙しい中、卒業生や先輩、学生のご家族、Web制作会社の方々など136名の方にお越しいただき、たくさんのご来場ありがとうございました！
今回は、Webサイトの作品ではなく、各学生個人が学んだ技術や知識を使って「体験してもらう」ということがコンセプトでした。来場された方のほとんどは、ひとつひとつの作品に触れて感想を学生に感想を伝えていただけます。Web制作者の方には、作品制作のアドバイス、一般の方には率直な感想などインターネットでは得られないご意見をいただけ、とても良い経験になったのではないでしょうか。
いよいよ、明日2016年2月16日（火）から22日（日）まで、名古屋市民ギャラリー矢田 第7展示室で、「トライデントコンピュータ専門学校 Webデザイン学科1年生進級展 うぇ～～～～～～～～ぶ 2016」が開催されます。本日は、搬入ということで机やパネルのの配置、PCのセッティング、ライティングの調整など、明日から来場者を迎える準備を行いました。
みんな、それぞれの作業を分担しています。
看板も設置して、準備OK！当日は、モニターの光もあるので、もう少し明るい会場になる予定です。
初めてのDM＆リーフレットデザイン、初めての印刷データ作成と慣れない作業が続きましたが、ようやく完成。会場でも配布しています。
お近くにお越しの際は、ぜひお立ち寄りください。
前回までで、ホームページ・ビルダーでWebサイトを制作する準備が整いました。
では、いざホームページ・ビルダーで作業というわけではなく、まずは、どんなWebサイトを作るのか決めなければいけません。
必要なページを考えて、カテゴリーごとに分けていきます。
本来であれば、カードソートなどして時間をかけたいとことですが、このシリーズでは、とにかくホームページ・ビルダーでWebサイトを制作するのが目的ですので、いろいろな高校のWebサイトを参考にCacooを使ってサイトマップを作ってみました。
だいぶ省略していますが、基本的な学校のWebサイトの構成にはなっているかと思います。
このサイトマップをもとに、ワイヤーフレームを制作します。
こちらも独りで作っちゃいますので、ワイヤーフレームとレイアウトラフも兼ねて、レイアウトを意識しながらCacooで作っていきます。
まずは、スマートフォン用のワイヤーフレーム。
更新のしやすさを考えて、レスポンシブWebデザイン（※一つのHTMLでPC用とスマホ用で見せ方を変える）を採用します。
スマートフォンでWebサイトを利用する場合、どんな場面、どんな人が、何を求めてアクセスするのかなども考えて必要なものを配置しました。
トップページに地図を置いてあるのも、来校途中での用途を考えてのことです。
続けて、PCサイト用のワイヤーフレームを書き出します。
画面の大きさが限られているスマホサイトから考えることで、コンテンツの重要度やユーザーの動線などが整理しやすくなります。
広い画面であるPCからコンテンツの配置などを考えてしまうと、後からスマホサイトを制作する場合に苦労します。
やはり利用する年齢層を考えるとスマートフォンからのアクセスが多いと考えられますので、今はスマートフォンを重要視して制作していきます。
一番悩んだのが学校のWebサイトでよく見かける「在校生」「保護者」「卒業生」などのアクセスした人でカテゴリー分けするリンクが必要かどうかでした。
結果的に「卒業生」必要としているコンテンツは区別ができると考えましたが「在校生」「保護者」が必要としているコンテンツの境界はとても曖昧だと感じましたので「卒業生の皆様へ」というカテゴリーだけ用意しました。
各学校によって、コンテンツの違いは出てきますので、この段階で取捨選択し設計をしておきます。
今回はなるべくいろいろな学校のベースとなるような汎用性を考えて設計していきます。
また、今回はブログで紹介しようと考えてましたので、Cacooでワイヤーフレームなどを制作しましたが手描きでも、もちろんOKです。
手軽に、ささっと考えながら描けるのでおすすめです。
全ページは完成していませんが、とりあえず主要ページの構成を考えて、ホームページ・ビルダーの作業に進みたいと思います。
昨年、リニューアルされた愛工大名電のWebサイトです。
ナビゲーションメニューが整理されており、特色でもある強豪ぞろいの部活動もメニューで目立つように配置されています。
レイアウトもホワイトスペースを多くとり、ボタンを大きく置くことでページ遷移がわかりやすくなっています。
ただ、スマートフォンサイト対応がされていませんので、スマホで使うときにボタンが押しづらいです。
普通に考えると、メインナビゲーションの項目はこのようになるんじゃないでしょうか。
私学ではFacebookやTwitterなどSNSを活用する高校が多いのですが、修文女子高等学校は若者中心にブームのInstagramも活用して、学校の様子を更新しています。
入学後の自分をイメージさせることができるような、卒業生インタビュー、先生へのQ&Aなどコンテンツも充実しています。
ただ、NEWSの記事をクリックすると別タグが開き、ロゴマークを押してもTOPページに戻れない仕様はちょっと戸惑います。
レスポンシブWebデザインを採用しており、スマートフォンでの閲覧も見やすくできています。
学科が多いためか、情報量が多い印象ですが、順を追えばどこに何があるのか、目的の項目にたどり着きますので、わかりやすく整理されています。
スマートフォン用のWebサイトも用意されており、アクセスなど必要な情報はスマホでも閲覧することができます。
ただ、利用者は意外とPCよりもスマートフォンのほうが、ちょっとした分量の文章は読まれているという話もあり、PC版へ遷移させるのはもったいないかなとも思います。
情報が網羅されていますので、高校ではどういったことをWebサイトに表示させたいのか、表示するべきなのか参考にさせてもらいました。
東京にある三田国際学園中学校・高等学校のWebサイトです。
幾何学形をモチーフにしたビジュアルが今っぽいですね。
スマートフォンにもレスポンシブWebデザインで対応されています。中高一貫校ですが、必要最低限のコンテンツで構成されています。
大学のサイトなどでは、活用されている動画コンテンツもふんだんに利用されており、動画を利用することで、学校生活がイメージしやすいですね。
全国的に公立高校のWebサイトは、学校の先生がひと昔前に頑張って作ったんだろうなと思われる物が少なくありません。
ただ島根県の公立高校ではWeb制作会社が制作したWebサイトが複数みられ、その中でもこの津和野高校のWebサイトは、個性的なデザインとなっています。
TOPページでは、イメージ動画を背景に流し、デザイン化された「ツコウ」をキーワードにシングルカラムレイアウトでコンテンツへのリンクを表示していきます。
レスポンシブWebデザインでスマートフォンに対応され、更新にはWordPressが利用されています。
ただ、現在つながらず、白い画面になってしまうページがあります。※修正されていました20160226
いろいろ調べていくと、自治体によっては、教育機関向けCMSなどが利用されている学校のWebサイトもあります。
機会があれば、触ってみたいと思います。
Webデザイン学科2年間の集大成「卒業研究制作展2015」が無事終了しました。Webデザイン学科2年生の作品は地下のラウンジにて展示しました。本年も先生方、企業の方々にお越しいただきありがとうございました。
今年もざっとダイジェストで作品をご紹介します。
とにかく“うざい”カルタだそうです。来場者で知らない者同士が楽しんでカルタをしていました。
アクリル板を使って、手のひらに映像を投影します。モニターを使っているので、光が弱く、遮光ボックスを手作りしています。
シューティングゲーム。enchant.jsで作られています。
実際に今年の成人式で着用した、手縫いの着物。隣は高校時代に制作したドレスだそうです。もはや何を作っている学科かわかりませんが、Webサイトももちろん制作しています。
よけるゲーム、定番化してきていますが、かなり難易度が高いです。
カードに自分の好みの消しゴムスタンプを押して、となりの紙刺繍コーナーでデコレーションできるブース。
こちらが消しゴムスタンプの紹介Webサイト。ゴムスタンプに利用されたオリジナルフォントもこちらからダウンロードできます。
紙刺繍の紹介サイト。
女性らしくお肌のお手入れ、基礎化粧品を紹介するWebサイト。趣味と勉強を兼ねた卒業制作です。
毎年、女の子は手作りのアナログ作品を卒業制作で作る傾向にあるのですが、今年はさらに体験できる作品が多かったようです。平日のお忙しい中、ご来場いただきありがとうございました。作品の一部は、来週から開催されます、トライデントコンピュータ専門学校Webデザイン学科1年生進級展「うぇ～～～～～～～ぶ2016」でも展示予定ですので、ぜひお越しください。
業界研究授業の本年度最後の特別講義は、バイドゥ株式会社の矢野りんさんにお越しいただき、「サービスデザインとお仕事のお話」と題して講義をしていただきました。
矢野さんは、バイドゥでスマートフォンの日本語キーボードアプリ「Simeji」のデザインと運用を統括されています。
昨年、テレビCMも放映されましたね。このCM制作の話なども、聞かせていただきました。
そんな矢野さんが、現在どんなチームメンバーで働いているのか、また実際、デザイン業務がどのような流れでおこなわれているのか、実際のWebサービスのUIを基に解説していただきました。
MAU （Monthly Active User）やDAU（Daily Active User）、Retention Rate （定着率）などの数値を分析して、サービスの価値が上げる設計を考えます。
競合がいない場合は、スピードが大事です。デザインパターンを利用して、とにかくそのサービスを公開します。競合が多い場合は、競合相手の設計を参考にしつつ、＋アルファを考えてUIを設計していきます。
運用が始まったら、そのUIが果たして狙った結果が出ているのか、ユーザーインタビューやUIのタップ率調査、PV / 離脱率調査など、定量調査・定性調査から判断していきます。
スワイプさせるコンテンツなど場合によってはスワイプあり、スワイプなしのUIを制作し、A／Bテストを行います。
デザインセオリーに騙されず、ユーザーの判断で決めていくことが重要です。学生から「デザインセオリーの使い所は？」というの質問には「最初に作るとき」とお答えいただきました。
後半は、学生ひとりひとりに「仕事でやりたくないこと」というお題で3つ考えてもらい、その意見に対して矢野さんが深掘りしていくという、ワークショップを行いました。やっぱりというか、なるほどというか「セールス・営業の仕事」「ライン作業」の仕事が嫌だという学生が多かったです。
毎年、お話いただく仕事の内容が変わってきているので、色々と勉強になります。今年の春にも名古屋でお話する機会があるそうですので、楽しみにしております。ありがとうございました。
Web業界には、様々な職種があります。今回は、クリエイティブがすごいと世界が注目しているデジタルエージェンシーFICCからプロデューサーの堀尾真衣さんと取締役の平野健太郎さんにお越しいただき、プロデューサーの仕事について、特別講義をしていただきました。
堀尾さんは、トライデントコンピュータ専門学校の卒業生で、Webデザイン学科の1期生でした。このウェブDeBLOGの初期にも度々登場しています。卒業後、FICCに就職し、現在プロデューサーとして、さまざまなグローバル企業のデジタルマーケティング施策を担当しています。
まずは、勤めているFICCの説明をクライアント→広告代理店→制作会社への、仕事依頼の流れをホワイトボードに書いて、解説していただきました。クライアントと直接、取引をして、企業のブランディングなどデジタルプロモーションをお手伝いしています。
FICCさんでは、大まかにプロデューサーチーム、ディレクターチーム、制作チームと別れています。プロデューサーの仕事は、主に
となります。今回は、企画／提案の部分を中心に話していただきました。
まずは、クライアントヒアリング（クライアントに課題と思っている場所を聞き出す。）をし、目的を見極めユーザに何をして欲しいのか明確にすることから始まります。
リサーチフェーズでは、ターゲットユーザのインサイト（思考と行動の因果関係）を明確化します。そのために、Twitterやレビューを検索し、インターネット上に存在する、レビューだったり口コミなどとことん集め考えていきます。
根拠のないターゲットの思い込みが最大の失敗の素となります。
集めた情報から、ブランドが思われていること、他の競合にはできないこと、ユーザが求めていて提供できる範囲のものから強みを見つけていきます。
そして、ペルソナを作成していきます。
SNSなどでレビューしている人を集め、年齢、性別、学歴など関係しているものもあれば、関係のない好きなもの、願望、課題、価値観を収集し、ペルソナとしてまとめます。
いま思っていること、不満に思っていること、嬉しいと思えること、課題などをだす。提供したい製品もからめて、それぞれに共通するデモグラフィック、行動（購買行動）、嗜好、課題、願望、価値観から、一人称の文章で、一人の人物像を描く「I am Stertement」という手法を用いてコアインサイト（ペルソナに対して提供できるもの、ニーズ）と強みをつなげるコミュニケーションをキャッチコピーとして固めていきます。
つづけて、ターゲットユーザが「いつ、どこで、どのような気持ちで、何に接触しているか」などタッチポインを調べ、ユーザーの行動データやアンケート調査結果などから、メディア接触の視点でターゲットの一日を描きます。DILO（Day in the Life of）という手法で、いつ、どれくらいの時間、何の目的で、どのメディアと接触しているかを、時系列で書き出します。
DILOをもとに、ユーザがいる場所でコンテンツを展開するか、コンテンツまでにお客さんを引っ張ってくるか、または他の方法か決めます。
さらに競合と比較し、競合にはないもの、自社が持っているいいところ、ユーザのニーズから製品の強みを割り出します。
ここまでが、リサーチのフェーズになります。根拠のないターゲットの思い込みが最大の失敗の素となるため、さまざまな手法を利用して、ターゲットユーザのコアインサイトとブランドとのコミュニケーションを検証します。その後、
とフェーズが続いていきます。よく聞くプロデューサーという職種ですが、具体的に何をしているのかが、なんとなくわかってきました。詳しい解説は、FICCさんのブログにも細かく掲載されています。
参照：デジタルの役割を明確にするパーセプションフローモデリング | BLOG | FICC
Webデザイン学科の卒業生ということで、就職活動を控えた1年生に学生時代の話なども紹介してくれました。
まずは、「難しいところから攻めていこう」と考えて、グローバルブランド企業と直接関わり、高い評価を得ているFICCを受験しました。最初の面接のとき、本日一緒にお越しいただいた平野健太郎さんの話に感銘して「FICCに入社したい」と強く思ったそうです。その後、インターンシップを経由して内定をいただきました。
英語を勉強しておけばよかったなと思っている。技術だったり情報だったりするものは、最初は英語の場合が多く、慣れておく、作品制作など目的意識を持って作ると良いなど、今後の学生生活へのアドバイスもしてくれました。東京の第一線の企業で仕事をする意義なんかも、学生時代の東京の印象なども交え話していただいました。
ここで、FICCさんの採用担当でもあり、さまざまな企業の採用担当者と人材確保、育成なども熟知されている平野健太郎さんからも、「読める読めないじゃなく見ようとする意識が大切で、技術などのスキルは教えられるが、探究心は教えられない。」とフォローされ、また学生のどこに注目しているのか、また、堀尾さんのどこが採用に結びついたのか、さらにFICC設立、初期の話、なぜ代理店経由の仕事をしないのかなど、ワクワクする話に学生も興味津々で聞いていました。
1年生は、まだマーケティングの話を聞くことが少ないので、難しい専門用語などもありましたが、それでも今まで勉強した、IAやUXといった話に近い部分があり、Webサイトはただセンスの良いモノを作ることではなく、リサーチしてユーザーを見極めることが重要と理解することができたのではないでしょうか。ありがとうございました！
本年度より、1年生終了時にHTMLとCSSの理解度を判定するために、「Webクリエイター能力認定試験」を受験しています。Webクリエイター能力認定試験は、IT、プログラミング、Webなど約50級種のレベル別の認定試験を主催している株式会社サーティファイが開催しているWebクリエイターに必要とされる、Webサイト制作のデザイン知識およびWebページのコーディング能力を測定・評価する認定試験です。
2016年、年明けそうそうに、受験をしまして、先日結果が届きました。Webデザイン学科1年生12名、全員合格。なんと平均点が92％（全国平均80％）と高得点でした。おめでとうございます！
最初の模擬問題を問いてもらった時には、どうなるかと思いましたが、とりあえずは全員合格ということで、基礎的な知識とコーディングは理解できてきたということになります。今後、グループ制作、就職作品などより実践的な制作に入っていきます。頑張ってください。
ハートがなけりゃSNSじゃない！
