
リアル開催!デザインサポート勉強会【MOKU MOGU会の場合】
こんにちは!大阪・堀江のWebデザインスクール:クリエイターズファクトリー(以下CF)スタッフのアシダです。
今回は「スクールでは実際どんなことしてるの?」とい不安に思う方もいらっしゃると思うので、先月開催したデザインサポート勉強会についての現場レポート記事を書いてみました!

このデザインサポート勉強会は、クリエイターズファクトリーのデザインメンター久保さんが主催している「もっとデザイン力あげたい!」という受講生がメンターからのテーマに挑戦したり、もくもく自主学習で切磋琢磨する、という会なのです。もちろん修了生から現役生まで自由参加。
※クリエイターズファクトリーって何?と言う方は、こちらをご覧ください
本来数人で集まってもくもくと勉強や作業を集中して取り組む会を、通称「もくもく会」と呼ばれていますが、今回は「MOKU MOGU会」です!
その名前の理由とは…「ポモロードタイマー集中しながら🍪おやつ🍬を食べたりしながら作業する会」だからです!!(心の声:わーい!)
今回は教室に 7名・オンラインで4名ほど合計12名の方が参加されました👏


MOKU MOGU会の流れ
限りなくシンプルな自己紹介
Webサイトトレースお題発表(複数)→参加者各自で1つ選ぶ
ポモドーロ形式でトレース開始!(25分サイクル×3回)
休憩時間はおやつをMOGUしよう!
ポモドーロ3クールで終了し、参加者に気づきや感想を発表
今回のテーマは「サイトトレース」
0.サイトトレースをテーマにした理由
過去に「Figmaでバナー作成」「クラウドワークスに挑戦!」などをテーマにしてきたが、基本に立ち返ってこれまでと違うことをしたい…🧐
・基本に立ち返る…
・オリジナルのデザイン作る前にもっと手を動かしてほしい…
・デザインの勉強にもなること!
↓
💡サイトトレースにしよう💡
何年も経験がある現役のデザイナーでも日々やっている、デザイン力上げるには有効な勉強方法なのでやってみよう!という流れだそうです。
1.シンプルで簡単な自己紹介
CFは教室受講/オンライン受講の方、同じクラスの方そうでない方などいろんな方がいます。「〇〇期のABCですー」くらいで良いので、名乗っておきましょう💡
今後Web業界で働きたい!と思っている人たちの集まりなので、Webデザイナーとなってもしかしたら数年後一緒に仕事する仲間になるかもしれません。勉強も楽しく進められるので、ぜひ期をまたいで交流しましょう!
2.トレースしたいデザインを選ぶ
デザインA:落ち着いた写真多めのインテリアショップのサイト
デザインB:きちんと感のある住宅系サイト
デザインC:情報が多い×デザイン性の高いサイト
デザインD:キッズ・親子向けのスクールのサイト
メンターが用意した上記のデザイン(jpg画像)のうち1つを選び、Figmaを使用してトレースします。
3.サイトトレース開始!

ポモドーロタイマーという集中時間と休憩時間を細かく挟んだ仕組みを使って、より集中力を上げて取り組めるというもの。
今回は作業時間25分+休憩5分を3クール続けて行います。
ポモドーロとは
ポモドーロ・テクニックとは、集中する時間と休憩時間を繰り返すことで、仕事のペースを生み出す時間管理術の一つです。
YouTubeにも動画がありますので、ぜひ調べてみてください!普段の勉強や仕事にも使えるのでオススメです🕰️
個人的には「焚き火の音/川のせせらぎ音」が好きです🔥🔥🔥
4.休憩時間=MOGUタイム!
5分休憩では強制的に休むのと、周りの人と話してみるということでおやつをいただきます🍿おやつっていう響き、平和な響きですきですね〜(個人談)。推しの話で盛り上がって5分じゃ足りなーい!という、ちょうど良い頃合いで、作業開始のタイマーが鳴るんです。世知辛いタイマーです。
余談ですが、私が当日持参したのは「ぱりんこ のり塩味」と「小さいドーナツ」です🍩

(ぱりんこのサイトかわいいヤン…)
5.やってみた感想や気づきを発表し、終了!

