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

トライデントコンピュータ専門学校 Webデザイン学科の最新情報を紹介しています。学生へのインタビュー記事から学生作品の解説、Webデザイン・マークアップ・プログラミングの授業風景、プロジェクト発表会、名古屋のWeb制作会社情報、イベント参加レポートやWeb制作の技術解説などWeb制作に関連する記事を掲載しています。トライデントコンピュータ専門学校は、いま話題の名古屋駅からユニモール地下街を歩いて3分です。 

2016.01.29 [金] 「採用担当者の心に響く ポートフォリオアイデア帳」に掲載されました。

最終更新:2018.07.28学生作品

ボーンデジタルから2月3日発売の「採用担当者の心に響く ポートフォリオアイデア帳」の献本をいただきました。この本には、デザイン、イラスト、ゲーム、アニメ、Webのクリエイティブ業界各社に採用された新卒のポートフォリオの実例が紹介されています。

Webデザイン学科2年生の長屋さん(4月よりWeb制作会社勤務予定)のポートフォリオが掲載されました。

portfolio_book2016_02.jpg

この本は作品の紹介だけでなく、実際に採用した担当者が、そのポートフォリオのどこに魅力を感じたのか?何に注目したのか?などのインタビュー記事やポートフォリオ制作の手順なども紹介され、まさに採用担当者がグッとくるポイントがまとめられています。これから就職活動のためにポートフォリオを作ろうとしている学生にオススメです。

紹介されている、長屋さんのポートフォリオは現在も閲覧できます。
megumi's PORTFOLIO

portfolio_book2016_01.jpg

トライデントコンピュータ専門学校からは他にもCGスペシャリスト学科の学生が実際に就職活動に使用したポートフォリオが紹介されています。こちらは、体験入学やオープンキャンパスの体験イベントなどで実際に手にとってご覧いただけますので、クリエイティブ業界を目指している方は、ぜひ足を運んで見にきてください。

2016.01.27 [水] ホームページ・ビルダーで<head>内を記述していく

前回に引き続き、ホームページ・ビルダーのバージョン14を使って制作していきます。
最終的には学校、高校のWebサイトの制作を目指したいと思います。

homepagebuilder2_001.jpg
素材:PAKUTASO

前回、新規ページ制作でhtmlファイルができましたので、今回はそのファイルの<head>内をホームページ・ビルダーを使って記述していきたいと思います。

<meta>情報

ソースビューとページビューでは、上部のかんたんナビの表示が変わります。
ページビュー内をクリックしてカーソルを点滅させ、「SEO設定」>「ページのSEO設定」ボタンをクリックします。

homepagebuilder2_002.jpg

ページのSEO設定ダイアログが表示されますので、上から順番に記述していきます。

homepagebuilder2_003.jpg
ページタイトル
こちらには、Webページのタイトルを記述します。
河合塾学園 トライデント高等学校|名古屋市中村区」と記述します。
キーワード
Webサイトのキーワードを文字列に記述します。
ただ最近では、ほとんど検索結果に関係がないため、記述しないWebサイトもあります。
名古屋市 中村区 名古屋駅 Webデザイン学科」と記述します。
説明
検索結果画面にWebサイトの説明が表示されます。
何のWebサイトなのかわかりやすく書きます。「名古屋駅から徒歩5分。河合塾学園の仮想高等学校、トライデント高等学校のホームページです。Webデザインなどコンピュータ系の5学科。」と記述します。
検索対象
何かの理由で検索結果に表示させたくない時にチェックを入れますが、今回は必要ないでしょう。

続けて、その他のメタ情報を記述していきます。
ここまで書いても、ページビューには何も表示されません。

homepagebuilder2_004.jpg

ページの属性ボタンをクリックし、属性ダイアログを表示します。
「メタ情報」タブを選択すると、先ほど記述した、キーワード、説明のメタ情報が追加されています。
こちらにさらに、メタ情報を追加していきます。

homepagebuilder2_005.jpg

最初は、一番上の項目が選択されています。
このまま記述していくと、書き換えになってしまうので、クリアボタンを押して、フォームに何も表示されていない状態にします。

属性
「NAME」を選択します。
項目
右端の▼をクリックすると候補が出てきますので、[author]を選びます
authorは、制作者情報となります。
トライデントコンピュータ専門学校 Webデザイン学科」と記述しました。

「登録」ボタンを押すと、登録されます。

続けてhttp-equivの設定をしましょう。http-equivとは、情報をサーバーに伝えて正確に処理がなされるよう指定する属性です。クリアを押して白紙に戻します。

属性
「HTTP-EQUIV」を選択します。
項目
選択項目から[X-UA-Compatible]を選びます
ie=edge」と記述しました。
これで、Internet Explorlerで閲覧する場合、そのブラウザの最新の表示設定で閲覧させることができます。
下位互換モードだと表示が崩れたりする場合があります。

そして、スマートフォン対応に必須のviewport(ビューポート)を記述していきます。
さらに、表の右下にある▲▼は、選択することでメタ情報の順番を変更することができます。

homepagebuilder2_007.jpg
属性
「NAME」を選択します。
項目
選択項目にはありませんので、直接「viewport」と記述します
width=device-width, initial-scale=1」と記述します。
今は、この値で大丈夫です。値についての詳しい解説は、Google先生にお尋ねください。

最後に前回記述しなかった文字コード<meta charset="UTF-8">をソースビューに直接記述します。
HTML5では、<meta charset="UTF-8">と簡単に表記できます。
ただホームページ・ビルダー14では、構文エラーになってしまいますが、気にせず進めましょう。
ソースビューに

<!DOCTYPE html>
<html lang="ja">
<head>







河合塾学園 トライデント高等学校|名古屋市中村区
</head>
<body></body>
</html>

