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

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

2019.01.31 [木] 佐藤歩さん、桝田草一さん[株式会社サイバーエージェント](業界研究2018)

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

後期の授業も残りわずかとなりました。
本年度最後の「業界研究」授業は、株式会社サイバーエージェントより、フロントエンドデベロッパーの佐藤歩さんと桝田草一さんにお越しいただき、「ウェブフロントエンドエンジニア」「ウェブアクセシビリティ」をテーマにお話しいただきました。

cyberagent2018_001.jpg

株式会社サイバーエージェントについて

cyberagent2018_logo.jpg

サイバーエージェントは、「21世紀を代表する会社を創る」というビジョンのもと、AbemaTVをはじめとした“メディア事業”、と最近ではAIを取り入れた広告配信なども手がける”インターネット広告事業”、戦国炎舞など国内最大級の規模を誇る“ゲーム事業”と、インターネットに関わる様々な事業に関わっています。
従業員数は約5,000人で、日本でも大きなIT企業のひとつです。

cyberagent2018_007.jpg

若手の挑戦を歓迎している社風や、風通しの良い職場環境など、お二人が携わっている“メディア事業”での、プロジェクトの規模や、実際に開発で利用しているフレームワーク、技術的な話も交えて、より具体的に話をしていただきました。
今年の4月には、東京・渋谷の「Abema Towers」「渋谷スクランブルスクエア」への引っ越しも決まっていて、ますます各事業を密接につないだ開発を展開していくそうです。

ウェブフロントエンドエンジニアについて

前回、佐藤さんにお越しいただいた時には、たっぷりとフロントエンドエンジニアの技術的なスキルを話していただきましたが、今回は世の中にはどのようなフロントエンドエンジニアがいるのか、採用や新人教育にも携わっている立場から、お話しいただきました。

cyberagent2018_004.jpg

フロントエンドエンジニアのベースとなる職域が

  • コンテンツ、UI 開発
  • Web 技術の活用
  • フロントエンド設計
です。
ここに加えて、ビジュアルデザインやインタラクションなどにも携わる「デザイナー寄りのフロントエンド」やインフラ設計、サーバー開発など「よりエンジニアよりのフロントエンド」、要件定義、仕様作成、開発ディレクションもする「ディレクター寄りのフロントエンド」など職場や個人によって守備範囲が異なります。

さらに、クライアントやビジネスについてなど様々な領域の方との調整も多く、一概にフロントエンドエンジニアを定義するのは難しいのですが、制作物の品質を上げ、UIを通じて最終的な価値とユーザーの接点を担う立場といえます。
ユーザーに提供する価値を最大化する、アウトプットの品質として

  • アクセシビリティ
  • パフォーマンス
  • セキュリティ(プライバシー)
をあげられていました。

続いて、価値を最大化するために必要なアクセシビリティについて、桝田さんにお話しいただきました。

ウェブアクセシビリティについて

アクセシビリティ(accessibility)とはaccess + ability = アクセス可能性と直訳できます。このアクセスできる(=アクセス可能性)は、具体的にどういったことのなのかというと、

  • 知覚できる
  • 操作できる
  • 理解できる
  • 壊れない
「知覚できる」とは、そこに“ある”ということを知ることができること、「操作できる」とは、ちゃんと動くこと、「理解できる」とは、ユーザーが知っている言語や書き方で表示されていること、「壊れない」とは、閲覧する環境やデバイスなどで壊れないということです。

cyberagent2018_003.jpg

また、アクセシビリティは、「アベイラビリティ(availability)=耐久性、可用性」「ファインダビリティ(findability)=見つけやすさ、検索性」「ユーザビリティ(usability)=使いやすさ、使用性」などとも領域が重なり、はっきりと区別することはできません。

現在のウェブを取り巻く多様性を説明いただき、「○○しづらい」は、誰にでも起こりうることで「誰かの使いにくいは、誰かには使えない。」に通じ、「誰かの使えるは、誰かには使いやすい。」に通じる。
アクセシビリティは身障者やお年寄りだけを対象としてものではなく、すべての人に対して高い品質を提供することに繋がります。

