佐藤歩さん、桝田草一さん［株式会社サイバーエージェント］（業界研究2018）

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

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

<< 2018年度「卒業研究制作展」終了しました。

2018年の「ウェブDeBlog」をアクセス解析で振り返る。 >>

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

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

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

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

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

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

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

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

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

コンテンツ、UI 開発
Web 技術の活用
フロントエンド設計

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

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

アクセシビリティ
パフォーマンス
セキュリティ（プライバシー）

をあげられていました。

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

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

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

知覚できる
操作できる
理解できる
壊れない

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

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

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

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

HTMLをきちんと書く

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

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

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

VoiceOverを使ってみよう

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