株式会社CyberOwl(以下、サイバーアウル)では、デザイナーのスキルアップを目的に、通常開発をすべて止めて新しい仕組みの導入や技術の習得に集中するための会を開催しました。
デザイナー全員でスキルアップ課題をいくつか挙げ、その課題ごとにチームを組んで取り組みます。
今回は「マークアップスキルの習得」と「デザインシステムの強化」の2チームで行われました。
この課題は、マークアップスキルを習得し、実装をふまえたデザインを考案できるようになることや、開発者とのコミュニケーションロスを大幅に軽減することを目的に選定されました。
参加したのは、「HTMLとCSS基礎知識も無い、マークアップ超初心者」メンバーと、「6年前にHTML・CSS・jsを書いていてたが、実務レベルの知識はもう無いに等しい」メンバー、そして「HTML/CSS/Sassの理解はあったが、最近触ってなかった」メンバーです。
HTML,CSS,SASS,FLOCSの理解。 課題となるメディアページの開発環境の設定。
Designer Boot Camp前に対象となるページデザイン制作。
実際に運用しているサービスのファイル構成、記述するデータの理解から始まり、 自分たちでデザインしたデータをマークアップ。
命名規則のルールやFoundation,Layout,Objectに分けてマークアップされているかなど、コードレビューをエンジニアにしてもらいました。
週に1度マークアップの基礎的な項目をエンジニアの方に教わる、座学の時間を設けました。 そこで学んだことを元に、エンジニアの方に実技課題を宿題として選定していただき、次の週にコードレビューをしていただくことを繰り返して、マークアップの基礎を学習しました。
・CSSのレイアウトモジュール、ボックスの理解
・絶対配置・相対配置によるボックスの配置
・CSSセレクタ、疑似要素
・レスポンシブの実現
・リセットCSS
・Sass(SCSS)の書き方(変数、Mixin)
・FLOCSS(フロックス)
今回のDesigner Boot Campでは脱毛サイトの既存ページ改修と、新規ページのデザイン〜マークアップを課題として設定しました。
脱毛サイトのプランナーから改修/新規ページの仕様書をいただき、デザインを制作。
制作したデザインを元にマークアップをしました。
今回は、
・人物の一覧ページ×2
・人物の詳細ページ×2
・店舗情報のページ
の計5ページPC/SP両方を3人で分担して制作しました。
以下の画像が実際に制作したページの一例です。
Designer Boot Campは実作業と成果発表を含め2日間で行われます。通常開発のタスクや、打ち合わせなどの割り込みが発生しないように、会場として広い会議室を貸し切りにしたり、お弁当を用意してもらったりと、集中できる環境で実施されました。
さらに期間中、通常開発の合間に指導役エンジニア2名が会場まで来てサポートしてくださいました。
自分たちで作ったデザインをこの2日間で実装しきることが目標です。
さっそくブランチを切り、初めて実際の開発環境と向き合うこととなったのですが、私たちはこの目標を達成するまでに予想外の障壁にぶつかりました。
cssのスタイルは適切なファイルの適切な位置に追加しなければなりません。しかし、すでに加えたいスタイルは決まっているのに、書き込む場所をみつけることがこんなに難しいとは思いませんでした。
脱毛サイトのcssはFLOCSSで設計されており、1つのhtmlに複数のcssがインポートされています。さらにスタイルの役割によってFoundation、Layout、Component、Project、Utilityのフォルダに仕舞われていたので、最初は追加したいスタイルを書き込むファイルを見つけ出すのに毎回苦労しました。
見慣れていない私たちにはとても高いハードルでしたが、これらの堅牢な設計とルールがあることでプロダクトの運用が成り立っている(らしい)。
新たな要素にスタイルを追加したいときはクラス名を考える必要がありますが、これもまた苦労したことのひとつでした。
クラス名を決めるにはBEM(MindBEMding)という厳密な命名規則に従い、スタイルが持つ役割をあらわす名付けをしなければならないのです。
自分が作ろうとしているスタイルの再利用性を考え、BlockなのかElementなのかModifierなのかを考え、既存スタイル名の様子も窺いながら命名することに多く時間を費やしました。
脱毛サイトはscssを使っているため、書いたスタイルが理想通りに反映されているかを確認するにはコンパイルが必要でした。
使い慣れないターミナルでコマンドを実行し、ブラウザで確認するのですが、一文字打ち間違えてたり、書く場所が違ったり、エラーが起きたりと、普段作業しているような「描きたいものをそのままアウトプットできる」デザインの作業では想像できないところで時間がとられてしまいました。
その他にも様々な障壁はありましたが、2日間にわたり3人での協力や、指導役のエンジニアの手厚いサポートもあり、何とか目標の5ページを実装しきりました。
最後に簡単なスライドで成果発表をして、Boot Camp2日間を充実して終えることができました。
Boot Camp後、完成したコードはSoucetreeとgithubを介して、エンジニアの方にレビューしていただきました。
・新しいスタイルを書く場所が間違っていた。
・命名のしかたが間違っていた。
・データを壊しかけた。
・Componentの括り方が少し間違っていた。
など、たくさんの赤字をいただきましたが、細かく見てくださったことが本当に有難かったです。
また、どこが理解できていない/間違っているかを個別で教えていただくなど
手厚くフォローしていただいたおかげで、1回の修正でOKをいただくことができました。
「学習期間含めて1ヶ月程度だったと思いますが、短期間でなんとか形にすることができてよかったです。
Designer Boot Campのお題を決めていた当初、個人的には「通常業務をしつつ1ヶ月しかないし、とりあえずHTMLやCSSの理解と、ローカル環境で形さえ作れれば上等」くらいの気持ちで取り組もうとしていましたが、既存サイトの改修に関われたこととエンジニアの方の手厚いフォローのおかげで、「命名規則」「ファイル管理」など、独学の初心者では触れることのできない実務に直結する部分に触れることができたので、自分が当初思っていたより高いレベルの技術と知識の習得ができたんじゃないかなあと思います。
1人で独学でやっていたとしたら、1ヶ月という短期間でここまでの理解は絶対にできなかったと思うので、身近に「教えてくれる存在」と「個人のスキルアップに協力してくれる環境」があることの有り難さを身を以って感じました」
「コードの書き方以上にファイルの管理方法や命名規則を把握するのが大変でしたが、内容を詳細に知れてよかったです。
デザインデータ(sketch)もスタイルやパーツの再利用性を重視して管理しているので、
デザイナーとフロントエンドエンジニアはもっと細かい粒度で共通認識を持てそうだと感じられて嬉しくなりました。今度は自分が担当しているプロダクトの実装についてもっと詳細に理解していきたいです」
「複数人で進めるプロジェクトの管理方法や命名規則など実際に触れて見て、思ってる通りにブラウザに反映されなかったり、されたりと試行錯誤しながらではありますが理解できたことが良かったです」
※2019年12月26日時点
