こんにちは。add more デザインチームの柏倉です。
デザインチームのコーディングスキル向上のために勉強会を開催しました。
エンジニアチームのメンバーにも解説やサポートをしてもらいながら、学んだ内容を振り返ってお話したいと思います。

勉強会のきっかけ

弊社では、デザインチームとエンジニアチームとで分業して進める案件がほとんどです。
デザインチームでもコーディングの実績を増やす目的で、昨今のコーディング事情を踏まえたレクチャーを行いました。
また、デザイナーとコーダーの連携をより円滑に進めるための側面もあります。

Webデザインは、Webサイトとして閲覧できるように、スタイルや要素が組み立てられます。
コーダーとうまく連携するためにも、実装面で破綻しないデザインを作れるように、コーディングの知識を深めておくのは強みになると感じました。

振り返ってみると、デザインの幅を広げることができる良い機会だったと思います。

勉強会の内容

今回はコーディングの課題サイトとして、弊社で制作した公開されているサイトをピックアップしました。HTML、CSSの他に、最近のコーディング事情でおさえたい技術として、Astro、Tailwind CSSをつかったコーディングをみんなで勉強することになりました。

勉強会の内容は、以下のステップで学びました。

1. プログラミング学習サービスを使って予習
2. HTMLとCSSでコーディングする
3. Astroを導入する
4. Tailwind CSSに置き換える

1.プログラミング学習サービスを使って予習

初回は動画で学べる「ドットインストール」というプログラミング学習サービスを活用しました。毎朝デザインチームで約1時間ほどのコーディング勉強時間を設け、基本的なHTML、CSS、およびJavaScriptの知識を身につけました。

サービスを使ってみると、HTML、CSSについては環境の構築から応用までと内容が充実しており、初心者でも学びやすい環境が整えられていることに驚きました。この予習のおかげで課題サイトのコーディングに余裕を持って取り組むことができたと思っています。

ドットインストールについてはこちら

2.HTMLとCSSでコーディングする

Astro、Tailwind CSSで構築されている課題サイトを、まずは基本を抑えるため、HTMLとCSSだけでコーディングしました。

figmaで作成したデザインデータを見ながら、ソースをコピペでそのまま移植しないで、全て自分で記述していきました。HTMLの記述は問題なく出来ましたが、表現が複雑な箇所のCSSは苦戦した記憶があります。コーディングをしていて、プログラミング学習サービスで学んだ内容を活かせた部分もありましたし、自分で調べてどう実装するのか悩む部分もあったりと、試行錯誤しながら、コーディングに取り組めて良かったと感じています。

何よりも作り上げたときの達成感が気持ち良いですね！最終的にデザインや動きなども上手く再現できたので、自分としては納得いく出来になったと思います。

3.Astroを導入する

コーディングしたページデザインにAstroを導入しました。

コーディングの経験が浅い私にとって、Astroって何だ？と急に難しさを感じました。
ですが、実際にさわってみると、Astroのファイルの記法はシンプルで、HTMLとCSSが書ければ使えるので取り入れやすかったです。

他にもHTMLとCSSで記述した長いコードがコンポーネント化することで、パーツごとに管理できて編集がしやすく、自分でコードを見た時に整理されているのが、わかりやすくて良かったですね。

Astroについてはこちら

4.Tailwind CSSに置き換える

最後は、自身で書いたCSSをTailwind CSSに置き換えました。

Tailwind CSSを使っていて、コードの名前に慣れるのは大変でしたが、一番気に入った部分はスタイルを自分で記入したりクラス名を考える必要がなくなったことです。私は、要素ごとに適切なクラス名を考えるだけで時間がかかることが多く、その手間が省けたことで作業の負担が減って良かったです。

ただclass属性の値が長いため、修正したいときにコードの読みにくさを感じました。
そこはAstroのコンポーネント化と組み合わせることで、可読性を担保するという解決策があります。

慣れていないところは沢山ありますが、上手く使いこなせれば、将来的に作業のスピードが上がると感じました。

Tailwind CSSについてはこちら

コードレビュー

週に1度、エンジニアチームからコードレビューを実施していただきました。

「sectionタグは見出しとセットで使うことで、文書構造を明確にする役割があるよ」
「hrタグは段落の区切りでつかうので、罫線として使うのはやめよう」

など、自分自身でコーディングをして、表面的には形になっているように思えても、それが「コード規約に反していないか」や「可読性の高い書き方になっているか」といった点については自己判断が難しいことがあります。エンジニアチームからのフィードバックを受けることで、自分では気がつかなかったところが知れて、コーディングのブラッシュアップにつながりました。

デザインチームのメンバーごとにコードの書き方が違っていたりするので、「そういう記述方法もあるのか」と、色々な視点を取り入れて学ぶことができたのも良かったです。

勉強会を終えて

デザインの幅を広げるという成果以外にも沢山のメリットがあったことに気がつくことができました。

• なんとなく苦手意識はあったけど、コーディングって面白い！と感じた。
• デザインチームで同じ目的に向かうことで、知識を深めることの楽しさを共有することができて良かった。
• コーディングのお作法や、現場ではこういうルールでやっているといった内容を知ることができた。
• レビュー会を通して、コーディング周りの認識を見直すことができた。

今まで意識できていなかったことに気がつけるようになったのは大きな収穫だと思っています。今回、学んだことを早速業務に活かしていきたいですね。
エンジニアチームからのコードレビューやサポートを頂きありがとうございました。

add moreで勉強会に興味ある方、デザインとコーディングの両方やってみたい！という方は是非ご連絡ください。お待ちしております！