<h3 style="text-align: start" id="he79a3efbfd">クオリティ会議は4種類</h3>エムハンドでは制作物の品質を担保する「クオリティ会議」と総称する会議を実施しており、制作フェーズに応じて4種類に分かれています。　------＜主なクオリティ会議＞<ul><li>戦略会議</li><li>提案書会議</li><li>ワイヤーフレーム会議</li><li>トップデザイン会議</li></ul>------　案件により開催されない会議もありますが、「ワイヤーフレーム会議」「トップデザイン会議」は原則としてすべての案件で実施される重要な工程です。会議方法はMEETでのオンライン会議。　<h3 style="text-align: start" id="h4466cdd4e7">ワイヤーフレーム会議とは</h3>その名の通り、サイトの根幹である「ワイヤーフレーム」を決めるための会議です。主にメインディレクターがワイヤーフレームを作成し、以下の会議メンバーをチャットで招集します（会議主催者であるメインディレクターを含め、約6名が参加）。　------＜ワイヤーフレーム会議のメンバー＞<ul><li>GM</li><li>上長</li><li>TOP担当デザイナー</li><li>同チームディレクター</li><li>別チームのディレクター</li><li>会議主催者</li></ul>------　会議を円滑に進めるために、事前にワイヤーフレームをレビューツールである「AUN」で共有し、フィードバックや確認項目などを記載しておいてもらいます。ちなみに社員であれば、見学はいつでもどこでも自由👀<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/4ba174d1d44a454982679fc9bbb1ad78/1749608517-Zl4mws1c9HE25Wt6yNOJYjFi%20(1).webp" alt="" width="1200" height="651"><figcaption>実際のAUN。あ！見覚えのあるバナーが👀</figcaption></figure>　<h3 style="text-align: start" id="h15a4acd122">今回の主役</h3>今回会議を主催するのは、2025年1月に未経験ディレクターとして入社したTさん🎉　会議主催の記録をたどってみたところ、なんと2回目というフレッシュな回。ちなみにTさんのインタビュー記事はこちら👇<a href="https://www.m-hand.co.jp/blog/direction/interview-director-from-designer/">https://www.m-hand.co.jp/blog/direction/interview-director-from-designer/</a>

01.会議に潜入する前に

