シナップブログ

シナップメンバーに聞いてみた、リモートワーク&デスクワークのリフレッシュ方法!

Wed, 04 Feb 2026 02:48:10 GMT

こんにちは。Admin 三木です!

本日はシナップメンバーに聞いてみた、「リモートワーク&デスクワークのリフレッシュ方法」 をお送りします。

業務環境の基本が在宅勤務、業務内容はほぼデスクワークなシナップメンバー。仕事中に身体を動かすことはほぼなく、オフィス勤務と異なり偶発的なコミュニケーションによる気分転換もありません（お手洗いや給湯室で誰かと話す等々）。すなわち自分の心や身体のコントロールはすべて自分の手にかかっている!

今回はそんな心と身体の自己管理・コントロールのひとつとして、シナップメンバーが実践している「リモートワーク業務中のリフレッシュ方法」についてご紹介します。ぜひご覧ください♪

■リモートワーク運動不足解消法についてはこちら!：シナップメンバーに聞いてみた、リモートワーク運動不足解消法!

【デザイナー小茅】アイマッサージャーでリフレッシュ!

小茅コメント

目の疲れを感じたときは、アイマッサージャーでリフレッシュしています。以前、会社からプレゼントでもらったのがきっかけで使い始め、気に入って二台目を購入しました。毎日の作業の合間に欠かせないアイテムです。

デスクワークの天敵、目の疲れ。作業の合間にアイマッサージャーでほぐせるのは素敵です!

【ディレクター三國】お気に入りのヘッドフォン＆爆音で音楽を楽しむ!

三國コメント

デスクでできる手軽な気分転換は、ワークチェアを最大までリクライニングして、お気に入りのヘッドフォンで音楽をできるだけ大きな音量で聴くことです。少しの時間で頭が切り替わるので、スッキリと次のタスクに取りかかれます。

一瞬で自分の世界に入ってリフレッシュ。少しの時間でできそうで今度マネしてみようと思います!

【エンジニア村山】ティーブレイクでリフレッシュ!

村山コメント

ティーブレイクです。といっても本格的なものではなくて、ティーパックだったりスティックタイプだったり手軽に入れるやつですが。地域柄めちゃめちゃ寒い日だとポットにお茶入れて用意したりもします。

同じ姿勢で作業をしていると、どうしても筋肉は強張りがち。そんな時に温かい飲み物は本当にいい気分転換になりそうです♪（ちなみに村山さん愛用コップはガンダムのシャア専用マグカップです。ｺｿ）

【デザイナー飯山】合間にはさむ腕立てがスッキリのコツ!

飯山コメント

タスクのちょっとした待ち時間で腕立てして気分転換してます。体も温まるし、体全体の血流が良くなる気がしてスッキリします。

ちょっとした待ち時間の合間に身体を動かして気分転換。無駄のないリフレッシュ法です!

【ディレクター村田】昇降テーブル＋バランスボードで仕事しながら体操?!

村田コメント

昇降テーブル + バランスボードです。バランスボードの端っこの方に立って足の筋肉全体伸ばしたり、片足でバランス取ったり、仕事しながらその場で簡単に体操できてリフレッシュになります。バランスボードの上に乗ると前屈みな姿勢も解消できます。

作業による身体の強張りをほぐしつつ、運動不足の解消にも効きそうなスペシャルながら体操です!

【エンジニア小川】観葉植物たちの緑に癒される…。

小川コメント

テレワークになって観葉植物を育て始めて以来、少しずつ部屋の緑が増えています。在宅時間が長く外の緑に触れる機会が少ない分、部屋の植物たちに癒されています。

疲れにはグリーン。緑の力をうまく使ったリフレッシュ法です!

【デザイナー竹田】息子さんとワンちゃんからエネルギーチャージ!

竹田コメント

煮詰まった時やリフレッシュしたいときは、そばにいる犬を撫でに行きます。犬がつれない時は、デスクに置いてある自作の全部息子カレンダーをめくって癒されています。保育園のお迎えまであとちょっと、がんばろうという気にさせてくれます。

つれない姿すら可愛すぎるワンちゃんと、とってもキュートな息子さんから貰える癒しパワー。いくらでも頑張れそうです!

【ディレクター平木場】雑談を意識的に増やしてリフレッシュ!

平木場コメント

意識的に人と雑談をすることがいちばんの発散方法であり、よりよいリモートライフを送るためのコツだと1人暮らしの私は気づきました。日光に意識的にあたること、シャワーだけで済まさず湯船に浸かること、ご飯をちゃんと食べること、たまにでいいから運動をすることなどいろいろ自分だけでできる方法はあるのですが、それでも「なんか元気ない」から抜け出させてくれるのは人との雑談30分だったりします。シナップでは「お茶会」という名の雑談会があり、とても有意義な会だと感じています。

リフレッシュといえばやはり人と話すこと!シナップで実施している「お茶会」タイムはまさにそれかもしれません♪副代表大川のギター弾き語り、参加者全員メガネでおもしろい等々（笑）、自分ひとりでは得られない楽しさは、充実した仕事をするために本当に大切なのかもしれません。

■お茶会についてはこちら!：コミュニケーション不足になりがちなリモートワークの救世主?!お茶会のすすめ。〜その目的・はじまり・やり方・実際の感想までご紹介!〜

まとめ

いかがだったでしょうか?リモートワークをより良いものにするためには、不可欠な自己管理。参考になるリフレッシュ法があれば幸いです♪

以上、ここまでお読みいただき、ありがとうございました!

「なんとなく下がる」の正体──季節から考えるグロース施策の組み立て方

Wed, 03 Dec 2025 01:34:57 GMT

こんにちは。シナップ大川です。

今回はシナップの活動報告も兼ねた小冊子『SINAP Journal 2025 Summer』に掲載した「「なんとなく下がる」の正体──季節から考えるグロース施策の組み立て方」の記事をご紹介します。

「なんとなく、夏は反応が落ちる気がする」──そんな声を耳にしたことはありませんか？

気温やイベント、生活リズムの変化。たしかに夏は、ユーザー行動が少し揺らぎやすい季節です。
実際、BtoB領域では長期休暇の影響で商談や意思決定が滞りやすくなったり、BtoCでも帰省やレジャーで「いつもの行動」がズレてくることがあります。

一方で、観光・飲食・イベント系のように、むしろ活発になるサービスもあるでしょう。
こうした季節要因に目を向けて、施策や検証のタイミングを調整することも、グロースの大切な視点のひとつです。

私たちが年間500本以上のABテストを実施してきた経験から見えてきたのは、ユーザーの行動は季節やイベントによって大きく変化するということです。

年間イベントとユーザー行動の変化

時期	季節・イベント
1-2月	新年・決意の季節	新年の決意（習い事・転職・住宅購入）、初売り・福袋で高まる購買意欲、バレンタインのギフトや恋愛関連ニーズ。
3-4月	新年度・新生活の季節	年度末決算でBtoB駆け込み需要、卒業・入学・入社で引っ越しや新生活準備が活発化、転職・異動でキャリア需要増
5-6月	安定期とボーナス前	GWは旅行・レジャーが活発、他分野は一時停滞。母の日でギフト需要増、梅雨・ボーナス前は落ち着き、検討が進む時期。
7-8月	夏休み・お盆	夏休み準備で旅行・レジャー需要増、お盆は家族と相談する機会に。BtoBは長期休暇で商談や意思決定が停滞しやすい時期。
9-10月	秋の行楽・活動再開	新学期で学習・習い事の需要回復、秋の行楽で旅行需要が再び拡大。ハロウィンはイベントやエンタメ関連が活発化する時期。
11-12月	年末商戦・大掃除	ブラックフライデーやサイバーマンデーでEC最大の商戦期。ボーナスで高額商品の需要増、年末は断捨離やサービス見直しも。

春の新生活シーズンでは、転職・引っ越し・新しい習い事など、人生の変化を検討する時期。BtoB領域では年度末の駆け込み需要と新年度予算の開始が重なり、商談が活発化します。

夏のお盆時期は、久しぶりに会った親族や友人から「家を買った」「習い事を始めた」「保険を見直した」といった身近な人の体験談を聞く機会が増え、自分も検討してみようかな、と思うきっかけになりやすい時期です。

秋の活動再開期では、夏の停滞から活動が再開され、学習関連サービスは新学期需要で活発化。BtoB領域も下半期の予算執行が本格化します。

冬の年末商戦では、EC領域で年最大の商戦期を迎え、ボーナスの影響で高額商品の購買意欲も向上。新年とともに「新しいことを始めたい」という決意が芽生え、様々なサービスで新規獲得が活発化します。BtoB領域は年度末予算の消化と来年度の新規プロジェクト計画が並行し、1月以降の新規案件が動き出します。

ユーザーの行動は、毎月、毎週、少しずつ変化しています。数字の奥には、そのときどきの暮らしや気分のゆれが隠れています。

逆にいえば、季節は改善のチャンスをくれる「自然なタイミング表」。

気づいたときにすぐ動ける柔軟さが、成果を分ける鍵になるかもしれません。

皆さんが日々向き合っている数値の変動。その背景には、季節という大きな流れがあります。CVR改善やリード獲得でお困りの際は、豊富な経験を持つシナップにお気軽にご相談ください。「こんなことでも相談していいの？」そんな小さな疑問からでも大丈夫です。
季節の変化を味方につけた、効果的な改善策をご提案いたします。

UXの広がりと進化する体験デザイン——HCD-Net資格者が語る、これからの体験設計

Wed, 05 Nov 2025 01:08:03 GMT

こんにちは。シナップ大川です。

今回はシナップの活動報告も兼ねた小冊子『SINAP Journal 2025 Summer』に掲載した「UXの広がりと進化する体験デザイン——HCD-Net資格者が語る、これからの体験設計」の記事をご紹介します。

シナップには、HCD-Net認定の人間中心設計（HCD）専門家・スペシャリストが在籍しており、日々のプロジェクトの中で、実践的なUXデザインを追求しています。
今回はその中から、坂西・大川・村田の3名が登場。それぞれの経験をもとに、現在のUXデザインの現場感や、これからの体験設計について語り合いました。

※ 人間中心設計専門家、人間中心設計スペシャリストとは
人間中心設計推進機構（HCD-Net）が実施する専門家、スペシャリストの認定制度で、日本におけるUX/HCD分野のプロフェッショナルとしての知識・経験を証明する資格です。特に専門家はプロジェクトでの中心的な推進役としての経験が必要とされ、「プロジェクトで主導的な役割を果たせること」が認定基準となっています。

UXって〝当たり前〟になってきた !?

大川：最近、お客様の中でも「UX」という言葉が浸透してきていると感じるのですが、実際どう感じていますか？

村田：かなり普及していると感じます。以前は「このプロジェクトではまずUXリサーチを行いたいのですが…」と説明が必要でしたが、最近は先方から「ぜひ進めたい」と仰ってくださるケースも増えました。ただ、UXリサーチ自体が目的になっている場合や、そうではなくとも、実施後の成果、具体的な手段まではご存じないことが多いです。

坂西：確かに言葉は浸透したけど、ウェブサイトやアプリを〝作りたい〟という要望の背景にある「なぜ」を掘り下げる過程で、ユーザー理解の重要性をご理解いただき、そこからUX専門家が関わるケースもまだまだ多いと感じています。

大川：言葉は知られるようになってきたけれど、実際の進め方や考え方まではまだこれから。だからこそ、こちらからの提案や実施内容を丁寧に伝えていくことが大事ですね。

HCDプロセスの理想と現実

大川：本質的という意味では、HCDプロセスは、本来、仮説と検証を繰り返す継続的なサイクルが前提ですが、実際どこまで回せていると感じますか？

坂西：答えづらい質問だなぁ(笑)、ご相談いただくことの中ではやっぱり「作ること」が目的なことが多いので、リサーチなども「作るため」に行われて「作ったら終わり」になってしまうことも多いですね。プロジェクトごとのスピードやフェーズごとの目的も異なるので一概には言えないけど、当初の仮説を検証して適応していくことや、より深く顧客を理解していくことがビジネス的な価値につながるということを、うまく伝えられていないという不甲斐なさは感じています。

村田： 私もそう思います。リリース後にはデータも取れるようになるので、それをもとに、シナップでやっている「グロース支援」みたいな継続的なアプローチに発展させていけると理想的だなと感じています。

「UXやってます」って言う会社、多いけど…選ぶの難しくないですか？

大川：「UX」という言葉が普及し、「UXに取り組んでいます」と掲げる会社も非常に増えてきました。シナップもそのひとつですが、お客様がそういった会社を選ぶ際、違いが見えづらく、選定が難しいのではないかと感じます。

坂西：UXは課題を一緒に見つけていくプロセスで、事前に成果物を提示することもできないので違いを判断するのは難しいですね。基本は課題に対してどう向き合い、どんな結果を出してきた会社や担当者なのか？実績を通じて語ることが大事だと思います。

村田：リサーチ手法自体は誰でもある程度再現できますが、結果をどう解釈し提案に落とし込むかが各社の違いです。企業選定時に差別化ができるとしたら、自社の専門性や実績を示すことだと思います。

外部専門家を活用する真価
言語化と組織変革

大川：「リサーチ手法自体は誰でもある程度再現できる。」という話がでましたが、外部の専門家を活用するメリットとは？

村田：第三者の視点で言語化して共有することも大きいと思います。どのご担当者様も、ひとつのWebサイトだけを見ているわけではないため、気になっている箇所はあれどまとまった時間が取れずおざなりになってしまうことが多いと思います。外部に依頼できれば時間を確保しなくても課題の可視化が進み、かつご自身では言語化できなかった課題感がプロ目線で解説・チーム内で共有できますので、組織の意思決定に貢献できると考えています。

坂西：まさにそれがUXデザインがもたらす副次的な価値だと思います。プロジェクトメンバーが多くて意見や方針をまとめるのが難しいような時に、調査結果やそこから出てきた課題や解決策、ロードマップを資料に落とし込んで共有することで、目線が揃って動きがよくなったり、サブプロジェクトがどんどん生まれて大きな波及効果を生み出していく、という状況を何度も見てきました。

大川：そこは僕も同感です。こうした副次効果はもっとアピールしていきたいですね。

UXデザインとAIのこれから──変わる意思決定と情報設計

大川：最後に、AIがUXに与える影響についてどう思われますか？
AIがユーザーの意思決定に深く関わるようになり、従来のカスタマージャーニーマップも見直しが必要になるのではと感じています。

村田：検索よりもAIを介した情報取得が主流になれば、従来のジャーニー設計はまた大きく変わりますよね。

坂西：AIによる変化は非常に大きいですね。ユーザーの情報収集能力が一気に高まり、企業の評判や記事の質が可視化され、評価されやすくなります。
また、UIに関しても、今後はユーザーの状況に応じてその場でAIがUIを生成するような体験が当たり前になるかもしれません。最終的に求められるのは「ページ」ではなく、ニーズに合わせて読み書きできるデータやAPIになっていくでしょう。

大川：提供側も変わってきますよね。

村田：私たちUXを設計する側としても、AIを使ってペルソナの妥当性を検証したり、ジャーニーマップの抜け漏れ確認や補完にすでに活用しています。

坂西：リサーチの現場でもAIの活用は進むよね。データの集計・分析などではAIのパワーを活かして大きな変化が生まれてるし、インタビューでも、人格を与えたAIをペルソナとして扱うことで、複数のユーザーインタビューを同時に時間の制約なく行うようなことも可能です。またリサーチ後に、それらの調査データを学習したAIと一緒に戦略考えるとか、わかりやすいところでは、コピーやUIなどの具体的なコミュニケーションを考えていくシーンでも、大いに使えそうです。

大川：AIの進化は、ユーザー行動とデザインプロセスの両方に大きな変革をもたらしそうですね──。
今日の座談会を通して改めて感じたのは、やはりUXは時代と共に変化していくもの。だからこそ、継続的に改善していくことが重要だと思いました。
これからも柔軟に学び続けながら、よりよい体験のあり方を追求していきたいと思います。
ありがとうございました。

いかがだったでしょうか。本対談では、「UX」が当たり前になりつつある今、HCDのプロセスを本質的に回していくことや、AIを取り入れた新たな体験設計の可能性について、資格を持つ専門家だからこそ語れる、現場のリアルとこれからの展望が語られました。

シナップには、HCD-Net認定の専門家・スペシャリストをはじめ、豊富な知見を持つUXデザイナーが在籍しています。UXリサーチから課題改善のご提案、具体的な制作まで、一貫したご支援が可能です。実際のUXリサーチやUXデザインのアウトプット資料の具体例をご覧いただくこともできますので、ご興味のある方は、ぜひお気軽にご相談ください。

多様化するユーザー行動から考えるUXデザインの新たな出発点ユーザージャーニー最適化サイト体験から顧客体験へ

Wed, 22 Oct 2025 01:08:17 GMT

こんにちは。シナップ大川です。

今回はシナップの活動報告も兼ねた小冊子『SINAP Journal 2025 Summer』に掲載した「多様化するユーザー行動から考えるUXデザインの新たな出発点　ユーザージャーニー最適化サイト体験から顧客体験へ」の記事をご紹介します。

サイト体験を超えて

私たちは日々、サイトのUI改善やコンテンツ更新を通じて、ユーザーにとって快適な体験づくりに努めています。しかし現在のユーザー行動は極めて複雑です。

ユーザーは検索エンジンによる情報収集、SNSでの評判確認、複数サービスの比較検討、さらにはオフラインの体験を行き来して意思決定を行います。近年ではAIを活用した検討プロセスが加わるケースも増えています。

つまり、サイトというひとつの接点だけを見つめていては、ユーザーの本当の行動や思考を捉えきれません。

そこで本特集では、「ユーザージャーニー最適化」という視点をもとに、サイトに至るまでの期待や背景、そして訪問後に続く体験も含め、顧客体験全体を再設計する方法を探っていきます。

「点」ではなく「線」で見る

ユーザージャーニー最適化は、単に既存のカスタマージャーニーマップを細かく修正することではありません。

課題を自覚していない状態から、認知・興味を経てロイヤル化まで、ユーザーの感情や行動を連続した物語として捉え直し、その中で自社サイトが果たす役割を再設計することを指します。

重要なのは、タッチポイントごとにKPIを置くだけでなく、「次の行動につながるか」を評価する視点です。