と表示されていれば、OKです。
ページの属性機能で追加できない、もしくは面倒な場合は、上記をソースビューにコピペして、書き換えれば自動的に追加されます。
ここで、随分作業をしましたので、ファイルを保存します。

htmlファイルを保存する

一番上のバー(かんたんナビバー)の「ページの保存」ボタンをクリックします。
新規ファイルですが、上書き保存もしくは名前を付けて保存のボタンが表示されますので、「上書き保存」ボタンをクリックします。

homepagebuilder2_008.jpg

デスクトップに新しく「trident」フォルダを作り、ファイル名をindex.htmlに書き換えて、保存ボタンを押します。

homepagebuilder2_009.jpg

続けて、サイトの設定も行います。
かんたんナビバーの「全体の確認」ボタンをクリックして、ダイアログを表示させ、[編集中のファイルをトップページにしたサイトを新規に作成します]のアイコンを選択し、「次へ」ボタンをクリックします。

homepagebuilder2_010.jpg

トップにするページを先ほど保存した「index.html」を選択して、「次へ」ボタンを押します。
構文エラーがでますが、気になるようであれば、ツールメニュー>オプション>一般タブ>HTML構文エラー時の動作を[重大なエラーのみ、修正ダイアログを開く]に変更しておきます。

homepagebuilder2_011.jpg

サイト名を決めます。
こちらは、Webサイトに表示されることはなく、後からでも、サイトメニュー>サイト一覧/設定から編集ができますので、見たら思い出すような、わかりやすい名前にしておきます。
「トライデント高校20160127」と日付を入れておきました。

homepagebuilder2_012.jpg

完了ボタンを押せば、サイトの設定終了です。

前回と今回で、とりあえずWebサイトを制作する準備ができました。
次からは、Webサイトを作り始められるといいな~。

ホームページ・ビルダー14でWebサイトを作るシリーズ過去記事

2016.01.25 [月] ホームページ・ビルダーでWebサイト制作

homepagebuilder1_001.jpg
素材:PAKUTASO

ホームページ・ビルダーはジャストシステムが開発・販売している、HTMLタグを知らなくてもWebページ及び、Webサイトを作成することができるWebオーサリングツールである(Wikipedia)。
ホームページ・ビルダーで制作されたWebサイトは、TABLEタグによるレイアウトやFLAMEタグが使用されるなど、Web標準では非推奨なHTMLの使い方がされるため、プロの現場では利用されていません。(※トライデントコンピュータ専門学校 Webデザイン学科でも使用していません。)

ただ、初心者向けのソフトとしての知名度や手軽さなどから、実際に利用されているWebサイトは数多くあり、ホームページ・ビルダーも毎年新しいバージョンが発表(Var.20・2015年10月発売)されます。
もし使い慣れているのであれば、ホームページ・ビルダーで、今風のWebサイトが作れたら余計なコストが掛からないので良いよねっていうことで、調べてみました。

homepagebuilder1_002.jpg

今回、使用する「ホームページ・ビルダー」はバージョン14。
2009年発売ということは、約5年前のソフトです。IBMのロゴが懐かしいです。
現在は、ATOKなどでお馴染みのジャストシステムが販売、開発をしています。
ホームページ・ビルダーは他のソフトと同じように、一度購入してまったら、自分の環境で動く限り使い続ける方が多いようです。
未だにバージョン7(2002年発売)などで更新されているようなWebサイトも見かけますので、あえて古いバージョンを使ってみます。

動作環境

主要な動作環境を公式サイトから調べてみました。

OS
Microsoft® Windows® 7, Windows Vista®, Windows XP, Windows 2000 Professional
CPU
Intel®Pentium®III以上を推奨
メモリ
256MB以上(512MB以上を推奨)
ハードディスク必要容量
最小構成:250MB以上、最大構成:600MB以上の空き容量が必要
画面サイズ
解像度 800×600、High Color以上(解像度1024×768以上を推奨)
サポート終了日
2016年3月31日

意外とまだ(2016年1月現在)サポート期間中なんですね。
また、Windows8, Windows10での利用もアップデートモジュールを利用することで対応(Windows8対応状況Windows10対応状況)しているようです。
Windows10でインストールしてみましたが、問題なく利用できています。
アップデートモジュールは、こちらにあります。(※サポート期間が過ぎるとダウンロードできなくなるかもしれません。)

さっそく、起動してみましょう

インストール、アップデートが終了したら、さっそく起動しています。
起動すると「ホームページ・ビルダーへようこそ」という画面が出てきます。
こちらで編集スタイルを選択します。

homepagebuilder1_003.jpg

この編集スタイルは、後からでも変更できますので、どれを選んでもいいです。
無難にスタンダードを選びました。

homepagebuilder1_004.jpg

スタンダート編集スタイルの画面は上の画像になります。
他の編集スタイルに変更したい場合は、表示メニュー>編集スタイルの切り替えを選んで、再度「ホームページ・ビルダーへようこそ」を表示して切り替えます。

homepagebuilder1_005.jpg

かんたん編集スタイル↓

homepagebuilder1_009.jpg
homepagebuilder1_010.jpg

エディターズ編集スタイルは上記のような画面になります。
ホームページ・ビルダーに慣れてから自分にあった表示スタイルを選択すればいいと思います。

初期設定を変更します

ホームページ・ビルダーには、初心者向けの機能として、自動的にHTMLを整形や修正してくれたりする機能があります。
しかし今では逆に迷惑な、非推奨のタグなどを入れたりしてくれますので、初期設定を変更してなるべく、今風の使い方ができるようにカスタマイズします。
初期設定を変更するには、ツールメニュー>オプションでダイアログを開きます。

homepagebuilder1_006.jpg homepagebuilder1_007.jpg