<h3 style="text-align: start" id="h22aef16093">案件概要の共有</h3>まずは、サイト制作の要件をまとめた「案件管理シート」をもとに、クライアント様の概要説明を会議の主催者が行います。今回は某スキンケア会社のコーポレートサイトとのことで、企業の強みや商品の特長など、会議に必要な情報を共有📢<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/1c54401477454c89956846cb6f767a1e/1749607690-VGSoqiL9lUxItQb0zAnBfr1k.webp" alt="" width="1064" height="771"><figcaption>実際の案件管理シート</figcaption></figure>　<h3 style="text-align: start" id="h295a7a1a05">AUNを見ながらコメント確認</h3>事前共有されたAUNのコメントに沿って、主催者が会議を進めていきます。今回入社5ヵ月目のTさんが作成したワイヤーフレームはこちら👇　AUNに寄せられたコメントは全部で17件でした！<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/217e1f44b3114458acb7f537c3e3f67e/1749688765-MnFdzxIHkPo6RU985Aj2bJKZ.webp" alt="" width="1984" height="4000"><figcaption>AUNに貼られていた、実際のワイヤーフレーム</figcaption></figure>　Tさんの会議の様子ですが、特にもたつくことなく、スムーズに会議を進行していました。Tさんの説明を聞く先輩方の表情は真剣そのもの👀　終始なごやかな雰囲気の中にも、「より良いサイトをつくるために」という目的がしっかりと共有されており、適切な意見やアドバイスが交わされながら、着実に会議が進んでいきました。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/e83dcbb73a3f4184b0f268aea0d01fbc/1749626297-Uhf3mgGDZ1HSxtRyIvdCQw0Y.webp" alt="" width="1960" height="949"><figcaption>Tさん説明中の風景。左上の白い服を着た方がTさん</figcaption></figure>　実際にAUNに寄せられたコメントをピックアップしてご紹介します👏 ▼ABOUTセクション<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/ba7cd34fe5a64c2e825d350fda982083/1749707595-KBIDNQzY85d4yHRjiCb2sVFq.webp" alt="" width="814" height="908"></figure>ここでは、表記ゆれの指摘の他、ABOUTの文章内でコンセプト設計にあわせて「社名」に触れると良くなる旨や、ブランドの思想や品質背景を記載した方が良いとのご意見がありました。　▼事業内容セクション<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/555e0abf458e450e84495891c563dbbb/1749710048-5nlFAdEaWbZUJkDK2INt8sYw.webp" alt="" width="815" height="385"></figure>事業内容では、各事業に遷移先内部リンクの「→」はあるものの、事業内容TOPに遷移するボタンがなかったので、ボタンを追加するといいかもしれないとのコメント。　▼企業情報セクション<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/79563e3c04994839ad39e400c3dae080/1749707808-rGqVIBciOmwSWDX0fQ3ZMFye.webp" alt="" width="823" height="1005"></figure>企業情報のセクションでは「企業情報」の英字は「INFORMATION」ではなく「COMPANY」に修正する指摘のほか、テキストの違和感や企業情報ページTOPに遷移するためのボタンを追加するご意見がありました。　▼採用情報セクション<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/8c1adc78fa6e43e1b10229708a3e8ac5/1749776155-ZjKbBhV0xrvpI5zOLS79HYul.webp" alt="" width="816" height="491"></figure>採用情報のセクションでは「見えないところで支えている」という表現に着目👀　曖昧に解釈されてしまう可能性があり、クライアント様のブランドや事業の本質とズレてしまう危険性についてのご意見がありました。改善案を複数提示してくださる先輩の優しさ😢　▼お問い合わせセクション<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/e32e95e698f8435e9f14027f3d81cef1/1749708815-kELF5JuN2rqUtzT0nOvc6sBm.webp" alt="" width="818" height="718"></figure>お問い合わせのセクションでは、「contact」の英字の確認と、サイト構成全体についての指摘がありました。お問い合わせに至るまで「OEM」について触れられていないのに、ここで触れられていることを踏まえてサイト構成を再度確認、調整した方がいいとのこと👀　ここで会議は終了となりました。

02.会議の流れ

ワイヤーフレームを経て、次の工程であるデザインにどう活かされたのでしょうか？　ワイヤーフレームと最終的なデザインをもとに比較してご紹介いたします。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/8724ba0d3c8d495d9839a60ff281f010/1749790924-qiojZd2mL7wybCFx9WPJntu4.webp" alt="" width="1537" height="4000"><figcaption>パット見の変更箇所比較👀</figcaption></figure>　▼ABOUTセクション<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/95e8d33b94d54bec8f6e9efb54cb81c7/1749791148-pwS9lrCE5o1LAWGm67xfd8ZX.webp" alt="" width="921" height="454"></figure>セクションのタイトルに「社名」を使用することでサイトのコンセプトを意識させるとともに、文章内に「本当に必要なものを届けたい」という企業の思想を記載することで、品質を意識した企業であることを印象づけているように感じます。　▼事業内容セクション<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/7b404fb5764544678830ab6837fd925a/1749791234-eaZhVXDdYn8TgsucHLw3P41O.webp" alt="" width="792" height="977"></figure>事業内容のセクションでは、会議終盤に指摘のあった「OEM」についての項目が増えています。その他、事業内容ページTOPへ遷移するボタンが追加されていますね。　▼会社案内セクション<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/eb8f3b58dd274dc9b6403c599b667481/1749791281-V8CwR4ulS1c2z9JTO5Fr0inH.webp" alt="" width="795" height="447"></figure>企業情報改め、会社案内のセクションでは、英字の修正、違和感のあるテキストの変更、それから会社案内ページTOPへ遷移するボタンが追加されています。　▼採用情報～お問い合わせセクション<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/c187c15e2cfe4b4bab333165b114df24/1749791340-CmbZcAWU1si8eGlQ4fJrNRDO.webp" alt="" width="822" height="719"></figure>採用情報やお問い合わせエリアでも、先輩方からのご意見を反映して修正されています。「見えないところで支える」から「誰かの美を支える」に変更されているのが私的推しポイント👀改めて指摘事項をもとに修正された内容を確認すると、スキンケア企業の事業内容の全貌がわかりやすくなっているうえに、ひとつひとつの文言に重みが増しているように感じました。もちろんTさんの今までの努力や実力があってこそですが、先輩方の知識・経験による助言によるところも大きいように思います。最後になりますが、今回の記事でご紹介させていただきましたのは、スキンケアブランドを展開する株式会社基礎化粧品研究所様のコーポレートサイトになります。「ボタニカルとケミカルの融合」というキーワードをもとに、化学式のあしらいと無彩色を基調に洗練された印象を演出し、商品を丁寧に届ける姿勢が伝わるサイトを目指して制作・公開に至りました。この案件のデザインプロセスをまとめた動画と、実績動画もあわせてご紹介します。　<div style="max-width: 56vh;"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 177.5001%;"><iframe src="https://player.vimeo.com/video/1107278865?h=e45b976aab&amp;app_id=122963" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="encrypted-media *;"></iframe></div></div>　<div style="max-width: 100vh;"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 100%;"><iframe src="https://player.vimeo.com/video/1107278846?h=283fdd7ace&amp;app_id=122963" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="encrypted-media *;"></iframe></div></div>　------＜公開されたサイト＞ <a href="https://corporate.kisocare.co.jp/" target="_blank" rel="noopener noreferrer">https://corporate.kisocare.co.jp/</a>------

