こんにちは！セレス広報担当です。
今回は、セレスのWebデザイナーとフロントエンドエンジニアが主催する、無料勉強会の様子をお届けします！

全4回シリーズの第2回として3月16日（木）19時より開催されました。Youtubeのオンライン生配信ということで、偶然にもWBCイタリア戦と時間帯が重なってしまったなかでの開催となりましたが、前回同様、楽しい勉強会となりました！

次回、第3回では、新卒/中堅エンジニアを対象にインフラエンジニア向けの勉強会を企画しています！オンライン勉強会の告知もありますので、ぜひ最後までご覧ください！

>>前回【勉強会｜第1回】の様子はこちらからご覧いただけます！

新卒/中堅Webデザイナー向けオンライン勉強会【第2回】

全4回シリーズ、セレスのエンジニア&Webデザイナー主催、無料オンライン勉強会の第2回。今回は、新卒/中堅のWebデザイナー向けとして、「セレスで活用しているデザイン術」をテーマに、Webデザイナーからは「資料作成のコツ」、フロントエンドエンジニアからは現場で実践している「Atomic Design（アトミックデザイン）」を活用したデザイン術についてお話しました。

「Atomic Design（アトミックデザイン）」とは

原子（最小単位のパーツ）単位でUIデザインを作成する手法で、アメリカのデザインシステムコンサルタントであり、フロントエンドエンジニアであるBrad Frost氏が考案、提唱しているものです。デザインを最小単位の「Lev.1 Atoms（原子）」からページ単位の「Lev.5 Pages（ページ）」まで5段階に分け、レゴブロックを組み立てるようにパーツ同士を組み合わせながら設計、管理していきます。

※「Atomic Design by Brad Frost」公式サイト： https://atomicdesign.bradfrost.com/

タイムテーブル

勉強会のタイムテーブルはこちら♪

18:50～19:00　開場
19:00～19:10　オープニング
19:10～19:45　勉強会[本編]
【第1部】「脱・初心者！今日から実践できる資料作成のコツ」
　KMさん（ポイントサイト「モッピー」のデザイナー）
【第2部】「Atomic Design勉強会」
　Wさん（アフィリエイトサービス「AD.TRACK」の開発をメインで担当しているWebデザイナー兼フロントエンドエンジニア）
19:45～20:00　質疑応答、クロージング

今回の勉強会の対象者はこういう方々です！

・新卒Webデザイナー
・実務経験2～3年の中堅Webデザイナー
・初めて勉強会に参加します！という方
・Webデザイナー、フロントエンドの方
・資料作成に携わる方、デザイン力を習得して仕事に活かしたい方
・当社の採用選考に興味がある方
・学生の方

登壇者のご紹介

▼ファシリテーター

（左）KSさん　／サービスエンジニアリング部　インフラグループ
（右）Ｏさん　／人事総務部　人事・総務グループ

▼スピーカー
KMさん　／サービスエンジニアリング部　クリエイティブグループ　／使用ツール：Photoshop/Illustrator/Adobe XD　使用言語：HTML/CSS(Sass)/jQuery

ポイントサイト「モッピー」のWebデザイナーとして、LPやバナー、動画制作のほかモッピーオリジナルグッズの制作など幅広くデザイン業務を担当。

>>Webデザインにとどまらず、幅広くデザインワークを楽しむKMさんのインタビュー記事もございます。ぜひ、ご覧ください！

Wさん　／サービスエンジニアリング部　システムグループ　／使用ツール：Figma/Illustrator/Photoshop　使用言語：React/Next.jp/TypeScript

元々Webデザイナーとして入社。現在は、デザイナー兼フロントエンドエンジニアとして、アドマーケティング事業部のアフィリエイトサービス「AD.TRACK」の開発をメインで担当。並行して、LPデザインや紙媒体のデザインにも挑戦中。

18：00～　会場セッティング～通しリハーサル

～第1回のときの撮影位置から場所を移動し、見栄えのいい飾り棚をバックにファシリテーター席を配置。画面のスイッチが見やすいよう、こんな感じで機材をセッティングしました～

今回も24階のカフェテリアをメイン会場に、音声のハウリング防止のため、2名のスピーカーがそれぞれ別室から発表する形で、3拠点体制で行われました。