まずはオプションダイアログから、一般タブを選択し設定を変更していきます。

一般タブ

homepagebuilder1_008.jpg
HTMLソースを自動整形する
このチェックボックスにチェック マークを付けると、HTMLファイルを開いたときなど、ソースのインデントなどが自動整形されてしまいます。
上手に使えればと思ったのですが、閉じタグが無くなってしまうなど、色々と問題がありそうですので、外しておきます
HTML構文エラーの自動修正する
このチェックボックスはデフォルトでにチェックが入っています。
こちらも勝手に修正してしまうと思わぬエラーの原因になりますので、チェックを外します
HTML構文エラー時の動作
エラーしている時は通知がでるように[すべてのエラーを無視]ではなく、[すべてのエラーで、修正ダイアログを開く]もしくは [重大なエラーのみ、修正ダイアログを開く]に設定しておきます。
最初は[すべてのエラーで、修正ダイアログを開く]にしておきました。
ページ作成モード
デフォルトでは、[作成時に選択する]になっています。
こちらもで構わないのですが、基本的に利用するのは[標準モード]になりますので変更しておきましょう。
[どこでも配置モード]は、ホームページ・ビルダー上では見たままで、Webページの作成ができますが、今のようにブラウザの種類やスマートフォンなどデバイスが多様になっている現在、見る人によって見えなくなってしまうこともあります。
[標準モード]で利用するようにします。

編集タブ

要素を作成時の設定が出来るようになっています。

homepagebuilder1_011.jpg
表の属性
表(table)を作成するときの「空白セルに空白コードを自動挿入する」のチェックを外しておきます。

表示タブ

表示タブは、制作時に表示されるモノの設定ですね。
プレビューの表示モードが「Internet Explorer 8」というのが、ちょっと気になりますが、あと特に変更するところはありません。

homepagebuilder1_012.jpg

次のネットワークは、プロキシの設定がある環境で制作している場合に、FTPやファイルサーバーへの接続が必要な場合に設定します。
今回はローカルで制作しますので、特に設定は必要ないですね。

ファイルタブ

ファイルタブは、htmlファイルの初期設定になりますので、変更する箇所が多いです。

homepagebuilder1_013.jpg
ファイルオプション
出力漢字コードを[Unicode(UTF-8)]に変更します。
「新規ファイルを作成する場合のフォーマット」は、そのまま[HTML 4.0]を選択しておきます。
「DOCTYPEを出力する」にチェックを入れて、<!DOCTYPE html>に書き換えちゃいます。
これは、HTML5用のDOCTYPEです。今ならHTML5で良いですね。
さらに、「HTMLソースにGENERATORを組み込む」のチェックは外してもいいのですが、ホームページ・ビルダーの利用年数を考慮すると、どのバージョンで編集しているのかわかりやすいので、入れておいてもいいのではないでしょうか。
保存オプション
「バックアップファイルを作成する」「自動保存を行う」 「文字エンコードを META タグで指定する」 「基準スタイルシート言語をMETAタグで指定する」 のチェックを外します
「文字エンコードを METAタグで指定する」や 「基準スタイルシート言語をMETAタグで指定する」をチェックすると<meta>タグで情報が記述されるので、便利ですがHTML5の記述とはちょっと違うので、後から直接、記述し直します。
「LANG属性を指定する」 にチェックを入れます

ソース編集タブ

homepagebuilder1_014.jpg

こちらは、ソースを編集するときに利用する設定です。
とりあえず、色設定はチェックを入れておきます。

表示設定
ソースコードの表示サイズは12ptにしておきます(※デフォルトの9ptでも構いません。
最近、細かい文字が見えづらいです…)。
ソースの自動改行、行数表示にチェックを入れておきます。
ページ/ソースで分割して作業する場合、左右に表示するようにしました。
出力文字
「タグ」「属性」ともに[小文字]を選びます。
XHTMLからの流れがありますので、HTML5でも小文字で書くほうがいいでしょう。
文字下げ
インデントの設定です。
2文字か4文字、好みで大丈夫です。
コードアシスト
これも好みですが、タグを書くと同時に閉じタグも書いてくれる機能です。チェックしておきます。
スタイルシート
「ソース設定」ボタンを押すと、ダイアログが表示されます。
行数表示にチェックを入れて、「詳細設定」ボタンを押します。ショートハンドを使ったほうが作業しやすいので、「お勧め」ボタンを押します。
homepagebuilder1_015.jpg

ビジュアルサイト

展開レベルタブ
「エラーのあるページまで展開」のチェックを外します
チェックが入っているとファイルを開けなくなる時があるそうです。
homepagebuilder1_016.jpg

初期設定の変更はこのぐらいです。結構、変更しないといけないのですが、今回使用しているホームページ・ビルダーのバージョンを考えると仕方がないのかなとも思います。
「OK」ボタンを押して、設定が終わらせます。
スタンダード編集スタイルの画面であれば、上から2段目の「新規ページ」ボタンを押して、HTMLファイルを作成します。

homepagebuilder1_017.jpg

HTMLソースタグを選択して、ソースを表示させると下記のように記述されていればOKです。
タイトルや文字コードなどは、別途追加していきます。

<!DOCTYPE html>
<html lang="ja">
<head>


</head>
<body></body>
</html>

今後、Webサイトを制作していくのですが、なるべくホームページ・ビルダーの機能を使って作成していきたいと思います。
さて、どこまでできるのでしょうか(・・;)

2016.01.23 [土] 全員で「1年生進級展」の準備をしています。