最初のステップは、ユーザーが目的を達成するまでに触れるタッチポイントを漏れなく可視化することです。

広告、検索結果、比較サイト、レビュー記事、店舗での接客、そしてAI。これらを一枚のキャンバスに重ねてみると、サイトでの課題が単独ではなく連鎖の中で発生していることが分かります。

この俯瞰図が、改善の優先順位を決める羅針盤になります。

競合サイトも含めた比較行動の把握

意思決定時、ユーザーは複数のサイトを行き来し、価格や機能だけでなく、使いやすさや信頼感といった感覚的要素を総合的に判断しています。

この行動を理解するにはユーザー視点で自社と競合を実際に体験することが有効です。

「比較表がすぐ見つかる」「メリットが視覚的に整理されている」など、他社にはあって自社にはない工夫が明らかになります。これらの差分は、差別化や改善のヒントとなります。単に項目を並べるだけでなく、情報の見せ方や導線設計が、ユーザーにとって親切で納得感を生むものになっているかを考えましょう。

表面的な違いだけでなく、ユーザーの行動や心理の背景に目を向けることで、より本質的な改善へとつながっていきます。

意思決定の瞬間に寄り添う

ユーザーが複数の情報源を比較し、思考をめぐらせながら最終的な意思決定を下す〝その瞬間〟を想像してみてください。そこで求められるのは、単なる情報の提供ではなく、「これなら自分にフィットしそうだ」「後悔はしないだろう」と感じられる納得感や安心感です。

これは、スペックや価格といった比較要素だけでなく、ブランドの信頼感や、サイト内の導線、説明の丁寧さといった非言語的な要素にも強く依存しています。

私たちが目指すべきは、この瞬間に寄り添えるサイト体験をデザインすることです。

そのためには、訪問直後のファーストビューにこだわるのはもちろん、FAQや事例紹介、お客様の声など検討プロセスの進捗とともに出てくる疑問や不安に応える後方支援的なコンテンツも、意思決定を後押しする重要な役割を担っていると再認識する必要があります。

体験をつなぐコミュニケーション設計

ユーザージャーニーを最適化するうえでは、サイト内だけでなく、オフラインでの体験も含めた「体験のつなぎ方」に目を向けましょう。

特にリアルな製品などの場合は「実際に使ってみたい」「本物を見て確かめたい」と感じるユーザーに対して、リアルな接点を用意できているかは大きなポイントです。

たとえば、サイトで製品に興味を持ったユーザーに、近くのポップアップショップや体験型店舗の情報を提供することで、オンラインからオフラインへとスムーズに導くことができます。

仮にオフラインの施設がなかったとしても、こうした心理に応える形で、実際の使用感やサイズ感を伝えるショート動画やレビューコンテンツを用意することで、ユーザーの不安や疑問を解消できます。

AIが変えるジャーニーの風景

ユーザージャーニーはAIの登場で大きく変わりつつあります。従来は検索エンジンや比較サイトで情報を集め、ユーザー自身が取捨選択していましたが、現在は生成AIを使って「おすすめを聞く」「違いを要約させる」「自分に合う選択肢を抽出する」といった行動が一般化しつつあります。意思決定の主導権がAIという〝もう一人の相談相手〟に分散し始めているのです。

一方、運営側もAIを活用しています。ユーザーの行動履歴をもとにしたパーソナライズやリアルタイム最適化によって、体験はより動的で個別化されていきます。また、AIが自社サイトのFAQや製品情報を引用しやすいよう構造化データを整えることや、文脈を持って情報を伝えるコンテンツ設計など、新たな視点でのジャーニー設計が求められるでしょう。

AIとともに意思決定する時代。そこにどう応えていくかが、これからのユーザー体験において避けて通れないテーマなのです。

「最適化」の旅は終わらない

ユーザージャーニー最適化は一度実施したら終わるものではありません。ユーザーの行動や価値観、市場環境は常に変化します。定期的にユーザーを観察し、仮説を立てて検証し続けることが求められます。このプロセス自体が、ユーザーを深く理解するための営みであり、ブランドとしての姿勢を示す活動でもあります。

シナップでは、こうした体験設計をお手伝いしています。経験豊富なUI⁄UXスペシャリストが、サイト改善からサービス全体を見据えた本質的なUXデザインまで、一貫した支援を提供します。お気軽にお問い合わせください。

シナップってどんなメンバーが多い?どんな企業風土?〜クリフトンストレングス®（旧ストレングスファインダー®）から見えるシナップ!〜

Wed, 08 Oct 2025 01:38:20 GMT

こんにちは!Admin 三木です。

さっそくですがシナップでは入社した際に、互いの特徴を知ることでよりクリエイティブな相乗効果を産むことを目的に、クリフトンストリングス®（旧ストレングスファインダー®）のテストおよび研修を行なっています。

と、このように普段は個人にフォーカスすることに使う結果ですが、実はその結果を使って長らく三木の中でやってみたいことがありました。それは、「メンバー全体で結果を見た時に何か特徴があるのか知りたい」。もし特徴があれば、それはすなわちシナップの風土であり、個性とも呼べるのでは?と、ずっと気になっていました……。ただ、分析をしようにも業務内でそこに時間を割くことが中々叶わず時が経ち。ですが時は大AI時代。AIの力を借り、ついに夢を実現です!（大げさ。笑）

そんな個人的興味からはじめたことではありますが、特徴のあるおもしろい結果になったと感じています。普段お世話になっておりますクライアントの皆さま、シナップにご興味いただいている方々など、ぜひ一緒に楽しんでいただけますと幸いです♪

クリフトンストリングス®（旧ストレングスファインダー®）とは

まずクリフトンストレングス®（旧ストレングスファインダー®）について、簡単に説明します。

クリフトンストレングス®（旧ストレングスファインダー®）とは、米国ギャラップ社が開発したオンライン「才能診断」ツールとなり、テストを行うと、34の資質の中から自分の思考、感情、行動のパターンを特徴づける「強み」を見つけることができます（資質が順番付けされる）。

また34の資質は、「人間関係力」「思考力」「実行力」「影響力」の4領域に分かれており、どの領域が上位に多いかもその人を表す指標となります。

公式サイト：クリフトンストレングスの4つの領域とは?

クリフトンストリングス®（旧ストレングスファインダー®）から見えるシナップ!

ここからが、シナップメンバーの結果となります。

まず下記、メンバー全員のテスト結果から出したグラフとなります。全メンバー14名（2025年9月現在）、各々の結果からまず強みとなる資質TOP10を抽出、そこから保持者の多い順に10位までを並べた、さながらシナップ資質・強みランキングです。

ついては、ここから見えるシナップの特徴とは?をまとめていきたいと思います!

シナップにはどんなメンバーが多い?

まずシナップにはどんなメンバーが多いのでしょうか? AIからもらったコメントとあわせ、ご紹介していきます。

一人ひとりの個性を尊重する
深く考えることを好む
アイデアを生み出す創造力、論理的に分析する力を持つ
一度やると決めたことは最後までやり遂げる

■一人ひとりの個性を尊重する（個別化）

AIコメント：

「個別化」が圧倒的1位（14人中12人、85.7%）であることから、シナップのメンバーは一人ひとりの違いやユニークな個性に強く惹かれ、それを尊重する人々であることが伺えます。テンプレート的な対応ではなく、相手に合わせた最適なアプローチを自然と考えることができます。これは、多様性を大切にし、それぞれのメンバーが自分らしくいられる環境を示唆しています。

＊公式解説：個別化

■深く考えることを好む（内省、学習欲）

AIコメント：

「内省」（3位）や「学習欲」（3位）も上位にランクインしていることから、物事を深くじっくり考え、知的好奇心旺盛な方が多いようです。新しい知識やスキルを学ぶこと自体に喜びを感じ、得た情報を自分の中で咀嚼して本質を理解しようとします。

＊公式解説：内省学習欲

■アイデアを生み出す創造力、論理的に分析する力を持つ（着想、分析思考）

AIコメント：

「着想」（2位）と「分析思考」（3位）が上位を占めている点は、シナップの大きな特徴です。これは、新しいアイデアを次々と生み出す創造力と、物事を客観的なデータや事実に基づいて論理的に分析する力を兼ね備えていることを意味します。単なる思いつきで終わらせず、そのアイデアが本当に価値があるのかを冷静に分析し、実現可能な計画に落とし込むことができる、非常にバランスの取れた思考力を持つチームと言えるでしょう。

＊公式解説：着想分析思考

■一度やると決めたことは最後までやり遂げる（達成欲、責任感）

AIコメント：

「達成欲」（7位）や「責任感」（10位）も高く、一度やると決めたことは最後までやり遂げる力と、自らのコミットメントを誠実に果たそうとする姿勢を併せ持っています。

＊公式解説：達成欲責任感

【三木コメント】

納得!という感想です。特に「個性を尊重する」は強く感じます。長くなるので詳細は割愛しますが、入社した初日にこの会社では自然体でいられる気がする!と思ったことを今でも覚えています。ステレオタイプで物事を捉えないというのでしょうか。その他の考える・分析が好き等も、納得の結果です。

シナップってどんな会社?（カルチャー、得意なことなど）

次に会社全体としては、どのような特徴を持っているのでしょうか?カルチャーや得意なことについて分析してみました。

互いの個性を尊重し、安心して深く思考できる、心理的安全性の高いカルチャーが根付いている
クライアント一人ひとりに最適化された、質の高いソリューションを提供することが得意

■互いの個性を尊重し、安心して深く思考できる、心理的安全性の高いカルチャーが根付いている（親密性、調和性、個別化、内省）

AIコメント：

「親密性」（4位）や「調和性」（10位）が上位にあることから、メンバー同士が深く、信頼に基づいた関係を築くことを大切にする文化があると考えられます。チーム内での対立を避け、協力して物事を進めようとする傾向があります。また、個々の違いを尊重する「個別化」の風土と相まって、メンバーが安心して自分の意見を言える、心理的安全性の高い職場である可能性が高いです。あわせて、「内省」の資質は、活発な議論の中にも一度立ち止まって深く考える「思慮深さ」をもたらします。これにより、表層的ではない、本質的な議論が奨励される文化が育まれているのではないでしょうか。

＊公式解説：親密性調和性個別化内省

■クライアント一人ひとりに最適化された、質の高いソリューションを提供することが得意（個別化、着想、分析思考）

AIコメント：

「個別化」の強みを活かし、クライアント一社一社の状況やニーズに合わせた、オーダーメイドの提案やコンサルティングが非常に得意であると推測されます。画一的なサービスではなく、顧客の真の課題を見抜き、最適な解決策を提供することに長けているでしょう。また、「着想」と「分析思考」の組み合わせから、複雑で前例のない課題に対しても、革新的なアイデアと緻密な分析でアプローチできることが強みです。新規事業の立ち上げ支援や、難易度の高いWebサイト・システムの構築などでその力を発揮するでしょう。

＊公式解説：個別化着想分析思考

【三木コメント】

特に「メンバーが安心して自分の意見を言える」「表層的ではない、本質的な議論が奨励される」の部分、たしかに!と感じました。たとえば、シナップでは年に2回行われる「価値観をすり合わせる会」というものがあるのですが（より良い仕事をするためメンバーから集めた課題について意見を交換し合う会）、その際にも忌憚のない意見を伝え合うはもちろん、本質はどこにあるのかを同時に話し合っています。また「課題解決が得意」ついても、手前味噌ではありますが……そうだな!と強くうなずいてしまいました（笑）。

全体的にみて

「戦略的思考力」の資質が非常に豊富
思考力と人間関係力の美しいバランス

■「戦略的思考力」の資質が非常に豊富

AIコメント：

「個別化」「着想」「学習欲」「分析思考」「内省」「収集心」といった、物事を考える力に関連する資質がランキング上位に集中しています。これはシナップが「考えるプロフェッショナル集団」であることの何よりの証拠です。

■思考力と人間関係力の美しいバランス

AIコメント：

「考える力」が際立つ一方で、「個別化」「親密性」「共感性」「調和性」といった人と繋がる力もバランス良く上位に見られます。論理的で知的でありながら、決して冷たい印象を与えず、人間的な温かみを持ってクライアントや仲間と接することができる。このバランス感覚が、シナップのユニークな企業文化と提供価値の源泉になっているのではないでしょうか。

まとめ

メンバーについて、会社について、それぞれまとめてみました!「考えるプロフェッショナル集団」等、AIさんがとてもステキにまとめてくださり気恥ずかしい部分も大いにありますが、全体的にわかるなーという印象です。そして長年の夢が実現し、満足です（笑）。

と、完全に個人の興味からはじめた内容ではありますが、少しでも楽しんでいただけていれば幸いです。ここまでご覧いただき、ありがとうございました!

『SINAP Journal 2025 Summer』PDF版をアップしました！

Wed, 17 Sep 2025 03:26:44 GMT

ダウンロード：SINAPJournal_2025s.pdf

こんにちは。シナップ大川です。

クライアント、パートナーのみなさまにはお手元に届いているころかと思います。
毎回ご好評いただいておりますシナップの活動報告も兼ねた不定期冊子『SINAP Journal』の最新号『SINAP Journal 2025 summer』を作成しました。

特集は「ユーザー体験を創る」。
ユーザーは今や検索やSNSだけでなく、複数のサービスを比較したり、AIに相談したりしながら意思決定をしています。
本号では、こうした多様な行動をふまえ、単に「サイトを改善する」だけでなく、ユーザーが出会ってから購入・利用に至るまでの体験全体をどう設計するかを考えました。
さらに、HCD-Net認定資格を持つメンバーによる座談会では、UXが当たり前になりつつある中での課題や、AIが変えるこれからの体験デザインについて語っています。

好評の「STAFF VOICE」はEXPO 2025 大阪・関西万博にちなんだ「思い出のある行った国・行ってみたい国」。スタッフが世界各地の旅の思い出や憧れを語り合いました。

また、ABテストの豊富な経験からまとめた「季節とユーザー行動の関係」や、スタッフの愛用品を紹介する「こだわりメガネ」など、今回も読み応えのある内容になっています。

ぜひご覧ください！

PDFのご要望も頂きますので、こちらにPDFを掲載いたします。
お時間ございましたら、ぜひご覧いただき、シナップをより身近に感じていただけたら幸いです。
SINAP Journal バックナンバー

ヒューリスティック調査とは？基礎からわかるUX評価の手法

Wed, 27 Aug 2025 05:04:39 GMT

専門家によるUIレビュー「ヒューリスティック調査」をわかりやすく解説。ニールセンの10原則、評価プロセス、ユーザビリティテストやアクセス解析との違い、外部委託のコツまで紹介します。

「成長してる実感がもてない」キャリアに悩む若手ディレクターに伝えたい【Web業界つまずく前に知りたい話】

Wed, 27 Aug 2025 05:04:10 GMT

この企画について

Web制作会社の若手ディレクターさんや、事業会社のWeb担当者さまのヒントになるかも？！
いただいたお悩みについてWEB業界で長年活動している方々に話を聞いてみる、座談会形式の企画です。
企画の詳細はこちらから。

また、お悩みをお持ちの方はぜひ投稿お願いします！
お悩み投稿フォーム

パーソナリティ

坂西（バンザイ）

ウェブ制作会社社長、プロデューサー
（業界歴約30年）

大崎（オオサキ）

プロジェクトマネージャー
（業界歴約25年）

三國（ミクニ）

この企画のファシリテーター
（業界歴約18年）

【お悩み】キャリアに悩む若手ディレクター

小さな制作会社でウェブディレクターをしています。小さな会社なので、営業・提案・進行管理・納品はもちろん、簡単な案件なら自分で設計・デザイン・実装までやっています。
自分しかウェブディレクターがいないので、ディレクターとしての成長ができているのか実感がありません。他にディレクターの知り合いもいないので、今後のキャリアもちゃんと考えられていません。このまま同じ会社で働いていいのか、転職するにしても自分がディレクターとして価値があるのか分からないので、転職活動へのスタートも不安です。

この記事でわかること

自分の市場価値を知るための具体的な方法
ディレクターのスキルはどんな場面でも通用する汎用性の高いもの
同業の仲間を見つける重要性とその方法

1.不安の原因は「自分の価値」が分からないこと

今回は「ディレクターとしての成長が実感できない」「自分の市場価値が分からない」という悩みについて話していきたいと思います。小さな会社で一人だけのディレクターという状況は、意外と多いんじゃないでしょうか？

そうだね。ディレクターという肩書きの人は昔より増えたけど、会社によって役割が全然違うんだよね。営業をやっている人もいれば、設計している人もいる。だからこそ、自分の立ち位置が分からなくなるのは自然なことだと思う。

この悩みを読んで最初に思ったのは、「仕事自体はやりたいのかな？」ということですよね。悩みの前提として、「ディレクターとして成長したい」という思いがあるのかどうか。

なるほど、そもそもの動機や目標の部分ですね。

この人にとっては、まず「自分がどうなりたいか」というビジョンがないことが問題なんじゃないかな。成長が実感できないというのは、そもそも自分がどうなりたいかが明確じゃないから。転職しても、その状態だと多分また同じ悩みにぶつかると思うよ。

そうですね。なのでそのあたりの根本的な部分を一度立ち止まって考えてみてもいいかもしれません。自分の立ち位置を客観視するためにも、まずは現状を整理することから始めてはどうでしょうか。

小まとめ

不安の根本原因は「自分がどうなりたいか」というビジョンの不足
ディレクターの役割は会社によって大きく異なるため、比較が難しい
自分の価値が分からない不安は多くの人が経験する普遍的な悩み

2.ディレクターのスキルは汎用性が高い

ディレクターとしてのキャリアパスについて、どのように考えればいいでしょうか？

僕はウェブ業界にこだわらなくてもいいと思っています。「つなぐ」というスキルは、実はどの業界でも重宝されるんですよ。

その通りだね。ウェブディレクターって、現在一番つぶしの利く職種だと思うよ。

例えば私は地域の自治会活動もやっているんですが、そこでも「つなぐスキル」がかなり役立っています。異なる意見の調整や、会議の進行、物事を計画的に進めるスキルなど、ウェブディレクターが普通にやっていることが、他の場所ではできない人が多いんです。

「ウェブサイトを作る」という仕事自体は今後なくなるかもしれないけれど、この人が持っているスキルは他のところでも必要とされているよね。営業やマーケティングのスキル、コミュニケーションスキル、AIやITのスキルなどが必要とされる仕事は多いと思います。

