Design Engineer
Takuto Yoshikawa

Profile

大学ではHuman-Computer Interactionの研究に従事、マルチタッチUIにおけるGUIについての研究を行った。 2013年ドワンゴに新卒入社。ニコニコ生放送のサーバーサイドおよびフロントエンド開発に従事。 Scalaによるニコ生のシステム置き換えやFlashプレーヤーからHTML5プレーヤーへの移行に関わる。 2017年、ツイキャスを運営するモイ株式会社に入社。サービスの全体のフロントエンド開発を担当。

Skills

TypeScript、Scala、PHP、CSS、HTMLなど
React、Redux、Vue、Webpack、eslint、MySQL、Redisなど
UIデザイン
UX/IAデザイン
デザインシステム
アクセシビリティ

Selected Works

present ツイキャスWebのUX、IA、UI改善

至るところでレイアウトが崩れている状態だったツイキャスのユーザーから見ることができるあらゆるページを再デザインした。さらに継続的にUX、IAを改善する施策を実施しサービス全体の質を向上させている。

UX IA

ツイキャス・デザインスタジオの企画、UX、UIデザインと実装

ツイキャス・デザインスタジオと呼ばれるスマホ・PCで配信画面を作れるシステムを制作した。画像や時計、コメントビュワーなどのウィジェットをWYSIWYGで配置して画面を作成できる。企画、UXデザイン、UXデザインからフロントエンド実装、バックエンド実装までのほとんどを行った。

UX UI TypeScript React

2019 ツイキャスWebのダークモード対応

IE11との互換性を保ちつつツイキャスをダークモード対応させた。あらかじめレガシーCSSを改善したことによりデザインシステム上でダークモード対応した色を扱いやすいシステムを構築することができた。その結果、ダークモード対応のiOS13がリリースされた2019/9/20より前の2019/06/20にリリースすることができた。

UX IA

2018 ツイキャスWebのレガシーCSSの改善とガイドライン構築

コピペされた数千行のCSSが複数積み重なっていたCSSをリファクタし既存のデザインを壊さないように重複を削除。さらに新たなCSS設計でデザインガイドラインを作り既存のページを少しづつ移行していった。この結果、サイト全体でパーツを組み合わせることでUIを作れるようになりダークモード対応にもできるようになった。

HTML CSS リファクタリング

2018 ツイキャスWebリニューアル

ツイキャストップ/視聴ページやツイキャス公式ストアリニューアルのフロントエンドを担当。デザイナーと協力しサービス上の重要なページをモダンなデザインに一新した。

HTML CSS TypeScript

2016 ニコニコ生放送HTML5プレーヤー

ニコニコ生放送のFlashプレーヤーをHTML5に移植するプロジェクトに参加。主にフロントエンドを担当した。アクセシビリティに気を遣いaria属性などを用いることでFlash版よりもアクセシビリティの高いプレーヤーが構築できた。またReact Storybookを活用してコンポーネントの管理を行いながら開発した。

TypeScript React HTML CSS アクセシビリティ

2015 あちらのお客様からシステム

池袋に設置されたニコニコ生放送のリアル店舗で配信する配信者にリアルで飲食物を差し入れできるシステムの構築に関わる。主にフロントエンドを担当した。[参考記事]

Scala HTML CSS

2014 ニコニコ生放送のシステム入れ替え

レガシーなPHPで書かれたニコニコ生放送をScalaで入れ替えるプロジェクトに参加。主にバックエンドとフロントエンドを担当した。 Scalaにより関数型言語的なプログラムの書き方やハイパフォーマンスなサービスの設計方法を学んだ。

Scala MySQL Redis

2012HandyWidgets

修論研究。マルチタッチのディスプレイにおいて、手から引き出すようにメニューを呼び出すGUIを提案、実装。国際会議ITS2012にて口頭発表（採択率29%）。[動画]

C# WPF マルチタッチ GUI

Design Engineer Takuto Yoshikawa