ウェブ運用を"無駄ゼロ"に 現場も経営も納得させる５つの工程

Transcript

1. ウェブ運用を"無駄ゼロ"に 現場も経営も納得させる 5つの工程 7 / 11（金） 15:00～16:00 15時より開始いたします。開催まで少々お待ちください。 ウェビナー内でご質問を受付けております。 いただいたご質問は、後日ご回答させていただきます。 ウェビナーから退出するとアンケートが表示されますので ご協力いただけますと幸いです。 アンケートにご回答いただいた方には後日、本日の資料をお送りいたします。 ご質問がございましたら、アンケート内に記載いただきますよう ご協力の程よろしくお願いいたします。
2. ウェブ運用を"無駄ゼロ"に 現場も経営も納得させる5つの工程
3. なんか無駄だな…って感じながら 進めてませんか？
4. 5つの工程に潜む"無駄"と、改善のヒント 本日お話すること なぜ今、制作フローの見直しが求められているのか
5. 本日のスピーカー Webディレクター 伊東 悟 ディレクター歴 5年 人間中心設計スペシャリスト 上級ウェブ解析士 Webディレクター 青田 夏美 ディレクター歴 5年
6. 当社のご紹介 NRIネットコムはWebビジネスを専業とする野村総合研究所（NRI）グループ会社です NRIネットコムの特徴 s 4事業が連携し、お客様のWebビジネスを戦略策定から、
 開発・運用までトータルに支援| s 金融（保険含む）、流通業界を中心に、Webサイト構築、 コンサルティング両面の実績が豊富| s 豊富な実績を元にした、各業界の業務知識、課題解決のた めの豊富なノウハウ| s UI/UXに関する認定有資格者多数在籍| s 人間中心設計専門家、スペシャリスト™ s Webデザイン技能検定1級〜2級　 多数
7. 各分野で書籍を多数出版
8. なぜ今、制作フローの見直しが 求められているのか
9. Web制作を取り巻く外部環境の変化 Web制作のあり方そのものが変わりつつあります 生成AI コード生成からデザイン提案まで、
 開発プロセス全体を革新 例：GitHub Copilot、ChatGPT ノーコード 技術的知識なしでも、高品質な
 Webサイトの構築が可能 例：STUDIO、Webflow デザインツール クラウド・共同編集型デザインツール の登場で、チーム協業が劇的に向上 例：Figma
10. みなさんの制作現場で、こんなケース、よくありませんか？ 「言ったのに伝わってない…」
 （あれ？みんなでちゃんと話したよね？） 「v1、v2、最新版、どれが最新版…？」
 （ファイル名だけで疲れる） 「それ、◦◦さんに聞いてください」
 （◦◦さん、いつも忙しそうなのに…） 「ファイルが多すぎて探せない…」 （あの情報、どこにあったけ…） 「前回どうしてこうなったか覚えてない…」 （毎回、経緯を追うのが大変） 「指示がSlackに流れて見つからない」 （連絡来てた気がするんだけど…） 日々の業務の中で “見えにくい非効率”が数多く潜んでいます
11. 今の制作フローを続けることのリスク 情報の分断 w ツールやファイルがバラ バラ（PowerPoint／ Adobe XD／PDF／Slack 等D w 修正指示や最新版の管理 に時間がかか3 w チーム間で「何がいつ決 まったか」が追えない 手戻り多発 w デザインの背景や意図が
 関係者に伝わらなl w コメントが曖昧で、実装 後に「それ違う」と修正 が入る 属人化 w ファイル構成や命名ルー ルが人に依Ž w 誰でもわかる状態にでき ていない このままだと… スピード感が失われ、ノウハウも蓄積しないため、 非効率で機会損失になってしまいます
