このページの本文へ移動

blog

seminar

【広報レポ👀】CSS Nite セミナー「デザインを"使う"視点で成果を導く」ダイジェスト

はじめに

こんにちは！　株式会社エムハンドの広報チームです📢　弊社では共存共栄の理念のもと、有益情報を皆様に届けるべく、セミナーの開催や登壇を行っております。今回は外部セミナー「CSS Nite」からお声がけいただき、弊社岩松が登壇いたしました！　本記事では当時のイベントの様子や補足説明、またセミナーの内容を抜粋して、広報チーム某社員の視点からご紹介いたします。

▼セミナーの詳細はこちら

https://cssnite.doorkeeper.jp/events/180722

　

------

■株式会社エムハンド：取締役／アートディレクター 岩松 翔太
株式会社エムハンドの取締役／アートディレクター。東京工芸大学芸術学部デザイン学科卒業。 2018年エムハンドに入社。アートディレクターとして自社サイト・大手採用サイトなどを中心に担当。コンサルティング部・デザイン部のマネージャー業務と兼任で、広報業務まで幅広い業務をこなし、アウトプットの品質向上に注力している。2021年からWebデザインリンクのポータルサイト「MARP」を運営。

------

目次

01.これまでのウェブスタッフさんとの思い出📢

第1回（2023年1月20日）

＜3人のディレクターが語る、エムハンドのシクミとシカケ＞
岩松さん、坂本さん（@mhand_sakamoto）、マドレーヌさん（@mhand_mh）が出演。1時間押しという伝説を成し遂げ、その後Xのスペースに移動して尺に収まらなかった部分をトーク。

　

▼詳細はこちら
https://www.webstaff.jp/event/mhand_230120/

　

第2回（2024年1月25日）

＜エムハンドの、未経験が育つシクミとシカケ＞
岩松さん、民野さん（@Shogo_Tamino）、Yokoさん（@yoko_mhand0619）が出演。入社1年目のYokoさんが登壇し、民野さんとともにブイブイ言わせた回。

　

▼詳細はこちら
https://www.webstaff.jp/event/mhand_240125/

……あれから1年。「そういえば、今年はウェブスタッフさんとのイベントをやらないのかな？🤔」と思っていたところ、なんとあの「CSS Nite」でセミナーを開催するとのこと🎉　とても驚いた広報チームのPこと筆者でした。

　

▼CSS Niteでの告知👏

　

　

バナーの一部を拡大すると石川さんがいる件👀

02.セミナー当日。本編開始前の様子

CSS Nite恒例の「どこから参加？」

CSS Nite恒例の「どこから参加していますか？」の質問！　もちろん今回のセミナーでも鷹野さんが参加者の皆様に質問してくださいました👏　YouTubeからの参加者の皆様の回答が続々と表示されましたが、私の回答が表示される前に画面が切り替わってしまい……コメントは時間勝負だなと実感しました。

　

セミナーハッシュタグは「#エムハンド事例」

今回のセミナーのハッシュタグは「#エムハンド事例」です！　スクショ付きツイート大歓迎とのことなので、リアル参加できずにアーカイブで見られる方がいらっしゃいましたら、コメントをいただけると幸いです📢

　

今回の聞き役は石川さん！

普段のCSS Niteでは鷹野さんが聞き手のことが多いと思いますが、今回はウェブスタッフさんとのコラボとのことで石川さんが聞き役に！　選定理由は「いろいろな活動をしている」「Web制作会社へのコネクションがある」「制作会社に対する質問が多い」などとのこと。

　

激しい手の振り方にスクショがぶれる

------

※トム・イシカワこと、石川さんとは？
人材派遣サービス企業であるウェブスタッフ株式会社のキャリアコンサルタント。求職者向け、法人向けのサービスも展開しているが、石川さん自身は個人のキャリア支援に重きを置いているとのこと。自称ポートフォリオの妖怪、肩書き髪結い師。最近ではグッポーこと「GOOD PORTFOLIO」サイトの公開で、界隈のSNSを震撼させた。

------

　

▼GOOD PORTFOLIO

https://goodportfol.io/

03.セミナー本編を抜粋してご紹介✂