では、具体的にWeb制作をする上で何に気をつけるべきなのでしょうか。

HTMLをきちんと書く

実は、しっかりHTMLの仕様書に則ってHTMLを書くだけで、アクセシビリティは対応できるそうです。具体的には、

  • 分かりやすい <title>
  • 見出しは <h1> ~ <h6>
  • リンクは <a href>、ボタンは <button>
  • <input>には<label>
  • <img>にはalt属性を書く

また、「色に頼らない」「動くものは止められる」など、デザインについても解説いただきました。

VoiceOverを使ってみよう

実際に、使いにくい環境でWebサイトはどのように利用されているのか、学生にも体験しました。
MacOSに搭載されているスクリーンリーダー「VoiceOver」を使って、トライデントコンピュータ専門学校のWebサイトで「Webデザイン学科」ページの情報を取得するのですが、キーボードのみの操作で、さらに音声をもとにリンクを進めなければならないため、四苦八苦していました。

cyberagent2018_008.jpgcyberagent2018_009.jpg

幸いにも、トライデントコンピュータ専門学校のWebサイトは、アクセシビリティ的にも、まだ考慮された構造になっているとのことで、タイトル要素 <h1>や<h2>などをたどる方法なども教えていただきました。

質疑応答

最後に、
Q:「マークアップを上達するためには?」
A:「日頃から、目に写る広告・飲食店のメニューなどを脳内マークアップしたりしてみる」など
1年生の質問にいくつかお答えいただきました。

cyberagent2018_005.jpg

新卒にかかわらず、「作る人として成長し続けるため、いま必要なこと」として、

  • 「ひとりで作り切る」経験をする=多種多様な職域と仕事をする場合、「全く知らない」と「少し知っている」の差は大きい。
  • 「インプットの習慣」を身に付ける=今学んでいることは、ほんの入り口にすぎない、継続的に学ぶ習慣を。
  • 「問いを立てる力」を鍛える=なにが課題か? なにを解決すべきか? 日常的に考えを繰り返す。
これから就職活動が始まる1年生にとっては、貴重なアドバイスをしただきました。

佐藤歩さん、桝田草一さん、年始の忙しい時期にお越しいただきありがとうございました。

関連記事
Comment







(編集・削除用)


管理者にだけ表示を許可
Trackback
https://tridentwebdesign.blog.fc2.com/tb.php/678-53f2365b
検索フォーム
Yahoo!基金
台風21号で被災されたみなさま、また、北海道を震源とする地震で被災されたみなさまに、心からお見舞い申し上げます。
プロフィール

