【デザイナー活動報告】新卒デザイナー3世代全員で勉強会を開催しました
こんにちは！初登場、新卒３年目の大友です。
今回は最近の「ぐるみ」の活動報告をしたいと思います。
「ぐるみ」（グループミッション）についての詳細は以下の記事をご覧ください。
社内横断のデザイン活動を始めるまで
今回の「ぐるみ」でチャレンジした課題
取り組む課題は毎回、ぐるみメンバーで相談しながら決めます。
今回は年末までで取り組みが一区切りついたこともあり、ぐるみ担当デザイナーから提案していただきました。
ずばり、
メンバー全員で、自分もしくは勉強会参加者が
スキルアップできるようなテーマで勉強会を開催する！
でした。
また今回の課題を取り組む期間は３ヶ月あったので ひとり２回、勉強会を開催 することになりました。
勉強会で取り上げるテーマは業務中のものでも業務外のものでも可能です。
自分や勉強会参加者が学びになるであろう内容を、各自過去の取り組みから探したり、興味のある内容を新たに勉強しながら選びました。
勉強会の参加者は主にぐるみメンバーであるデザイナーと、他のデザイナーにも任意で参加してもらいました。
開催者側であるぐるみメンバーの中でもスキルや興味のある内容に幅があり、参加者全員の学びになる内容を選出することも、今回の取り組みの肝でした。
「勉強会を開催すること」の背景
突如、出てきたように思われる「勉強会」。実際ぐるみメンバーも最初はびっくりしていましたが、そこには提案してくれたぐるみ担当デザイナーの意図がちゃんとありました。
みんながスキルアップできる環境を整えていきたい
サービスデザイン部の方針としても、デザイナー全員がスキルアップしていける状態が望ましいです。ぐるみの活動で勉強会を開催することで、スキルアップする環境が作れます。
勉強会を開催することで、各自が複数人の前で発表することに慣れてほしい
日々業務に励む中で、大勢の人の前で発表する機会はなかなかないものです。この機会にぐるみメンバー全員の発表スキル自体を伸ばしていきます。勉強会を開催するにあたり、30分以上、１時間以内の持ち時間を使うというルールもありました。時間内で充実した会にするために、話す内容の時間配分を考える必要があり、タイムマネージメント力も鍛えることができます。
わかりやすい、と言われるための工夫を覚える。
自分の知識や、学んだことを伝えるのが勉強会です。参加者に伝えるために、様々な伝え方を検討していきます。言葉の言い回しやスライドの見せ方、デモを取り入れるなど、随所に工夫を取り入れていきます。
その他、意識的になにか学んで欲しい
勉強会を開催するためには、まずは自分がテーマについて詳しくなる必要があります。半端な知識では勉強会の内容を満たすことはできないので、一定以上なにかを学ぶ機会になります。
いざ、勉強会を開催！
以上のことを踏まえながら、メンバーそれぞれがテーマを決定し、勉強会を開催しました。
今回のぐるみメンバーは６人なので、計12回に渡って勉強会が開催されました！
それでは各回を振り返っていきたいと思います。
１回目
チャットツールに使わされるのではなく、使っていくためのルールを紹介・提案
発表者：大友（新卒３年目）
働き方改革や、生産性という言葉が叫ばれる昨今、ツールに振り回されるなんて嫌だ・・・という思いから、このテーマを選択。現在、GMOメディアで導入しているのは slack 。とっても便利でリアクション機能も楽しいけど、一歩間違えるとツールに振り回されてしまう懸念があります。社内の文化・風土に合わせてルールを整えれば、生産性や働きやすさもアップするのでは？！ということで、大友が考えてきたslackルールを元に参加者みんなで今一度チャットツールについて考える回となりました。
皆さんに普段の使用感を質問しながら進めたので、相互参加感を感じてもらえました。slackは日々使っているので、明日から実践出来そう！と思ってもらえる内容もあったみたいで本人も嬉しいです。私は普段スライドを作る際にはGoogleスライドを使っていましたが、今回Figmaを試したことも新鮮でした！
２回目
情報整理・伝達をイラストで考える
発表者：木村（新卒２年目）
イラストを描くのが得意で、グラフィックレコーディングにも積極的に取り組む木村さんならではのテーマ。 「相手の知らない情報を伝えるのって難しいですよね」 という前提から始まり、わかりやすい情報の伝え方について木村さんの見解を解説。
さらにハンズオンの時間も用意されており、参加者全員で木村さんからコツを聞きながら、勉強会の内容のイラスト化にチャレンジしました。人に 類推（アナロジー）させる＝イメージさせる 上で、イラスト化はとても有効であるということが理解できました。
木村さんがホワイトボードにすらすらと見本のイラストを描いていて素敵でした！
イラストをあまり普段描かないメンバーも多かったのでみんな戸惑いながらも、物事を抽象化して伝える流れを体感でき、参加者の満足度も高い勉強会でした。
３回目
figmaと連携できるサービスを使ってみようの会
発表者：堀内（新卒４年目）
堀内さんの担当媒体ではFigmaの導入が進んでおり、すでに使いこなされています。まだFigmaを使ったことがないデザイナーもいるので、溜まったノウハウを共有してくれました。
現在、UIデザインツール戦国時代！（大げさ？） Figma、AdobeXD、Sketch、STUDIOなどいろんなツールが台頭する中で、今一番熱そうな AdobeXDとFigma を多角的に比較しながら解説。
ひとつひとつの機能の良い点・悪い点を比較していく構成が分かりやすかったです！
堀内さんはFigmaと一緒に Overflow も使われているので、実際の活用方法を紹介してもらいながら実演してもらったので使用感がよく分かりました。使ってみたい！とポジティブに感じた参加者も多かったようです。
４回目
iOSアプリのUI設計で気をつけたいこと
発表者：烏丸（新卒３年目）
烏丸さんがポイントタウンのiOSアプリのデザインを担当した際に、「アプリ」や「iOS」ということを意識したデザインの経験 が少ないゆえの苦悩があったそうです。
Webデザインに慣れているデザイナーだからこそ、問題にぶつかった理由を紐解いて解説してくれました。
WebページとiOSアプリの違い や、一見メニューに見せているものが実はタブの役割をしている！など、アプリ初心者にとっては目からウロコな内容が詰まっていました。
アプリの作りにそんなに興味がなかった参加者も、勉強会を通して自分のアプリの使用感を注視したいと感じたり、iPhoneアプリの設計をやってみたいと思っていた参加者にも有意義な時間でした！
５回目
GIFアニメーションバナーについて勉強しました。
発表者：四方（新卒２年目）
四方さんは元々 GIFバナー に挑戦してみたいと思いながらも難しそうだなと感じており、この機会にスキルアップも兼ねて学んだことを共有してくれました。GIFバナーをサービスで活用することでどんなメリット・デメリットがあるのか、実際のGIFを見せながら解説。いろんなアニメーション効果がつけられたバナーをみて、改めてGIFバナーの面白さや効果に気づかされました。
次に Photoshopを使ったGIFの作り方 を説明。GIFを作ったことのある参加者はちらほらいましたが、参加者からノウハウの補足なども追加されて学びのある回だったと思います。
勉強会後にはGIFバナーを実際にサービスに導入してみた参加者も出てきて、GIFを作成するハードルが下がった感覚がありました。とても目につくバナーなので、使いどころの注意点なども盛り込んでくれたことで適切な活用方法が浸透したと思います！
６回目
デザイナーが学ぶJavaScript 入門編（ライブラリの選び方と管理方法）
発表者：恒川（新卒４年目）
GMOメディアでは、HTML・CSSを使ったコーディング周りはデザイナーの担当領域ですが、一歩踏み込んだ JavaScript 周りは媒体ごとにも曖昧です。そこで「マークアップ周りをデザイナーが担当しているからには仕事の範囲に入っている！」という前提の元、JavaScriptを使った開発経験の多い恒川さんが丁寧に初心者向けに解説してくれました。
JavaScriptライブラリの使用方法 をひとつひとつ手順を追って説明、JavaScriptについて疑問があった時社内のどなたに質問すればいいかまで教えてくれてとても易しい勉強会でした。
jsのスキルが弱い参加者も改めて「やるべきだ！」と気持ちが引き締められたと同時に、説明がとてもわかりやすかったので「js触れそう！」と思えた回でした。
７回目
デザイナーが学ぶJavaScript 開発環境編（メディア社のsass開発環境について） メディア社のフロント開発環境概要
発表者：恒川（新卒４年目）
連続して恒川さん！前回はjsライブラリの利用方法が主でしたが、今回は開発環境編です。恒川さん・堀内さんのお二方は毎年新卒デザイナー向けの開発環境構築の研修を担当してくいます。GMOメディアでは Sass を導入しているため、テーマに取り上げてくれました。実践パートでは実際に全員で環境を作ってみました。あらかじめデモ用のファイルも配布いただき、スムーズにgulpコマンドを叩きながら、SassをCSSにコンパイル することができました！
普段、自分のPCで環境構築をする際、分かる人に教えてもらうがままに構築を済ませてしまっていた参加者もいましたが、こちらも初心者向けに丁寧に解説いただいたことで「次は自分でできそう！」と思えました。
８回目
ユーザーテストを何回かやってみて（一連の流れの共有とテスト実演）
発表者：大友（新卒３年目）
「ゲソてん」では昨年から ユーザーテスト を定期的に実施しています。３回ほど実施して掴めてきたものがあるので、この場で共有しました。
ユーザーテストはユーザーのテストではなく、サービスのユーザービリティを測るためのテストです。「ユーザー調査のないUXはUXではない」 byヤコブ・ニールセン といった名言にしたがって、ゲソてんでもユーザーテストを推進しています。今回は、ユーザーテストではなにが得られるのか、１回のテストを実施するまでにどういった手順で準備をし、改善施策に落としていくのか解説しました。
最後にテストの実演も行った際に、説明だけでは伝わらなかったテスト中の空気感なども伝わったようでよかったです。ユーザーテストは準備もある程度必要で時間がかかるので実施に踏み出せなかったりしますが、興味が湧いた参加者の方もいてくれたようだったので共有してよかったです！
９回目
入社から2年、デザインする上で意識してきたこと
発表者：烏丸（新卒３年目）
入社して丸２年が経とうとしている烏丸さんが、２年間でどんな成長を遂げたのか 振り返りながら、得られたノウハウたちを共有してくれました。
1年目に作成したバナーと、2年目に作成したバナーを比較して、どんなポイントに気をつけてデザインするようになったか、どうして変化（成長）できたのか、要点を分解して解説。教えてくれたポイントは烏丸さん固有のものではなく、デザイナー誰でも吸収することのできるポイントで、実践パートでは提案してくれたポイントを意識しながら全員でバナーを作ってみました。
デザインの 「素人感」 ってどうやって無くせるんだろう、「プロっぽい」 デザインってなんだろう？など考えされるテーマも盛り込まれており、学びの多い回でした。
デザイナーが意識的に成長するのは難しいですよね。今回の発表で烏丸の成長をたくさん感じることができ、具体的にどんな成長をできているのか・ちゃんと成長できているのか、能動的に振り替えっていくことの大切さに気づかされました！
１０回目
仕様策定、画面設計を通じて気をつけた事、よく注意されたことを共有したい
発表者：堀内（新卒４年目）
「プリ小説」の立ち上げ時からメインデザイナーである堀内さん。従来はディレクターから降りてきた仕様書を踏まえてデザイン作成やコーディングを行っていたそうですが、現在は体制変更もあって、デザイナーがディレクターの役割を兼任するパターンが増えてきたそうです。デザイナーがディレクター領域の業務をやる 上で工夫したことや苦労したことなどをお話いただきました。
仕様書の作成から、デザインに落とし、エンジニアに共有し、リリースするまでの一連のフローを実例に沿って解説。
こうやったら上手くいかなかった、次からはこうするべき！という教訓がまとめられており、参加者も自分のサービスに持ち帰れそうな内容でした。デザイナーそれぞれが日々担当のサービスでPDCAを回していても、あまり他部署に知見が共有できていません。リアルな失敗談 などを聞けて「プリ小説」の開発状況も垣間見えました！
１１回目
CSSアニメーションについて勉強しました。
発表者：四方（新卒２年目）
「楽しいサービスにするために、効果的にアニメーションをつけることができればユーザーはもちろん作る私たちも楽しくなるのでは？」という四方さんのポジティブさが光り、CSSアニメーションを勉強して共有してくれました。
CSSアニメーションには 「transition」と「animation」 の２種類があること、それぞれの使い分け方のポイントと導入事例などを紹介。部長やマネージャーの顔写真を活用したデモファイルも用意してくれて、参加者全員でお顔をトリッキーにたくさん動かしました！
いろんな動きを試してみてCSSアニメーションの面白さを改めて実感できましたし、面白いデモファイルも相まって終始和やかな回でした。四方さんはGIFバナーとCSSアニメーションも極めてアニメーションマスターになったのではないでしょうか？！
１２回目
勉強会をプロトタイピングしてみよう〜ペーパープロトタイピングで仕様のないものを試作する〜
発表者：木村（新卒２年目）
勉強会ラストを飾るのに相応しい内容！ラスト木村さんは今回のぐるみの勉強会自体を題材に取り上げ、ペーパープロトタイピング の一連の流れを紐解いて説明。普段、何をデザインするにしても無意識に情報の取捨選択が行われていてそれらは他者からは見えないけれど、木村さんのマンパワーで木村さんの頭の中が視覚化されていく様子はお見事！
勉強会の内容をブレストし、付箋紙などを使って情報が整理されていきました。気をつけたポイントも要所要所で散りばめられており、解説を聴きながら実際に書き起こされた付箋紙を参加者で眺めました。
ペーパープロトはUIデザインのための手法と思い込んでいましたが、実際に木村さんのスタディを目の当たりにして、どんなものにも活用できる可能性を感じました！この試みでアウトプットされた産物の量もとても多く、みんなに刺激を与えた回だったと思います。
全12回を終えてみて
12回の勉強会をそれぞれがやりながら、自分以外のメンバーの勉強会に参加しているので、10回もの勉強会に参加していることになります。
そんなに勉強会ばかりやっていたら、マンネリ化したり、疲弊するかもなんて思っていましたがそんなことはなく、それぞれのテーマが多岐に渡っていたり、伝え方や構成も様々だったのでどの回も充実した時間でした。
なによりも 参加者のスキルアップになるテーマ が意識されていたことが功を奏していたと思います！
先輩デザイナーや、社内のエンジニアなど他職種の方が参加してくれた回もあり、いろんな人を巻き込んでノウハウの共有ができました。
日々の業務では様々なノウハウが蓄積されていますが、こういった発表の場があることではじめて明るみに出てくる事項も多かったので、機会を作ることの大切さが実感できました。
勉強会参加者の最大人数はなんと16名！平均だと約11名が常に参加していました。
また、最初に計画した開催日に誰も遅延することなく予定通りに開催されたこともよかったです。全員同じ目標に向かって走ったことで、全体的にいい緊張感が保てていたのかもしれません。
さいごに
６人それぞれがより実りのある勉強会を目指して切磋琢磨できたのではないでしょうか。
結果的に、当初の課題の目的がかなり実現されていたように感じます。
みんながスキルアップできる環境づくり
勉強会を開催することで、各自が複数人の前で発表することに慣れてほしい
わかりやすい、と言われるための工夫を覚える
その他、意識的になにか学んで欲しい
勉強会のためにあらかじめ勉強をしてきた人もいましたし、ノウハウを伝えるために、様々な見せ方の工夫を見ることができました。
私自身も勉強会のテーマ決めや、資料作りなど悩みも多かったですが気づきもたくさんある、いい機会をいただけたと思っています。
勉強会開催ミッションはいったん終わりですが、引き続き「ぐるみ」の活動は続いています。
今後のぐるみメンバーの活躍にも乞うご期待ください！