現在、Webデザイン学科では、2月10日の卒業制作展と同時に、2月16日から名古屋市民ギャラリー矢田で開催する「1年生進級展」に向けての準備が着々と進められています。昨年に引き続き2回目の開催です。
今回は、クラス全員で準備しようということで、組織化をしたのですが、学生にとっては初めての経験ばかりで、いろいろと試行錯誤しながら進めています。
初日まで1ヶ月をきり、いいリズムになってきました(とはいえ、スケジュールは遅れ気味ですが…)ので、どのように準備しようとしているのかを紹介したいと思います。

kaigi_weeeeeeeb2016_002.jpg
素材:PAKUTASO

「企画・設営チーム」「デザインチーム」「エンジニアチーム」に分けました

1年生ですので、授業では個人制作になります。自分でWebサイトを設計し、デザインしてコーディングをします。それでも1年学んでくると、なんとなく得意・不得意などもでてきています。これからはグループ制作などで役割分担などもあるかと思いますので、予行演習ではないですが、今回はそれぞれ各チームに振り分けてみました。また各チームにはリーダーと副リーダーを決めてもらい、ふたりでチームをまとめてもらいます。

kaigi_weeeeeeeb2016_003.jpg

各チームではFacebookのグループを作成し、情報を共有します。LINEや中心者だけの話し合いだけで進めてしまうと方向性がブレます。少人数のチームですので、可能であれば全員で決めて、内容を必ずドキュメントに残して、後からメンバーのだれもが確認できるようにしておきました。
従来であれば、この各チームに講師が指示を出して制作を進めていきます。

上位組織「リーダー会」を設けました

せっかくイベントを開催するのであれば、準備から開催中の運営まですべてを学生に任せることで、いい経験の機会になるのではと考えました。そこで決定権をもつ「リーダー会」を設けて、各チームからの提案やアイデアをリーダー全員で話し合い、承認・決定する流れにしました。また各チームの懸念事項などをあげてもらい、問題になりそうなことがないか事前に把握して解決しておきます。

kaigi_weeeeeeeb2016_004.jpg

当初は、「こんなの考えたので」とか「問題があるので」など、必要があれば各リーダーの要望で「リーダー会」を招集するつもりでしたが、しばらくすると、重要な決定の情報共有ができてなかったり、各チーム間で不満がでてきてましたので、週に1回集まることにしました。
議事録をとり共有し、事案の承認、スケジュールの確認、状況の報告、懸念事項の報告などを行います。毎回、いろいろとモノ足りないこともありますが、週一で開催するようになって、ようやくリズムがでてきた感じです。

kaigi_weeeeeeeb2016_001.jpg
素材:PAKUTASO

今後のグループ制作のために

でもよく考えると、小学校、中学校、高校の授業内、生徒会、部活、文化祭などいままででイベントなどの運営をしてきているのではないかと思うのです。初めての事、誰もやったことのない事など、過去のそういった経験も活かせるのではと考えています。

学生のグループ制作では、全員同じ勉強をしていますので、役割は曖昧です。それでも担当を決めて行いますので、担当者間の意思の疎通ができていなかったり、一部の学生だけに負担が大きいなど、問題もでてきますので、コツコツ試行錯誤しながら頑張って欲しいと思います。

ということで苦労しながらも、今年もトライデントコンピュータ専門学校Webデザイン学科1年生進級展を開催します。来週からは、学生が各自のブログでリレーブログを公開していく予定です。Webデザイン学科Facebookページでも随時情報発信します。また、DMの配布や、Webサイトの公開も予定しておりますので、このブログでも紹介していきます。

トライデントコンピュータ専門学校Webデザイン学科1年生進級展
「うぇ~~~~~~~ぶ 2016」

◇日程
2016年2月16日(火)~2月21日(日)
10:00~18:00(※最終日のみ17:00閉館)
◇会場
名古屋市民ギャラリー矢田 第7展示室
https://www.bunka758.or.jp/scd19_top.html
◇Webサイト
http://trident-com.net/~tenji/2016/
◇Facebookページ
https://www.facebook.com/waaaaaaave2016/

現在、展示作品など、全員必死に制作中です。是非ともご来場ください。
当日は学生がご案内する予定です。

2016.01.19 [火] 業界研究「グロースハック」Kaizen Platform

最終更新:2016.05.04学校生活業界研究授業

数年前から「グロースハック」「グロースハッカー」という言葉を聞くようになりました。ただ定義は、はっきりとは決まっていないようですが、グロースとは「成長」という意味です。何を成長させるかというと「コンバージョンレート(率)」、サイトの目的に到達した割合を指します。こちらをハック(作っては壊し)して最大値へ成長させる仕事をする人が「グロースハッカー」となります。

しかし、こういったABテストはIT企業であれば、自社でシステムを作り検証できるのですが、なかなか一般の企業では難しいのが現状です。そういったグロースハックを一般企業に提供し、グルースハッカーへの窓口となるのが「Kaizen Platform」になります。

Kaizen Platform, Inc.
kaizenPlatformLogo.jpg

今回、Kaizen Platformから、カスタマーサクセスの斎藤さんと西川さんにお越しいただき、グロースハックの現状、グロースハッカーという仕事、実際の案件とコンバージョンレートの推移を解説していただきました。

2016kaizen_001.jpg

Kaizen PlatformのKaizenは、世界の製造現場では共通言語となっているトヨタ生産方式の“カイゼン”からきており、日本らしい言葉ということで社長さんが決められたそうです。

サービスの特徴としては、新規で作成するWebサイトではなく、すでに公開されているもので、改善する余地があるWebサイトなどを対象としています。
また、グロースハッカーとしての定義も、最終的にABテストを行うため、企画設計・デザイン・コーディング・解析まで幅広い職能を要すクリエイターとなります。とくにECサイトの購入ボタンや会員登録などコンバージョンがわかりやすいものだと、威力を発揮しそうです。さらに、ある程度のPV(ページビュー)も必要です。