ここからは、セミナー本編の内容を抜粋してご紹介します！

　

本編が始まった瞬間をパシャリ

　

------

▼セミナーの構成はこちら
1.はじめに
2.エムハンドの紹介
3.デザインを使う視点の仕組み化
4.制作事例紹介（デザインと広報の連携）
　└MiSO TONE
　└リクルートサイト
　└MARPとWARP
　└SmartHR
5.チェックバックの役割とプロセス
6.まとめ
　└8つの習慣

------

　

セミナー資料は全部で95ページ！　セミナー前日の夜から2P増えたそうで…セミナーに対する本気度が伺えますね🔥

スライドFIgmaファイル全貌

　

セミナーの趣旨とポイント

今回のセミナーでは、チェックバックから広報展開までの一連の流れを具体的な事例を交えてご紹介します…とのこと！　ポイントとして「デザインを使う視点の重要性」「デザインと広報の連携」「チェックバックの役割とプロセス」が軸✍🏻

　

エムハンドってどんな会社？

　

＜概要＞

　

エムハンドは創業22年のWeb制作会社です。東京、大阪、京都の3拠点があり、社員数90人前後。年間取扱案件数は「約170案件」📢

　

＜ブランド戦略の図＞

曼陀羅調なので曼荼羅ではないですよ

　

全方位に共存共栄の理念を展開するブランド戦略の図はこちら👆　MiSO TONE制作中にイメージ曼荼羅調図が降りてきたとのこと。

画面端の小さい丸の集合体は、紙をパンチで開けたものという豆知識。

　

パンチの穴拡大👁

　

＜相関図＞

社内のシステムや資料、会議などをまとめた相関図

　

ウェブスタッフさんとのセミナーからアップデートされた相関図👀　入社してから改めてこちらの相関図を見ると、社内で出てくる使われている資料や会議、サイトなどが端的にまとめられていると感じました！　ちなみに2年前のVerはこちら👇　

　

　

石川さんから「初見だとなかなか解釈できないですよね。でもここまで図解できているのは素晴らしいです」との感想が。その他、セミナー参加者の皆様からも「図解が美しい」などのコメントをいただきました。ありがとうございます！

　

岩松さんのエムハンドでの役割

　

岩松さんのエムハンドでの役割は3つ。

------

❶品質管理……品質を「デザインで守る」
❷広報……発信することでブランド認知を「デザインで広げる」
❸人材獲得……採用や人材育成を目指して「デザインで繋ぐ」

------

この3つの軸を繋ぐのが「広報」です📢

　

「広報」の力で「品質管理」と「人材獲得」と繋ぐ

　

弊社の場合、今までは局所的な対応で「広報活動」をしていましたが、この度会社の成長を目指すためにパブリックリレーション（PR）を新設📢　ちなみにメンバーは岩松さん含め、セミナー内で話題にあがっていた宮崎さん（@Daigo_Miyazaki）、そしてこの記事を書いている私の3名体制となっています🙏

　

エムハンドの広報活動はどんなことをしているの？

セミナー内で社内・社外広報について軽く触れていたので、せっかくの機会なので、ここではもう少し掘り下げてご紹介いたします。

エムハンドの社内、社外広報一覧

　

＜内部＞
こちらの内容は主に社内の皆様向けに行っている広報活動です。

------

■社内広報一覧
❶社内M&M（月次情報まとめ）
❷エムホーム（ポジティブな意見の共有）
❸エムラジオ（社内向けラジオ配信）
❹エムメディア・エムチャンネル（社員紹介・勉強会動画コンテンツ）
❺採用サイトのコンテンツ更新
❻新入社員歓迎リモートランチ会
❼社員インタビュー（記事制作）

------

　

【❶社内M&M】
社内用のM＆Mはチャットワークにて、月初に先月分の弊社の情報をまとめて社員の皆様にご連絡しています📢　内容は新任社員のご案内や社外の情報など様々。この活動は数年前から行われており、私が入社した2023年9月には既にありました！

参考：社内用のM＆M

　


社内用のM＆Mには以下の情報を載せています。

------