ポータブルスキルと言われますよね。自分が設計・デザイン・実装も含めてできるというのは、すごい強みだと思います。視野を広げて考えると、活躍できる場所はたくさんあるはずです。

つまり、今培っているスキル自体はとても価値があるということですね。

小まとめ

ディレクターの「つなぐスキル」は様々な業界で通用する汎用性の高いもの
営業・マーケティング、コミュニケーション、AI・IT知識など複合的なスキルが強み
視野を広げれば、ウェブ業界以外にも活躍の場は多い

3.自分の価値を客観的に知る方法

自分の市場価値を知るには、具体的にどうすればいいでしょうか？

まずは自分ができることを書き出してみるのはどうでしょう。小さなことでもいいんです。「これができる、あれができる」と具体的にリストアップすると、意外と多くのことができていることに気づくかもしれません。

そうだね。あとは外に目を向けることが大事だよ。同僚や友達を作るとか、ウェブ業界のイベントやコミュニティに参加するとか。「俺はこんな仕事をしていて、こんな待遇なんだけど、これってどうなの？」と他の人と話して外を知ることで、客観性が生まれるんだ。

そうですね。ただ、比較するには、なにかしらの比較対象を見つけるに外に出るしかないです。オンライン・オフライン問わずディレクターのコミュニティに参加してみるとか。本やネット上の情報だけでなく、実際の人との交流が大切です。

転職エージェントに登録してみるのも一つの手ですよね。自分の現在地を知る指標になりそうです。

そうだね。ただ彼らも転職エージェントもビジネスなので、あなたのスキルを正確に評価して査定するというよりは、マッチングを成功させることが目的なのには注意してください。

それでも、どれくらいの価値を市場でつけてもらえるかの目安にはなりますよね。自分の立ち位置を知るための一つの方法として、すぐには利用しないまでも試してみる価値はあると思います。でも冷やかしは迷惑になるのでほどほどに。
あとはnoteなどにアウトプットして、それの反応で測るというやりかたがありますね。そうやってアウトプットをして注目されることで、あらたなキャリアが拓けた人も沢山知っています。

小まとめ

自分のスキルを具体的にリストアップして可視化する
外部のコミュニティやイベントに参加して比較対象を見つける
転職エージェントなど第三者の評価を参考にする（ただし目的を理解して活用）
noteなどでアウトプットして反応を見ることで市場価値を測る

4.キャリアビジョンを明確にするために

キャリアビジョンを明確にするために、どういうアプローチがいいでしょうか？

僕は面接で「3年後にどんな自分になっていたいですか？」とよく聞きますね。生活のための効率の良い仕事がしたいとか、リモートワーク環境が必要とか、ディレクターとしてのキャリアやその先のイメージがあるのか？など、自分の価値観を自覚することは大事だよ。

そうですね。そもそも「やりたいこと」「たどり着きたい場所」を考えることが第一歩だと思います。その上で、今の延長線上でそれが実現できるのか・できないのかを判断すればいいんです。

キャリアの選択肢はたくさんあるからね。分業されているところでスペシャリストを目指すこともできるし、小さな会社でゼネラリストとしていろいろな経験を積むこともできる。自分に合った道を見つけることが大切です。

ことさらに奨励するつもりはないですが、この過程では環境を変えることも選択肢にいれてもよいと思います。別の環境・価値観の中に身をおくと、また違った角度から自分を再評価できるかもしれません。ただし、安易な環境変化は逃げに通じるのでお勧めできません。熟考して実行して欲しいと思います。

つまり、まずは視野を広げることが大事なんですね。

小まとめ

「3年後にどうなりたいか」という具体的なビジョンを描く
自分の価値観に基づいて、スペシャリストかゼネラリストかの方向性を決める
新しい視点を得るために環境の変化も選択肢として慎重に検討する

5.まとめ

今日のお話をまとめると、自分の価値が分からず不安に感じている若手ディレクターには、まず外の世界に触れて客観的な視点を得ることが大切だということですね。

そうだね。ディレクターとしての技術的なスキルはもちろん大事だけど、自分がどうなりたいのか、そのビジョンを持つことがとても重要だと思うよ。外に出て同業の仲間と話すことで、新しい気づきがあるはずです。

そして、ディレクターのスキルは本当に汎用性が高いんです。視野を広げれば、活躍できる場所はたくさんあります。自分の強みを理解して、自信を持ってキャリアを考えていけるといいですね。

ありがとうございます！若手ディレクターの皆さんも、ぜひ今日のポイントを参考にしてみてくださいね。

おさらい

自分の価値を知るためには、外の世界に触れて客観的な視点を得ることが大切
ディレクターの「つなぐスキル」は様々な場面・業界で活かせる汎用性の高いもの
自分のビジョンを明確にすることで、キャリアの方向性も見えてくる
コミュニティやイベントに参加して、同業の仲間と交流することが成長につながる
自分のスキルをリストアップして、できることを可視化してみよう

ここまで読んでいただきありがとうございました！お悩みをお持ちの方はぜひ投稿お願いします！
お悩み投稿フォーム

Web担当者必見！SEO・マーケティング・Web制作などが学べる国内企業YouTubeチャンネル8選

Wed, 20 Aug 2025 02:35:37 GMT

シナップの三國です。
みなさん、一日の間にYouTubeはどのぐらい見てますか？
私は主に、料理や洗濯などの家事をしながら見たり、お風呂に入っている時に見ることが多いです。

これまでは趣味のキャンプ関連の動画や、料理動画を見ることが多かったのですが、最近はAI活用やマーケの最新情報など、半分仕事で使うような動画を見ることも増えました。
ここ数年でBtoB企業の公式チャンネルも動画公開が活発になっていて、YouTube動画きっかけで仕事に役立つ情報収集につながったことも多いです。

今回ですが、そんなYouTubeのBtoB企業の公式チャンネルについてまとめて紹介していきます。

なぜBtoB企業がYouTubeチャンネルを急増させているのか

最近、個人クリエイターだけでなく、マーケティング会社や制作会社が運営するYouTubeチャンネルがとても増えています。なぜこれほど多くの企業がYouTubeに参入しているのか、その理由を見てみましょう。

コロナ禍でB2Bマーケティングが大きく変わった

コロナの影響で、対面での営業会議やセミナーが難しくなりましたよね。多くの企業が顧客との関係を維持するため、新しいデジタルな方法を模索する必要に迫られました。私自身、この時期からウェビナーへの参加が急激に増えたことを覚えています。

AI検索（SGE）への対応が必要になった

GoogleのAI Overview（旧SGE）の登場で、従来のSEOの仕組みが大きく変わろうとしています。AI検索では、検索結果ページで直接答えが表示されるため、ユーザーがウェブサイトを訪問しなくても疑問を解決できてしまいます。そこで企業は、Googleの検索結果だけに頼らず、YouTube上でも存在感を示すことが重要だと考えるようになりました。

専門性をアピールしやすい

動画、特に企業の専門家が自ら出演するコンテンツは、その人の経験や専門性をアピールする上で、非常に有効な手段と言えるでしょう。文章だけでは伝わりにくい「この人、本当に詳しそうだな」という信頼感を、動画ならよりダイレクトに伝えることができます。

採用活動にも使える

Web業界は人材不足が深刻なので、優秀な人材を獲得するために企業文化や働く環境を動画で伝える会社が増えています。求職者も、その会社で実際に働くイメージを持ちやすくなり、チームメンバーとの相性も事前に感じ取れるようになります。

今回は、Web制作会社で働く方や事業会社のWeb担当者の皆さんに向けて、国内企業が運営するおすすめのYouTubeチャンネル8選をご紹介します。

SEO・マーケティング系チャンネル

1. SEOおたく / LANY(レイニー)

運営企業： 株式会社LANY
登録者数： 14,400人
動画数： 264本
登録日： 2020/08/01
合計視聴数： 933,105回

SEOコンサルティングを行う株式会社LANYが運営しているチャンネルです。SEOの基礎から応用まで幅広くカバーしていて、特に大規模サイトのSEOが得意な代表の竹内渓太さんによる実践的な解説が人気です。

こんな人におすすめ

SEO初心者から中級者の方
企業のWebマーケティング担当者
コンテンツマーケティング担当者
オウンドメディア運用者
大規模サイトのSEO戦略を学びたい方

2. SEOならミエルカチャンネル

運営企業： Faber Company（ファベルカンパニー）
登録者数： 14,100人
動画数： 594本
登録日： 2020/02/25
合計視聴数： 1,539,707回

AI時代のSEOをリードする情報発信で有名なチャンネルです。最新ニュースやGoogleのコアアップデート速報を分かりやすく解説してくれます。海外のカンファレンスレポートや、海外の有名なSEO専門家を招いた対談コンテンツも見どころです。

こんな人におすすめ

SEO初心者から上級者まで幅広く対応
Webマーケティングの担当者
コンテンツマーケティングに取り組んでいる方
オウンドメディアを運営している方
AI活用の次世代SEOに興味がある方
海外のSEO動向をキャッチしたい方

3. ナイルTV / SEO相談室

運営企業： ナイル株式会社
登録者数： 6,390人
動画数： 321本
登録日： 2023/05/11
合計視聴数： 387,169回

SEOやコンテンツマーケティングを中心にデジタルマーケティング支援を行うナイル株式会社が運営しているチャンネル。SEOの具体的なノウハウや戦略、サイト改善の解説まで、実践的な内容が充実しています。

こんな人におすすめ

SEO担当者
WEBマーケティング担当者
コンテンツマーケティング担当者
オウンドメディア担当者
サイト改善の具体的な手法を学びたい方

4. バズ部 / ルーシー

運営企業： 株式会社ルーシー
登録者数： 4,800人
動画数： 210本
登録日： 2022/04/18
合計視聴数： 588,715回

10年間マーケティングメディア「バズ部」を運営してきた株式会社ルーシーのチャンネル。長年のコンテンツマーケティング支援で培った、成果の出るコンテンツ作りのノウハウを惜しみなく教えてくれます。

こんな人におすすめ

これからコンテンツマーケティングを始める方
コンテンツ制作者
オウンドメディア運営者
成果の出るコンテンツ作りを学びたい方
10年間の実績あるノウハウを習得したい方

5. GladCube TV

運営企業： 株式会社グラッドキューブ
登録者数： 14,000人
動画数： 612本
登録日： 2020/03/17
合計視聴数： 759,212回

Web広告やWebマーケティングの情報を豊富に発信しているチャンネル。Web広告の最新情報や成功事例、実践的なノウハウなど、Webマーケティングに関する幅広いコンテンツが見つかります。

こんな人におすすめ

自社のWebサイトのアクセス数やコンバージョン率を上げたい企業の方
企業のWebマーケティング担当者
Web広告に興味がある初心者の方
Webマーケティングに関する知識を広げたい方
最新のWeb広告情報をキャッチしたい方

Web制作・デザイン系チャンネル

6. Webディレクター養成大学

運営企業： 株式会社グラッドキューブ
登録者数： 14,300人
動画数： 501本
登録日： 2020/02/27
合計視聴数： 647,733回

Webディレクターを目指している方やWebマーケティング担当者にとって非常に有益な情報を配信しています。ウェブサイト制作、ディレクション、アクセス解析、ヒートマップ解析、LPO、EFOなど、とても幅広いコンテンツを提供してくれます。

こんな人におすすめ

Webディレクターを目指している方
Webマーケティング担当者
ウェブサイト制作に関わる方
アクセス解析やヒートマップ解析を学びたい方
LPO・EFOの実践的なノウハウを身につけたい方

7. LIG CH

運営企業： 株式会社LIG
登録者数： 12,300人
動画数： 191本
登録日： 2013/03/27
合計視聴数： 729,257回

Web制作・システム開発、Webクリエイタースクールを展開する株式会社LIGが運営しているチャンネル。Webデザイナーやデザイン学習者、マーケティング・広報担当者に向けたノウハウをお届けしています。

こんな人におすすめ

Webデザイナー
Webデザイン学習者
マーケティング・広報担当者
Web制作・システム開発に興味がある方
Webクリエイタースクールを検討している方

業界情報・キャリア系チャンネル

8. ベイジTV

運営企業： 株式会社ベイジ
登録者数： 2,280人
動画数： 16本
登録日： 2024/08/27
合計視聴数： 36,670回

会社ではなかなか教わらない実践的・即効性・専門的なビジネススキルを学べるチャンネル。コミュニケーション、マーケティング、マネジメント、デザイン、テクノロジー、キャリアなど、本当に幅広いテーマを扱っています。

ベイジがYouTubeを始めた理由について、代表の枌谷さんは次のように述べています。

純粋にやりたくなったから - 内なる動機とエネルギーが一番の理由
BtoB分野でYouTubeがブレイクした時期だった - ちょうど良いタイミングでの参入
商材としてYouTubeを扱えるようになりたかった - 動画コンテンツ制作スキルの習得と実績作り

こんな人におすすめ

経営者・事業責任者・マネジメント層
実践的なビジネススキルを身につけたい方
コミュニケーション・マーケティング・マネジメントを学びたい方
デザイン・テクノロジー分野の知見を深めたい方
キャリアアップを目指している方

数字で見るYouTubeチャンネル徹底分析

今回紹介する8つのチャンネルを数字で分析してみると、興味深い傾向が見えてきます。

チャンネル別登録者数

チャンネル別合計視聴数

平均視聴数

1動画あたりの登録者数

まとめ

紹介したチャンネルはいかがでしたか？
私が普段見ているチャンネルも入ってますし、今回の調査で見つけたチャンネルもいくつかありました。

YouTubeをそのまま再生して閲覧するのももちろんですが、私は最近は「気になった動画はNotebookLMに追加→テキストで要約→欲しい情報かどうか、ちゃんと動画として見るか判断する」という見方をすることが多いです。
プライベートの時間で楽しく動画見たい時はそのまま見ますけど、半分仕事の情報収集の場合は、ちゃんと時間使って閲覧すべきかどうか、まずNotebookLMで要約すると時短になっていいかもです。

みなさんのオススメYouTubeチャンネルや動画があれば、ぜひ教えて下さい！

複数プロジェクトを乗り切る！若手Webディレクターのためのタスク管理術【Web業界つまずく前に知りたい話】

Tue, 01 Jul 2025 01:12:48 GMT

この企画について

Web制作会社の若手ディレクターさんや、事業会社のWeb担当者さまのヒントになるかも？！
Web業界で長年活動している方々に、いただいたお悩みについて話を聞いてみる座談会形式の企画です。
企画の詳細はこちらから。

また、お悩みをお持ちの方はぜひ投稿をお願いします！
お悩み投稿フォーム

パーソナリティ

坂西（バンザイ）

Web制作会社社長、プロデューサー
（業界歴約30年）

大崎（オオサキ）

プロジェクトマネージャー
（業界歴約25年）

三國（ミクニ）

この企画のファシリテーター
（業界歴約18年）

【お悩み】タスク管理が苦手

「Web制作会社でディレクターとして働いて3年目になります。最近、任される仕事の幅が広がり、複数のプロジェクトを同時進行することも増えてきました。タスクリストを作っても、その量が多すぎてどこから手を付けていいか分からず、毎日焦ってばかり。先輩に相談しても『慣れるしかない』と言われてしまい、この状況をどうにか打破したいと思っています。同じような立場で悩んでいる人は多いのではないでしょうか？何か具体的なアドバイスがあれば、ぜひ教えてください！」

この記事でわかること

抱えているタスクを整理し、可視化する具体的な方法
混乱しがちなタスクに優先順位をつける考え方
複数のプロジェクトを効率的に進めるためのヒント
忙しい状況でもメンタルを保つための重要な考え方

1.まずはタスクを「書き出す」ことから始めよう

タスク管理の悩みについて、まずは基本的なところからお聞きしたいと思います。タスクが重なってしまうという状況について、どう考えればよいでしょうか？

まずは、持っているタスクを全部書き出してみることから始めるのが良いと思いますよね。漠然と「たくさんある」と思っているだけでは、何が重なっているのか把握できません。自分が何を抱えているのかを明確にすることが第一歩です。

人間の頭で覚えていられるタスクって、5個ぐらいが限界なんだよね。それ以上になると「いっぱいある」という感覚になって、判断ができなくなってしまう。

そうですね。頭の中だけで管理しようとすると、不安が大きくなります。「見える化」することで漠然とした不安の正体を掴めるんですよ。

メンタルヘルスの観点からも、まずは書き出すことが大事だよ。見える化することで、実はそんなに多くないことに気づくこともあるしね。

課題管理表やリスク管理表を「時間がないから書けない」という人がいますが、実は逆なんです。書くことで時間を作れるんですよ。「書く時間がない」ではなく「時間を作るために書く」という発想が大切です。

その通り。頭のメモリを解放できれば、他のことに集中できるからね。

「忘れるために書き出す」という発想は面白いですね！

記録することで安心感が生まれるんです。タスク管理ツールでもエクセルでも何でもいいから、まずは書き出しましょう。ちなみに、2分で終わるような簡単なタスクはすぐ実行するのもありですね。

GTD（Getting Things Done）の考え方にも通じるね。忙しい時こそ、タスクを可視化することが重要なんだよ。

小まとめ

タスクをすべて書き出して可視化することが第一歩
書き出すことで頭のメモリを解放し、集中力を高める
「時間がないから書けない」は誤り、書くことで時間を作れる

2.優先順位の決め方とスケジュール管理のコツ

タスクを書き出した後、どのように優先順位を決めていけばよいでしょうか？

カレーライスを作る時のことを考えてみましょう。材料を買う、材料を切る、炒める、盛り付けるなど、タスクには自然な順序があります。材料を買う前に切ることはできないし、炒める前に切る必要がありますよね。このように、洗い出したタスクの順番を決めていくと、自然と優先順位が見えてきます。

なるほどね。まずは順序の依存関係を見極めることが重要だね。

そうなんです。依存関係を整理すると、「これを先にやらないと次に進めない」というものが見えてきます。コントロールできない要素ほど優先して着手するといいですよ。

複数のプロジェクトがある場合は、WBS（Work Breakdown Structure）を作って、クリティカルチェーンを確認するのが重要だよ。

WBSというと初めて聞く方も多いかもしれませんね。具体的にはどんなものですか？

