見出し画像

伸ばせデザイナーの越境力！ フロントエンド勉強会

ファンタラクティブ株式会社

こんにちは。ファンタラクティブのデザイナーの髙橋です。
ファンタラクティブのデザイナーがお届けする「ふぁんたぶる」第5回目の投稿です。

「ふぁんたぶる」とは ファンタラクティブ株式会社のデザイナーが、デザインに関する知識やエピソードを投稿するマガジンです。 隔週で変わりばんこに多種多様なデザイナーが登場しますのでお楽しみに！

「ふぁんたぶる」マガジンはこちら↓↓

今回は私が勝手に開催している「フロントエンド勉強会（通称：フロント勉強会）」について紹介させていただこうと思います。


フロント勉強会とは

非エンジニア（= 私）がフロントエンドの知識をつけ、あわよくば実務でも少しずつ役立てるようになることを目的とした勉強会です。フロントエンドエンジニアの松江さん、エンジニアリングマネージャーの小西さん、デザイナーの髙橋の３人で開催しています。

ことの始まり

この勉強会をはじめたきっかけは、1on1にてデザイナーの役割について話していたことから始まりました。
業務のなかで、余白だったりサイズだったり、UIの細かい部分が気になってしまうのはデザイナーあるあるかと思います。
しかし、日々様々なタスクを抱えるエンジニアさんの手を止めて数ピクセルの修正を頼むのはなんだか忍びない…そんなお悩みを相談していくなかで、自分でやってしまうのも手だよねという話になりました。
私自身、UIデザイン + なにかもうひとつスキルを伸ばしたいと思っていたこともあり、この機会にフロントエンド領域の勉強を始めてみることにしました。

仲間探し

さて、やると決めたはいいものの、どう進めたらいいかがいまいちわかりません。コードの書き方はもちろんですが、私はどちらかというと実務に沿った内容を身に付けたかったので、GitHubの使い方や環境構築の仕方から勉強したい気持ちがありました。
…なんだかこの辺ってひとりでやるのこわくないですか？　私はこわいです。ターミナルを叩く系は全部こわいです。

そこで、弊社のフロントエンジニアである松江さんに相談にのってもらうことにしました。この時点で相談どころかメンター的なこともお願いしたいという下心満々で声をかけていました（松江さんも変な予感がしていたことでしょう）

唐突なお願いにもかかわらず快諾してくれる松江さん（やさしい）

勉強会は２週間に１度のペースで弊社のバーチャルオフィス、Gaherにて開催しています。
私が松江さんにあれこれと概要を説明していると、散歩中(?)だったエンジニアリングマネージャーの小西さんが話しかけてくれたので、これ幸いとばかりに勉強会メンバーに追加させていただきました。心強い仲間がひとり増えました。

エンジニアっぽい部屋でご指導いただく

ファンタラクティブのGatherではこんな感じで様々なミーティングや雑談がオープンで行われていて、フルリモートだからこその自由で個性あふれる空間が広がっています。

弊社Gatherスペースについてはこちら↓↓

やっていること

コーディング

まずはHTMLとCSSから始めてみようということになり、以前に私がデザインしたLPを実装してみることになりました。
ちなみに私はコーディングの実務経験はほとんどなく、HTMLとCSSが読めるくらいのレベルです。

基本的には私が自分で調べながらコードを書き、躓いたり疑問に思ったことを勉強会で松江さんと小西さんに相談、という形をとっています。例えば、質問しているのは以下のような内容です。

  • 単位（pxやremなど）の使い分け

  • 画像形式の使い分け

  • HTMLタグの決め方

  • FlexboxとCSS gridの使い分け

なんとなく宗派があるような質問もありますが、お二人の経験談も交えながらひとつひとつ丁寧に言語化して教えてくれます。本当にありがたいです。

GitHubを使ってみる

せっかくなのでGitHubにリポジトリを作ってそこでレビューをしてもらうことにしました。
ブランチの作成からComit、Push、Pull Request、MergeなどのGitHubの基本的な使い方もしっかり教えてもらいました。

さらには少し発展的な内容のタスクまで用意してもらって、これらは勉強会にて説明を受けながら一緒に進めさせてもらっています。

私の知らないHTML/CSSの世界

環境構築

勉強会では、実務の相談にも度々のっていただいています。
たまたま担当している案件で実装面を少しお手伝いさせていただける機会があり、環境構築が必要になったときには様々な呪文（コマンド）を教えてもらいました。
このあたりは本当に無知だったので、エンジニアのお二人に見守ってもらいながらやれるのは本当にありがたかったです。

Node.jsってなに状態の私を救う小西さん（やさしい）

勉強会の内容は毎回議事録として社内のNotionにまとめています。
ファンタラクティブのNotionには今回紹介したフロント勉強会以外にも様々なワークショップやミーティングの議事録がストックされているので、当日参加できなかったメンバーも気軽に内容をキャッチアップすることができます。

終わりに

以上、ファンタラクティブのフロントエンド勉強会のご紹介でした。
こうした取り組みを後押ししてくれるカルチャー、なにより協力してくれる温かいメンバーに感謝です。
私もさらにスキルを身につけられるよう努力します！

そんな温かいメンバーと一緒に働いてみたい方、募集中です↓↓

この記事が気に入ったらサポートをしてみませんか？