第1回でファシリテーターを務めたＹさんが、前回の反省点を踏まえて、今回は操作担当として裏方に専念しました。スピーカーには、前回同様、人事のOさんと、前回は“見守り要員”だったベテランエンジニアのＫSさんが登壇し “自由（すぎる？）”な進行でOさんを翻弄（笑）

同時刻の“裏”ではWBCイタリア戦が開催されているということで、「いま、これを見ている人は“WBCよりもデザインを知りたい！”っていう人、もう“デザイン狂い（？）”の人が多いはず！」というベテランエンジニアKSさんの憶測のもと、「皆さんが納得するような資料（発表）を、スピーカーたちは用意しているはずなので！」とめいっぱいハードルを上げた状態で、【第1部】スピーカーのデザイナーKMさんに引き継がれました！

19：10～　第1部「脱・初心者！今日から実践できる資料作成のコツ」

KMさん　／サービスエンジニアリング部　クリエイティブグループ　／使用ツール：Photoshop/Illustrator/Adobe XD　使用言語：HTML/CSS(Sass)/jQuery

～左上から時計回りに「事前準備」、「まとまりを意識する」、「まとまりを意識する｜ポイント解説」、「配色」～

「脱・初心者！今日から実践できる資料作成のコツ」概略

・事前準備
・テキストライティング
・余白をとる、ポイント解説
・揃える、ポイント解説
・まとまりを意識する、ポイント解説
・書体とフォント、ポイント解説
・行間をあける、ポイント解説
・配色、ポイント解説
・参考サイト/使用ツールの紹介

ほんのちょっとのコツで“読みやすく、伝わる資料”が誰でもつくれるようになるという「脱・初心者！今日から実践できる資料作成のコツ」は、昨年11月に社内勉強会で紹介したもので、参加者から大好評だったということで、今回、改めてオンライン勉強会用として初級レベルに再編したものです。余白や行間のアキなど、手を加える前と後で資料の見やすさを比較しながら紹介しました。日ごろのデザイン作業にも活用できるということで、職種に関係なく誰にでもタメになる内容でした。

>>昨年開催した社内勉強会の様子を紹介した記事はこちらからご覧いただけます！

～「まさか（写真を）撮られると思ってなかった。。。」と、普段はコンタクトレンズなのに油断して（在宅勤務仕様？の）眼鏡姿で登場のKMさん。勉強会には大好きなフクロウのイラストで登壇されました（笑）～

19：25～　第2部「Atomic Design勉強会」

Wさん　／サービスエンジニアリング部　システムグループ　／使用ツール：Figma/Illustrator/Photoshop　使用言語：React/Next.jp/TypeScript

～左上から時計まわりに「勉強の内容と対象」、「Lv.1 Atoms（原子）」、「Atomic Designのデメリット（一例）」、「Lv.4 Templates（テンプレート）」～

「Atomic Design勉強会」概略

・Atomic Designとは
・Lv.1 Atoms（原子）
・Lv.2 Molecules（分子）
・Lv.3 Organisms（生体）
・Lv.4 Templates（テンプレート）
・Lv.5 Pages（ページ）
・Atomic Designの特徴（メリット/デメリット）
・Reactプロジェクトに取り入れてみて（検証結果）

UIデザイン設計の一手法である「Atomic Design」について解説しました。Webデザイナー兼フロントエンドエンジニアという立場から、デザイナー視点からとシステム開発視点からの両面で、Atomic Design のメリット、デメリットやReactプロジェクトとの相性の検証結果や感想を紹介。UIデザインに関わる内容で、かつフロント開発のなかのコンポーネント設計に関わる部分ということで、Webデザイナー、Webコーダー、フロントエンドエンジニアの方に向けた内容にまとめて紹介しました。

～発表前は緊張のしすぎで「手汗で手がベトベトしちゃった」というデザイナーのKMさんとは対照的に、「ぜんぜん緊張しなかった」というWさん。練習不足で“カミカミ”だったのが気になったくらいだそうで、終始落ち着いて進行されていました。さすがです！～

19：45～　質疑応答～クロージング

今回もスピーカーの発表後に質疑応答を受け付けました。前回同様、最小規模のため（苦笑）社内からの3つの質問に答えていただきつつ、ベテランエンジニアＫSさんの秀逸なコメントもあわせてご覧ください！