簡単に言うと「プロジェクトでやることを全て書き出して整理したもの」だね。プロジェクト全体の作業を細かく分解して、階層的に整理するんだよ。

そうですね。例えば「Webサイト制作」という大きな仕事を、「要件定義」「設計」「デザイン」「コーディング」「テスト」といった段階に分け、さらにそれぞれの中身を細かく分解していくんです。全体から詳細へとトップダウンで分解していくイメージですね。

重要なのは、WBSはスケジュールそのものじゃないってことだよ。WBSはプロジェクトの「範囲」を明確にするもので、これをもとにしてスケジュールを作っていくんだ。

クリティカルチェーンというのは、リソース制約も考慮したプロジェクト管理手法のことですね。複数のプロジェクトを並行して担当している場合は、まさに「リソースの競合」を考慮する必要があります。タスクの洗い出し、順序設定、期間設定をした後に、「この人に同じ時期に複数のタスクを依頼するのは無理があるな」といった状況が見えてくることがあります。そういったリソースの取り合いを避けるためにも、事前のタスク整理は非常に重要です。

そう。同じ日に同じタイミングでタスクが重なっていないか、きちんと見極める必要があるね。

ちなみにこの時は自社だけでなく、発注者側の状況も考えることが大事です。発注者も定常業務の中で複数のプロジェクトを掛け持ちしていることが多く、彼らなりの制約や事情があるんです。お互いの状況を理解し合うことで、現実的な提案をしていくことが可能です。

若手ディレクターの場合、リソース競合の調整は上司の役割でもありますよね？

そうだね。とはいえ、自分の裁量でできる部分と、上司に相談すべき部分を分けて調整していくのが良いと思うよ。

小まとめ

タスクの自然な順序と依存関係を見極める
WBS（Work Breakdown Structure）を作成してプロジェクトの全体像を把握する
複数プロジェクトの場合はリソースの競合を考慮する

3.クライアントとのコミュニケーションで気をつけるべきポイント

スケジュール通りに進めるのが難しい場合、クライアントとのコミュニケーションで気をつけるべきことはありますか？

要望が変わるのは当たり前だと思っておくことが大事です。クライアントは自社の事業に生かしたいと思って投資しているんですから。

その通りだね。ただし、プロジェクトの目的やゴールは変えないようにしましょう。

そうですね。目的はぶれないようにして、そこを軸にスケジュールやコストの調整を提案していく。

プロジェクトの目的を共有しておけば、「このゴールに向かうためにはこの選択肢がありますが、どうしますか？」という会話ができるようになるよ。

要望のコントロールも重要です。オープンに「どうしたいですか？」と聞くのではなく、「A案とB案、どちらが好みですか？」と選択肢を提示する方が効率的です。

そうだね。無限に広がる可能性を狭めていくイメージだよ。

「何でも言ってください」と言うと、実現不可能なことを言われたりして、後で調整が大変になります。

詰め将棋のように、相手の反応を予測して準備しておくということですね。

そうだね。3回目で決めるつもりで、1回目、2回目と進めていく。お題にたいしてプロとして考えたプロセスを共有して、共感してもらうことが大事だよ。

クライアントも「この人は考えてくれている」と感じれば、信頼関係が築けるんです。

小まとめ

プロジェクトの目的やゴールはぶれないよう維持する
選択肢を提示して要望をコントロールする
プロセスを共有して信頼関係を構築する

4.スケジュール管理の具体的なテクニック

スケジュール管理で、具体的に気をつけるべきポイントはありますか？

プロジェクトの期間によりますが、比較的短納期の案件なら1週間単位ではなく、2-3日単位で調整するのが効果的です。例えば水曜日の案件なら金曜日まで、金曜日の案件なら月曜日までというように。締切を切り直す際も、なぜ1週間も必要なのか考えてみるといいですね。

そうだね。1週間上げてしまうと、結局最初の1日は何もやらないことが多いからね。

人間は締め切り直前にならないと動かないものなんです。短いスパンで区切った方が効率的に進みます。

最短の納期を提示して、そこから調整する方が良いよ。「最短でいつまでにできるか」を考えることが重要だね。

品質と納期のバランスも重要です。「1週間かけて100%の品質」ではなく、「3日で70%の品質」という選択肢もあり得ます。

完璧を目指すと時間がかかるから、「まずはここまで」という線引きも大事だよ。

クライアントによっては、完璧よりもスピードを求めているケースもあります。その見極めも重要です。

若手のうちは「完璧にしなきゃ」と思いがちだけど、必要な品質と納期のバランスを考えるのがプロだよ。

小まとめ

短いスパン（2-3日単位）で区切ることで効率的に進める
品質と納期のバランスを考慮する
完璧を目指すより「まずはここまで」という線引きをする

5.まとめ

今日の話をまとめると、タスク管理の基本は「書き出すこと」から始まり、優先順位を決めて、クライアントとのコミュニケーションを適切に取ることが重要ということですね。

そうだね。タスク管理は、プロジェクトを成功させるための基本中の基本だよ。小さな成功体験を積み重ねていくことが、自信につながるんだ。

そして、完璧を目指すのではなく、自分なりの管理方法を見つけていくことが大切です。最初は大変かもしれませんが、少しずつ改善していきましょう。

お二人とも、貴重なアドバイスをありがとうございました！若手ディレクターの皆さんも、ぜひ今日のポイントを参考にしてみてくださいね。

おさらい

タスクはまず書き出すことから始めよう
優先順位は自然な順序やリソースの制約を考慮して決める
クライアントとのコミュニケーションでは、選択肢を提示して調整する
スケジュール管理は細かい単位で調整する
完璧を目指さず、自分なりの管理方法を見つけていく
混乱の原因は「把握できていない」ことにある
まずはタスクを全て書き出す、可視化する

ここまで読んでいただきありがとうございました！お悩みをお持ちの方はぜひ投稿をお願いします！
お悩み投稿フォーム

毎月成長できる?! 〜シナップ社内勉強会（3）〜

Wed, 18 Jun 2025 02:19:20 GMT

こんにちは！Admin三木です。
唐突ですが、日進月歩なWebの世界において日々の勉強はとても大切です。そのため本日は、メンバーの成長をサポートする機会の一つとしてシナップで月に一度行っている、社内勉強会（通称：チーム発表）についてまとめてみようと思います。

■第1弾はこちら　毎月成長できる？！〜シナップ社内勉強会〜
■第2弾はこちら　毎月成長できる？！〜シナップ社内勉強会（2）〜

まず、チーム発表とは

シナップX等をご覧の方は既にご存知かもしれないのですが、シナップでは毎月所属チームごとに知見の共有や、最近のトレンドについて理解を深める時間を設けています。通称「チーム発表」と呼び、グロース・運用を主とするグロースチーム、テクニカルな分野を主とするプロダクションAチーム、UI/UXデザインを主とするプロダクションBチームの3チームに分かれ、チームの特色に沿った内容で発表を行っています。
別のチームにいても、他のチームから学ぶことができ、発表者側も発表をする＝より理解が深まるため双方の成長につながっています。

どんな内容か、実際の発表テーマをいくつかピックアップ！

第二弾以降、発表し合った内容からいくつか紹介をしていきます。

ダークパターンって何?

2024年02月実施：プロダクションBチーム

ダークパターン、利用者を望まない結果に導くUIは悪質なものからライトなものまで、遭遇したことのある人も多いと思います。この勉強会ではダークパターンのさまざまな手法、作り手としてこうした手法に陥らないための取り組みについて学習しました。

図解を活かした考え方・伝え方（ダイアグラム思考・図解思考でチームを動かそう！）

2024年05月実施：プロダクションBチーム

プレゼンテーションから自身の思考整理まで、図解を活用すことで飛躍的に精度を高める、あらゆる業務に重要な手法を様々な図解のパターンと使い方まで学びました。基本のようでいてかなり奥が深い勉強会でした。

パスワードレス

2024年07月実施：プロダクションAチーム

昨今話題のセキュリティ。なかでもパスワードの利用は様々な認証に使われていますが、セキュリティ侵害の多くは脆弱なパスワードやパスワード盗難であることはよく知られています。そこで、この勉強会ではパスワードレスについて、普及の背景から、認証の仕組み、実装方法なども学びました。

Webアニメーション実装

2024年10月実施：プロダクションAチーム

最近のWebアニメーション、インタラクションの種類や実装方法からコストまで、デモや事例を交えながら、非エンジニアでも知っておきたい、現場で使えるノウハウを深掘りしました。

UISnack

2024年11月実施：プロダクションBチーム

デザイン4原則、ヒューリスティック原則、アクセシビリティ、OOUIなどUIデザインに関する必須テーマをワークショップを交えながら、ダイジェストで共有していきました。

Looker Studio

2024年12月実施：グロースチーム

Googleが提供する無料のBIツールで、GA4などの分析データを表やグラフで可視化できる便利なBIツール、Looker Studio。この勉強会では、Looker Studioのさまざまな機能や使い方のノウハウ、特に便利なポイント、効果的な活用方法について共有しました。

生成AIでの業務効率化いろいろ試してきました

2025年03月実施：グロースチーム

chatGPT、Gemini、NotebookLM、Claude、cursorなどのAIができることを深掘りし、業務フローの中でどのように活用できるか、文書作成だけでない一歩進んだ活用方法を共有しました（画像の内容は、2025年3月の発表時点）。

AIテキストエディタ

2025年04月実施：プロダクションAチーム

最近話題のcursorをはじめ、開発効率アップに役立つAIの活用法について、エンジニア陣が知見をシェアしました。特にエージェント機能やVibe Coding、MCPに注目が集まりました。

おわりに

ここまでご覧いただきありがとうございました！
今回はシナップ社内勉強会（チーム発表）について、ご紹介でした。チーム発表は、個人だけではなく会社全体で成長できる機会として、毎月有意義な時間となっています。

このようにシナップ内の面白い取り組みなど、今後もお伝えしてまいります。おたのしみに♪

FigmaのVariables機能とは？デザインシステムと組み合わせて活用する方法

Fri, 23 May 2025 02:05:58 GMT

シナップでは、社内開発のデザインシステムを活用し、効率的なUI設計・デザイン・開発を推進しています。統一感を保ちながら、繰り返し使うことで知識もアップデートされ、その便利さを実感しています。

こうした社内のデザインシステムを活用する中で、figmaの「Variables（変数）」機能についても少し触れてみました。まだ十分に使いこなせてはいませんが、今回はStyle機能との違いや、デザインシステムとの組み合わせ方など、学んだ内容を紹介します。

※デザインシステムの構築や管理については、スケーラブルなデザイン組織を支える仕組みとしてのデザインシステムの記事でも詳しく紹介しています。

1. FigmaのVariables機能とは？

FigmaのVariables（変数）機能は、デザインの特定の値（カラー、テキストスタイル、サイズなど）を一元管理できる機能です。この機能を活用することで、変更が必要になった際にすべてのデザイン要素を一括更新できるため、作業の効率化がはかれます。

Variablesには、以下の4種類があります。

Color（カラー）：デザインのカラーパレットを統一するために使用
Number（数値）：フォントサイズ、余白、角丸の値などを管理
Boolean（ブール値）：オン/オフの切り替え（例：ダークモードの適用）
String（文字列）：ボタンラベルや見出しのテキストを一括変更

Variables（変数）を活用することで、デザインシステムの重要な要素であるデザインの一貫性を保ちながら、作業効率を向上させることができます。

※日々のコンポーネント管理や整理には、Figmaプラグインおすすめ3選の記事も参考になります。

Variables機能はStyle機能に似ているのですが、大きな違いがあります。

2. FigmaのVariablesとStylesの違い

どちらもデザイン要素の一貫性を保ち一元管理できる機能ですが、以下のような違いがあります。

デザインを動的に切り替えるなら Variables

変数のように値を切り替えられる機能です。

数値・色・テキスト・ブール値などを一元管理できる
モード（Mode）を使って、テーマや状態に応じた値を切り替えられる（例：ライトモード⇔ダークモード）
プロトタイピングでの動的変更が可能（例：価格やボタンの状態を変える）
開発との連携がしやすい（デザインの値をコードの変数のように扱える）

主にコンポーネントの柔軟な管理や、デザインシステムの拡張に適しています。

役割：動的に切り替えられるデザイン要素
例：ライト/ダークモード、価格の変動、ボタンの状態変化

デザインの一貫性を保つなら Styles

一度設定したデザイン要素を統一する機能です。

色、テキスト、エフェクト（影やぼかし）、グリッドなどを登録・適用できる
変更すると、適用されているすべての要素に影響を与える
モードの切り替え機能はなく、固定されたデザインの一貫性を保つためのもの

デザインの統一感を維持するための機能として使うことが多いです。

役割：デザインの統一感を保つ
例：ブランドカラー、フォントスタイル、影の設定

3. Variables（変数）の基本的な使い方

1）Variables（変数）を作成する

「Variables」パネルを開く
1. 右側のパネルから「Variables」タブを開きます。
2. 「Create variable（変数を作成）」をクリックします。
変数の種類を選択する
1. 「Color」「Number」「Boolean」「String」から選択。
2. 例：ボタンの背景色を設定する場合は「Color」を選択。
* 3. わかりやすい名前をつける
1. 例：「PrimaryColor」などの明確な命名にする。

2）Variablesをデザインに適用する

適用したいオブジェクトを選択
1. 例えば、ボタンの背景色を変数にしたい場合、ボタンのレイヤーを選択。
右側のプロパティパネルでVariablesを選択
1. 「Fill」「Stroke」「Text Style」など適用したいプロパティをクリック。
2. 作成したVariablesを選択することで、変更が適用される。
適用後、すべてのデザインに反映されることを確認

3）Variablesを更新する

Variablesパネルを開く
変更したい変数を編集
1. 例：「PrimaryColor」を青から赤に変更すると、関連するすべてのデザインが即座に更新。

4. Variablesを活用するメリットとデザインシステムとの関係

Variables機能は、デザインシステムとの相性が非常に良く、併用することでその効果を最大限に引き出すことができます。
特に、複数人・複数案件で共通のUI・デザインルールを運用する環境においては、効率化と整合性の面で大きな効果があります。具体的なメリットは以下の通りです。

UI・デザインの一貫性を維持できる
複数デザインの管理・更新がしやすくなる
エンジニアとの連携がスムーズになる

特に、大規模なデザインや長期運用を行うプロジェクトでは、こうしたシステムの構築と運用が重要になります。

1. UI・デザインの一貫性を維持できる

Variables（変数）をあらかじめ設定し、チーム全体で共有・活用することで、画面やコンポーネント間のデザインのバラつきを防ぎ、統一感のあるUI・デザインを保てます。
特に、複数人で運用する中〜大規模のプロジェクトやデザインシステムとの組み合わせによって、その効果は大きくなります。

MEMO

UIの一貫性やユーザー体験の設計を考える際には、UXデザインとは基礎知識やプロセス、UIとの違いを解説といったUXの全体像を把握する記事もあわせて読むと理解が深まります。

2. 複数デザインの管理・更新がしやすくなる

Variablesを使うことで、ブランドカラーやフォントサイズの変更を一括で全体に適用することができ、手動で各デザインパーツを修正する必要がなくなります。

さらに、同一のデザインシステム内で

通常版と高コントラスト版
顧客Aと顧客Bのブランドテーマ別バリアント

といった複数テーマ（モード）を切り替えて管理できるため、仕様変更やブランド別対応が発生しても、Variablesのモード更新だけで素早く対応できます。

3. エンジニアとの連携がスムーズになる

VariablesをCSS変数などのデザイントークンと紐づけて運用することで、デザインとコードのブレを防ぎ、開発者との共通言語として機能します。
また、モードを切り替えるだけでテーマ全体を変更できるため、開発・検証・保守の効率も向上します。

MEMO

実際のUI改善や見直しにおいては、ヒューリスティック調査・分析とは評価のポイントと実施方法について解説などの評価手法も参考になります。

5. FigmaのVariablesを使う時の注意点

Variables機能は便利ですが、労力のわりには発揮できないパターンもあります。

大規模プロジェクトや継続的な運用には非常に有効ですが、小規模なプロジェクトや短期間のプロジェクトでは注意が必要です。

プロジェクト規模に合わせて使う

小規模なプロジェクトでは、Variablesを管理する手間がかかりすぎる場合があります。シンプルなUIでは、わざわざVariablesを設定することで逆に時間がかかることがあるため、プロジェクトの規模に応じた活用が大切です。

過剰な管理は避ける

たくさんの変数を管理しようとすると、逆に複雑になりすぎて効率が悪化します。変数は、使い回しが多く、かつ更新が頻繁に必要な部分に限定して設定するとよさそうです。

変数の命名規則を統一する

一貫した命名規則を設けないと、後から変数を探すのが難しくなり、管理が煩雑になることがあります。

AIによるデザインチェックなど、Variables以外の効率化ツールにも興味がある方は、AI Design Reviewerの使用レビューもぜひご覧ください。

----

FigmaのVariablesは、適切な規模と運用方法で活用することで、UIの一貫性を保ちながら作業効率を大幅に向上させてくれます。

機会があればぜひ試してみてください。私ももうすこし理解を進めていきたいと思います。

あわせて読みたい関連記事

めざせ春のスタートダッシュ!～2025年度版：Web業界の新人さんにオススメの書籍8選～

Fri, 25 Apr 2025 01:48:43 GMT

こんにちは!Admin三木です。

新年度に入りましたが、皆さまいかがお過ごしでしょうか?
大きな変化のあった方、変化はないけど着実に毎日を過ごされている方などさまざまあるかと思います。
と、そんな中、今回は心機一転!この春からWeb業界に入られた方に向け、下記内容をご用意しました!

めざせ春のスタートダッシュ! ～2025年度版：Web業界の新人さんにオススメの書籍8選

こちらは例年ご好評をいただいている記事の2025年度版となり、シナップメンバーよりWeb業界で働く上でオススメな書籍を集め、その理由を含めご紹介いたします。
Web業界という日進月歩の世界で、これから起こる変化にワクワクや不安などいろいろな気持ちに今包まれていらっしゃるのではと想像しますが、学びは決して自分を裏切りません。よければぜひご参考にしていただければと思います。
また、「新人さん」と題してはいますが、ご経験年数に関係なく「おもしろそう!」と思える1冊が見つかるかもしれません。ぜひご覧ください♪