■M＆M掲載内容
- 新入社員のご連絡
- 制作実績のご連絡
- 社内ラジオのご連絡
- ニュース（ギャラリーサイトに掲載されました👏…などのお知らせ）
- Pickup（弊社noteやブログ更新などのお知らせ）
- セミナー情報
- MiSO TONEの更新情報　…など

------

　

【❷エムホーム（ポジティブな意見の共有）】
こちらは2024年11月から始めたばかりの取り組みです！　社員の皆様から誰かに伝えたい「ありがとう」の気持ちを集めるアンケートフォームをもとに、❶の「M&M」でご紹介しています。初回は20件以上も投稿され、皆様の熱量の高さに圧倒されました。

ある月のエムホーム抜粋

　

【❸エムラジオ（社内向けラジオ配信）】
エムラジオは社内向けのラジオのことです。仕事をしながらでも楽しめるゆるい内容で、仕事中の癒しと笑いになっていたり、あまり接点のない人を知れる良い機会となっています👂　最近のラジオにはCM枠が新設！　総務さんからの諸連絡が流れるのが、味があり私は好きです。

　

ある月のエムラジ。豚の丸焼き事件…？

　

▼詳細はこちら👇

https://note.com/mhand_note/n/n7726b9c33730

　

【❹エムメディア・エムチャンネル（社員紹介コンテンツ・勉強会動画）】
社員情報をご紹介するサイト。社員の皆様の趣味・特技や勉強会の動画なども掲載されているのでとても有益。

　

社員情報例。プロフに使える写真が焼肉屋のものしかなかった…（自分）

　

勉強会の動画。エムハンド、AUN始めました

　

【❺採用サイトのコンテンツ発信】
採用サイトのコンテンツ「エムハンドは、私だ。」を定期的に更新しています！　現在も更新に向けて作業中なので、皆様お楽しみに🎉

　

https://recruit.m-hand.co.jp/special02/

　

【❻新入社員リモートランチ会】
新入社員を歓迎するためにリモートランチ会を開催し、新入社員のお話をお伺いしながら交流する会。雰囲気はこちらの記事を確認してくださると伝わるかと思います👇

　

https://note.com/mhand_note/n/n03ac3dac7cb2

　

【❼社員インタビュー（記事制作）】
こちらは2024年10月から始めたばかりの活動です。弊社内の様々な職種の方にインタビューを行い、note記事として皆様にお届け。社外向けの活動ではありますが、社内の人にとってもインタビュイーの仕事内容や人柄が伝わる内容になっているかと思います。一例はこちら👇

　

https://note.com/mhand_note/n/nc49524ed8552

　

＜外部＞

------

■社外広報一覧
❶社外M&M（月次情報まとめ）
❷エムセミ（定期セミナーの開催）
❸デザインのTIPS発信
❹デザインプロセスの発信
❺ゆるキャラ広報
❻MARPの運用と発信
❼制作実績・月刊エムハンドの発信
❽ブログ記事・メルマガの発信

------

　

【❶社外M&M（月次情報まとめ）】
「社内広報❶」で取り上げたM&M情報を外部向けに修正して、コーポレートサイトに掲載。月初にひっそりと公開しています！

▼M&M例

https://www.m-hand.co.jp/topics/#mm_250204

　

【❷エムセミ（定期セミナーの開催）】
2024年から力を入れている自社セミナー。主に同業界向けのセミナーとサイト制作に関する情報を提供するセミナーと2軸で開催しています。今後も開催していく予定ですので、よろしくお願いいたします📢

▼エムセミ例

https://www.m-hand.co.jp/seminar/direction/3628960738/

　

【❸デザインのTIPS発信】
TIPSの発信はXの広報用アカウントから行っています！　おかげ様で皆様から大きな反響をいただいており、大変恐縮です。今後も定期的に発信していく予定ですので、よろしくお願いいたします📢

　

　

【❹デザインプロセスの発信】
こちらもXで投稿。
「ワイヤーフレーム→初稿デザイン→チェックバック→デザイン完成」
に至るまでの流れを動画で皆様にお届けしています👐

　

　