質問①：「資料全体の色を設定するときにどのような考え方で選びますか？」
回答②：「投影する資料の発表先やターゲットを想定して色を決めます。今回だと、ビジネス色強めの“青”を選びました」（デザイナーKMさん）

▼ファシリテーター・KSさんのコメント：「なるほど！青って冷静になるって言うじゃないですか。どうしても（経費）で買って欲しいオモチャにしかならないモノを、青系で資料をつくって稟議に出してみたら、冷静になられちゃって（買ってもらえなさそうで）困っちゃいますね？」（←オンラインの公開質問でデザイナーKMさんを困らせる、ベテランエンジニアKS氏）

質問②：「Lv2 Molecules（モレキューズ）[分子]のなかにLv2 Molecules（モレキューズ）[分子]を入れることはできますか？」
回答②：「物理的には可能ですが、それだと複雑化するので（ルール通り）シンプルに考えたほうがいいですね」（Wさん）

▼ファシリテーター・KSさんのコメント：「原則的なルールをつくったら、それに従えってことですね。面倒くさいからと言ってルールを無視してやったら後で大変なことになる、ということをWさんが大人風に説明してくれました」（まともに聞こえてしまうw）

質問③：「セレスのデザイン業務のなかで、一番気を遣っている部分ってなんですか？」
回答③：「売上げ回りだったりCVにつながる効果が出せるようなデザインを一番心がけています」（デザイナーKMさん）、「デザインを依頼してきてくれた人から（後で齟齬が生じないよう）しっかりヒアリングをすることを大事にしています」（Wさん）

▼ファシリテーター・KSさんのコメント：「僕が一番気を遣っている部分は、上司の機嫌と、二日酔いです」（へえええ。。。毎日が楽しそうな）

前回同様、勉強会最後に人事のOさんから、現在、セレスで募集中のデザイナー・エンジニア職について、自由度の高い社内規程や事業部ごとの使用言語、待遇などを説明させていただきました。今回の勉強会で、少しでもご興味をおもちいただけましたら、ぜひぜひご応募ください。お待ちしております！

>>エンジニア募集内容の詳細はこちらをご覧ください！

>>セレスには気軽に話が聞ける「カジュアル面談」もあります！
選考ではなくて「もうちょっと話を聞いてみたいな」とか「ついでに会社の内装も実際に見てみたいな」という方でも、少しでも気になったり、ご興味をお持ちいただいた方にお気軽にご応募いただけます。ぜひご利用ください！

次回「第3回勉強会」ではこんなことやります！

▼タイトル
【勉強会｜第3回】エンジニア主催「18年ものサービスが香り立つ、インフラ長期運用事例を語る会」オンライン公開！

▼開催日時
2023年4月25日（火）19:00-20:00（参加費無料）

▼概要
累計1,000万人超の会員数を誇る国内最大級のポイントサイト「モッピー」を自社開発、運営しているセレスでは、日々インフラチームが土台となるサーバを支えています。今回は、「モッピー」を裏から支えるベテランのインフラエンジニアがスピーカーとして登壇し、数億レコードを超えるデータベースの保守やアクティブ会員400万人を支えるインフラストラクチャについてお話していきます。

勉強会の最後には、質疑応答の時間も設けています。普段、インフラやデータベースの業務で分からないことや素朴な疑問など、ベテランエンジニアに気軽に質問できるまたとないチャンスですので、この機会を最大限にご活用ください！

▼参加方法
Youtubeライブ（限定公開）にて実施予定。URLを発行次第、ページを更新させていただきます。
先着順（40名）となりますので、お早めにお申し込みください！

参加リンク：（ https://youtube.com/live/FEKr1Bt_OME?feature=share ）

>>お申し込み先：「コンパス」からは、こちら！

>>お申し込み先：「テックプレイ」からは、こちら！

▼こんな方におすすめ！
・新卒エンジニア
・実務経験2～3年の中堅エンジニア
・初めて勉強会参加します！という方
・社内インフラを開発する手法を学びたいエンジニア
・当社の採用選考を受けたいという方
・学生さんも大歓迎！

【おまけ】ファシリテーターKSさんが受けた“衝撃”の内容とは！

～勉強会終了後の1枚。緊張感から解放されリラックスモードの皆さんと記念撮影しました。皆さん、いい笑顔です！！～