また過去にご紹介した書籍もおすすめですので、よければこちらも↓

〜過去の記事・ご紹介した書籍一覧〜

2025年度おすすめ書籍一覧

1 .　『人間中心設計入門　HCDライブラリー0巻』
2 .　『はじめてのUXデザイン図鑑』
3 .　『ノンデザイナーズ・デザインブック』
4 .　『Figmaで作るUIデザインアイデア集サンプルで学ぶ35のパターン』
5 .　『イラレの5分ドリル』
6 .　『現場のプロがやさしく書いたWebサイトの分析・改善の教科書【改訂3版 GA4対応】』
7 .　『キミが信頼されないのは話が「ズレてる」だけなんだ』
8.　『いつも信頼される人がやっている「たったひと言」の質問力』

UX

1.『人間中心設計入門　HCDライブラリー0巻』
山崎和彦 (著, 編集), 松原幸行 (著, 編集), 竹内公啓 (著, 編集), 黒須正明 (編集), 八木大彦 (編集)

UXデザインのプロセスを理解するための基本の一冊です。ユーザビリティからサービスデザインまで、周辺の考え方の概要から、UXデザインを実践する上でのステップと、それぞれのステップ内で行う具体的な活動を体系的に解説しています。
「UXデザインとは何か?」という土台から、「実際にどのような手順で進めていくのか?」というプロセスの全体像が俯瞰できるため、UXデザインに関わる人が最初に読む本として適切です。（村田）

2.『はじめてのUXデザイン図鑑』
荻原昂彦(著)

ユーザー体験がカテゴリごとに分類されていて、それぞれに具体的な事例がたくさん紹介されています。学術的な書籍でUXの概念を学ぶ前に読むと、「はじめての」と謳っているだけあって、理論だけでなく実際の体験から「UXとは何か」をしっかりイメージできます。UXに初めて触れる人にとって、とても親しみやすい一冊です。（飯山）

デザイン

3.『ノンデザイナーズ・デザインブック』
Robin Williams (著), 米谷テツヤ (監修, 翻訳), 小原司 (監修, 翻訳), 吉川典秀 (翻訳)

デザインというよりレイアウトの本と言った方が良いのかもしれませんが、デザインの4つの基本原則について言及されています。かなり昔に出会った本ですが、デザインに理論があることを知って衝撃が走ったのを覚えています。デザイナーはもちろん、ディレクター職でもプレゼン資料作成などで一生物のスキルとして役に立つこと間違いなしです。（鈴木）
※以前にもご紹介していますが、別の者から改めておすすめいたします。

4.『Figmaで作るUIデザインアイデア集サンプルで学ぶ35のパターン』
相原典佳 (著), 岡部千幸 (著)

Figmaを使ってデザインをしていますが、「まだ知らない機能や使いこなせていない部分も多いかも」と思い、復習も兼ねこの書籍を手に取りました。図版が豊富で、解説も丁寧かつわかりやすく、どのレベルのユーザーにもおすすめできる一冊です。
随所に登場する著者おふたりのアイコンが、ちょっとしたコツや視点を教えてくれる構成になっていて、読み進める中で自然と理解が深まります。学びながらも堅苦しさを感じさせず、まるで隣で教えてもらっているような距離感が心地よく、楽しく読み進められました。（小茅）

5.『イラレの5分ドリル』
浅野桜 (著), あさひな。 (著), 高橋としゆき (著)

イラレの基本的な操作から、こんなことも出来るんだ!といった発見まで、イラレで出来ることが網羅的に学べます。
「ドリル」と名前がついているように、実際に手を動かして学べるワークがついています。毎日1つずつこなしていけば、本が終わるころには結構イラレの知識が身についています。
私はベジェ曲線となかなか仲良くなれなかったんですが、この本のおかげで苦手意識がだいぶ減りました。デザインの引き出しも増えたりと、実践でも役立っています。（竹田）

Webサイト改善

6.『現場のプロがやさしく書いたWebサイトの分析・改善の教科書【改訂3版 GA4対応】』
小川卓(著)

Webサイト運用の基本である分析・改善を、最新のGA4に完全対応してやさしく解説した入門書です。アクセス解析の基本から、データを活かした改善施策まで、現場のプロが実務視点でポイントを丁寧に解説しています。ウェブ業界に入ったばかりの方や、データ分析に苦手意識を感じている新人の方に特におすすめの一冊です。（三國）

社会人基礎

7.『キミが信頼されないのは話が「ズレてる」だけなんだ』
横山信弘(著)

8.『いつも信頼される人がやっている「たったひと言」の質問力 』
坂本聰 (著)

どちらの本も伝えたい結論は近いのですが、セットで読むとより理解が深まると思い、今回2冊をまとめて紹介します。
『キミが信頼されないのは話が「ズレてる」だけなんだ』は、各章冒頭に4コマ漫画がついていて、「こんな経験はないかい?」と、ズレやすいシーンがサッとイメージした上で解決方法を知っていく構成です。各章の漫画どれも思い当たるシーンばかりだったのが印象的でした。あるあるなのかもしれません。
対して『いつも信頼される人がやっている「たったひと言」の質問力』では似たような場面を扱いながらも、「このひと言の背景に、どこまで相手の状況を想像できているか?」みたいな、もう一段深いところに読者の意識を引っ張ってくる感じの内容です。
感覚的につかみやすい前者でざっくり理解してから、後者でじわじわ効いてくる、のような読み方が私はしっくりきました。「1冊でも十分かも?」と思われるかもしれませんが、2冊通して読むことで、それぞれの視点や言葉の違いから理解がより深まると感じます。
そんなわけで、2冊セットでの読書、おすすめです!（平木場）

以上となります。
いかがでしたでしょうか?1冊でも「気になる!」が見つかり、春のスタートダッシュを決める手助けとなると幸いです。

ここまでお読みいただきありがとうございました!

【Webサイト改善に】Siriの開発者が手がけたFigmaプラグイン「AI Design Reviewer」をがっつり使ってみた

Wed, 26 Mar 2025 06:14:10 GMT

最近、デザイン業界ではAI技術の進化が目覚ましく、Figmaにも「FigmaAI」という新機能が実装され、話題を集めています。しかし、FigmaのAI活用はこれだけではありません。実は、Figmaプラグイン「AI Design Reviewer」も少しだけ注目を集めています。

「AI Design Reviewer」は、AIを活用してデザインを自動的にレビューし、改善点を提案してくれる便利なプラグインです。しかし、リリースされたばかりということもあり、日本語のマニュアルや情報はまだ少なく、利用者も限られている状況です。

本記事では、そんな「AI Design Reviewer」の実際の機能や使い方を詳しく解説しながら、日本語サイトにおける精度についても実験してみました。

プラグインのURLはこちら：AI Design Reviewer: Enhance UI/UX, Accessibility, CTA & Copy

[前準備]検証用にデザインファイルを用意

今回はSINAPのWebサイトのページを検証に使います。プラグインの「html.to.design」を使って、公開されているページからFigmaのデザインファイルを準備をしました。（所要時間は1分！）

①プラグインをダウンロード
②「Import via URL」にデザインファイルを作成したいページのURLを入力して「Import」ボタンをクリック。
③完成

※無料アカウントだと月10デザインimportが可能

本記事ではこのように作成したデザインファイルで「AI Design Reviewer」の機能を試していきます。

AI Design Reviewerの機能紹介

「AI Design Reviewer」では４つの機能があります。順番に解説していきます。

Improve Copy（コピーライトの改善）
Audit UI（UIの改善）
Accessibility（アクセシビリティチェック）
User Growth（サイトの利用を促進させるための提案）

1. Improve Copy（コピーライトの改善）

まず最初は「Improve Copy」を使ってみます。
この機能では、デザイン内の文章（コピーライト）を自動的に分析し、改善提案を行ってくれるようです。
早速使ってみます。

判定をするとこんな感じで判定が出ました。
一つ目の判定内容をよんだとき、日本語が若干いびつな感じがするせいか、正直「どういうこと？」状態だったのですが、選択されている箇所のみだけでなく、後半の内容と判定内容を見比べているとなんとなく問題点が見えてきました。

おそらく「アクセシビリティ基準に対応できます」という情報はあるけど、「だから何が良くなるの？」という部分が足りないかもしれない、と言うことだと思います。だとすると一理あるかもしれません。

「Insert」ボタンを押すと、一括で「Suggestions」に表示されていた候補内容に差し代わるようです。（画像では見切れていますが、3つめの文章も存在し、漏れなく変更されていました）

しかし、そもそも伝えたい情報群の種別と候補内容の種別が合致していないようにみえます。提案内容もイマイチです。ここは人の力で頑張らねばならないところかもしれません。

他の判定では、「見出しでもっと顧客にとってのメリットを強調する」「アクション指向で具体的なCTAを使用し、ユーザーのエンゲージメントを促し、次のステップを明確に示す。」とでました。
それぞれ判断は必要ですが、「なるほど、確かに」と言う内容です。結構的を射ている。改善の切り口を探す点でおいては活躍してくれそうです。

良い点

指摘のポイントは「なるほど」と思えるので、参考やきっかけとするには悪くないと思いました。

イマイチな点

提案の文言がイマイチなので、指摘された点を元に文章を考え直したりするのがよいかもしれないです。

[Tips]chatGPTに要点をまとめさせる

判定内容が私には少々わかりづらく感じたため、その要点を掴むためにchatGPTに「これどう言うことだと思う？」と投げかけました。（無料プランで実施）
以下はその時のやり取りです。

精度は一旦後回しに、カジュアルに要点をまとめさせたいときはこれくらい適当で大丈夫です。

こんな感じで、より判定の深掘りを進める上での補助をしてもらうといいかもしれません。
普段業務で使っている方はそれぞれ思い思いのプロンプトを。「chatGPT、そんなに使ってない」という方もぜひ友達に話しかけてみる感じで、意見を求めてみてください。
意外な発見があるかもしれません。

2. Audit UI（UIの改善）

次は「Audit UI」を使ってみます。
UIの問題を発見して改善アドバイスをくれる機能のようです。
2025年3月現在はBeta版ですがどれほどの精度なのか、判定内容をざっと見てみましょう。

２枚目の赤は一つ一つ調べてみると、冒頭２つの「詳細を見る」の文字色とその他の「詳細を見る」の文字色が微妙に異なっていました。（実際のサイトではもちろん同じ色ですよ！）
目視で気付くのは難しいが、データ上では比較しやすい違いについては精度良くキャッチできるようです。しかしその反面、テキスト情報×余白の視覚的情報からの総合判断という点ではまだまだイマイチのようです。（1枚目・３枚目参照）

しかしそこが１番プラグインで期待しているところだとおもうので、正式リリースとなってからまた使用を試してもいいかもしれません。

3. Accessibility（アクセシビリティチェック）

次は「Accessibility（アクセシビリティ）」機能を使用してみます。
この機能は、Web Content Accessibility Guidelines (WCAG) に準拠した基準に基づいて、色、フォント、スペーシングなどをチェックしてくれるそうです。（Figmaプラグインページより）
実際に使用してみましょう。

「ホームへのリンクは、WCAG 2.2の標準サイズを満たすために、少なくとも24x24pxでなければなりません。」とでました。

「ホーム」ってどこの！？となっても大丈夫。
右上の「Inspect」ボタンを押すと該当箇所が選択・ズームインされます。

このパンクズリンクは48px × 16pxあるので、ここでは高さに問題がある、ということのようです。
判定の中に最低限（Minimum）：24px 。より強化するなら（Enhanced）：44pxと書いてあります。
デスクトップ環境では最低ラインの24px以上あればよいと一般的にはされていますが、それでも今回は足らないので場合によっては修正するのが良いでしょう。

参考：解説書達成基準 2.5.8:ターゲットのサイズ (最低限) (レベル AA)
参考：解説書達成基準 2.5.5: ターゲットのサイズ（強化）（レベルAAA）

このパンくずリンクは①デスクトップでのみ表示されると言うこと、②「ホーム」や「サービス」などの親ページには他にもリンクが設置されているため、今回は現状維持で良さそうです。

ちなみにNormalText・LargeTextの区分は以下のようになっているようです。

区分	説明	クリア基準
Normal Text	18px未満の通常の文字	【AA】　4.5：1以上でクリア【AAA】7.0：1以上でクリア
Large Text	18px以上、または14px以上の太字	【AA】　3：1以上でクリア【AAA】4.5：1以上でクリア

このままこのデザインで判定を続けてはこのプラグインの性能がどれほど優れたものなのかわからないため、問題ないデザインと明らかに問題があるデザインを混ぜて判定させてみましょう。

ここで驚きの精度を発見！！！！

これはすごい。

数日ひたすらこのプラグインを試して一番驚きました。すごい。

ほかの日本で主に使用されているアクセシビリティチェッカー（厳密にはコントラストチェッカー）のプラグインでも、昨年試した段階ではどれも背景が柄のデザインは判定ができませんでした。

判定文を読んでみると、「柄」を認識していそうな感じがします。
柄を混ぜてこれくらいの色、と単色に直して判断しているんですね。人間の目と同じ判定の仕方をしています。

別の柄でも試してみます。

画像のような、１つ１つオブジェクトを作成・配置したものは柄認定されず、判定してくれないようです。
ちなみに問題ないデザインでも「Alt Text」という代替テキストの案だけが出た画面になります

ただ、実際の業務のことを考えるとここまで大きいオブジェクトを配置することも稀なのでこれはこれでいいのかなと思いました。

しかし、驚いたのも束の間、1つの疑惑も浮上しました。

疑惑とは、もしかしたら「AA：CLEAR」だが、「AAA：FAIL」といった微妙な判定は取りこぼすしている可能性です。
下の画像は以前記事で検証したものと同じものを判定して比べた結果です。

う〜〜〜〜〜ん、こっちの精度はイマイチなのかぁ....（感想）

良い点

柄背景でも判定してくれるほど精度はいい

イマイチな点

全体的に何をチェックしてくれているのかわからないので、一つもエラーが出なかった場合「すべてクリアしたデザインなのか」「デザインに問題があり、プラグインによる判定ができていない状態なのか」が判断できない
NormalText区分だと「AA：CLEAR」だが、「AAA：FAIL」といった判定になるような、微妙なものは取りこぼしてしまっている可能性がある

今後のアップデートに期待かなと思います。

[補足]レビューへの復帰方法

プラグインをいつも通り立ち上げたら右上の「My Reviews」をクリック。ここに過去行ったレビュー履歴があるのでここをクリックすることでその時出た判定結果をもう一度確認できます。この操作はどの機能を使用しても同じです。
どの機能の履歴か、この一覧だけでは分かりませんが、各履歴をクリックして進んでみると、下記の様にちゃんとどの機能でのレビューか表示されています。もし日を跨いでしまった時はこの辺を頼りに遡ってみましょう。

4. User Growth（サイトの利用を促進させるための提案）

次は「User Growth（サイト利用促進）」機能を使用してみます。
プラグインHOME画面での説明では「ウェブサイトとサインインにおけるエンゲージメントを高める機能」と書いてあります。どんなアドバイスをしてくれるか、実際に使用してみてみましょう。

「User Growth」でページデザインを判定させてみると、以下の３項目でフィードバックが出ました。
判定内容を一気に見ていきます。

おおお...！LayoutとCTAのフィードバック、いいじゃん.....！！！

Layoutのフィードバック内容を見るに、「文章がつらつら綴られているから、もっとユーザーが簡単に内容を把握できるように、箇条書きにしたり、見出しだけで把握できるような書き方にしたら？」ということだとおもいます。

また、CTAボタンに関するフィードバックですが、こちらもいいですね。
弊社のコーポレートカラーは赤なので、赤を基調としたページデザインになっていますが、他のページへ回遊するボタンと「お問い合わせ」ボタンが同じ色になっているのは改善の余地があるかもしれません。

また、アニメーションに関しても触れているのもいいですね。
動きをつけてユーザーの気を引く。
昔から言われている定番のテクニックなのに、ついつい忘れがちな効果です。もしかしたら「ある」かも...！

良い点

使える！このUserGrowth機能を主軸に改善を試してみてもいいかもしれません。

イマイチな点

他の機能と同じようにどれほどの項目をチェックしてくれているかわからなく、項目による精度のばらつきがあるように思う。

[まとめ]結局、「AI Design Reviewer」は実務で使えるか？

結論：UseGrowth機能はぜひ使ってみて！Improve Copyは文章改善のきっかけ作りに。その他の機能は今後のアップデートに期待。

今回、Figmaプラグイン「AI Design Reviewer」をじっくり検証してみたところ、UserGrowth機能は業務の中で活用できるレベルだと感じましたが、他は実用に耐えるレベルで活用するのは難しいという結論に至りました。
AIによるデザインレビューの可能性は感じられるものの、現状では精度や実装面での課題が多く、実際のプロジェクトで活かすにはもう少し時間が必要そうです。
...が、AuditUI機能に関しては、AIの成長によっては、如何様にもなるように感じており、実務での活用ができるレベルになった日には、もしかしたら「UI改善はAIでするもの」となっているかもしれません。

Accessibility機能に関しては、精度は悪くなかったものの、シンプルでみやすく使いやすく、総合的に精度の高いプラグインがすでに配信されていますので、そちらを使用されることをお勧めします。（詳しくご紹介した記事はこちら：【コントラスト比をチェックしてWebアクセシビリティの向上を】おすすめのFigmaプラグイン3選）

[人はAIよりも強し]シナップにはUI/UX改善のプロが所属しています

UI/UXの改善には、単にツールの力だけではなく、デザインの意図を正しく汲み取り、適切な判断ができるプロフェッショナルの視点が欠かせません。

弊社には経験豊富なUI/UXの専門家が揃っており、より本質的なデザイン改善の提案が可能です。
もし、デザインのクオリティを高めたい、より良いユーザー体験を実現したいとお考えの方は、ぜひご相談ください！

生成AIで広がるクリエイティブの可能性（Adobe Photoshop 生成AI機能利用事例）

Wed, 19 Mar 2025 01:11:25 GMT

こんにちは。シナップ大川です。

今回はシナップの活動報告も兼ねた小冊子『SINAP Journal 2025 Winter』に掲載した「生成AIで広がるクリエイティブの可能性」の記事を一部加筆修正したバージョンアップ版でお届けします。