【❺ゆるキャラ広報】
こちらもXでの投稿。セワシさんとトロミちゃんで繰り広げる独特のワールドがクセになるかも？　是非音声付きで聞いてみてくださいね！　懐かしの第1話はこちら👇

　

【❻MARPの運用と発信】
ギャラリーサイト「MARP」。毎週金曜10時に3サイトアップしています！

　

https://www.marp-wm.com/

　

▼こちらに詳細が載っています

https://note.com/mhand_note/n/na90e1a1482f0

　

【❼制作実績・月刊エムハンドの発信】
「制作実績」は弊社各インバウンドサイトに、「月刊エムハンド」はXで投稿をしております。多い時は月に15件ほど実績投稿する場合もあるので、是非ともご覧ください！

▼インバウンドサイトへの制作実績公開例

　

▼月刊エムハンド

　

【❽ブログ記事・メルマガの発信】
インバウンドサイト内のブログ記事の投稿、また、つながりのある企業様に対してはメルマガの配信を行っております📩

▼ブログ記事例はこちら

https://x.com/marketing_mhand/status/1899745243890958809

　

#エムハンド事例 　の紹介

ここからは内部プロジェクト（自社サイト）と外部プロジェクト（クライアント様サイト）について、事例を交えてご紹介します！

＜内部プロジェクト＞

　

内部プロジェクトは「ブランド価値を体現し、成長を加速するプラットフォーム」の役割を担っています。制作のプロセスとしては「方向性を定め、全体像を描きながら上から下にデザインを濾過していくアプローチ」…とのこと👀　

　

【事例1：MiSO TONE】

　

------

MiSO TONEとは…？
美しい映像で京都の寺社仏閣を探求するWebサイト。

＜コンセプト＞
MiSO TONEは、「侘び寂び」という美意識を「音色と味噌」という概念で再解釈した精神を表しています。経年変化や時の流れがもたらす美しさを称賛し、変化や熟成を楽しみながら新たな感性や発見を生み出す窓口となることを目指しています。

＜サイトの目的＞
衰退が進む京都の神社仏閣を、Webの力を活用して支援し次世代へ継承すること。

------

　

実際のサイトはこちら👇

https://misotone.m-hand.co.jp/

　

「ON」もしくは「OFF」をクリックするとサイトが表示されます！

　

MiSO TONEには動画、写真、宝、の3種類のコンテンツがありますが、コンテンツの更新頻度に応じて、表示順を設定しているとのこと。

　

MiSO TONEのコンテンツ。右の線画は岩松さん作

　

経年劣化を称賛し、変化をしないという裏テーマに関心する石川さん👀

　

不老不死のサイトを目指し、逆に「変化させない」のをテーマにしているサイトとのこと。更新頻度が低くなるにつれて「苔が生える」案もあったらしく、その案を見てみたかったな～と思うなどしました👀

　

企画～制作フローのまとめ

　

ちなみにこちらのMiSO TONE、2ヵ月で制作されました👏　プロジェクトのグループチャットが作成された時の様子はこちら👇

　

2023/12/30　MiSO TONE動き始める

　

MiSO TONEのチェックバックの様子はこちら👇　少しづつ現在の姿に近づいていってますね。

　

　

上記のような制作プロセスを発信し「知りたい」「見てみたい」という価値を感じてもらう流れを作ることで、興味を持ってもらうことを意識して取り組んでいます。いわゆる、プロセスエコノミーですね。

　

　

▼MiSO TONEについての詳細はこちら👇

https://note.com/mhand_note/n/n16dbbddeaeaa

　

【事例2：リクルートサイト】
エムハンドのリクルートサイトは年に1度、更新しています。今回の改修は年次更新の他に、新たにVIが追加されました！

▼リクルートサイト

https://recruit.m-hand.co.jp/

　

VIはリクルートサイトの他に、オンライン会議時の背景や告知などでも使用されています。

オンライン会議用の背景だったり

　

採用告知バナーだったり（さりげなく募集！）

　

こちらのお2人も広報担当です！　セワシさん（CV：岩松さん）、トロミちゃん（CV：宮崎さん）が楽しく弊社の活動を盛り上げてくれています。現在第3話まで展開しているので、是非皆様見てくださいね📢

