VisasQ Engineering Meetup #3 https://media.connpass.com/thumbs/50/cc/50ccc6501a3e7477cb6b6950d85df654.png
長岡(Designer)
ビザスク Liteへのリニューアル
デザインツール
デザインシステム
プロトタイプ
好きな場所にコメントを残せる
リアルタイムに複数人で共同作業
コンポーネント化
デザイン手法
Atomsまで分解できる
組み合わせて全体をデザインする
コンポーネント化されているので開発と相性がいい
アジェンダ
課題の洗い出し
リニューアル前
インターフェースインベントリ
主要な画面の一覧を把握する
UIについてを理解する
洗い出された課題
自分の現在地がわからなくなる
表記ゆれ
似たコンポーネントの乱立
一度に表示される要素が多く、混乱する
目的を設定
ワークショップの開催
社長、CS、エンジニア、デザイナー
計10人
方針
ユーザーストーリー
UIの全体像
認知されていない機能をどう認知させるか
今後追加したい機能をどう実現させるか
リブランディングの新しいカラーについて
デザイン作成
デザインリサーチ
ペーパープロトタイピング
Figmaでパターンの書き起こし
100以上作った
メリット・デメリットを書き出す
PJメンバーで議論
デザイン案の共有
足りてない視点からの指摘
伝わりづらい部分の指摘
デザインが一旦完成
コンポーネント化
何度も使うのはコンポーネント化
Atomsの集合体がMolecules
Moleculesの集合体がOrganisms
Organismsで組み合わさったのがTemplate
デザインの調整
色んな意味をもって分類しづらいもの
共通化できそうだけど微妙に違う
統一できそうなのに微妙に色が違う
なるべく統一できるようにした
Figmaを使って良くなったこと
複数人同時作業
デザイナー以外のコミュニケーションが取りやすくなった
MTG中に修正しやすくなった
プロジェクトでファイルをまとめてドキュメントを探しやすくなった
Teamsの中にProjectが置いてある
別ページの効率が上がった
デザインの統一感がある
見た目が統一して機能がわかりやすくなった
フロントエンド開発でもコンポーネント化しやすくなった
課題
Atoms、Molecules、Organismsの区分け
開発時のコンポーネント化の単位とデザインデータの不一致
江澤(Engineer)
フロントエンド開発環境を見直した話
コンポーネント指向に移行
変化に強い設計にしたい
コンポーネントを作りやすい環境つくり
ディレクトリ構成の整理
SFCを使えるように
外からの影響を受けにくくする
Vue.jsでCSS Modulesを選んだ話
既存のページに作ったコンポーネントを埋め込む
グローバルスタイルが影響を受ける
実現したかったこと
コンポーネント外のスタイルから影響を受けず、外へも影響を与えないようにしたい
Scoped CSSは外からは影響を受ける
CSS Modulesならカプセル化できる
CSS Modulesとは
CSSをモジュール化して構成するための仕組み
クラスメイトアニメーション名がデフォでローカルスコープになる
コンポーネント設計でハマった話
コンポーネント間でスタイルの上書きをしないようにした
CSSは詳細度が一緒ならあとから読まれたスタイルが優先
バリエーションがあるコンポーネントをどう実装するのか
1. 細かくファイル訳
シンプルにまとまる
コンポーネント外への依存やファイル数が増えやすい
2. propsでスタイルを切り替える
ファイル数や依存が少ない
複雑になりやすい
デザイナーも読みやすいコードにしたい
２を採用
バリエーションが増えてもファイル数が増えない
依存が少ないようにした
複雑になりやすいのは工夫次第で抑止できそう
工夫した点
propsで切り替えるスタイルは分けて記述した
花村(CTO)
@hanasoo
ビザスクについて
ビジョン：世界中の知見をつなぐ
ミッション：組織、世代、地域を超えて、知見を集積し、世界のイノベーションに貢献
スポットコンサル
ビジネス知見を特化したスキルシェアプラットフォーム
ビザスク lite、ビザスク
liteはクライアントとアドバイザーとのやり取り
ビザスクはビザスクスタッフが居る
リサーチマネージャー
PM
クライアントはメーカー、コンサル、金融
ビザスクの2019
会社全体で90弱
開発30弱
Webサービスリニューアル、フルサポートチームは287施策/year
リファクタリングへのリソース投下
プロフィールDBをゼロから再設計
新しいチームの立ち上げ
海外展開への対応
AIマッチングへの準備
CTOとしての課題
技術ロードマップの必要性
バージョンアップのタイミング
新規技術調査のリソース
AIマッチング実現
開発組織のスケール
エンジニア採用・ブランディング
CTOに求められる要件
人のマネジメント
すぐれた開発者
戦略のエキスパート
VPoE導入
Vice President of Engineering
マネジメントの総責任者
CTOは技術戦略・決定の責任者
組織規模が小さければCTOが兼任
会社によってタイミングや求められているものは違う
どっちが偉いとかではない