講義内では、実際に改善前のデザインと改善後のデザインを比べて、どちらがコンバージョンレートが上か、どうしてそうなったのかなど、豊富な資料を使って解説いただき、シンプルだからとか、デザインが綺麗だからとか単純なことではなく、さまざま要素が組み合わされて決定されていることがわかりました。ついつい、ビジュアルだけで判断してしまいがちですが、このようなABテストで確認してみないとわからないことも多々あります。

Kaizen Platformには、だれでも参加でき、最終デザイン案と自分のデザインを比較したり、他のデザイナーののデザイン意図など、Webサイトの制作を一から学んでいる学生にとっては、見るだけでも勉強になるものばかりです。また自分で制作したデザインは、ポートフォリオにも載せられるので、うまく活用することでスキルや作品数アップに繋がります。さらにデザインが採用されれば報酬も手に入ります。今後、学生の自主制作の場として、色々と模索してみようと思います。
東京では雪が降って大変の中、お越しいただきありがとうございました。

2016.01.19 [火] 業界研究「Dmm.com」源 賢司さん

最終更新:2016.05.04学校生活業界研究授業

1月14日の業界研究授業はDmm.comからUXデザイナーの源さんにお越しいただき、Webデザイナーの仕事、UX(ユーザーエクスペリエンス)デザイナーの仕事、実際にDmm.comでのUXデザインの事例などを解説していただきました。

Dmm.comといえば、通販やレンタル、動画配信をはじめ最近では、ロボット、株、英会話など様々なサービスをWeb上で行っています。そういったサービスを新規で立ち上げたり、既存サービスを改善する場合、ユーザーを見極め、サービスを最適化するのがUXデザイナーのお仕事です。

2016Dmm_002.jpg

Webデザイナーは、Webサイト・アプリのUIをデザインして、場合によってはコーディングまで行います。デザインといっても動線を考えたり、ページ遷移、ユーザビリティを考慮することは必然となります。Dmm.comさんでは、グラフィックデザイン、コーディングそしてミーティングが重要なWebデザイナーの役割ということです。
このデザイナーのスキルにエンジニア、アナリスト、リサーチャー、プランナーなどのプラスアルファの能力を手に入れると、さらに必要とされる人材になれるのですが、かなりレアキャラです。若い時代には色々なものに興味を持ちチャレンジする事が重要ということです。

2016Dmm_001.jpg

そしてUXデザイナーは、ユーザー中心に、ペルソナ、シナリオ、カスタマージャーニーマップなどを利用してサービスの基本戦略や要件定義を制作していきます。

また、混同しがちなユーザビリティとユーザーエクスペリエンスの違い、UI/UXの矛盾さなどわかりやすく解説していただきました。
さらに簡単なワークショップではトラインデントコンピュータ専門学校のWebサイトから内定者のコメント記事をさがすためのアクティビティシナリオを書いたのですが、インタラクション用語を使わないというルールに四苦八苦してしていました。インタラクション用語とはクリック、ドラッグなどの操作用語、UI用語になります。1年も勉強していると知らず知らずに、使う言葉が専門化されていますね。

最後に、実際にUXデザインの手法を使ってデザインされたUIのBefore/Afterを解説していただきました。ファーストビュー内の情報もユーザーの用途によって違ってくるという事例でこちらもわかりやすかったです。

UXはなかなか目に見えないものを扱うだけに、理解しづらい部分もありますが、形にする前にちょっと意識して制作するといいのではないでしょうか。
貴重な資料とともにわかりやすい解説ありがとうございました。

2016.01.19 [火] 後期業界研究「ふわっと 岡田陽一さん」

最終更新:2016.05.04学校生活業界研究授業

いよいよ2016年ですね。後期も残り少なくなってきましたがWebデザイン学科では「業界研究」授業が目白押しです。今年最初は、株式会社ふわっとの岡田さんにお越しいただき「Webサイトで「使える写真」を自分で撮るためのノウハウ」と題して1月8日に講義をしていただきました。

20160kada_001.jpg

Webサイト制作では、写真は必ずと言っていいほど利用します。その写真はプロのフォトグラファーが撮影したものであれば、その制作を考慮した写真が利用できますが、そういった制作ばかりではありません。プロの現場でもそうなのですから、学生が制作する場合はなおさらです。
そういった場合、無料の素材集から利用するのが手軽ですが、

  • ブランドイメージが下がる
  • オリジナリティが無い
  • 実態が見えない
  • 信頼感が無くなる
  • 時間・コストが高くつく

などの問題点があることを理解して使用しなければなりません。
自分の作品に合う素材を探すだけでも時間がかかってしまうでしょう。その時間をもっとクリエイティブな時間に使うことができれば更にいいものができるはずです。であれば、自分で撮影してしまうのも選択肢のひとつです。
「撮影をしよう!」と思った時、必要な機材、撮影の知識を具体的な事例をもとに順番に講義していただきました。クラス内では趣味でカメラで撮影をしている学生もいます。
それでも、冬休みの撮影課題では、ただ撮っているスナップ作品が多かったので、これからは意識した写真を大いに制作に生かしてもらえればと思います。

今回のお話の内容は、昨年の10月に発刊された「Web制作のための撮影から管理、レタッチまでデザイナー&ディレクターが写真を上手に撮る本」に詳しく書かれています。初歩から解説されていますので、カメラは持ってるけど仕事には使ったことがなかった方などには特にお勧めです。

20160kada_002.jpg

Webデザイン学科にある一冊に、記念にサインをいただきました!
新年最初の業界研究授業ありがとうございました。

2016.01.01 [金] 新年あけましておめでとうございます!

最終更新:2016.05.04お知らせ