デザイナーKMさんの【第1部】「脱・初心者！今日から実践できる資料作成のコツ」終わりを受けて、ファシリテーターのKSさんが突然、“衝撃”を受けたと告白？！それは一体どんな衝撃なのか！その告白に丁寧に対応する人事Oさんの合いの手に、広報目線で勝手にOさんの＜心の声＞を入れてみましたので、そちらとあわせてお楽しみください！

――【第1部】「脱・初心者！今日から実践できる資料作成のコツ」終了

（デザイナーＫMさんの発表が終わり、画面が切り替わる）

Oさん：ありがとうございました！

KSさん：いろいろありましたが、デザイナーKMさんの発表でございました。

Oさん：いいですよね、資料作成。

KSさん：はあ、それよりも、デザイナーKMさんの資料がキレイで見やすかった。

Oさん：間違いない（笑）

KSさん：よくできてんな～と思って。まあ、さすがにデザイナーですからね。（逆に）汚いと、オイオイってなっちゃうんでしょうね。

Oさん：なりますね。

KSさん：でも、一番衝撃的だったのは、、、資料のなかにモッピー君、いたじゃないですか。

Oさん：うんうんうんうん。＜何だろう？？＞

KSさん：ジッピー君ってやつがいるんですよ、もう一個。それがいま、僕は、衝撃的で。

Oさん：はい。＜はい？？＞

KSさん：なんだ、この眼鏡リスは？と。

Oさん：＜ええっと？？何を言いだすんだろう？？＞はい。

KSさん：でもよく読んでみると、リスじゃなくてクマなんですよ。

Oさん：クマなんですか？＜へえええ…ええっと＞

KSさん：（資料に）ジッピー君はクマですってゴシック体で書いてあって。

Oさん：＜そこ？？＞確かに。モッピーではなく、ジッピーが？

KSさん：これ、違いは何かなと思ったら、これ（生え際）があるとリスで、これ（生え際）がないとクマなんですよ。

Oさん：なるほど、そんな細かい設定まで？＜何て返せば正解なんだ？？＞

KSさん：はい、ずっと見てました。すみません、資料を見るよりも、モッピー君とジッピー君のほうが気になって見てしまいました。

Oさん：なるほど。そういう面白さもあるんですね？＜がんばれオレ！めげるなオレ！＞

KSさん：はい。

Oさん：楽しみです。うふふ。＜がんばルンバ！＞

KSさん：すみません、掘り下げるところがぜんぜん違ったんですけど、申し訳ないです。

Oさん：いやいやいや、イイです！＜ふううう、、、やりっ切ったぜ＞

KSさん・Oさん：…（手元の台本を確認しながら）

Oさん：はい、ということでええっと、次のスピーカーに向けてお願いできればなと思います。

――第2部「Atomic Design勉強会」開始

（Ｗさんに画面が切り替わり、ファシリテーター席はスピーカーOFFに）

Oさん：さっきの掘り下げ、いいですね。

KSさん：いやホント、気になってしょうがなくて。だって、リスの世界にクマ出します？（出します！出しましょう！）

一同：（笑）

Webデザイナー向けの第2回勉強会の様子はいかがでしたか？タメになった知識やワザがありましたら、皆さんのデザインワークにご活用いただけると幸いです。

第3回目は社内のインフラ環境を開発するエンジニア向けの内容になっておりますので、ご興味がありましたらぜひ、ご応募ください！！

皆さんのご参加をお待ちしております！

セレスでは現在、事業拡大につき、一緒に働くエンジニアやWebデザイナーを募集しております。少しでもご興味をおもちいただけましたら、ぜひ下記よりご応募ください！お待ちしております！！

>>エンジニアの新卒採用と中途採用の募集ページはこちらから！

>>セレスには気軽に話が聞ける「カジュアル面談」もあります！
選考ではなくて「もうちょっと話を聞いてみたいな」とか「ついでに会社の内装も実際に見てみたいな」という方でも、少しでも気になったり、ご興味をお持ちいただいた方にお気軽にご応募いただけます。ぜひご利用ください！

株式会社セレスでは、一緒に働く仲間を募集しています。
ご興味のある方は、お気軽にご応募ください！お待ちしております！

※当ストーリーは、スペースを「Ceres's post」から「#knowledge」にお引越ししました。（2023/08/16）