ちなみに「セワシさん」と聞いて、ドラえもんを連想される方もいらっしゃるのではないでしょうか？　私もその1人なので「ドラえもん由来のネーミングなのかな？」と思っていたのですが、実は全くの偶然だったそうで👀　岩松さんがラフを完成させた翌週、藤子・F・不二雄ミュージアムを訪れた際に「キャラのパーソナリティ設定が、のび太と一緒じゃん！」と驚いたそうで…その時にのび太の孫が「セワシ」だということを知ったそうです。

　

【事例：MARPとWARP】

■MARP
WebデザインリンクのポータルサイトMARP。毎週金曜10時に、3サイトをピックアップして掲載。投稿や運用方法を統一化して、なるべく更新コストがかからないよう、無駄を削減して効率化する観点で運用中です。「いろんな人が作った資産を掲載させていただいている」という気持ちで、選定した3サイトは敬意をこめて1週間固定で掲載させていただいているとのこと👀

　

　

■WARP
アニメーションの共通言語を作ること、また知識を共有することを目的とした、Webデザインのアニメーションサイト。現在は社内でのみ公開中！　

　

　

セミナーを機に改めて自分でWARPに潜入👁　実装方法やサンプルコードが載っているのは想定内だったのですが、サイトの指示書の情報までまとまっていることにとても驚きました。

　

コードつきで載っていたり👀

　

方法や工数なんかも載っていたり👀

　

サイト制作時の指示内容がまとめられていたり👀

　

ちなみにWARP開発時のツイートを見つけたので、貼っておきます！

　

＜外部プロジェクト＞

　

外部プロジェクトこと、クライアントサイトの制作に関しては「クライアントのブランドビジョンに共創し、確かな形へ昇華させる」ことを目的としています。制作のプロセスとしては「方向性を定め、下から上に検証を積み上げながらデザインを絞りこむアプローチ」とのこと。「内部プロジェクトと、真逆の動きですね」と石川さん。

　

【事例：SmartHR様のコーポレートサイト】

昨年末、SmartHR様のコーポレートサイトのリニューアルを弊社が担当させていただきました。快く実績公開にOKをだしてくださったSmartHR様、ありがとうございました！

　

完成版、SmartHR様TOP ▼SmartHR様のコーポレートサイトはこちら

　

▼SmartHR様のコーポレートサイトはこちら

https://smarthr.co.jp/

　

ビジョンに関してはエムハンドがヒアリングから行って導き出すこともありますが、今回はSmartHR様から出していただいたとのこと。いただいた情報をもとに「新しい王道感」をデザインのテーマに設定。

　

　

アイデアやデザインを導き出すための考え方をフレームワーク化して型にはめつつ、独自性を見出していくかというプロセスが大事…とのこと。現在いろんなデザイナーさんと検証中。

　

灰色部分のぼかしは、マテリアルボードの資料

　

各プロセスについては上記の通り。このプロセスでビジュアルの方向性をある程度かためていき、アウトプットしたものが下図のデザイン3案です。

　

セミナー中にいただいたコメント。ありがとうございます！

　

デザイン案は「しなやか案」「ソフト案」「シャープ案」として、アイデアの原型が見えるように提示して、方向性を見極めるとのこと。結果的に一番左の案で進むことに決定👏　そして、さらなるブラッシュアップへ。

　

一番左の案「スイッチバック」をブラッシュアップさせていく過程

　

検証を重ねていく過程の一例はこちら👇

　

様々な表現を試作。思わず石川さんもびっくり

　

その後、方向性の整理とチェックバックデザインを基に、
「TOPデザインをブラッシュアップ→実装フェーズでデザインのチューニング&修正対応→公開」。様々なプロセスを残していくことで合意形成に使うとともに、広報展開に向けての対応を行ったとのことです。

　

　

SmartHR様のチェックバックの過程の詳細は、セミナー動画をご覧ください！

　

チェックバックの役割とプロセス

チェックバックの役割は「思考を広げ、最適な手段を見つけるサポートをすること」で、5W1Hの観点でプロセスで行っているとのこと。

　

　