担当: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
学生がライトニングトークで話しました。
<展示会>
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
「第1回 専門学校 HTML5作品アワード」技術賞を受賞しました!
NCF2017でグランプリを受賞しました!
信州アプリコンテスト0 [ゼロ] KDDI賞受賞!
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<Webサイト制作>
ミス・ユニバース・ジャパン岐阜大会公式Webサイトを作成しました。
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
<技能五輪全国大会>
第56回技能五輪全国大会(ウェブデザイン職種)敢闘賞受賞!
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
<若年者ものづくり競技大会>
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種ウェブデザインWebサイト映画若年者ものづくり競技大会2013名古屋ポートフォリオECCコンピュータ専門学校学生ブログWebデザイン2009WinterWebサイト制作技能五輪全国大会WordPressJavaScript20111年生進級展礒田優かっぱ商店街オープンキャンパス入学式卒業制作展2014ライトニングトークWebWordpresscmsNagoyaアクアリング矢野りんa-blog瀬川大勝面白法人カヤックCSS卒展石黒雄介Autumnアクセス解析卒業制作Summer若年者ものづくり大会CGイラスト学科テンプレート作成ホームページ・ビルダー2015あいちカレーラーメンコンテスト佐藤歩杉本拓也Web制作会社IIJhtml5GIO東京研修HTML5in2010大阪学生インタビューウェブデザイン技能競技会HCDFlash第48回技能五輪全国大会体験入学名古屋駅ココストアAdobeminiJapan合同企業展2012GoogleWebデザインギャラリー田中睦翔WebワークショップgifアニメCentOS情報デザイン水野裕太学生jQuery成田篤紀サイバーエージェントウェブデザイン技能検定2018Webクリエイター能力認定試験CSS3閉館日マール北濱大輔プレゼンテーションSpring愛知県ウェブデザイン技能競技大会GridLayoutセントレアdisplay:gridグリッドレイアウトプロジェクト企業訪問人間中心設計NEXTCOMMUNICATION専門学校ラーメンBananaAd99eagle上村水月ブログパーツ情報デザインフォーラムうぇーぶ1年生作品展スマホアプリNTTドコモ東海まぼろしFICCWEBサイト制作者のためのHCDの理解in名古屋particlecanvas水野怜美アンティー・ファクトリーselect要素output要素option要素textarea要素岩手県塚本碧真鍋大度長屋めぐみ名商連jbstyleナゴヤドーム林田実樹幕張メッセ鈴木優太ポートフォリオサイト阿部淳也熊谷佳紀名古屋市科学館F-siteコミュニケーションデザインワークショップ名古屋開府400年祭Markupマークアップエンジニア知多みるく2017戸田芳裕フロントエンドエンジニア株式会社LIGYahoo!Japan静岡input要素信州アプリコンテスト[ゼロ]結果発表進級展久保怜也写真iPhone鷹野雅弘UXWordFes茂森仙直カメラ5T(ファイヴティー)スマートフォン和みモンキーワークスAWARD学習ワークショップAdventCalendar制作合宿Forum作品集form要素BoxCMSカリキュラムlabel要素fieldset要素Like愛知県選手団legend要素たこ焼きトライデント空気人形トライデント合同企業展ウェブアクセシビリティアプリコンテストSEOイラストマップ笈瀬本通りレイアウト豊田市美術館中日ドラゴンズ産学協同初期設定ディプロス就職活動会社訪問謹賀新年企業課題Runstantアサココ!CSSNiteWebデザイナーメ~テレWebリテラシーサーティファイ卒業式フォトアルバム2008Plugin情報デザイン基礎DTPWORLDグループ制作堀尾真衣AppleビジュアルエディタStore出張講座導入授業夏季閉館日夏休みWordCampAnalyticsトライデント祭り沖縄WasSalsaThenThere増田悟CONTESTホ・ジヘ名駅経済新聞名チャリ愛知商業高校浜松GA中級編WWW(Welcome名古屋サイト改善研究会ウェブリテラシー協会第一回セミナー夢プロジェクト2009・成果報告会IA2010キックオフセミナーAnd01ウェブデザイン部門新横浜ラーメン博物館おかだよういち石井研二GoogleAnalyticsカメラワークデザインコンテスト浅野智UIデザインペルソナ/シナリオ法情報デザイン教育勉強会イラストコンテストデュエル・マスターズヨウイチツールウェブDeBLOGカンファレンスペルソナ&シナリオ法株式会社アクアリング横浜中華街中部国際空港株式会社箱根合宿餃子CODEポスターデザイン・コンペティション小林信次慶華飯店森川眞行会社見学クリ博就職フェスタブラザー工業株式会社3校合同発表会横浜デジタルアーツ専門学校鎌倉日本電子専門学校NIKEプチ・フレーズスタジオジブリ・レイアウト展iPhone4知多半島シナリオ松坂屋美術館北川パーヤンペルソナ広島弁柴乃櫂人World)フナ犬ポートピア名古屋プロ野球ITCIRCUS長谷川恭久unoplus桝田草一金シャチ商店街商店街YORKE.名古屋メディアボンドアクセシビリティサーバーIAタロヲビジュアルデベロップメント1→10design技能五輪予選WEBサイト制作者のためのHCDの理解細川太郎伊藤頼子プロトコル分析AndrioidWEBサイト制作者のためのHCD(人間中心設計)の理解武豊アニメーションフェスティバルTAFFみの治商店名古屋おもてなし武将隊Twitterナゴヤ武将都市WCAN46三蔵Ultimate韓国THE脆弱性なんと読む?牧野史門商店サイト制作グラフィクデザインポスターデザイン・コンペディションtoWEB名古屋グランパスネスカフェゴールドブレンドチタハン10Webデザインスペシャルデー笈瀬本通大沢たかお期末テストCODE道頓堀新世界名古屋クリエイターフットサル求人福みつAutuminLabuatTokyo沖縄県W+KTokyo(+CRUZ)UTZOOMBlog「ヤノベケンジ-ウルトラ」展GO第56回COMPLETECHILDRENアートアニメーション武豊町TAFF'09広告批評FINALFANTASYADVENTStefanVIIワークスコーポレーションGENOウィルスVRカルタCALENDARUNIQLO荒俣宏Artless東京ゲームショウ2018青山高校カスタマイズセミナー出前授業ファルコム音楽フリー宣言音楽山村浩二デコクレセキュリティOculusQubibiゲーム日本ファルコム□□□switchWCAN×CSSNite西村真里子EC事業cyma愛知県美術館アンドリュー・ワイエスPHPデザイナーのためのプログラミング入門第56回技能五輪全国大会MAXエイチームデザイン鳥取砂丘デザインのへそWebDirectionEast'08斉藤洸貴XRAYNextDoorSIGGRAPH鳥取VideopuppetryASIAsrcsetFLASHデッサンDesignpictureCS4Sagmeister造形基礎プレゼン演習ActionScript基礎HTML+CSS基礎サムライTEXTURENightCollegeFLEXHelveticasource中村勇吾佐藤可士和Sakae新城高校冨田伴成コーヒー用品カラーストリートビュー前川元成2008WinterブランディングdotFesメーカー・ブランドHCDプロセスJAPANインターネットクリエイティブアワードYahoo!人喰いの大鷲トリコ是枝裕和監督ナゴヤデザインウィーク2009横浜デジタルアーツ東京ゲームショウ2009大富豪スコアシート世界のCMフェスティバルITホワイトボックスPHP勉強会Kyotowonderflコピーライティング小野裕子#infoedu教育勉強会平成31年あけおめHPデザイン株式会社サイバーエージェント山崎デザイン事務所ロゴ公募FITC閉会式ゆるキャラFlash-Games映画のオープニングマクロマリオネットCREAMごはんとFlashマークアップ演習UNIQLOCKギレン総帥学科藤井英一イークリエイト旭食品サンプル製作所Nam富岡聡電信柱エレミの恋ウサビッチカナバングラフィックス食品サンプルActionScript黒い太陽ウルトラ展ヤノベケンジライブペイントインターネットスキル認定普及協会ヱヴァンゲリヲン新劇場版:破西田幸司国家検定コマ撮りアニメソバットシアターescalatorアニメーションMozorama後期animationモーション演習LPO第4回アックゼロヨン・アワードCG・イラストコンテスト丹下紘希入賞学生参加CMS特集JIHYEアイディグラフィックス今井佳子ガンダムHEOグラフィックデザインスーパーエレメンツMagnumAWARDSアクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.js建設経営者倶楽部ワクワク建設タウン東京コスモクリスマス熊﨑彩第53回ScrollMagicScrollmagicアップルップル森田霞HighlighterSyntax木村哲朗飯田淳介八木智章竹中民男夏麺フェア3DCG松田洋樹D3.js出身高校グロースハッカーグロースハックスクラップブック夏休みの課題採用担当者の心に響く高校14PlatformKaizenFlexibleBoxFlexbox味仙CGスペシャリスト岡田陽一Dmm.comアクティビティシナリオ源賢司UXデザインCrayon2015年度加藤ひとみ西岡克真AnimationAO山田拓生青山敬司授業アイチータ結団式特別授業青空学区丸高アロチ本家和歌山中華そば熊野三山丸田屋岩出本店名古屋市営地下鉄柏木祥太スパルタキャンプネイルサロンマウアアイテムカンパニーCSS3&jQueryで作る名古屋駅麺通りNCF2014新年のご挨拶スマートフォンサイトUI図鑑インターンシップ新入生WF1でBLOGTOC親孝行麺の匠keygen要素optgroup要素type属性紅茶専門店Liyn-andatalist要素button要素オリエンタル第52回技能五輪全国大会HTMLポートフォリオアイデア帳平野健太郎いな世驛麺通り再進学醐りょうインスタグラム芸大料理ドラマInstagram学園祭情報系日清食品グループタカガールサイト水曜日のカンパネラプラネタリアンジムナストコロン尾鷲高校Monaca衣台高校学生作品集美大NodeList佐藤洋介ターミナル学校Proxy服部友厚スタジオディテイルズ株式会社エイチーム山川綾那鈴木雄太WCAN2017Springv4.0.1マイクロソフトWebプログラミング初級講座appendChild()HTMLCollectionお母さんの二度見展ECMAScriptSyntaxHighlighterES2015ES6ResurgenceDay:合宿合同制作合同制作合宿専門士懇親会Web制作のおしごと坂本邦夫WebプログラマーWebディレクター学位出席率ノートPC貸与仕事UIバイドゥワイヤーフレームうぇ~~~~~~~ぶ職業実践専門課程レスポンシブWebデザインウェブアートデザイナー原一浩2016CodeplyPlunkerJSFiddleJSBinjsdo.it涼麺Independenceクイズ駅麺通りCodePenプログラムクイズ平野秀幸坂本貴史制作実績津田直明IA/UXプラクティスカークスヴィルAO入試河地芳明沼田啓助大門坂那智の大滝神戸国際展示場志維鈴木神戸安藤メールマガジンOhanaゲーム大賞アマチュア部門東京ゲームショウプラネタリウムライアン・ウッドワードDRAGONドラゴンゲート愛知淑徳大学みつけものGATEゴールデンウィークマーサ・グレアム5月11日Googleロゴロゴマーク静岡県BloosumTeamイマジンカップNHNBloom*Block尾花大輔TOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会StationFutureWebアプリ迎春敢闘賞ツインメッセ静岡Figma2011年度docomoドコモNCF2017恵那市岩村プロジェクションマッピング放課後のプレアデスキルターズフェスティバル2011笈瀬本通商店街名古屋市中村区SUBARUGAINAXキルト展日本の四季中部国際空港FLAVER3.0FLVforLoadLazy大西健太Slimbox2ウェブリテラシー協会8341-3:2010XJIS愛知県立芸術大学卒業・修了制作展伊達千代DTPの勉強部屋ablogcms北岡弘至梅澤朝樹バルサマン3JAPANWORLDCUPトライデントカレッジUntitled!!!!!!!!CustomSmilies絵文字友章円JOY!mapKtaistyleぬいぐるみのラパン堀川英国王のスピーチ卒業制作・研究発表会2011GAMESHOW卒業研究制作展最優秀賞ジョルテKDDIContentsofトライデント合同企業説明会Table10日でおぼえるLinuxサーバー入門教室HTML5スマートアプリ&クリエイティブコンテストモテ声ボーダー美術大学芸術大学高橋雅人カレーラーメンNCF2013NTTドコモ東海支社list-itemdisplaylist-style-typeF81教室GWD名古屋マークアップ勉強会tableテーブル宇野剛志マカベン熊野古道本州最南端串本八鬼山石原愛実ランチparseFloat()parseInt()Designergoogle備忘録栗山聡一中村健太道家陽介concrete5麺やOK麺屋ココイチたこ焼きパーティWeb制作合宿フォントおじさんミス・ユニバース・ジャパン岐阜大会Facebookモリサワ東京佐藤ねじみんなのICTMuse画像をチェックボタンにするIllustratorSVGFacebookページベースキャンプ名古屋長野結果張山大祐JQuery第50回就職木下健太郎第51回技能五輪全国大会Webデザイン演習堀川友章関口浩之安藤志維嵐が如くフジ家55さかなや晴れやかあいちトリエンナーレ2013そこにいない。展田代豊たにぐちまことプレゼンThree.jsRhizomatiksinspiredPARTYPerfumeby田中稚妃呂

メールフォーム

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

東京コスモ
トライデントコンピュータ専門学校
教務課のびのび日記
Pagetop