12. 設計フェーズ ワイヤーフレームを作成 デザインフェーズ PC・SPで別ファイル作 成 開発フェーズ デザインをもとに実装 例えば、Adobe XDの場合 要件定義フェーズ PowerPointやExcelなどで 要件を作成 ファイルの分断 要件資料は別管理 レビューが煩雑 PDFに書き出してメール →Excelでコメント、確認 の往復が発生 バージョンの混乱 ファイルが複数に分かれ、 どれが最新かわかりづらく なる 意思伝達ミス 仕様補足がSlackやExcelで 飛び交い、手戻りや認識ズ レが頻発
13. では、どうすれば？ ツールがバラバラで非効率 一元管理＋共同編集 修正・確認のたびに手間がかかる リアルタイム共有・再利用 属人化・ブラックボックス化 チームで見える化 今、制作フローの中心を ”あるツール”にすることで解決できます
14. “つくる” を効率化できる ツールとは・・・？
15. Web運用者の悩みは『Figma』の導入で解決できる “つくる” を効率化し、“チームで成果を出す”制作フローへ 一元管理＋共同編集 リアルタイム共有・再利用 チームで見える化 要件定義〜開発の全行程で活用できる！ メンバーが変わっても引き継ぎが楽！ メンバー全が同じファイルにアクセスできる！
16. そもそもFigmaのサービスとは？
17. そもそもFigmaのサービスとは？ Illustrator、Photoshop、Adobe XD、sketch、miro、PDF、 PowerPointに変わるツール​ UIデザインやワイヤーフレームの作成・共同編集 ができるブラウザ上で使えるクラウドベースのツール​
18. Figmaの製品でできることはたくさんある 画像引用：チーム向けの無料オンラインWebデザインツール| Figma https://www.figma.com/ja-jp/web-design/ Figmaのユースケース Figmaの製品一覧
19. Figmaの製品でできることはたくさんある 画像引用：How to wireframe | Figma Blog https://www.figma.com/blog/how-to-wireframe/ Figmaのユースケース Figmaの製品一覧 Webサイト構成案/ワイヤーフレーム作成​
20. Figmaの製品でできることはたくさんある 画像引用：FigJam：チーム向けのオンラインコラボレーションホワイトボード https://www.figma.com/ja-jp/figjam/ Figmaのユースケース Figmaの製品一覧 アイデア出し
21. Figmaの製品でできることはたくさんある 画像引用：Figma Slides: あらゆる場面に対応するプレゼンテーションとスライドを作成 https://www.figma.com/ja-jp/slides/ Figmaのユースケース Figmaの製品一覧 資料作成
22. AI機能も期待できる 画像引用：Figma AI: 創造力をFigma AIで解き放つ https://www.figma.com/ja-jp/ai/
23. いま1番Web制作業界で注目されているツール 参考：UX Tools - Design Tools Survey - Interface Design Trends https://www.uxtools.co/survey/interface-design/trends 2024年度のFigmaのシェア率 82.3% Figmaのソリューションが一強の時代
24. もはやデザインツールではない もはやデザインツールではない 制作フローで関わる『みんな』がFigmaの製品を使うことで効果を最大限に発揮 よくあるイメージ『デザイナーが使うもの』​ もはやWeb担当者のみではなく、​ 現場の方、意思決定者など、、『みんなで使うもの』​
26. Web制作の現場 設計フェーズ サイト企画・設計 Web担当者がイメージを 作成し、関係者に共有＆ 合意してもらう デザインフェーズ デザイナーがデザインを 作成し、関係者に共有＆ 合意してもらう 開発フェーズ デザイン資料をもとにエ ンジニアにコーディング してもらう 要件定義フェーズ どんなWebサイトを作るの か大まかなイメージを関係 者で握る PowerPoint、Excel、Word Googleスライド、 Googleドキュメント 等で資料を作成し共有 Adobe XD、Sketch PowerPoint、 Googleスライド、 等で資料を作成し共有する Adobe XD、Sketch PowerPoint、 Googleスライド、 等でデザインを作成し共有 する 画像ファイル、PDF、 Googleドキュメント 等でデザインを確認
27. Web制作の現場 設計フェーズ サイト企画・設計 Web担当者がイメージを 作成し、関係者に共有＆ 合意してもらう デザインフェーズ デザイナーがデザインを 作成し、関係者に共有＆ 合意してもらう 開発フェーズ デザイン資料をもとにエ ンジニアにコーディング してもらう 要件定義フェーズ どんなWebサイトを作るの か大まかなイメージを関係 者で握る PowerPoint、Excel、Word Googleスライド、 Googleドキュメント 等で資料を作成し共有 すべてFigmaのソリューションに置き換えることができます！ Adobe XD、Sketch PowerPoint、 Googleスライド、 等で資料を作成し共有する Adobe XD、Sketch PowerPoint、 Googleスライド、 等でデザインを作成し共有 する 画像ファイル、PDF、 Googleドキュメント 等でデザインを確認
28. 企画・要件定義​ 要件定義フェーズ 要件定義フェーズ 営業・企画・広報部など​ 何を作りたいか依頼する側​ URLで共有＆確認！ Web担当者 管理・依頼部門 Figma Slides FigJam どんなWebサイトを作るのか大まかなイメージを関係者で握る 設計フェーズ デザインフェーズ 開発フェーズ
29. 企画・要件定義​ 要件定義フェーズ 要件定義フェーズ 営業・企画・広報部など​ 何を作りたいか依頼する側​ URLで共有＆確認！ Web担当者 管理・依頼部門 FigJam どんなWebサイトを作るのか大まかなイメージを関係者で握る 設計フェーズ デザインフェーズ 開発フェーズ Figma Slides ブレインストーミングやアイデア出しにはFigJam、資料作成にはFigma Slides 作成後の確認でも、共有URLを発行すれば同じものにアクセス可能＆コメントも貰 えて確認がよりスムーズ
30. ワイヤーフレーム/画面構成案の検討​ 設計フェーズ 設計フェーズ 要件定義フェーズ Web担当者がイメージを作成し、関係者に共有＆合意してもらう デザインフェーズ 開発フェーズ Web担当者 URLで共有＆確認！ Web制作担当者 Webデザイナー Figma Design
31. ワイヤーフレーム/画面構成案の検討​ 設計フェーズ 設計フェーズ 要件定義フェーズ Web担当者がイメージを作成し、関係者に共有＆合意してもらう デザインフェーズ 開発フェーズ Web担当者 URLで共有＆確認！ Web制作担当者 Webデザイナー Figma Design ワイヤーフレームを検討するためのパーツを揃えておくと、そのまま使えてすぐ作 成できる！ もちろん確認＆連携も、共有URLから！
32. デザイン制作 ​ デザインフェーズ Web担当者 URLで共有＆確認！ Web制作担当者 Webデザイナー Figma Design デザインフェーズ デザイナーがデザインを作成し、関係者に共有＆合意してもらう 設計フェーズ 要件定義フェーズ 開発フェーズ
33. デザイン制作 ​ デザインフェーズ Web担当者 URLで共有＆確認！ Web制作担当者 Webデザイナー Figma Design デザインフェーズ デザイナーがデザインを作成し、関係者に共有＆合意してもらう 設計フェーズ 要件定義フェーズ 開発フェーズ ワイヤーフレームから直接テキストを取得できる！ 別でアイコン作成・イラスト作成していたのも​、すべてFigma Designに集約できる ので、そのままデザインに使うことができる​！ もちろん確認＆連携も、共有URLから！
34. コーディング​ 開発フェーズ Web制作担当者/ Webデザイナー URLで共有＆確認！ コーディング担当エンジニア Figma Design Dev Mode デザインフェーズ デザイン資料をもとにエンジニアにコーディングしてもらう 設計フェーズ 要件定義フェーズ 開発フェーズ
35. コーディング​ 開発フェーズ Web制作担当者/ Webデザイナー URLで共有＆確認！ コーディング担当エンジニア Figma Design Dev Mode デザインフェーズ デザイン資料をもとにエンジニアにコーディングしてもらう 設計フェーズ 要件定義フェーズ 開発フェーズ Dev Modeを使うと作ったデザインから直接大きさ・サイズ・色の情報が取れる​！ レスポンシブ対応も可能なので、その都度デザイナーに確認しなくてOK​！ もちろん確認＆連携も、共有URLから！
36. サイト公開 Figma Config 2025で発表があった新機能 Web制作担当者/ Webデザイナー Figma Sites デザインフェーズ エンジニアによる開発フェーズが不要で、サイトを公開できる 設計フェーズ 要件定義フェーズ 開発フェーズ サイト公開
37. サイト公開 Figma Config 2025で発表があった新機能 Web制作担当者/ Webデザイナー Figma Site デザインフェーズ エンジニアによる開発フェーズが不要で、サイトを公開できる 設計フェーズ 要件定義フェーズ 開発フェーズ サイト公開 HTML、CSSなどのファイルをまとめてアップロードする必要がなく、​ Figma Sites上の公開ボタンを押すだけで公開できる！ Figma Designで作ったものを、そのままFigma Sitesに利用できる！
38. Figmaの導入で無駄ゼロ"のWeb運用が可能に Figmaの導入を行うことによって、 “つくる” を効率化し、“チームで成果を出す”制作フローへ 一元管理＋共同編集 リアルタイム共有・再利用 チームで見える化 Figma Slides FigJam Figma Design Dev Mode 導入により無駄がなくなる Figma Sites
39. Figmaの導入を成功させるために
40. Figmaの導入・定着には工夫が必要 専門知見に基づいた導入支援が、Figma活用の成否を分けます スムーズに立ち上げるためのコツ x Figmaに精通した人材の伴˜ x 他社事例を踏まえた設計ルールの策€ x チームの習熟度に応じた段階的な導入支p x 新機能を活用する運用体制づくり 導入がスムーズに進まない主な要因 x ファイル設計や命名ルールが属人 x ツール移行時の混乱（Adobe XD/PowerPoint/PDF とのすみ分け˜ x 社内説明・説得に手間がかか x 新機能のキャッチアップが追いつかない
41. NRIネットコムは、Figma活用のノウハウを蓄積しています 画像引用：FigmaConfig2025 公式イベントページ https://config.figma.com/san-francisco/ 私たちは、Figma社主催の年次カンファレンス「Config」にも参加し、常に最新情報をキャッチ。 国内外の最新事例や活用ノウハウをもとに、現場への導入・定着までしっかりサポートします。 昨年に続き、「Figma Config」に現地参加しました
43. ご清聴ありがとう ございました Figma活用をもっと詳しく知りたい方へ 退出後に表示されるアンケートにご協力いただきましたら、 個別にご案内を差し上げます。 s 「自社の制作フローにFigmaって本当に合うの？– s 「どこから変えたらいいか分からない– s 「現場にどう浸透させればいい？– s 「Adobeから移行できるのか心配」 など、気になる点がございましたら、お気軽にご相談ください。