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

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

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

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

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

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
検索フォーム
#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
学生がライトニングトークで話しました。
<展示会>
1年生進級展2018「線の群生」終了しました。
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
信州アプリコンテスト0 [ゼロ] 2019 KDDI賞受賞!
第5回 ソレコン☆ポスコン特別賞受賞
「第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回技能五輪
<若年者ものづくり競技大会>
第14回若年者ものづくり競技大会
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種Webサイト若年者ものづくり競技大会ウェブデザインポートフォリオ名古屋映画2013ECCコンピュータ専門学校学生ブログWebデザイン1年生進級展2009WinterWebサイト制作JavaScript技能五輪全国大会2011WordPressオープンキャンパス入学式礒田優かっぱ商店街卒業制作展アクアリング卒展ライトニングトークWordpresscmsa-blog2014CSSWebアクセス解析Nagoya矢野りんCGイラスト学科合同企業展石黒雄介テンプレート作成卒業制作AutumnWeb制作会社体験入学瀬川大勝若年者ものづくり大会ホームページ・ビルダーSummer面白法人カヤックIIJ佐藤歩夏休み杉本拓也あいちカレーラーメンコンテスト閉館日GIO2015夏季閉館日html5HCDプレゼンテーション大阪HTML5ウェブデザイン技能競技会2010Flashin学生インタビューminiウェブデザイン技能競技大会名古屋駅第48回技能五輪全国大会2012Japanココストア東京研修Adobedisplay:gridSpringWebデザインギャラリートライデント祭りWebクリエイター能力認定試験モリサワ上村水月グリッドレイアウト99eagleウェブデザイン技能検定jQueryブログパーツフォトアルバム制作合宿学生CSS3ラーメン人間中心設計就職活動田中睦翔林田実樹企業訪問北濱大輔GridLayoutCentOSプロジェクト情報デザイン水野裕太NEXTセントレア2018GoogleWebワークショップ愛知県専門学校BananaAd成田篤紀COMMUNICATIONUXマール情報デザインフォーラムgifアニメサイバーエージェントアップルップルマークアップエンジニアSEO真鍋大度ゴールデンウィーク幕張メッセ飯田淳介FICCYahoo!Japanビジュアルエディタアンティー・ファクトリー空気人形フロントエンドエンジニア熊谷佳紀トライデント合同企業展サーティファイ卒業式結果発表ポートフォリオサイト阿部淳也名古屋市科学館会社訪問初期設定メ~テレコミュニケーションデザインワークショップカメラ写真ワークショップ謹賀新年静岡iPhoneモンキーワークスWebデザイナーNTTドコモ東海ナゴヤドーム中日ドラゴンズ知多みるく戸田芳裕作品集ウェブアクセシビリティたこ焼きlabel要素form要素堀尾真衣WEBサイト制作者のためのHCDの理解in名古屋RunstantForumAnalytics和みAdventCalendarAWARDCSSNiteWordFes産学協同5T(ファイヴティー)スマートフォンfieldset要素legend要素笈瀬本通りLikeBoxスマホアプリ1年生作品展うぇーぶparticlecanvas岩手県まぼろしPluginイラストマップtextarea要素input要素名商連愛知県選手団option要素output要素トライデントレイアウト長屋めぐみselect要素塚本碧ウェブDeBLOGAppleES2015ES6jbstyleStoreMarkup出張講座進級展グループ制作株式会社LIGドラマ沖縄水野怜美企業課題松本渚株式会社スタメン2017名古屋開府400年祭鈴木優太DTPWORLD豊田市美術館導入授業WordCampアサココ!ディプロスエイチーム情報デザイン基礎Webリテラシー久保怜也アプリコンテスト信州アプリコンテスト[ゼロ]F-siteWebアプリ茂森仙直学習鷹野雅弘CMS20202008オンライン授業ZoomカリキュラムUltimateウェブデザイン部門GA三蔵ablogcms造形基礎商店サイト制作HTML+CSS基礎プレゼン演習愛知商業高校プチ・フレーズActionScript基礎WEB佐藤可士和中村勇吾中級編SakaeトライデントカレッジCONTESTUntitled!!!!!!!!TEXTURETHEデッサン名駅経済新聞みの治商店DesignCS4サムライ名チャリDTPの勉強部屋FANTASYAndrioidVIIWEBサイト制作者のためのHCD(人間中心設計)の理解バルサマン3アートアニメーションFINALITCIRCUS柴乃櫂人ペルソナADVENT1→10designプロジェクションマッピングシナリオ広島弁iPhone4武豊町TAFF'09西村真里子グラフィクデザインポスターデザイン・コンペディションカンファレンス北岡弘至Twitter伊達千代MagnumCODEJAPANWORLDCUP名古屋グランパスチタハン10広告批評WCAN×CSSNite名古屋クリエイターフットサル笈瀬本通名古屋サイト改善研究会01笈瀬本通商店街名古屋市中村区SIGGRAPHXRAYキルターズフェスティバル20112008Winter放課後のプレアデスFLAVER3.0CustomSmiliesXKtaistyleぬいぐるみのラパン8341-3:2010FLVASIAVideopuppetryWebDirectionEast'08SUBARU円JOY!map卒業・修了制作展愛知県立芸術大学QubibiArtlessNam絵文字W+KTokyo(+CRUZ)Stefan日本の四季中部国際空港GAINAXキルト展デザインのへそSagmeisterHelveticaJISウェブリテラシー協会GoogleAnalyticsFLEX石井研二FLASHMAXデザイナーのためのプログラミング入門デザインコンテストカメラワークCollegeCODEポスターデザイン・コンペティション丹下紘希小林信次中部国際空港株式会社ブラザー工業株式会社Night株式会社アクアリング横浜デジタルアーツCHILDRENLazy鳥取砂丘デザインLoad鳥取Slimbox2forアンドリュー・ワイエス愛知県美術館英国王のスピーチPHP卒業制作・研究発表会2011田中稚妃呂HPデザイン大西健太増田悟プロトコル分析山崎デザイン事務所コマ撮りアニメコピーライティング電信柱エレミの恋スーパーエレメンツイラストコンテストデュエル・マスターズ長谷川恭久ソバットシアターCMS特集教育勉強会ロゴ公募グラフィックデザイン#infoedu小野裕子学生参加アイディグラフィックス今井佳子ヨウイチ恵那市岩村3校合同発表会クリ博就職フェスタ旭食品サンプル製作所横浜デジタルアーツ専門学校食品サンプル会社見学鎌倉日本電子専門学校ペルソナ&シナリオ法浅野智ウサビッチペルソナ/シナリオ法情報デザイン教育勉強会おかだよういちカナバングラフィックス学科富岡聡ガンダムFITCPHP勉強会escalatoranimationITホワイトボックス世界のCMフェスティバルアニメーションJAPANインターネットクリエイティブアワードYahoo!大富豪スコアシート東京ゲームショウ2009UNIQLOCKギレン総帥LPOCG・イラストコンテストナゴヤデザインウィーク2009人喰いの大鷲トリコ是枝裕和監督モーション演習ストリートビューカラー閉会式入賞ゆるキャラ映画のオープニングマクロマリオネットCREAMごはんとFlashマークアップ演習Flash-Gameswonderfl後期AutuminMozoramaブランディングHCDプロセスKyotodotFes森川眞行箱根合宿フナ犬「ヤノベケンジ-ウルトラ」展ワークスコーポレーションポートピア名古屋プロ野球LabuatUTZOOMBlogネスカフェゴールドブレンド大沢たかお道頓堀ナゴヤ武将都市新世界デコクレ求人GENOウィルスセキュリティ知多半島スタジオジブリ・レイアウト展アクセシビリティサーバーIA名古屋メディアボンド金シャチ商店街タロヲ商店街COMPLETEYORKE.ビジュアルデベロップメントunoplusTokyo松坂屋美術館技能五輪予選WEBサイト制作者のためのHCDの理解伊藤頼子第4回アックゼロヨン・アワード山村浩二名古屋おもてなし武将隊西田幸司SalsaWasウェブリテラシー協会第一回セミナー国家検定夢プロジェクト2009・成果報告会ライブペイントインターネットスキル認定普及協会ThereThen慶華飯店新横浜ラーメン博物館横浜中華街ActionScriptNIKEヱヴァンゲリヲン新劇場版:破AndIA2010キックオフセミナー黒い太陽WCAN46音楽ファルコム音楽フリー宣言TAFFゲーム□□□switch日本ファルコム武豊アニメーションフェスティバル荒俣宏福みつカスタマイズセミナーヤノベケンジウルトラ展CALENDARUNIQLO餃子浜松細川太郎張山大祐学校ターミナルProxyWCAN2017Springv4.0.1佐藤洋介服部友厚株式会社エイチーム山川綾那鈴木雄太スタジオディテイルズSyntaxHighlighterECMAScript芸大美大料理InstagramインスタグラムNodeListHTMLCollectionお母さんの二度見展マイクロソフトWebプログラミング初級講座appendChild()梅澤朝樹衣台高校NCF2017安藤ミス・ユニバース・ジャパン岐阜大会フォントおじさん関口浩之志維堀川World)toWWW(Welcome友章堀川友章安藤志維スクラップブックD3.js夏休みの課題ノートPC貸与尾鷲高校出身高校AWARDSContentsofTableTOC醐りょう制作実績坂本貴史津田直明2016原一浩平野秀幸IA/UXプラクティスAO入試河地芳明沼田啓助カークスヴィル坂本邦夫Webプログラマー学位専門士出席率職業実践専門課程レスポンシブWebデザイン合同制作合宿合同制作WebディレクターWeb制作のおしごと懇親会合宿プログラムクイズCodePenジムナストコロン学生作品集日清食品グループタカガールサイト水曜日のカンパネラMonaca情報系いな世驛麺通り再進学学園祭プラネタリアンResurgenceCodeplyPlunkerJSFiddleJSBinjsdo.it涼麺Day:Independenceクイズ駅麺通り北川パーヤンWebデザインスペシャルデーmarkerフェンシングeat足立丈也、平子卓哉、増田隼也信州アプリコンテストゼロエペスポーツアナリティクス2019年令和2年classes株式会社LIGHTz落合祐介杉浦麻紀茜音2019髙橋株式会社アンティー・ファクトリーPhotoshopCS6ソレコン☆ポスコンコンテストライフスタイル冬休み仙直茂森新年あけましておめでとう進級制作展企業賞第3回専門学校HTML5作品アワード株式会社COTSOriginalTshirt.st2020アカデミー賞パラサイトvwremem松井友奈進級制作フロントエンド三瓶YearNewHappyメンバーズマイクロインタラクションICS池田泰延MILK祐司第56回沖縄県GOOculusVRカルタpicturesourcecymaEC事業第56回技能五輪全国大会srcset東京ゲームショウ2018出前授業ホ・ジヘHEO韓国脆弱性なんと読む?期末テストJIHYE藤井英一青山高校新城高校冨田伴成イークリエイト斉藤洸貴NextDoor企業見学新入生オリエンテーション株式会社MTG日本総合ビジネス専門学校2020新卒わたし、定時に帰ります。TBS髙橋茜音STUDIOLIGCBC線の群生Figma平成31年メーカー・ブランドコーヒー用品前川元成あけおめ株式会社サイバーエージェントツールUIデザイン牧野史門桝田草一ウェブアートデザイナーうぇ~~~~~~~ぶあいちトリエンナーレ2013Webデザイン演習そこにいない。展PARTYPerfume第51回技能五輪全国大会嵐が如く麺屋ココイチフジ家55さかなや晴れやかbyinspired東京就職佐藤ねじみんなのICTFacebook木下健太郎Three.jsRhizomatiks田代豊たにぐちまことプレゼン麺やOKカレーラーメントライデント合同企業説明会F81教室10日でおぼえるLinuxサーバー入門教室卒業研究制作展最優秀賞GWDgoogle備忘録parseFloat()parseInt()DesignerジョルテKDDINCF2013美術大学芸術大学高橋雅人NTTドコモ東海支社list-style-typeHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーlist-itemdisplayたこ焼きパーティWeb制作合宿メールマガジンロゴマークOhanaゲーム大賞アマチュア部門東京ゲームショウ静岡県ツインメッセ静岡ドコモ2011年度迎春敢闘賞神戸神戸国際展示場GATEGoogleロゴDRAGONドラゴンゲート愛知淑徳大学5月11日マーサ・グレアム鈴木プラネタリウムライアン・ウッドワードdocomoFutureIllustrator長野SVGFacebookページベースキャンプ名古屋結果第50回Muse画像をチェックボタンにするvhJQuerySHOWGAMETeamイマジンカップNHNStationBloosumBloom*BlockTOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会尾花大輔栗山聡一concrete5Velocity.jsWebアクセシビリティScrollMagicScrollmagic八木智章アクセシビリティからはじめる、WebサイトのUXデザイ建設経営者倶楽部クリスマス熊﨑彩第53回ワクワク建設タウン竹中民男夏麺フェアWF1でBLOG新入生インターンシップスマートフォンサイトUI図鑑CSS3&jQueryで作る2015年度Crayon木村哲朗森田霞HighlighterSyntax東京コスモ3DCG高校採用担当者の心に響く14グロースハッカーグロースハックポートフォリオアイデア帳平野健太郎ワイヤーフレーム仕事UIバイドゥPlatformKaizenFlexbox味仙CGスペシャリスト松田洋樹FlexibleBox岡田陽一アクティビティシナリオ源賢司UXデザインDmm.com名古屋駅麺通りNCF2014和歌山中華そばアロチ本家熊野三山大門坂那智の大滝丸高丸田屋名古屋市営地下鉄柏木祥太スパルタキャンプ岩出本店本州最南端串本石原愛実宇野剛志ランチ中村健太道家陽介テーブルtable八鬼山熊野古道マカベン名古屋マークアップ勉強会青空学区特別授業datalist要素button要素keygen要素optgroup要素type属性HTML第52回技能五輪全国大会新年のご挨拶親孝行麺の匠オリエンタル紅茶専門店Liyn-anアイテムカンパニー加藤ひとみ西岡克真AnimationAO山田拓生青山敬司ネイルサロンマウア授業アイチータ結団式みつけもの

メールフォーム

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

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