約1時間半集中したあとは全員のトレースを1ヶ所のデータに集めて、それを見ながら皆さんの感想を伺いました。
参加者の気づきと感想
・いつも英語のフォント選びに迷ってしまうので、参考になった!
(この感想が多かったです!)
・ワイヤーフレームを作るときの情報のまとまりを意識ながら進めた
・Figmaのオートレイアウトを使う練習で、ヘッダーのトレースに集中した
など
参加者からの質問
・ガイドはどんな考えで設定してますか?
・ランダムな写真の配置はどうやって決めてますか?法則性ありますか?
久保メンターの感想
トレース参加率が高くて良かった!
今回のデザインはオーソドックスではないので難しいかな?と思っていたけど、みんな出来ていてびっくり👀💨
デザインサポート勉強会「MOKU MOGU会」サイトトレース編はこれにて終了。
もしかしたらサイトトレースの勉強方法は「重たい」と思う人も多いかもしれません。バナーのように限られた大きさではないので、最初は少し時間がかかるかもしれませんが「Webサイトのデザインを仕事にしたい」という方なら、必ずやっておくと自分の力になる勉強方法です。
これを面倒臭らずに取り組めた人は、デザインの基礎力が上がり、今後就職してデザインの壁にぶち当たった時でも、自分で越えて伸ばしていくことができるのではと思います(めちゃくちゃ自戒こめてます🌋)。
参加者さんからの嬉しーい、Xポストを貼ります🥰
MOKUMOGU会に参加しました!
— みゆ@Webデザイン勉強中 (@MiyuM220) January 27, 2024
サイト制作する上でのレイアウトのことやフォントの使い方などたくさん学べました🥳
お菓子をモグモグしながらもくもく集中して進めれたので今日も良い休日でした!
CFのみなさんとお話しするのも楽しい〜!
家帰ってからまたもくもく!#CF#クリエイターズファクトリー
昨日はめっちゃ充実した休日でした🙌
— ほっち@WEBデザイン勉強中 (@hocchi_1002) January 28, 2024
✔︎久しぶりの堀江でスパイスカレー🍛
✔︎もぐもく会でサイトトレース👩💻
✔︎先生や皆さんとお話しできた!
✔︎久々ジム🏋️(本町のチョコザップめちゃ綺麗🥹)
✔︎チーム制作の方向性も皆さんと意見交換しつつ固まってきた🙌#CF #クリエイターズファクトリー
余談
サイトトレースといってもどんな目的(知りたいこと・学びたいこと)で、その手法が変わります。
・要素の配置やテキストの大きさ(種類)、余白感を見る(グレーなどの)
・情報のまとめ方を見る
・もっと詳しく細部にこだわって真似てみる など…
単純そうに見えて、奥深ーーいデザイン筋トレ(※下記ポスト参照)なのです。
サイトトレースに関するXのポストやnote記事をご紹介
猛者オブ猛者でも、日々筋トレを欠かさないとのこと…(震)
テレビでなかやまきんに君も「お金は使えば減る、筋肉は使えば増える」と言っていたような…ということは、デザイン筋も使うほど溜まりますね😎
いつもお願いしている超優秀なベテランデザイナーの方と話してて驚いたのが、独立して10年以上経つのに筋トレのようにサイトトレースをやり続けているということ。そりゃ強いって、、、
— Akihiro Fujiwara|MEFILAS (@akihirofujiwara) October 25, 2022
最近空き時間にサイトトレースと勝手にリニューアルするのハマっていて、コーポレートサイトにトライしてみたら大苦戦😱作ったこともなく汗
— KIRIKO🌸🦢 (@kirikooo_design) May 26, 2020
色々な企業サイト見てたら海外企業まで見始め、比較してまとめ始めてしまい…!笑
海外は社長や従業員の写真載せてる所多いな〜!安心感と企業らしさ出る〜🙆♀️ pic.twitter.com/KgCoBxBcur
ウェブボーイさんのサイトトレースは初学者の方には難易度高めに感じるかもしれませんが、どういう意図で/何を意識したかなど詳しく書かれているので、読むだけでも参考になります!
長くなりましたが、ここまで読んでくださった方ありがとうございました!
現場からは以上です!迫り来るインフルエンザに負けないよう、体調第一で勉強と仕事しましょう〜〜🙌
現在、クリエイターズファクトリーでは通学・オンライン受講生募集中です!コースや費用の詳細は公式サイトにてご覧ください🙏
無料相談会はカレンダーより予約いただけます。
各種SNSも更新中しています!ぜひフォローよろしくお願いします。
Instagram:@creators_factory (週2回更新!)
YouTube:公式チャンネル「torikumu」(週1回更新!)