生成AIの話題には事欠かない昨今ですが、具体的にどうやって活用しているの!?と思ったことはないでしょうか。
今回はAdobe Photoshopの生成AI機能を使って『SINAP Journal』の表紙を作成した事例をご紹介します。

AIで実現するクリエイティブの新境地

みなさんは今号のSINAP Journalの表紙を見てお気づきになりましたか？
実は今号の表紙の写真は一部生成AIの技術を使って作成しています。

（SINAP Journal 2025 Winter の表紙）

元の画像では、下の画像の左側にあるようにシロクマをロゴの下に配置しようとすると、背景が不足してしまいます。
デザイナーの方なら、提供された素材や利用可能な素材が一部足りない、あとちょっとあれば…という状況は日常的に経験していると思いますが、このような場合、生成AIを使った画像の拡張が非常に役立ちます。

この例では、Adobe Photoshopの生成AI機能を用いることで、元の写真に自然な形で背景を補完し、全体の構図を広げることができました。
しかもその画像生成時間は１分とかかっていません。

このプロセスにより、被写体であるシロクマをロゴと重ならない絶妙な位置に調整しつつ、表紙に奥行きと広がりを持たせています。

Photoshopの生成AIを活用するコツ

上の例では「生成塗りつぶし」という機能を使い、プロンプトはなにも指定せずに生成しましたが、欲しいイメージに近づかない場合、プロンプトを工夫することでよりイメージに合った画像を生成することができます。

Adobe公式サイトでは、Photoshopの生成AIを活用する際に有用なプロンプト作成のポイントが紹介されています。

「どこで（Where）」「誰が（Who）」「何をしている（What）」という「3W」を意識したプロンプト
「アニメ風」「シンプル」「モダン」など、希望の雰囲気、テイストの情報。（生成パネルにある「コンテンツタイプ」という機能からも選択できます）
カラーやライティング

などだそうです。また参照画像を用いることで欲しいイメージを伝えることもできます。

より詳細な情報や広告用ビジュアルを作成するプロンプト例などが知りたい方はAdobe公式サイトのこちらのページをご覧ください。

クリエイターの可能性を拡張する

AI技術の進化によって、クリエイティブな作業は大きく変わろうとしています。

生成AIの活用は、これまで手間と時間がかかっていた作業を迅速に進めることを可能にし、全体の作業効率も大幅に向上しました。これによりクリエイターはより多くの時間をアイデアの発想やデザインの試行に充てることができ、創造性を発揮する余裕が生まれています。

さらに、AIは単なる作業の補助に留まらず、クリエイティブな過程全体をサポートする存在となりつつあります。
たとえば、デザイン案の生成からフィードバックに基づく改善まで、AIはさまざまな場面でクリエイターの力となります。
他にも、今回の事例のように、従来難しかったイメージの拡張や修正なども、AIを使うことで高精度で自然な仕上がりを実現できるようになってきました。

こうした技術の進歩は、クリエイターにとって新たな表現の可能性を与えるものとなるでしょう。

シナップのAI技術への取り組み

私たちシナップは、AIを積極的に活用し、クリエイティブの可能性を広げることに取り組んでいます。

今回の画像生成AIの活用はその一例に過ぎませんが、他にも文章生成やデータ分析、プログラミングなど、さまざまなAIツールを活用し、作業の効率化を図るだけでなく、創造的なプロセスにも役立てています。

例えば、UXリサーチフェーズにおいてAIを活用することで、調査結果を迅速に分析し、ペルソナやカスタマージャーニーマップの作成をサポート、デザインの改善ポイントの特定などに役立てています。

AIの進化もまだまだこれからでしょう。
今後もAI技術を活用し、新しいアイデアを取り入れながら、クリエイティブの可能性をさらに広げていきたいと思います。

【初心者向け】Next.jsとmicroCMSを使用したWebサイト構築の全体像｜セットアップからVercelデプロイまで解説

Mon, 03 Mar 2025 06:37:52 GMT

はじめに

この記事では、Next.jsとmicroCMSを使用してヘッドレスCMSベースのWebサイトを構築する方法を説明します。

今回の目標

Next.jsでWebサイトを構築
microCMSからコンテンツを取得して表示
Vercelでデプロイ

今回は最小限のコンテンツで全体の流れの把握に焦点を当てるため、Next.jsやmicroCMSやVercelの各機能の詳細までは触れません。

1. Next.jsプロジェクトの作成

まずはGithubなどで新規リポジトリを作成し、Next.js環境を作成します。
リポジトリを作ったらローカルでNext.jsをインストールします。

npx create-next-app@latest my-app --typescript

ドキュメントの手順に従えば導入できるはずです。
英語なので慣れるまでは「うっ」と思うかもしれませんが、各種翻訳サービスを使って読み進めていきましょう。
https://nextjs.org/docs/app/getting-started/installation

2. microCMSの準備

microCMSのアカウント作成

microCMSのアカウントを作成し、ログインしましょう。
https://microcms.io/
プランについての詳細は別の記事で紹介しているのでよければそちらもご覧ください。

公式からも分かりやすい解説記事が出ているので困ったらこちらも参考に。
https://blog.microcms.io/getting-started/

新しいサービスを作成

アカウントにログインしたら新しくサービスを作成します。
https://document.microcms.io/manual/create-service

今回はNext.jsでWebサイトを作成するため、「一から作成する」を選択します
ここで設定した「サービスID」は後ほど使用します

APIの作成（例：ブログ用のAPI）

次はコンテンツを投稿・配信するためのAPIを作成します。
https://document.microcms.io/manual/create-api

テンプレートを選ぶことも出来ますが、今回は最小限の作りにしたいので「自分で決める」を選択します
APIの型は利用されるケースの多い「リスト形式」を選択
APIスキーマの定義では作りたいページ内容に応じて設定します
- https://document.microcms.io/manual/create-api#h41f309242d
- 例えばブログのタイトルと本文に加えて目次の欄を追加したい場合は目次用のフィールドを追加する必要があります
- 今回はシンプルに「テキストフィールド」のみ作成します

APIキーの作成

Next.jsからmicroCMSのコンテンツを取得するためのAPIキーを作成します。
https://document.microcms.io/content-api/x-microcms-api-key

ここまで出来たらmicroCMSの準備は完了です。

3. microCMSとNext.jsの連携

Next.jsからmicroCMSの情報を取得します。

環境変数の設定

microCMSのAPIキーとサービスIDをNext.jsの環境変数として設定します。
ルート直下に.envファイルを作成して以下のように定義してください。
your以下の部分に先ほど作成したmicroCMSのAPIキーとサービスIDを入力してください。

MICROCMS_SERVICE_DOMAIN=your-service-domain
MICROCMS_API_KEY=your-api-key

microCMS SDKのインストール

APIからデータをフェッチする方法は色々ありますが、今回はmicroCMSから提供されているmicrocms-js-sdkを使用します。
これによってendpointの指定やクエリパラメータの設定が簡単に行えます。

npm install microcms-js-sdk

APIクライアントの実装

ドキュメントに従って、APIクライアントを作成します。
https://github.com/microcmsio/microcms-js-sdk?tab=readme-ov-file#create-client-object

今回はsrc/libs/client.tsというファイルを新規作成し、以下のように記載します。

import { createClient } from 'microcms-js-sdk';

export const client = createClient({
  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: process.env.MICROCMS_API_KEY
});

データの取得と表示

先ほど作成したAPIクライアントを使用して、データを取得して表示します。
任意でクエリパラメータを指定することも可能です。
今回はapp/pages.tsxで実装しています。

export default async function NewPage() {
  const response = await client.get({
    endpoint: "news",
    queries: { limit: 10 }, // クエリパラメータを設定
  });
  
  return (
    <div>
      {response.contents.map((content) => (
        <div key={content.id}>
          <h2>{content.title}</h2>
          <p>{content.body}</p>
        </div>
      ))}
    </div>
  );
}

Vercelへのデプロイ

GithubとVercelを連携し、コミットをプッシュしたら自動的にデプロイされるようにします。

Vercelにサインアップ

Vercelのアカウントを作成し、ログインします。
https://vercel.com

新しいプロジェクトを作成

VercelのダッシュボードからGitHubリポジトリを選択し、デプロイしたいリポジトリを選択して、プロジェクトを作成します。
https://vercel.com/docs/getting-started-with-vercel/import

GitHubリポジトリから確認

リポジトリのSettings→GitHub AppsからVercelがインストールされていることを確認します。
これでmainブランチにプッシュすると、Vercelで設定したURLにNext.jsで構築したWebサイトがデプロイされるはずです。

まとめ

この記事ではmicroCMSとNext.jsを連携させた全体の実装の流れについて紹介しました。
実際にはコンテンツに合わせたAPIスキーマの設定や、取得した値の整形など、詳細な実装が必要になりますが、今回の記事を足がかりに、各ステップを作り込んで頂ければ幸いです。

参考リンク

Deploying GitHub Projects with Vercel
https://vercel.com/docs/deployments/git/vercel-for-github

microCMS + Next.jsでJamstackブログを作ってみよう
https://blog.microcms.io/microcms-next-jamstack-blog/

無料プランでどこまでできる？Optimize Nextの無料プランを徹底検証

Fri, 28 Feb 2025 02:05:30 GMT

こんにちは、SINAPの塩入です。
先日、Optimize Nextの導入方法について概要をご紹介しましたが、今回は「Optimize Nextの無料プランでどこまで使えるのか？」というテーマで、日々さまざまなサイト改善に携わるプロの視点から解説していきます。

無料のツールを検討する際に、多くの方が「無料でどこまでできるのか？」「結局、後から課金が必要になるのか？」といった疑問を抱えているのではないでしょうか。

Optimize Nextも無料から利用できますが、本格的な運用に耐えうるのか気になる方も多いはずです。
そこで、本記事では無料プランの限界や有料プランの活用ポイントを整理しつつ、実務レベルでサイト改善を進める際に押さえておきたい具体的なメリットや注意点をご紹介します。

※Optimize Nextの導入方法や利用方法については下記の記事ご確認ください。

『Optimize Next』ABテスト実践ガイド。初期設定からテスト設置方法、ゴール設定、結果の確認方法までまとめ

Optimize Nextを使うメリットとは？

まずは、Optimize Nextを利用するメリットを簡単におさらいしましょう。Optimize Nextは無料プランから気軽に試せるだけでなく、GA4との連携やKPIツリー・仮説管理機能など、サイト改善やマーケティング施策に必要な機能が充実しています。

また、有償プランへの移行もしやすい料金体系が整っており、初心者から本格導入を検討する企業まで幅広く対応できるのが大きな特長です。

ポイント

無料プランからスタートできるため、導入リスクが低い
GA4との連携が容易で、テスト分析を多角的に行える
KPIツリーや仮説をツール内で共有でき、チームの足並みをそろえやすい
月3万円という比較的リーズナブルな価格で、有償プランに拡張可能

メリット1：お試し導入として無料で始められる

無料プランからスタートできるのは、Optimize Nextの大きな魅力です。操作感を試してみたい場合や、小規模なテストを行い、効果を確認したい場合には、初期費用をかけずに導入ハードルを下げられます。

リスクを最小限に抑えられる
導入ハードルが低い
使用感に納得できれば、有料プランへスムーズに移行し、本格運用が可能

メリット2：GA4との連携が簡単で、テストの分析がしやすい

Optimize Nextは、Google Analytics 4（GA4）との連携が簡単にできる点も強みです。テスト結果をGA4と組み合わせて分析することで、施策の効果をリアルタイムかつ多角的に検証できます。

リアルタイムでのテスト結果の把握が可能
サイト全体のデータとあわせた総合的な分析ができる
ABテストツールの計測値とGA4の計測値の差分を最小化し、混乱を防げる

メリット3：KPIツリーや仮説をツール内に記述できる

Optimize Nextには、KPIツリーや施策の仮説を可視化できる機能があり、チーム全員が情報を共有しやすい環境が整っています。

目標設定や進捗状況の一元管理が可能
チーム全体での認識のすり合わせが容易
PDCAサイクルを回す際にも、改善ポイントをツール内で整理できる

このように、狙いと実施内容を一元的に管理できるため、施策の抜け漏れを防ぎながら、短いスパンで改善を繰り返せるのが大きな魅力です。

メリット4：有償プランの価格がリーズナブル（月3万円）

本格的な運用を考えるうえで気になるのがコストですが、Optimize Nextは月3万円という比較的手頃な価格で有償プランを利用できます。

大きな予算を割けない企業やチームでも導入しやすい
無料プランで試した結果、スムーズにスケールアップしやすい料金体系
サイト改善を継続しつつ、費用対効果を高められる

これらのポイントを踏まえると、Optimize Nextは「まずは無料で試したい」「成果が見えたら予算を増やして本格導入したい」といった段階的なアプローチを取りたい企業にとって、非常に使いやすいサービスといえます。

結論：無料プランだけで本格運用は難しい

結論から言えば、無料プランでも「ABテストを少し試してみたい」といった学習目的や軽い施策検証は可能です。

しかし、本格的な運用を目指す場合、無料プランでは対応しきれないのが現状です。

その理由を、大きく3つに分けて解説します。

理由1：テストの配信が均等配信のみ

無料プランでもABテストのような基本的な施策検証は行えますが、テストで「勝ちパターン」が見つかった際に100％配信（勝ち固定）への切り替えができないという制約があります。

そのため、テストを終了して本番環境に実装し直す必要があり、最適化までのスピードが大幅に遅くなるというデメリットがあります。

また、新たな施策を続けて試す際にもPDCAサイクルをスムーズに回せず、結果として改善の質や速度が低下してしまう可能性があります。

理由2：コンテナをメンバーで共有できない

無料プランでは個人利用のみが想定されており、チームやプロジェクトメンバーとコンテナを共有することができません。

サイト改善の施策は、マーケター、デザイナー、エンジニアなど複数の担当者が連携して進めるケースが一般的です。しかし、共有機能がないと情報の伝達や役割分担に大きな支障が生じ、組織としての運用が難しくなります。

本格的な運用を考えるなら、チームで利用できる有料プランの導入が必要です。

理由3：画像のアップロードが無料プランでは非対応

サイト改善の施策では、画像を使った検証が頻繁に行われます。しかし、無料プランではツール上に画像をアップロードする機能が利用できません。

そのため、画像の差し替えには自社サーバーや外部ストレージを経由する必要があり、手間や権限設定の課題が発生します。

特に、頻繁に画像を変更する運用を想定している場合、ツール内で完結できないことは大きな負担となりかねません。

無料プランは、学習や小規模なテストを行うには便利ですが、大規模かつ継続的なサイト改善を行うには、機能面で限界があります。

本格運用を視野に入れるなら、ベーシックプランやプレミアムプランへの切り替えを検討し、自社の環境や運用体制に適したプランを選ぶのが賢明です。

まとめ

Optimize Nextの無料プランは、ツールの学習や小規模な検証には十分活用できる一方で、本格的なサイト改善を行うには機能面で限界があることがお分かりいただけたかと思います。

運用体制や社内環境によって異なりますが、本格的な運用を目指すのであれば、ベーシックプランまたはプレミアムプランの利用が必要となるケースが多いです。とはいえ、いきなり有料プランを導入するのはハードルが高いため、まずは無料プランで使用感を試し、必要に応じてステップアップするのが効率的でしょう。

自社のサイト改善のゴールを明確にし、必要な機能や運用フローを整理したうえで、最適なプランを選択することが重要です。

ぜひ、自社に合った形でOptimize Nextの導入を検討してみてください。

また、シナップではABテストツールの導入支援から運用代行、内製化支援まで幅広く取り扱っております。「ABテストのやり方を教えてほしい。」「ABテストツールの導入と使い方だけ教えてほしい。」「ABテストツールを導入してみたけどうまく活用できなかったから代わりに運用してほしい。」などお困り事がございましたら是非お気軽にお問い合わせください。

こんなサイトにも使われている！厳選 microCMS 事例集

Thu, 20 Feb 2025 02:28:20 GMT

microCMS は、日本発のヘッドレス CMS で、国産という安心感やサポート体制の充実度、使いやすい管理画面、高い柔軟性が国内で多くの支持を集めています。ヘッドレスCMSの特徴であるAPI を活用することでデザインの自由度が高く、効率的にコンテンツ管理ができる、いま注目のCMSです。

現在では、さまざまな業界で数多くの企業や団体が導入し、プロモーションサイトやブランドサイト、さらには公共機関のサイトなど、多岐にわたる用途で活用されています。

そんなmicroCMSですが、公式サイトではこうした事例を数多く紹介していますので、導入事例を知りたい方はぜひ一度ご覧ください。

microCMS 導入サイト一覧（公式）

一方で、公式サイトは事例が多く掲載されているがゆえに、ザックリとイメージしやすい事例を知るには不向きです。また絞り込み機能があるものの、目的の事例を見つけるのに手間がかかることがあります。さらに、社内などで導入を検討する際にイメージしやすい企業やサービスの導入事例を手っ取り早く知りたい、共有したいなんてことも少なくありません。

そこで本記事では、「こんなサイトにも使われている！」という切り口で、イメージしやすい microCMS の導入事例を（独自視点で）厳選してご紹介します。

microCMS の魅力や可能性を知るきっかけとして、ぜひご覧ください。

公式サイトもご活用ください

ここで紹介する事例は公式サイトの事例一覧を中心に集めた情報で構成しています。
microCMSの公式サイトではこれ以外に多くの事例が掲載されていますので、ここに載っていないから近しい事例がないと諦めず、ぜひ公式サイトをチェックしてみてください。

またmicroCMSの公式サイトではインタビューも豊富に掲載されています。ここで挙げた事例でもインタビューのある記事に関してはリンクしていますので、そちらもぜひチェックしてみてください。

ちなみにわたしたちシナップが関わったヤマハミュージックジャパン様との取り組みのインタビューも掲載されています。こちらもぜひご覧ください。

さて、前置きが長くなりましたが、それではいってみましょう！

※ 掲載の情報は2025年2月17日現在のものです。内容は変更になる場合がありますので、最新の情報は公式サイトなどでご確認ください。

コーポレートサイト

バンダイナムコオンライン

https://www.bandainamco-ol.co.jp/ja/