デザイン部では「デザインで選ばれる組織」をゴールに設定して、組織運営やレベル感に合わせたやり取りを行っているそうです。チェックバックは「組織の課題解決のため」に取り組んでいて、最終的なゴールは「何か言いたいけど、特に指摘がない」状態にすること。

　

　

本日のセミナーのまとめ

デザインを「作る」だけでなく「使う」ために意識したいこととして、「8つの習慣」が紹介されました。


8つの習慣

　

------

＜デザインを使うために意識した8つの習慣＞
・作業をすぐにまとめる（実行する）
・工数を抑えて効率化することを楽しむ
・ホウレンソウを使いこなす
・タスクの優先度を割り振る　
・雑務こそチャンスに変える姿勢をもつ
・ちょっと無理をする
・期限を区切って強くなる
・ツールを柔軟に使いこなす

------

　

セミナー冒頭で「相関図」の説明がありましたが、実際に何がどの部分で使用されているかをわかりやすくするため、今回のセミナーの内容をに各デザインを当てはめましたのでご紹介します👇

　

これが…↓

　

こう！石川さんも思わず笑う、全方位デザイン

　

作成しようと思ったきっかけは、石川さんから「こういう資料があった方が、いいのでは？」のご提案があったからとのこと。全方位に埋め尽くされた圧巻の相関図……特にセワシさんとトロミちゃんの存在感が突き抜けていますよね👀

おまけ

常にお忙しいお三方、実はそれぞれ1人につき3人体制で働いているとのこと！（例：石川さん=石川さん×3人）

　

3人体制のお三方。0時をすぎても笑顔なのはさすがですね

セミナー本編終了後のアフタートークでは、グッポーのお話もありました👀

　

嬉々としてグッポーのことを語る石川さんと見守る2人

　

ちなみに今回のセミナー、セミナー終了時間ほぼ「0時」当日視聴「4244名」でした！　安定の1時間押しでしたが、ご参加くださったみなさん、ありがとうございました📢

　

お疲れ様でした！

　

04.いただいた感想など

アンケート結果や「#エムハンド事例」タグを一通り確認させていただきました！　コメントをくださった皆様、ありがとうございました🙇

　

　

CSS Niteからのアンケート回答にはこんなコメントをいただきました！

　

------

＜印象に残ったキーワード＞
・明日死んでもわかるように・属人化しない仕組み
・ちょっと無理する
・分母は真面目・分子は不真面目
・雑務はチャンス
・時間がないと言っている人はいつまでもやらない

＜感想やご意見＞
・組織運用や情報の共有の方法など圧巻でした。ありがとうございました。
・岩松さんのチェックバック、全部見直したいです。
・ここまで思考を突き詰めて設計をされておられるのかと驚愕でした。
・アニメーションに名前をつけてアーカイブしていくプロジェクトが、とても興味深かったです。
・岩松さんの頭の中が宇宙なほど広く、分類化されていて、常に先を見据えている感がとてもすごかったです。色々、考え方の視野が増えました！また、講師でお願いしたいです！

------

　

＼　弊社社員も見てました！　／

　

ちなみに私は、YouTubeのコメント欄にはりついていました！

　

セミナー開始から2時間。この時のYouTubeでの視聴人数は326人でした！

　

セミナーを見届けた時の様子👁YouTube組の皆さん、ありがとうございました🤝

　

・・・

　

おわりに

ここまでCSS Niteでの弊社セミナーについて、1視聴者視点でご紹介しました。私が初めてチェックバックやウェブスタッフさんとのセミナーを見たのは、今から2年くらい前、入社前のことでした。あれから入社することになり、弊社内の仕組みを知ってから改めて見ると、あれもこれもそれも、どこかに繋がっているのだな……と！　

本記事を見て、弊社に興味を持っていただいた方、またセミナー内容が気になる方は、是非ともセミナーをご覧になってみてくださいね。

　

https://cssnite.doorkeeper.jp/events/180722

　

最後まで読んでくださり、ありがとうございました！

採用募集📢

エムハンドでは、Webディレクター（経験者）を継続的に募集しております！　皆様のご応募、お待ちしております。

　

Related Blogs