03.Before→After

ここまで、入社5ヵ月目のTさんのワイヤーフレーム会議の様子や、ワイヤーフレームのBefore・Afterをご紹介いたしました。今回の会議を通して、クオリティ会議が新人ディレクターの成長を力強く後押しするだけでなく、部署や役職の垣根を越えて「より良いものをつくる」という意識を共有する重要な場であることを実感しました。エムハンドではこのようにチーム一丸となって、日々クオリティを追求しています。ご興味を持たれた方は、ぜひ他の記事もご覧ください！最後までお読みいただき、ありがとうございました。<hr>採用情報 📢現在ディレクター採用強化中です！　また、マーケティングディレクター・ライターも募集しておりますので、ご応募を心よりお待ちしております。　<blockquote class="twitter-tweet" data-dnt="true" align="center">👋Webディレクター 募集👋 Webディレクター（経験者＆未経験者）を積極採用しております！共存共栄の理念に基づき、組織全体で品質を高める仕組みがエムハンドの特徴です。 -- できるがつづくエムハンド。 ご応募お待ちしております。 -- 👉今期最後の募集期間 → 10.31 金<a href="https://t.co/KH9EPaC3sw">https://t.co/KH9EPaC3sw</a> <a href="https://t.co/gWDhGkADMu">pic.twitter.com/gWDhGkADMu</a>— エムハンド 広報 (@mhand_PR) <a href="https://twitter.com/mhand_PR/status/1966434109175079031?ref_src=twsrc%5Etfw">September 12, 2025</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

【潜入してみた👀】入社5ヵ月目のディレクターが挑む、ワイヤーフレーム会議

01.会議に潜入する前に

02.会議の流れ

03.Before→After

おわりに

Related Blogs

指示される側から、戦略を立てる側へ／元デザイナーが、ディレクターを選んだ本音とリアル

未経験からWebディレクターへ　2年目社員の挑戦と成長ストーリー

イラストディレクションについて

『Webディレクター必見』理想的なディレクトリマップの作成方法について

【潜入してみた👀】入社5ヵ月目のディレクターが挑む、ワイヤーフレーム会議

01.会議に潜入する前に

02.会議の流れ

03.Before→After

おわりに

Related Blogs

指示される側から、戦略を立てる側へ／元デザイナーが、ディレクターを選んだ本音とリアル

未経験からWebディレクターへ 2年目社員の挑戦と成長ストーリー

イラストディレクションについて

『Webディレクター必見』理想的なディレクトリマップの作成方法について

未経験からWebディレクターへ　2年目社員の挑戦と成長ストーリー