世界的なエンターテインメント企業であるバンダイナムコのコーポレートサイトでは、microCMS を利用して情報を効率的に発信しています。開発環境、技術スタックは調べたところによるとmicroCMS、AWS Amplify、Eleventy。規模の大きい企業でも、迅速な情報更新が可能な点が採用の理由と言えます。採用サイトもmicroCMSだそうです。

マネックス・アセットマネジメント

https://www.monex-am.co.jp/

マネックス・アセットマネジメントはマネックスグループの子会社で、個人向け資産運用サービス「ON COMPASS」などを提供する資産運用会社です。正確さが求められる金融分野でも microCMS が使われ、スピーディーに更新されているようです。
こちらの技術スタックはmicroCMS、AWS、React、Next.jsという構成になっています。

micrCMS導入事例のインタビュー記事

【マネックス・アセットマネジメント株式会社様】サイト更新の脱属人化を実現し、以前より正確な情報開示ができるように

シナップ

https://sinap.jp/

バンナムさんやマネックスさんと並べるのもあれですが…アピールさせてください。
皆さんがいまご覧いただいているこのシナップのサイトも microCMS で構築されています。
技術スタックはmicroCMS、Vercel、Next.js です。

microCMSがコーポレートサイトに選ばれる理由

このほかにも多くのコーポートサイトの事例がmicroCMSのサイトでは紹介されています。
microCMSがコーポレートサイトのCMSに選ばれる理由ですが、その一つが、ヘッドレスCMSの柔軟性にあります。

フロントエンドの技術を自由に選べるため、デザインや機能をカスタマイズしやすく、既存のシステムとも統合しやすい特徴があります。
また、直感的な管理画面を備えており、コンテンツを簡単に更新できるところも人気の秘密だと思います。

さらに、セキュリティの高さもポイントです。SaaS型のため、サーバー管理やセキュリティ対策の負担が少なく、IP制限や認証機能も利用できます（プランによります）。
また、APIベースの配信により、表示速度の向上や負荷分散が可能で、安定した運用やSEO効果が期待できます。ワークフロー機能や権限管理も充実しており、大規模な運用にも対応可能です。

その上で価格もこなれているため、Wordpressから乗り換える企業も増えています。

【この記事もおすすめ】
WordPressからmicroCMSへの移行メリットと移行方法

このように、microCMSはセキュリティ、運用のしやすさ、拡張性のバランスが取れているため、コーポレートサイトのCMSとして選ばれやすいのではないでしょうか。

サービス

freee

https://www.freee.co.jp/

クラウド会計ソフトで知られる freee は、サービス紹介サイトをはじめ、現在では採用サイトなど全社的に microCMS を活用し、情報を発信しています。

microCMSの導入前は、MovableTypeやWordPressを各サイトがバラバラに運用していたそうですが、統一することによるコスト圧縮やSEOの向上などを目指して選定したそうです。
技術スタックはmicroCMS、Gatsby、Amazon S3、Cloudfrontといった構成になっています。

micrCMS導入事例のインタビュー記事

【freee株式会社様】マーケティング効率化と保守コスト削減を実現。全社の統一仕様にmicroCMSを選んだ理由

ABEMA

https://abema.tv/

日本最大級の動画配信サービス ABEMA では、膨大なコンテンツを効率的に管理するために microCMS を利用し、スピーディーな番組更新を実現しています。
こんな情報量の多いサイトも作れるんですね。
技術スタックは microCMS、React、Google Cloud のようです。

遠鉄百貨店

https://www.endepa.com/

静岡県浜松市を中心とする地域で高い知名度を誇る遠鉄グループでは、グループ全体で展開する約50のWebサイトをmicroCMSへ順次移行を進めているそうです。その中核を担う「遠鉄百貨店」のWebサイトでは、入居する約300店舗がそれぞれの情報をmicroCMSから直接投稿できる仕組みで、各テナントのニュースは、Webサイトだけでなく、店内に設置されたデジタルサイネージへもAPI連携により反映され、情報発信を実現しています。

WEBサイトだけではなく、サイネージとの連携もおこなうなど、APIという特性をうまく活用したヘッドレスCMSならではの事例だと思います。

技術スタックは Azure、Cloudflare、Nuxt.js のようです。

microCMS導入事例のインタビュー記事

グループ全体の20サイトをmicroCMSで統一管理。約300店舗が自らコンテンツを更新し運用も効率化

N高等学校・S高等学校

https://nnn.ed.jp/

教育分野でも microCMS が活躍しています。KADOKAWAドワンゴが運営するN高等学校・S高等学校をはじめ、N中等部、N Code Labo などのサイトもmicroCMSを利用しています。
技術スタックは microCMS、Amazon S3、CloudFront、Next.js のようです。

ベビーパーク/キッズアカデミー公式サイト

https://www.babypark.jp/
https://www.babypark.jp/ka/

親子の絆をテーマに全国約200箇所で教室を運営しいる親子教室ベビーパーク/キッズアカデミーのサイトもmicroCMSで運用されています。
microCMSにすることによって従来よりも高速でセキュアなWebサイトを実現し、運用効率の向上を達成しています。
技術スタックはmicroCMS、Vercel、Next.js です。

こちらのサイトは私たちシナップが制作、運用を行っています。
ぜひシナップの事例紹介もご覧ください！

microCMSがサービスサイトに選ばれる理由

microCMSは、多くのサービスサイトにも採用されています。ここでもあげたように、ジャンルを問わず、幅広い業界のサイトがmicroCMSを活用しています。

選ばれる理由の一つは、コーポレートサイト同様にヘッドレスCMSの柔軟性。フロントエンドの技術を自由に選べるため、ブランドイメージに合ったデザインや機能の実装が可能で、他のシステムともスムーズに連携できます。

また、直感的な管理画面により、マーケティング担当者でも簡単にコンテンツを更新でき、キャンペーンやプロモーションの変更にも素早く対応できます。

さらに、APIベースの配信で表示速度が向上し、大規模アクセスにも強い点も魅力です。セキュリティ対策も充実しており、安心して運用できます。

このような特長から、サービスサイトにおいてもコーポレートサイト同様microCMSが選ばれるケースが増えていると感じます。

採用サイト

SmartHR 採用サイト

https://recruit.smarthr.co.jp/

近年、採用サイトに力を入れている企業も増えてきています。採用サイトでもコーポレートサイト同様に、お知らせの更新や募集職種の掲載、オウンドメディア的な記事の発信など、CMSを導入し、迅速に更新したいコンテンツが多くあります。

クラウド人事労務ソフトを提供する SmartHR の採用サイトでは、microCMS を活用して柔軟なコンテンツ管理を実現していまるようです。採用情報の更新やコンテンツの管理がスムーズに行えることで、候補者に対して常に最新の情報を提供できることが伺えます。アクセシビリティも高いレベルで対応しているのも好感がもてます。

技術スタックはAstroとCloudflare のようです。

メディア

ホットペッパービューティーマガジン

https://beauty.hotpepper.jp/magazine/

美容情報を発信するホットペッパービューティーマガジンでは、ヘアスタイルやネイル、メイクなどのトレンドを紹介し、年代や好みに合う美容情報をmicroCMS で配信しています。
膨大なコンテンツ量、たくさんのタグの使い方なども特徴的で、表示の速さも驚きです。こうしたメディア運用もmicroCMSは合っていそうですね。
技術スタックは microCMS、AWS S3、Nuxt.js、Node.js、Vue.js のようです。

ブランドサイト

丸亀製麺

https://marugame.com/

丸亀製麺では、ブランドコンテンツを microCMS で管理し、定期的なキャンペーン情報なども効果的に発信しています。
業界内でも特に、商品・事業展開スピードが「速く、多い」ブランドとして、microCMSを活用し、サイトの更新スピードを上げたそうです。人数の多い部署ではコンテンツ公開権限を利用して、レビュー体制をとるなど、権限管理もうまく活用しているとインビューで話されていました。
技術スタックは microCMS、Next.js、React、AWS S3、Node.js です。

こちらのサイトは私たちシナップが制作、運用を行っています。
ぜひシナップの事例紹介もご覧ください！

microCMS導入事例のインタビュー記事

【株式会社トリドールホールディングス様】丸亀製麺の商品・事業展開スピードに寄り添ったサイト更新が可能に！

ヤマハミュージックジャパン取り扱いブランド

https://brands.yamahamusicjapan.co.jp/

ヤマハミュージックジャパン（YMJ）では、ヤマハ取り扱いブランドサイトの管理に microCMS を活用しています。
ヤマハの数多い取り扱いブランドそれぞれのブランディングを重視し、ユーザー体験の向上と効率的な情報更新を両立しています。
技術スタックはmicroCMS、Vercel、Next.js です。

こちらのサイトは私たちシナップが制作、運用を行っています。
ぜひシナップの事例紹介や下記のインタビュー記事もご覧ください！

micrCMS導入事例のインタビュー記事

【ヤマハミュージックジャパン様】サイト更新のリードタイムが2週間→数日に。microCMSでブランドの特色を表現できるサイト運営を実現

セレッソ大阪

https://www.cerezo.jp/

Jリーグのチームであるセレッソ大阪の公式サイトでは、microCMS を活用してチームのニュースを効率的に発信しています。
もともとはWordpressを利用していたようですが、リニューアルにあたって、お客さま目線でエンターテインメントを提供するという観点で、読み込み速度も意識し、microCMSを採用したそうです。

面白いのは試合情報、クラブ情報、ニュースなどはmicroCMSで更新しつつ、試合速報などの情報はJリーグ所属クラブ向けに配信される公式のAPIを利用してmicroCMSのPOST APIで更新している点です。
こんな使い方もできるんですね。

技術スタックは microCMS、Next.js、Vercelとのこと

micrCMS導入事例のインタビュー記事

【セレッソ大阪様】Jリーグチームで断トツの読み込み速度を誇るウェブサイトに

EC

ZOZOTOWN

https://zozo.jp/

日本最大のファッション通販サイト ZOZOTOWN では、サイトを microCMS を利用して管理しているそうです。
調べた記事やインタビュー記事などを読んでいると、キャンペーンページの作成ではmicroCMSによってノーコード化を実現するなど、細かいところまで作り込んでいることが伺えます。
技術スタックは microCMS、Reactとのこと。

microCMS導入事例のインタビュー記事

【株式会社ZOZO NEXT様】コンテンツ制作の自由度が上がり柔軟な調整が可能に、サイト回遊率も向上！

YAMAP STORE

https://store.yamap.com/

登山地図GPSアプリ「YAMAP」を中心に、登山やアウトドア愛好者向けのメディアであるヤマップは、同社のEC事業であるオンラインストアYMAP STOREで microCMS を活用しています。
バックエンドのEC機能はShopifyを利用、コンテンツ制作はmicroCMS側で行い、Shopifyの商品データとmicroCMS側の商品データをShopifyのStorefront APIを利用し紐づけ、自動的に商品情報が表示される仕組みにするなど、それぞれの利点を活かした構成が参考になります。
技術スタックは microCMS、Next.js、React、Node.js。

microCMS導入事例のインタビュー記事

【株式会社ヤマップ様】Shopifyとのスムーズなデータ連携により、ECサイトリニューアル後の急成長に貢献

エンターテイメント

サーチアカウント（リアル脱出ゲーム created by SCRAP）

https://realdgame.jp/searchaccount/

リアル脱出ゲームで有名なSCRAPが手がけたブラウザゲーム「サーチアカウント」も、microCMSで制作されています。
ゲーム制作では、テストプレイを重ねながらデザインやテキストの修正、イベント発生のタイミングなどを細かく調整する必要があるそうですが、これまではエンジニアが対応する作業だったところを、microCMSを導入することで、スムーズな調整が可能となったそうです。
ゲーム開発にも活用できるとは、驚きですね！

microCMSの公式サイトには、この取り組みに関するインタビューも掲載されています。

micrCMS導入事例のインタビュー記事

【SCRAP様】ゲーム制作にmicroCMSを活用。分業体制を整えて作業を効率化

技術スタックは microCMS、Next.js。

ミステリカーニバル（星海社）

https://www.mysterycnv.jp/

多数の作家が集まり、大サイン会やトークショーなどのイベントのほか、グッズ販売などが行われる、ミステリーファンのための一大フェスティバル「ミステリカーニバル」の公式サイトもmicroCMSで制作しています。

従来、このようなフェスのサイトは開催ごとに制作会社に依頼して制作しなければならないものでしたが、microCMSを活用することでこうした手間やコストを極力減らし、クライアント側で柔軟に更新できるように設計されています。

また柔軟性の高いデザインシステムを導入することで、デザイナーでなくても全体のトーン&マナーを保ちながら、綺麗にデザインされたページ作成が可能なところもポイントです。

こちらのサイトは私たちシナップが制作、運用を行っています。
ぜひシナップの事例紹介もご覧ください！

自治体・公共

渋谷区公式サイト | 渋谷区ポータル

https://www.city.shibuya.tokyo.jp/

渋谷区公式サイト渋谷区ポータルもmicroCMSで制作されています。
こんな大きなサイトもmicroCMSだというのは驚きですね。
技術スタックは Nuxt.js。

大田区「おおたまなびの森」

https://otamanabi-no-mori.city.ota.tokyo.jp/

区民の生涯学習の推進を支援するため、生涯学習コンテンツ「おおたまなびの森」のサイトもmicroCMSで作成されています。
講座、イベントやサークル、ボランティア情報などをmicroCMSで管理しているそうで、多人数でのコンテンツ運用が想定されたため、柔軟な権限管理ができることも導入の決め手ということでした。

micrCMS導入事例のインタビュー記事

【大田区】多人数でのコンテンツ管理の効率化と工数削減を実現

技術スタックは microCMS、Vercel、Next.js、React。

まとめ

microCMS は、コーポレートサイトからエンターテインメント、公共機関まで、幅広い分野で導入されている CMS です。今回ご紹介した事例を見ても、「スピーディーな情報更新」「自由度の高いデザイン」「セキュリティの確保」「柔軟なコンテンツ運用」 などが評価され、さまざまな業界で採用されていることがわかります。

シナップはmicroCMSを活用したサイト構築・運用を支援を行っています

私たちシナップも、microCMSを活用したサイト構築・運用を行っている制作会社のひとつです。 実際に、ヤマハミュージックジャパン様のブランドサイト やTOEZ様のビーパーク/キッズアカデミー公式サイト、 星海社様の「ミステリカーニバル」公式サイト など多数のプロジェクトに携わり、microCMSの柔軟性を活かした設計・運用を行っています。

「microCMSに興味があるけど、導入や運用に不安がある…」という方は、ぜひご相談ください。 どんな使い方が最適なのか、どう運用すれば効果的なのか、一緒に考えていきます。

さらに導入事例を知りたい方へ

本記事では、「こんなサイトにも使われている！」という視点で事例を厳選しましたが、microCMSの公式サイトには、さらに多くの事例が掲載されています。また、導入企業へのインタビュー記事 も豊富に掲載されており、具体的な導入の背景や活用の工夫なども知ることができます。「自社でも使えるかも？」と感じた方は、ぜひ公式サイトの事例一覧もチェックしてみてください！

無料ABテストツールVWO：有料プランと無料プランの違い、選び方

Tue, 18 Feb 2025 02:12:45 GMT

ABテストツールVWOを活用してサイト改善を始めたい方に向けた連載第4回では、VWOのトライアル期間で試せる機能とプラン選択のポイントを解説します。契約プランについて悩んでいる方は、トライアル期間で各種機能を試してみて必要機能や最適なプランを見つけていきましょう。

テストの設置方法やゴール設定など、ABテスト開始前の設定手順の解説記事は「無料ABテストツール『VWO』の初期設定からテスト設置方法、ゴール設定、結果の確認方法までまとめました」をご覧ください。また、登録手順や管理画面の解説をした以下の連載回もよろしければ合わせてご覧ください。

連載第1回：「無料ABテストツールVWO：登録手順の詳細解説」
連載第2回：「無料ABテストツールVWO：管理画面（ダッシュボード）解説」
連載第3回：「無料ABテストツールVWO：ABテストの経過観察方法」
連載第4回：「無料ABテストツールVWO：有料プランと無料プランの違い、選び方」

VWOの無料トライアルについて

そもそもVWOとは

VWOは、ノーコードでABテストや解析を簡単に実施できるツールです。ビジュアルエディタによる直感的な操作で改善施策の実装を配信することができ、契約プラン次第では通常のレポート機能に加えてヒートマップなどの解析機能を活用することもでき、サイト改善を効率的に進めることができます。

トライアル期間はどのくらい？

2025年2月時点では30日間になります。

※ トライアル期間や条件などは変更される場合もありますのでご注意ください。

VWOの新規アカウント作成後に与えられる30日間のトライアル期間では、上位有料プランで使えるVWOの各種機能を試すことができます。

トライアル期間ではどんな機能が使えるか？

通常のABテスト機能などに加えて以下のような有料プランの機能が利用可能です。

スプリットテスト

異なるバリエーションのページや要素をランダムに訪問者へ表示して、どちらがより良い成果を出すかを検証するテスト手法です。URL単位で異なるページを比較することができます。

多変量テスト

ページ内の複数の要素を同時に変更し、それぞれの組み合わせが成果に与える影響を分析する手法です。最適な組み合わせを検証し、より効果的な構成を見つけることができます。

セグメント機能

キャンペーン配信対象をデバイス別やクエリパラメータ別などの条件でセグメントする有料機能を使うことができます。

解析ツール

ヒートマップやクリックマップ、セッションリプレイを活用してユーザーの行動を視覚的に把握できます。

これらの機能を実際のサイトで試すことで、必要な機能かを判断することができます。トライアル期間が終了すると有料プランの機能がロックされて利用できなくなるので、必要に応じてプランのアップグレードを検討してみましょう。

無料プランと有料プランの違い

VWOにはSTARTER（スターター）の無料プランと、GROWTH（グロース）・PRO（プロ）・ENTERPRISE（エンタープライズ）の有料プランがあり、それぞれ使用できる機能や制限数などが異なります。小規模なテストや簡単な改善であれば無料プランでも十分ですが、継続的な最適化や複雑なテストを行いたい場合は有料プランがおすすめです。

無料プランでは、基本的なABテスト機能が利用可能です。実施できるテストの種類、バリエーション数、配信対象を絞るセグメント機能などに制限があります。