新年あけましておめでとうございます。
2016年もよろしくお願いいたします!

kingashinnen2016.jpg
検索フォーム
#NoHeartNoSNS

ハートがなけりゃSNSじゃない!

プロフィール

担当:Webデザイン学科

名古屋駅から歩いて6分、トライデントコンピュータ専門学校のWebデザイン学科を紹介します。

トライデントロゴ

質問などはLINEでどうぞ。

Instagram
Webデザイン学科実績
〈プレゼン〉
WCAN 2016 Springに参加してきました。
WCAN 2015 Winterに参加しました。
建設業入職者増加プロジェクトの発表会に参加
WCAN 2015 Summerに参加してきました。
WCAN 2013 Winterに参加
WCAN(秋)に参加しました。
無事、発表が終わりました【WordFes Nagoya 2013】
WCAN 2013 Summerに参加してきました。
WCAN 2011 Winter LT&LOGO
学生がライトニングトークで話しました。
〈進級展〉
2021年度1年生「進級制作展」終了しました。
2020年度 1年生進級制作展(オンライン)終了しました。
2019年度 1年生進級制作展終了しました。
1年生進級展2018「線の群生」終了しました。
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
〈コンテスト〉
第5回「専門学校HTML5作品アワード」入選
第4回専門学校HTML5作品アワード入賞2つ!
信州未来アプリコンテスト0 [ゼロ] 2020 NTTドコモ長野支店賞受賞!
第3回専門学校HTML5作品アワード入賞!
信州未来アプリコンテスト0 [ゼロ] 2019 KDDI賞受賞!
第5回 ソレコン☆ポスコン特別賞受賞
「第1回 専門学校 HTML5作品アワード」技術賞を受賞しました!
NCF2017でグランプリを受賞しました!
信州アプリコンテスト0 [ゼロ] KDDI賞受賞!
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
〈Webサイト制作〉
ニシヤマナガヤ内「未完美術館」Webサイト公開
ミス・ユニバース・ジャパン岐阜大会公式Webサイトを作成しました。
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
〈技能五輪全国大会〉
第56回技能五輪全国大会(ウェブデザイン職種)敢闘賞受賞!
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
〈若年者ものづくり競技大会〉
第16回若年者ものづくり競技大会 敢闘賞受賞!
第14回若年者ものづくり競技大会
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種Webサイト若年者ものづくり競技大会ウェブデザインポートフォリオ名古屋ECCコンピュータ専門学校2013映画学生ブログJavaScriptWebデザイン1年生進級展2009WinterWordPressWebサイト制作卒展CSS技能五輪全国大会卒業制作展2011アクアリングかっぱ商店街オープンキャンパス入学式合同企業展礒田優WordpressNagoya矢野りんWeba-blogライトニングトーク2014cms石黒雄介閉館日アクセス解析Summerウェブデザイン技能競技大会体験入学面白法人カヤック就職活動CGイラスト学科若年者ものづくり大会Web制作会社夏季閉館日Autumn卒業制作夏休み瀬川大勝ホームページ・ビルダーテンプレート作成HCDプレゼンテーション大阪2010ウェブデザイン技能競技会第48回技能五輪全国大会inminiAdobeココストアJapan2012FlashHTML5jQuery佐藤歩杉本拓也学生インタビューフォトアルバム東京研修進級制作展html5Webアプリ2015名古屋駅あいちカレーラーメンコンテストモリサワGIO田中睦翔IIJ上村水月99eagleアンティー・ファクトリーSpringBananaAd企業訪問専門学校CentOSプロジェクト卒業研究制作展COMMUNICATIONNEXTラーメン学生マールCSS3ウェブデザイン技能検定ブログパーツ水野裕太情報デザインフォーラムGoogle愛知県人間中心設計情報デザインWebワークショップセントレア北濱大輔エイチーム株式会社スタメン2018鈴木優太グリッドレイアウト冬休みあけましておめでとう2020gifアニメYearNewHappydisplay:grid新年Yahoo!Japan林田実樹WebデザインギャラリーGridLayoutUX成田篤紀Webクリエイター能力認定試験制作合宿水野怜美トライデント祭りサイバーエージェント産学協同堀尾真衣PluginforAnalyticsビジュアルエディタメ~テレWEBサイト制作者のためのHCDの理解in名古屋名商連会社訪問トライデント中日ドラゴンズナゴヤドーム戸田芳裕知多みるくCSSNiteBoxLike岩手県塚本碧イラストマップレイアウト作品集ウェブアクセシビリティ真鍋大度FICCコミュニケーションデザインワークショップ名古屋市科学館阿部淳也ポートフォリオサイト敢闘賞静岡ゴールデンウィークCMSDTPWORLD情報デザイン基礎Webリテラシーアサココ!ディプロス導入授業WordCampStoreApple2008WordFes鷹野雅弘茂森仙直グループ制作企業課題豊田市美術館F-siteウェブDeBLOGモンキーワークスワークショップカメラトライデント合同企業展写真結果発表iPhoneMarkup名古屋開府400年祭jbstyleカリキュラム空気人形SEO笈瀬本通り卒業式ECMAScript学習進級展ES6ES20152017出張講座株式会社LIGドラマ初期設定謹賀新年熊谷佳紀サーティファイWebデザイナー沖縄Runstant久保怜也アプリコンテスト東京電子専門学校神戸電子専門学校2022鈴木英心中島優美2021たにぐちまこと後期集中授業松井友奈イークリエイト信州アプリコンテスト[ゼロ]日本総合ビジネス専門学校松本渚オンライン授業Zoom幕張メッセ桝田草一label要素form要素たこ焼きfieldset要素legend要素input要素愛知県選手団displayスマートフォン飯田淳介Advent5T(ファイヴティー)CalendarAWARD和みtextarea要素Forumcanvasフロントエンドエンジニアうぇーぶparticleマークアップエンジニアアップルップルoption要素1年生作品展まぼろしHTMLoutput要素長屋めぐみselect要素スマホアプリNTTドコモ東海放課後のプレアデスキルターズフェスティバル2011笈瀬本通商店街愛知県立芸術大学名古屋市中村区キルト展中部国際空港日本の四季GAINAXSUBARUSlimbox2Load卒業・修了制作展Lazy大西健太ウェブリテラシー協会JISFLV8341-3:2010XFLAVER3.0JAPANWORLDCUP3Magnum北岡弘至伊達千代バルサマンプロジェクションマッピング愛知淑徳大学田中稚妃呂みつけもの恵那市岩村DTPの勉強部屋ablogcmsぬいぐるみのラパンKtaistyleCustomSmilies絵文字卒業制作・研究発表会2011英国王のスピーチトライデントカレッジUntitled!!!!!!!!円JOY!map柴乃櫂人WEBサイト制作者のためのHCD(人間中心設計)の理解AndrioidITCIRCUSドラゴンゲートチタハン10名古屋グランパスポスターデザイン・コンペディションCODE名古屋クリエイターフットサル笈瀬本通広島弁iPhone4商店街金シャチ商店街名古屋メディアボンドアクセシビリティタロヲ細川太郎シナリオペルソナ1→10designグラフィクデザインTwitter中部国際空港株式会社CODEポスターデザイン・コンペティション小林信次増田悟ブラザー工業株式会社株式会社アクアリングGoogleAnalytics石井研二カメラワーク名古屋サイト改善研究会中級編商店サイト制作プチ・フレーズ三蔵みの治商店UltimateGA名駅経済新聞名チャリ愛知商業高校横浜デジタルアーツGAMEPARTYPerfumebyinspiredそこにいない。展あいちトリエンナーレ2013晴れやか嵐が如く第51回技能五輪全国大会Webデザイン演習Rhizomatiks田代豊佐藤ねじみんなのICTFacebookたこ焼きパーティ東京就職プレゼンThree.js木下健太郎さかなやフジ家55ジョルテKDDIHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダー最優秀賞10日でおぼえるLinuxサーバー入門教室サーバーF81教室トライデント合同企業説明会list-itemlist-style-type高橋雅人カレーラーメン麺やOK麺屋ココイチ芸術大学美術大学NTTドコモ東海支社NCF2013卒業展Web制作合宿MuseロゴマークメールマガジンOhanaゲーム大賞アマチュア部門静岡県ツインメッセ静岡docomoドコモ2011年度迎春東京ゲームショウ神戸マーサ・グレアム5月11日GoogleロゴGATEライアン・ウッドワードプラネタリウム神戸国際展示場鈴木FutureStation長野IllustratorSVGFacebookページ結果第50回画像をチェックボタンにする張山大祐JQueryベースキャンプ名古屋SHOWBloosumTeamイマジンカップNHNBloom*Block尾花大輔TOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会DRAGONデコクレ西田幸司国家検定インターネットスキル認定普及協会ライブペイントヱヴァンゲリヲン新劇場版:破ActionScript富岡聡学科旭食品サンプル製作所食品サンプル黒い太陽ウルトラ展ファルコム音楽フリー宣言音楽ゲーム日本ファルコム荒俣宏UNIQLOヤノベケンジカスタマイズセミナーCALENDARカナバングラフィックスウサビッチanimationescalatorアニメーションMozoramaモーション演習CG・イラストコンテストUNIQLOCKギレン総帥LPO第4回アックゼロヨン・アワード後期入賞CMS特集ソバットシアターコマ撮りアニメ電信柱エレミの恋学生参加アイディグラフィックスガンダムグラフィックデザイン今井佳子□□□switch山村浩二サムライTEXTURE中村勇吾佐藤可士和CS4DesignActionScript基礎HTML+CSS基礎造形基礎デッサンSakaeNightPHP愛知県美術館アンドリュー・ワイエスデザインデザイナーのためのプログラミング入門MAXCollegeFLEXFLASHプレゼン演習西村真里子BlogUTZOOMLabuatTokyo「ヤノベケンジ-ウルトラ」展ワークスコーポレーションGWDセキュリティGENOウィルスCOMPLETECHILDREN武豊町TAFF'09広告批評WCAN×CSSNiteアートアニメーションFINALADVENTVIIFANTASYナゴヤデザインウィーク2009是枝裕和監督夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナーSalsaWasIA2010キックオフセミナー浜松TAFFWCAN46福みつ餃子ThereThen箱根合宿森川眞行会社見学鎌倉横浜中華街新横浜ラーメン博物館AndNIKE慶華飯店武豊アニメーションフェスティバル名古屋おもてなし武将隊技能五輪予選unoplus松坂屋美術館スタジオジブリ・レイアウト展WEBサイト制作者のためのHCDの理解プロトコル分析YORKE.ビジュアルデベロップメント伊藤頼子知多半島プロ野球新世界道頓堀ナゴヤ武将都市求人大沢たかおポートピア名古屋フナ犬ネスカフェゴールドブレンド日本電子専門学校横浜デジタルアーツ専門学校KyotodotFesHCDプロセスブランディングwonderflFlash-Gamesマクロマリオネット映画のオープニング閉会式ゆるキャラAutuminカラーPHP勉強会大富豪スコアシート東京ゲームショウ2009人喰いの大鷲トリコITホワイトボックス世界のCMフェスティバルストリートビューJAPANインターネットクリエイティブアワードYahoo!マークアップ演習ごはんとFlashペルソナ/シナリオ法情報デザイン教育勉強会ヨウイチイラストコンテストおかだよういち浅野智3校合同発表会クリ博就職フェスタペルソナ&シナリオ法デュエル・マスターズ長谷川恭久教育勉強会ロゴ公募FITCCREAM#infoedu小野裕子スーパーエレメンツ山崎デザイン事務所コピーライティングIACodeply牧野史門株式会社サイバーエージェントあけおめ平成31年UIデザインツール株式会社MTG2020新卒線の群生Figmaメーカー・ブランドコーヒー用品第56回技能五輪全国大会srcsetsourcepictureEC事業cyma前川元成NextDoor斉藤洸貴企業見学新入生オリエンテーションコンテストソレコン☆ポスコン2019茜音茂森仙直落合祐介杉浦麻紀ライフスタイル髙橋株式会社アンティー・ファクトリーLIGCBCTBSわたし、定時に帰ります。STUDIO髙橋茜音PhotoshopCS6祐司沖縄県第56回堀川友章安藤志維Contentsof関口浩之フォントおじさん志維安藤NCF2017ミス・ユニバース・ジャパン岐阜大会TableTOCノートPC貸与尾鷲高校衣台高校梅澤朝樹夏休みの課題スクラップブックAWARDS出身高校D3.js堀川友章青山高校新城高校冨田伴成藤井英一出前授業東京ゲームショウ2018GOOculusVRカルタJIHYEHEO北川パーヤンWorld)toWWW(WelcomeWebデザインスペシャルデー期末テストホ・ジヘ韓国脆弱性なんと読む?信州アプリコンテストゼロ足立丈也、平子卓哉、増田隼也contents特別企画『謎解き~7つの学科の謎を解け~』山本智香子杉山知央後藤拓也2023@useSass第5回専門学校HTML5作品アワード2022年エンタメイロコトグッドパッチStudentReDesigner田口和磨TypeScript2021アカデミー賞穂刈謙亮原田ゆいノマドランド@import@mixinPhotoshopトライデントコンピュータ専門学校Webデザイン学科フ学生ポートフォリオドライブ・マイ・カーモリサワトライデントコンピュータ専門学校Webデザイ夏休み夏季閉館日2022安藤さん風呂谷さん株式会社アビリブあいのうたコーダ印刷CSS23年卒@includeHOPTERTECH2022アカデミー賞WebサイトマネーフォワードSCHOOL第4回専門学校HTML5作品アワード2021年ICS池田泰延MILKメンバーズマイクロインタラクションフロントエンド第3回専門学校HTML5作品アワード株式会社COTSOriginalTshirt.st進級制作三瓶エペフェンシングmarkereatスポーツアナリティクス株式会社LIGHTz2019年令和2年classes企業賞2020アカデミー賞未完美術館ニシヤマナガヤ中村享介海老江優太名古屋市名東区業界研究授業令和3年神谷友理恵松本健太Frontend株式会社メイクリーvwrememパラサイトvh信州未来アプリコンテスト小林健人小林隼大福田将也株式会社エイチーム山川綾那WF1でBLOGインターンシップスマートフォンサイトUI図鑑CSS3&jQueryで作る新入生2015年度森田霞HighlighterSyntaxCrayon名古屋駅麺通りNCF2014button要素datalist要素keygen要素optgroup要素第52回技能五輪全国大会オリエンタル新年のご挨拶親孝行麺の匠木村哲朗夏麺フェア松田洋樹3DCG東京コスモクリスマスCGスペシャリスト味仙岡田陽一FlexibleBoxFlexbox熊﨑彩第53回ScrollMagicScrollmagic八木智章竹中民男Velocity.jsWebアクセシビリティワクワク建設タウン建設経営者倶楽部アクセシビリティからはじめる、WebサイトのUXデザイtype属性紅茶専門店Liyn-anマカベン名古屋マークアップ勉強会tableテーブル熊野古道八鬼山大門坂那智の大滝本州最南端串本宇野剛志石原愛実備忘録parseFloat()parseInt()Designer栗山聡一concrete5ランチ中村健太道家陽介熊野三山和歌山中華そば青山敬司山田拓生加藤ひとみ西岡克真結団式アイチータアイテムカンパニーネイルサロンマウア授業AnimationAO岩出本店丸田屋丸高アロチ本家スパルタキャンプ柏木祥太特別授業青空学区名古屋市営地下鉄Dmm.comUXデザインMonaca学生作品集ジムナストコロン日清食品グループ情報系学園祭いな世驛麺通り再進学タカガールサイト水曜日のカンパネラ駅麺通り涼麺jsdo.itPlunkerクイズIndependenceプラネタリアンResurgenceDay:醐りょうインスタグラム学校ProxyWCAN2017Springv4.0.1ターミナル佐藤洋介鈴木雄太スタジオディテイルズ服部友厚SyntaxHighlighterお母さんの二度見展美大芸大料理InstagramNodeListHTMLCollectionマイクロソフトWebプログラミング初級講座appendChild()JSFiddleJSBinワイヤーフレーム仕事UIバイドゥうぇ~~~~~~~ぶウェブアートデザイナー学位出席率職業実践専門課程レスポンシブWebデザイン平野健太郎ポートフォリオアイデア帳PlatformKaizenアクティビティシナリオ源賢司グロースハックグロースハッカー採用担当者の心に響く高校14専門士合同制作合宿カークスヴィルIA/UXプラクティス平野秀幸坂本貴史沼田啓助河地芳明CodePenプログラムクイズAO入試制作実績津田直明Web制作のおしごと懇親会合宿合同制作WebディレクターWebプログラマー2016原一浩坂本邦夫google

メールフォーム

名前:
メールアドレス:
件名:
本文:

トライデントコンピュータ専門学校
教務課のびのび日記
オフィス川口
Pagetop