有料プランでは、シンプルなABテストに加えて、スプリットテストや多変量テストを実施することができます。また、バリエーション無制限のテスト実施や、セグメントの条件指定、高度な解析機能、パーソナライゼーションなどが可能で、専用サポートも提供されます。計測できるビジター数の上限や、使用できる機能によって複数のプランがあり、利用料金が異なります。

基本機能

	無料プラン	有料プラン
テスト配信で利用できる訪問者数	月間5万UUまで	上限変更可能
月額利用料	無料	$198〜
ABテスト	◯	◯
スプリットテスト	×	◯
多変量テスト	×	〇（プランによる）
同時に実行できるキャンペーン数	無制限	無制限
キャンペーン内のテストバリエーション数	3つまで	無制限

キャンペーン設定・アカウント管理・サポート

	無料プラン	有料プラン
▼ キャンペーン設定
ゴール目標	5つまで	無制限
クロスドメインテスト	×	〇（プランによる）
▼ アカウント管理
メンバー追加	無制限	無制限
追加ワークスペース	×	1〜5（プランによる）
▼ サポート
メールサポート	◯	◯
チャットサポート	×	◯

有料プランがおすすめのケース

VWOの無料プランでも基本的なABテストは可能ですが、以下のようなケースでは有料プランを検討するのがおすすめです。サイトの規模やテストの複雑さ、サポートの必要度に応じて、無料プランのままで運用するか、有料プランへ移行するかを判断しましょう。

月間5万UUを超えるサイトでテストを実施したい場合

無料プランではテスト対象サイトが月間5万UUまでに制限されています。流入が多いサイトではこの上限を超える可能性があり、計測できるデータが不足することもあります。なお、アクセスが5万UUを超えても自動で有料プランに切り替わることはないため、適切なタイミングでプランのアップグレードを検討しましょう。

1つのテストで4つ以上のテストパターンを実施したい場合

無料プランでは最大3つまでのバリエーションを配信可能ですが、より多くのパターンを同時にテストしたい場合は有料プランが必要です。特に多変量テストや細かいバリエーションの検証を行いたい場合には、有料プランの利用が適しています。

VWOのレポート機能で5つ以上のゴールを計測したい場合

無料プランでは、1つのテストで最大5つのゴール目標を設定可能です。クリック計測したい要素が多かったり6つ以上の指標を計測したい場合は、ゴール数が無制限の有料プランを利用するのが最適です。

公式サポートを手厚く受けたい場合

無料プランでもメールサポートが利用できますが、チャットサポートやより迅速な対応が必要な場合は有料プランがおすすめです。特に複雑なテスト設定や高度な機能の活用を検討している場合は、サポート体制が充実している有料プランを活用すると安心です。

トライアル期間の利用ポイント

トライアル期間でVWOの各種機能を最大限に活用するポイントを整理しておきましょう。

利用開始前の準備

事前にアクセス解析などを活用して課題を抽出し、テストの目的や検証したい仮説を明確にしましょう。その上で、施策の立案、ゴールとなるKPIの設定、さらにテストを配信するページや対象ユーザーのセグメントを整理しておくことが重要です。

適切なサンプルサイズとテスト期間によるテスト設計

流入が少ないページや変化の小さいテストでは効果的な改善結果を得られない場合があります。ABテストによる効率的な改善結果を得るために、インパクトが得られるページや施策内容を選定し、適切なサンプルサイズや実施期間などテスト設計を行いましょう。

VWO Insightsで行動分析

ユーザーの行動を分析できる各種機能がVWO Insightsには備わっています。ヒートマップ、コンバージョンファネル、セッションレコーディング、フォーム分析、アンケートなどはトライアル期間で解放されている有料プラン機能です。トライアル期間でこれらの機能の必要性を検討してみるのもおすすめです。

ヒートマップで、クリックやスクロールデータから離脱ポイントなどユーザー行動を視覚的に把握する
コンバージョンファネルで、ユーザーがコンバージョン到達するまでの離脱行動を分析する
セッションレコーディングで、マウスの動き、スクロール、クリックの様子からユーザーが関心を持った要素や意図していない行動を発見する
フォーム分析で、入力項目別の再入力や放棄している箇所を把握する
アンケートで、ユーザーへの質問回答からフィードバックを求める

有料プラン機能の代替手段

VWOの有料プラン機能を、他ツールの無料プランで代替することも可能です。以下に挙げたツールはほんの一例ですが、ヒートマップは「User Heat」、コンバージョンファネルは「GA4」、セッションレコーディングは「Clarity」などで代用できます。必要な機能に応じて、最適なツールを組み合わせてサイト改善における分析を実施しましょう。

ヒートマップ機能

無料で使えるツール
- Clarity
- User Heat
有料プランもあるが、無料プランの範囲で利用することも可能なツール

コンバージョンファネル機能

無料で使えるツール
- Clarity
- GA4
有料プランもあるが、無料プランの範囲で利用することも可能なツール

セッションレコーディング機能

無料で使えるツール
- Clarity
有料プランもあるが、無料プランの範囲で利用することも可能なツール

まとめ

いかがでしたでしょうか。VWOは、直感的な操作と充実した解析機能でABテストを簡単に実施できる強力なツールです。トライアル期間を活用して各機能を試し、最適なプランを選択しましょう。また、VWOの登録手順や管理画面の解説をした以下の連載回もよろしければ合わせてご覧ください。

連載第1回：「無料ABテストツールVWO：登録手順の詳細解説」
連載第2回：「無料ABテストツールVWO：管理画面（ダッシュボード）解説」
連載第3回：「無料ABテストツールVWO：ABテストの経過観察方法」
連載第4回：「無料ABテストツールVWO：有料プランと無料プランの違い、選び方」

VWOの初期設定やABテスト環境の整備、サイト改善など、初めての運用でつまずきやすいポイントも、私たちが伴走しながら支援します。自社だけでは解決が難しい課題をお持ちの方は、ぜひお気軽にシナップへご相談ください。

シナップメンバーに聞いてみた、フルリモートでよかったこと!

Wed, 05 Feb 2025 01:01:30 GMT

こんにちは!Admin 三木です。

シナップが2020年に完全フルリモート体制となり5年目（※1）。もはやフルリモートのプロとも言えるシナップメンバーに、今回は聞いてみました、

「フルリモートでよかったこと」!

通勤がないこと?プライベートの時間を持ちやすいこと?なんとなくはわかるけれど、より実感のこもった生の声をまとめてみました!
働き方を考えていらっしゃる方など、ぜひ参考にしていただけますと幸いです♪
※1：東京近郊のメンバーは自分の都合でオフィス出勤も可能

■シナップのフルリモートの歴史

と、メンバーのコメントの前に、まずはシナップのフルリモートの始まりやその課題、課題解決のために実施した施作などを簡単ですがご紹介です♪

Q.シナップがフルリモートを開始した時期は?

会社全体がフルリモートになったのは2020年、コロナ禍の外出自粛期間中でした。ですが実は…そのずっと前から地方在住のフルリモートメンバーがおり、リモートワークの知見はフルリモートになる前から貯めていました♪

Q.フルリモートになって出てきた課題は?

フルリモートは多くのメリットがありますが、課題もあります。特に社内向けでは、「メンバー間のコミュニケーションが減ること」が大きな問題でした。良好なコミュニケーションは、仕事のしやすさにも直結する重要な要素です。ちょっとした相談や気軽な雑談、知見の共有は、チームの連携を強め、新入社員がスムーズに馴染むためにも欠かせません。フルリモートによってこうした交流が減ることは、私たちにとって大きな課題でした。

Q.メンバー間のコミュニケーション不足解消のために行なった施策は?

ではこうしたコミュニケーション不足解消のために、これまでどのような施作を行なってきたのか。まだまだ挑戦の途中ですが、下記にまとめます。

朝のつぶやき（Slack）

開始前に今日のタスクや簡単な予定を所定のSlackチャンネルに書き込むのですが、その最後に今日のお昼はラーメン食べるなど簡単なつぶやきをします。各人の生活が見えるつぶやきも多いのでおもしろいです。笑

分報（Slack）

社内用SNSといった風で、Slackに個人用チャンネルを作成。今どんな仕事をしているか等状況の共有、仕事を含めふとしたつぶやきや悩みの投稿をします。それを見て他メンバーがコメントやリアクションを行います。簡単な雑談、知見共有にもなります。

雑談・知見共有専用チャンネル（Slack）

雑談、知見を共有するための専用チャンネルをSlackに作成。専用チャンネルなので気軽に書き込めます。

ごはん会（Zoom）

会社の補助ありで、メンバーを集いランチや懇親会を行える制度です。

年4回の交流会（Zoom）

年に4回、会社から飲み物と食べ物のセット支給ありで行う懇親会です。
リモート交流会がよくわかるこちらの記事もどうぞ

「リモートワークのコミュニケーション作りオンライン交流会は難しい」

お茶会（Zoom）

3-4人の班をつくり、週に一度、1回20~30分を目安に雑談を行います。顔を見ながら話せる良い機会になっています。
お茶会がよくわかるこちらの記事もどうぞ

コミュニケーション不足になりがちなリモートワークの救世主?!お茶会のすすめ。〜その目的・はじまり・やり方・実際の感想までご紹介!〜

と、このような施作を行いながら、シナップのフルリモートは日々進化しています♪

■メンバーに聞いたフルリモートでよかったこと!

お待たせしました!フルリモートに対するメンバーのコメントをご紹介します♪

【家族により寄り添えるように!】

（飯山）オフィスへの移動が無い分、すぐに仕事を始められるのは通勤ストレスが無くなって良い点だ思います。家族の急病時など予定の調整ができればすぐに対応できたり、on/offの切り替えがすぐにできるのはいざという時助かります。
（村田）飼い猫2匹のうち1匹が、身体が弱い、超ビビリで繊細、ご飯の食べムラがすごい…というちょっと手のかかる子でして、今年の年明けに具合が悪くなった時は、家で様子を見たり、朝イチで病院に連れていくことができて本当に助かりました。（今はバリバリ元気!）お客様とのzoom打合せに猫が映り込むことがあり、意外と好評をいただけるのも嬉しいです。
（竹田）通勤時間がない分、家事・育児に割ける時間が増えることです!昼休み中に子どもの夜ご飯の仕込みもできるし、掃除もできるし、保育園に預ける時間を減らせる＝子どもと過ごす時間が増えるし、助かることばかりです。あとは、通勤の満員電車に乗らなくてよくなったことでしょうか。特にコロナ禍は助かりました!（おかげさまでいまだに一度もコロナにかかってません）

三木コメント
通勤ありではなかなか難しい家族との時間を多く取れるのは本当にフルリモートの良いところです。家族に何かあった時にすぐ動ける安心感というのも大変魅力的!

【新しい世界が広がった!】

（小茅）対面ではない分、コミュニケーションの大切さを改めて実感できました。他はちょっとしたことですが雨が降ってもすぐに洗濯物を取り込めたり宅配の受け取りが便利だったり。寒い日には好きなだけ厚着もできます。デメリットは通勤がなくなることで運動不足になりやすく、実際に体重が増えました。なので運動する機会を増やしたので結果オーライです。
（鈴木）通勤時間を家事に使えることで、平日仕事しかできないという状況はなくなり、家のことができます。また、運動不足を補うために始めたランニングが新たな趣味となりました。
（小川）一番大きいのは使える時間が増えたことです。通勤時間がなくなったので、その時間を睡眠に充てたり、家事が出来たり、趣味の時間が出来たり、リモートワークでなければ出来なかったことが出来ていると感じます。外出頻度は減りましたが趣味で登山やハイキングにハマったので、インドアもアウトドアも以前より充実しています。

三木コメント
運動不足になりやすいが故に新しい趣味が増えた。思わぬ収穫です!笑

【住む場所を選ばない!】

（三國）「1.住む場所を自由に選べる」「2.通勤時間を別のことに使える」が大きいと思います。都内に通勤していた頃は東京近辺に住む必要がありましたが、フルリモートなら海でも山でも、なんなら海外でも自分の好きな場所に住むことができます。都内に通勤していた頃は、行き1時間、帰り1時間で合計2時間は通勤に必要でした。その2時間を通勤以外に使えるのです。週5日なら10時間です。
（平木場）住む場所が自由に選べるようになったこと、通勤がなくなったおかげでストレスが減り、その分の時間を他に当てることができるのは大きな魅力だと思います。私は現在地方に住んでいますが、3DK庭付きアパートなのに家賃は4万円しません。一日中静かでのどかな環境の上、大好きな自分の家の中でストレスフリーに生活できて本当に最高です。デメリットはもう在宅以外で仕事する気力がなくなることでしょうか。少数派の体になるのは怖いですが、冬の炬燵のように抜け出せません....ﾇｹﾀﾞｼﾀｸﾅｲ...

三木コメント
フルリモートになってから地方移住を決めた方も多くいます（いま東京近郊在住の方と半々くらいかも?）。住む場所を選ばない、生活の基盤すら自由に選択できるのはフルリモートならではです!

■まとめ

いかがでしたでしょうか?シナップのフルリモートの歴史に合わせ、実際のメンバーの声をご覧いただきましたが、楽しく仕事もプライベートも過ごせていることが伝わったのではないかなと思います。より良い環境となるよう、今後もブラッシュアップを続けて参ります!

以上、ここまでお読みいただきありがとうございました!

シナップブログ

シナップメンバーに聞いてみた、リモートワーク&デスクワークのリフレッシュ方法!

【デザイナー 小茅】アイマッサージャーでリフレッシュ!

小茅コメント

【ディレクター 三國】お気に入りのヘッドフォン＆爆音で音楽を楽しむ!

三國コメント

【エンジニア 村山】ティーブレイクでリフレッシュ!

村山コメント

【デザイナー 飯山】合間にはさむ腕立てがスッキリのコツ!

飯山コメント

【ディレクター 村田】昇降テーブル＋バランスボードで仕事しながら体操?!

村田コメント

【エンジニア 小川】観葉植物たちの緑に癒される…。

小川コメント

【デザイナー 竹田】息子さんとワンちゃんからエネルギーチャージ!

竹田コメント

【ディレクター 平木場】雑談を意識的に増やしてリフレッシュ!

平木場コメント

まとめ

「なんとなく下がる」の正体──季節から考えるグロース施策の組み立て方

UXの広がりと 進化する体験デザイン——HCD-Net資格者が語る、これからの体験設計

UXって 〝当たり前〟になってきた !?

HCDプロセスの理想と現実

「UXやってます」って言う会社、多いけど…選ぶの難しくないですか？

外部専門家を活用する真価言語化と組織変革

UXデザインとAIのこれから──変わる意思決定と情報設計

多様化するユーザー行動から考えるUXデザインの新たな出発点 ユーザージャーニー最適化 サイト体験から顧客体験へ

サイト体験を超えて

「点」ではなく「線」で見る

競合サイトも含めた比較行動の把握

意思決定の瞬間に寄り添う

体験をつなぐコミュニケーション設計

AIが変えるジャーニーの風景

「最適化」の旅は終わらない

シナップってどんなメンバーが多い?どんな企業風土?〜クリフトンストレングス®（旧ストレングスファインダー®）から見えるシナップ!〜

クリフトンストリングス®（旧ストレングスファインダー®）とは

クリフトンストリングス®（旧ストレングスファインダー®）から見えるシナップ!

シナップにはどんなメンバーが多い?

■一人ひとりの個性を尊重する（個別化）

■深く考えることを好む（内省、学習欲）

■アイデアを生み出す創造力、論理的に分析する力を持つ（着想、分析思考）

■一度やると決めたことは最後までやり遂げる（達成欲、責任感）

シナップってどんな会社?（カルチャー、得意なことなど）

■互いの個性を尊重し、安心して深く思考できる、心理的安全性の高いカルチャーが根付いている（親密性、調和性、個別化、内省）

■クライアント一人ひとりに最適化された、質の高いソリューションを提供することが得意（個別化、着想、分析思考）

全体的にみて

■「戦略的思考力」の資質が非常に豊富

■思考力と人間関係力の美しいバランス

まとめ

『SINAP Journal 2025 Summer』PDF版をアップしました！

ヒューリスティック調査とは？基礎からわかるUX評価の手法

「成長してる実感がもてない」キャリアに悩む若手ディレクターに伝えたい【Web業界つまずく前に知りたい話】

この企画について

パーソナリティ

【お悩み】キャリアに悩む若手ディレクター

1.不安の原因は「自分の価値」が分からないこと

2.ディレクターのスキルは汎用性が高い

3.自分の価値を客観的に知る方法

4.キャリアビジョンを明確にするために

5.まとめ

Web担当者必見！SEO・マーケティング・Web制作などが学べる国内企業YouTubeチャンネル8選

なぜBtoB企業がYouTubeチャンネルを急増させているのか

コロナ禍でB2Bマーケティングが大きく変わった

AI検索（SGE）への対応が必要になった

専門性をアピールしやすい

採用活動にも使える

SEO・マーケティング系チャンネル

1. SEOおたく / LANY(レイニー)

人気の動画

こんな人におすすめ

2. SEOならミエルカチャンネル

人気の動画

こんな人におすすめ

3. ナイルTV / SEO相談室

人気の動画

こんな人におすすめ

4. バズ部 / ルーシー

人気の動画

こんな人におすすめ

5. GladCube TV

【デザイナー小茅】アイマッサージャーでリフレッシュ!

【ディレクター三國】お気に入りのヘッドフォン＆爆音で音楽を楽しむ!

【エンジニア村山】ティーブレイクでリフレッシュ!

【デザイナー飯山】合間にはさむ腕立てがスッキリのコツ!

【ディレクター村田】昇降テーブル＋バランスボードで仕事しながら体操?!

【エンジニア小川】観葉植物たちの緑に癒される…。

【デザイナー竹田】息子さんとワンちゃんからエネルギーチャージ!

【ディレクター平木場】雑談を意識的に増やしてリフレッシュ!

UXの広がりと進化する体験デザイン——HCD-Net資格者が語る、これからの体験設計

UXって〝当たり前〟になってきた !?

外部専門家を活用する真価
言語化と組織変革

多様化するユーザー行動から考えるUXデザインの新たな出発点ユーザージャーニー最適化サイト体験から顧客体験へ

チャンネル別登録者数

チャンネル別合計視聴数

生成AIでの業務効率化いろいろ試してきました

2025年度おすすめ書籍一覧