こんにちは、スパイスファクトリー株式会社です。当社は、高度なシステム開発や美しい UI/UXデザインを武器に、企業のコーポレートサイト制作に携わっています。

コーポレートサイトの制作、もしくはリニューアルを検討されるにあたり、企画書や提案依頼書を用意するケースは往々にしてあります。
その際、コーポレートサイトに必要な情報やコンテンツは何なのか、具体的にどんな構成にすれば良いのかについて悩まれる Web担当の方もいらっしゃいます。

この記事では、コーポレートサイトのそもそもの目的からご説明したうえで、上場企業のコーポレートサイト事例を基にコーポレートサイトの構成に必要な項目や盛り込むべき情報について具体的に記載しています。
プロジェクトの企画書や提案依頼書を書く際にも役立つ内容となっておりますので、ぜひ参考にしていただければと思います。

そもそもコーポレートサイトの目的とは

コーポレートサイトは、会社の顔であり、ブランディングや情報発信・情報収集、ステークホルダーとのコミュニケーションの場として機能します。

企業には、ユーザー、投資家、求職者、社員やその家族などのさまざまなステークホルダーが存在するため、コーポレートサイトを訪問する属性もさまざまです。そのため、コーポレートサイトの目的はターゲットによって異なります。
たとえば、顧客に対しては自社サービスの認知や理解、申し込みを目的とし、株主に対しては企業イメージの向上により投資対象として選ばれることを目的とするようなイメージです。

しかし、「企業が伝えたい情報を分かりやすく発信し、企業への信頼を獲得する」という目的は、業態や業界、ターゲットを問わず共通して存在し、いかなる場合でもその目的に集約されると考えられます。
コーポレートサイトを制作もしくはリニューアルする前に、サイトの目的や存在意義が何であるのかを明確にすることで、内容に一貫性のある、ユーザーにとって伝わりやすいものに仕上がるでしょう。

コーポレートサイトの構成に必要な情報 基本の 7項目

コーポレートサイトには、記載すべき 7つの情報があります。
ただし、企業の経営方針や取引相手によって掲載したい情報の内容も変わります。
基本情報ともいえる以下の 7つの項目は、上場企業10社のコーポレートサイトを分析したところ、すべてのコーポレートサイトに共通して記載されていたものです。(2022年5月時点)

• 会社概要
• 企業理念
• 代表メッセージ
• 事業紹介
• 採用情報
• お知らせ
• お問い合わせ

これらの情報は、ほとんどの企業のサイトが網羅している基本構成情報となりますが、本項では各構成要素について上場企業ではどのような形で記載されているのか実例を挙げてご説明していきます。

会社概要

会社概要は、会社名や所在地、アクセスといった基本的な情報です。企業によっては、沿革や役員紹介なども含まれます。

加えて、主要取引先や従業員数、支社・事業所の情報、決算情報、役員紹介などが掲載されるケースが多いです。
情報のボリュームが多い場合には、それぞれ異なるページのコンテンツとして作成される場合もあるでしょう。
多くのステークホルダーが見るページとなるため、分かりやすい表記と配置を心掛けましょう。

また、会社概要ページは文字情報が多くなりがちのため注意が必要です。
その点で参考となるのが、 本田技研工業株式会社（新しいタブで開きます）です。
イラストやグラフの使用やフォントサイズの工夫によりページに視覚的変化がうまれ、ユーザーにとって要点の掴みやすい構成となっています。
「一目でわかる会社概要」といった PDF コンテンツも用意されており、ユーザーにとっての分かりやすさが体現された印象的なページだといえます。

企業理念

企業理念は経営方針やビジョン、ミッションなど、企業としての方向性を示すコンテンツです。

トヨタ自動車株式会社（新しいタブで開きます）では、円錐形をベースとした独自のトヨタフィロソフィーにより経営理念を表現しています。視覚的に分かりやすいのみならず、ミッション、ビジョン、バリューの内容に一貫性のあるコンテンツとなっています。

単に文字として記載するのではなく、上記のようにイラストや図を使用することで伝わりやすくなり、且つ他社とは一味違う魅力を表現することができます。

また、ソニーグループ（新しいタブで開きます）では「Sony’s Purpose & Values」という形でソニーの存在意義とバリューが定義されています。
近年では、世の中の不確実性の高まりや社会貢献活動に対する興味関心の向上から、長期的な経営視点が求められるようになりました。そのような背景のもと、改めて企業の存在意義を考え直し「Purpose（パーパス）」として掲げる企業が増えてきているのです。
ソニーグループでは、事業内容が多岐に渡るため、グループとしての方針を決定づけることも「Purpose（パーパス）」を定める一つの目的とされています。

代表メッセージ

代表メッセージは、代表の思いを伝えるためのページです。企業としてではなく、代表個人としてのメッセージや思いを伝えることで、顧客からの信頼・安心を得ることができます。

代表メッセージのページ構成は、代表の写真とともにメッセージが書かれている形が基本となります。写真に関しては、ユーザーに与えたい印象を考えたうえで、写真の撮り方や表情に反映させるとよいでしょう。

ソフトバンクグループ株式会社（新しいタブで開きます）の代表挨拶のページでは、メインのメッセージに加え、入社式や福岡ソフトバンクホークス日本シリーズ制覇時などのイベントにおける孫正義氏の挨拶やメッセージが時系列でまとめらています。
このような独自の表現は、他社との差別化やブランディング強化はもちろん、ユーザーに熱いメッセージを届けることにもつながります。

事業紹介

事業紹介のページでは、自社商品やサービス、事業を紹介します。
ここでは、企業が B2B であるか B2C であるかによりコンテンツの表現の形が異なります。

株式会社日立製作所（新しいタブで開きます）では、事業内容が複数存在するため、製品・サービスページのトップで「一覧」、「業種から探す」、「キーワードから探す」という3つの導線を設けています。訪問したユーザーは、数あるサービスのなかから迷うことなく求めている情報にたどり着くことができるため、サイトにおけるユーザー体験（UX）の向上に貢献しているといえます。

採用情報

採用情報ページは、企業によってかなり見せ方に差があるページでした。
基本的な募集要項などの情報のみを記載したシンプルなページがあれば、代表や社員の声、事業の紹介などリッチなコンテンツを掲載し、求職者にしっかりアピールしたページもあります。

特に、本田技研工業株式会社（新しいタブで開きます）や伊藤忠商事株式会社（新しいタブで開きます）では、画像や動画、パララックスデザインを取り入れており、動きのあるページが特徴的です。インパクトのあるファーストビューや、熱いメインメッセージを含め、訪問した就活生や求職者に強く印象に与える作りとなっています。

また、コーポレートサイトの一つのコンテンツとしてではなく「求人/採用サイト」として確立している企業もあります。
コーポレートサイト全体とは異なるテイストでブランディングを強化したい場合には、このような形で制作することを推奨します。

お知らせ

企業の最新情報を伝えることも、コーポレートサイトの役割のひとつです。企業に関するトピックは、可能な限りリアルタイムで発信することはユーザーにとっての安心感・信頼感にもつながります。

発信する情報としては、IR情報やプレスリリース、採用情報、事業に関するトピックなどが挙げられます。カテゴリごとに絞り込める導線を用意することで、ユーザーが必要な情報を探しやすくなるでしょう。

株式会社オリエンタルランド（新しいタブで開きます）は、ニュースリリースとトピックが分けて掲載されています。ニュースリリースでは、経営や事業にまつわる重要な情報を、トピックではよりカジュアルな企業の取り組みや周年情報が掲載されています。

お問い合わせ

最後に、お問い合わせページです。
ステークホルダーとのコミュニケーションのためにも、お問い合わせページは必須です。

一部上場企業になると、問い合わせ窓口を複数設置するケースもあります。通常のお問い合わせページに加え、IR情報に関する問い合わせ窓口を別に用意している企業もいくつか見られました。

日本電信電話株式会社（新しいタブで開きます）では、グループ各社への問い合わせに加え、IRやサステナビリティ、環境活動についてなど、それぞれの問い合わせ窓口を案内しています。
このように窓口を分けることで、社内の担当者に直接連絡がいくためスムーズな対応が可能となります。

さらにあるといいコーポレートサイトの構成情報 2選

次に、近年多くの企業がコーポレートサイトの内容として取り入れている2つの項目をご紹介します。

それは、サステナビリティページとストーリーページです。
特に、サステナビリティページは必須項目として押さえておくべきコンテンツとなってきています。
また、ストーリーは他社との差別化やファンの獲得に貢献できるため、可能な限り取り入れられるとよいでしょう。
では、実際にどのようなページ構成で作られているのか、こだわりのある企業のコーポレートサイトを基にご説明していきます。

サステナビリティコンテンツ

ここ数年でCSR、CSVというキーワードが注目されている通り、社会貢献性の高い企業が利益も獲得しているという時代の流れの中で、社会問題に対する会社の向き合い方や会社の存在意義が問われるようになりました。このページは、ブランディングの強化や投資家へのアピール、さらには新たなビジネスが生まれる可能性も秘めるコンテンツとなります。
参考となるページとして株式会社ローソン、株式会社日立製作所、株式会社アイネットのコーポレートサイトをご覧ください。

株式会社ローソン

https://www.lawson.co.jp/company/activity/（新しいタブで開きます）

ローソンのサステナビリティページでは、代表取締役によるトップメッセージやサステナビリティに対するローソンの方針、ESG の各項目における考え方や取り組み等が書かれています。
なかでも、ローソンの独自性がみられるのが特集ページです。
このページでは、「環境ビジョン Lawson Blue Challenge 2050! 2050年 食品ロス・CO2・プラスチックを減らすローソンの取り組み」というタイトルが付けられており、「食品ロスを減らす」、「CO2を減らす」、「プラスチックを減らす」という 3つの目標のためにローソンが取り組んでいることをイラストを使って分かりやすく、簡単な言葉で表現されています。
また、スクロールに連動してアニメーションする仕様となっており、ユーザーが楽しく見れる作りとなっています。子供でも容易に理解できるほどの分かりやすさを体現している点がローソンのサステナビリティページの強みであり、特徴です。

株式会社日立製作所

https://www.hitachi.co.jp/sustainability/（新しいタブで開きます）
日立のサステナビリティページで特徴的であるのは、動画が使用されていることです。
動画の内容は、SDGs とはなにか、日立が SDGs の 17項目のうちどこに注力しているのか、具体的にどのような活動を通して貢献しているのかが説明されています。

近年、動画の需要が高まっており、ユーザーにとって動画は馴染みのあるコンテンツとなっています。
要点をまとめて分かりやすく伝えることに長けている動画は、ユーザーの離脱を防ぐことにも役立ちます。

株式会社アイネット

https://www.inet.co.jp/sustainability/（新しいタブで開きます）
アイネットのページでは、冒頭のサステナビリティメッセージで企業としての姿勢を示し、後にアイネットの ESG として、Environment（環境）・Social（社会）・Governance（ガバナンス）各々に対する具体的な取り組みが記載されています。

アイネットのページで印象的なものは、ESG と SDGs の対照表です。アイネットの取り組みが、ESG と SDGs のどの項目にあたるものなのかがひと目で分かります。この表から、アイネットの取り組みは網羅的に ESG と SDGs に対して貢献していることが伝わります。

全体を通して、アイネットらしさが伝わる、オリジナル性に富んだページとなっています。

ストーリーコンテンツ

ストーリーは、あまり馴染みのないコンテンツかもしれません。
ここでいうストーリーとは、企業のサービスや商品から離れ、その裏で行っている社会貢献活動や会社の方針などについてより具体的な情報を記載するページのことです。
こちらは、前述のとおり他社の差別化やファンの獲得につながる重要なコンテンツとなります。
ストーリー性が分かるような形で具体的に表現することは、消費者が広告よりもリアルな情報を求めている、いわゆるブランドジャーナリズムの考え方にもつながります。
自社の独自性を発揮し、ユーザーに分かりやすく情報を発信したいとお考えの Web担当の方はぜひ視野に入れていただきたいコンテンツです。
それでは、実際どのような形でページが構成されているのか、下記2社の実例をご覧ください。

ネスレ日本株式会社

https://www.nestle.com/stories#/category/featured-stories/1（新しいタブで開きます）
ネスレの「Our stories」ページでは、ネスレで行っている社会貢献に対する活動や戦略について具体的に記載されています。社員の方や現場の方など、ステークホルダーの顔が見える形で書かれている記事も多く、読者に安心感を与えるものとなっています。
私たちは、一般的に商品を通してネスレと関わりを持つため表面上での商品のイメージしか持っていません。しかし、このページを見ることにより、私たちと直接関わりのないところでネスレが取り組んでいる社会貢献活動について知ることができます。ここに訪問したユーザーの持つネスレに対する企業イメージがより良いものとなるでしょう。

株式会社リクルート

https://www.recruit.co.jp/talks/meet_recruit/（新しいタブで開きます）
リクルートは「Meet Recruit」として社員の方や有識者などによる記事を紹介しています。
人材派遣や求人など、就職関連のイメージが強いリクルートですが、ここで投稿されている記事ではサービスの背景にある想いや社会問題について社員の方の言葉で記されており、リクルートの取り組みが私たちの生活に根付いていることが伝わるコンテンツとなっています。そのほか、就職の先にある仕事への考え方や経歴といったその人なりのストーリーが書かれている記事など、単にサービスを紹介するよりも興味深く読み進められる構成になっています。

必要な情報をおさえて伝わりやすいコーポレートサイトの実現を

以上、コーポレートサイトに必要な情報の構成についてご説明してきました。
自社で実現したいコーポレートサイトのイメージは付きましたでしょうか。

コーポレートサイトで実現したい内容は企業によりさまざまです。そのため、他社のページを参考にするのみならず、自社のサイトコンセプトの立案やブランディングの方針策定から取り組むことで、必要な情報やコンテンツが明確になり、あなたの企業ならではコーポレートサイトに仕上げることができるでしょう。
また、場合によってはユーザビリティテストやユーザーインタビューを通して情報設計や導線などを整えるなど、UX 視点での改善が求められることもあります。

弊社では、サイト制作のみならず、ブランディングや UI/UX、コンテンツマーケティングなど、あらゆる視点からコーポレートサイト制作の効果を最大化させることを強みとしています。
サイト制作に関するお悩みやご相談、見積もり依頼についてはぜひください。

https://spice-factory.co.jp/service/web-corporate/

 

社内やチームにて新たなビジネスアイデアに対する PoC を行おうとしている場合、具体的に PoC の計画を立案する必要があります。しかし、何から計画すればよいか、何を確認すべきか分からないと悩まれている方は多いのではないでしょうか。

そこで、この記事ではPoCの計画にあたり事前に押さえるべき8つの項目についてそれぞれご説明します。

弊社では、PoC 支援のサービスも展開しております。クライアント企業様のPoCプロジェクトにおいて、プロトタイプ開発から検証、さらにその先の本開発まで一気通貫でサポートをしています。

詳しいサービス内容は（新しいタブで開きます）をご覧ください。

また、弊社スパイスファクトリーには豊富な実績があります。弊社の概要やサービスプラン、過去の導入実績などをまとめた資料をご用意しました。気になる方はこちらからダウンロードしてください。

PoC の計画にあたり押さえるべき8つの項目

PoC は新規事業やビジネスアイデアに対して、試作と検証実験を行い、持続的な有益性があるかを検討します。
アイデアだけで終わらせず、新規事業や新たなプロダクトが会社の利益と発展につながるかを検証する、重要な実証実験です。

このような PoC プロジェクトを成功させるために、どのような点を押さえて計画するべきか。
絶対に押さえておくべき項目は以下 8つの項目になります。

• ①目的・ゴール
• ②KPI
• ③スコープ
• ④ターゲット
• ⑤プロトタイプ種別
• ⑥体制・役割
• ⑦スケジュール
• ⑧予算

次項から各項目についての詳細をお伝えします。

①目的・ゴール

PoC を行うにあたり、まずは PoC の目的を整理することが重要です。
この目的・ゴールの項目では、PoC の目的を明確にすることと PoC を通して何をやるのか、大筋の流れを計画します。また、PoC の次に進むべきアクションも事前に仮説を立てて整理する必要があります。

PoC は、実際のシステム開発や事業開発とは異なるため、事前にきちんとやるべきことを整理しておかなければ手段が目的化するリスクがあります。
最近では、無意味な検証を実施しお金をどぶに捨ててしまう行為を指す「PoC死」という言葉も出てきており、注意が必要です。

また、企業規模が大きくなればなるほど「PoC をする」という会社の方針は決まっているが、実際にプロジェクトを担当する当のメンバー達が「何をどうすればいいかわからない」と目的が不明瞭になっている事態が起こりやすいです。
その場合は、PoC の目的整理などから DX や PoC をサポートしてくれるベンダーに伴走してもらうのも一つの手です。

②KPI

次に PoCプロジェクトの KPI を事前に整理しておくとよいでしょう。
KPI を定めることで、社内で次のアクションを進める際の指標になります。その指標がユーザビリティをはかるものだと、PoC 前後の KPI数値を比較できるため効果測定の幅を広げることにもつながるでしょう。

ちなみに UX に関する KPI には、行動KPI と態度KPI の 2種類があります。

行動KPI とは、ユーザーの行動を数値化したもので、タスク成功率やタスク処理時間などを指します。
態度KPI は、ユーザーが利用後にどのように感じているのかを数値で測定するもので、システムユーザビリティスケール（SUS）、ネットプロモータースコア（NPS）、顧客満足度（CSAT）などを指します。

上記の KPI については以下の記事で詳しく紹介していますので、あわせてご覧ください。

https://spice-factory.co.jp/design/poc_step/

③スコープ

PoC の目的とゴールを決めたら、次は PoC の対応範囲を明らかにしていきます。
スコープは欲張りすぎず、目的達成できる最小限の範囲で決めていくのがおすすめです。ここで欲張りすぎると、リスク低減や開発コスト削減といった本来の PoC のメリットが得られなくなる恐れがあります。

PoC にどのようなメリットがあるかについては下記記事が参考になります。

https://spice-factory.co.jp/design/what_is_poc/

既存システムのリニューアルやフィジビリティスタディですでに現状課題がある程度ある場合は、その課題に対して必要なアプローチを検討していきます。PoCでどこまで何をやるかなどスコープを明確にすると、課題に対するアクションを絞りやすいでしょう。

自社で新しいサービスの PoC を行う場合、欲張らずそのサービスのメイン機能やこれから注力したいところに絞るのも一つです。

④ターゲット

PoC の目的とゴール、スコープを決めたら、次はターゲットを明確にしましょう。
今回のプロダクトは誰が利用するのか、それはどういう人なのかを事前に整理する必要があります。

PoCプロジェクトが始まったからといって急にプロトタイプの開発に着手するのは危険です。プロジェクト開始の前に、ターゲットユーザーを理解するというフェーズがありますので、以下のような手法を用いて実際に理解を進めていきましょう。

• デプスインタビュー
• エスノグラフィー調査
• 競合調査

このタイミングで、ターゲットはある程度明確にしておきましょう。

⑤プロトタイプ種別

PoC では、検証に使用するプロトタイプを作成する事が多いので、どういったプロトタイプをつくるかを明確にしておくと今後の体制や予算について考えやすくなります。
参考：システム開発におけるプロトタイプ・モデルのメリットと注意点（新しいタブで開きます）

PoC の外注を考えている場合は、このあたりを含めていくつかのベンダーに相談してみるのもよいでしょう。

（新しいタブで開きます）

プロトタイプ種別は以下の通りです。

• ファンクショナルプロトタイプ
• デザインプロトタイプ
• コンテクスチュアルプロトタイプ

それぞれ解説していきます。

ファンクショナルプロトタイプ

ファンクショナルプロトタイプは、サービスの一連の導線を確認することができるプロトタイプです。紙で設計してテストするペーパープロトタイプなどを使い、デザインのアイデアを画面レイアウトやコンテンツに落とし込みます。

ファンクショナルプロトタイプを選ぶメリットは、比較的スピーディかつ安価で作成でき、サービスの流れをユーザーに確認できる点です。また、検証で出た課題を素早く反映し、検証サイクルを繰り返し回すことも容易です。

デザインプロトタイプ

デザインプロトタイプは、Figma・Sketch・Adobe XD などのプロトタイピングツールを使ったリアリティを持たせたプロトタイプです。ファンクショナルプロトタイプに具体的な色や形、動きを加えた試作で、見た目をより完成品に近付けたものとなります。

デザインプロトタイプを選ぶメリットとしては、機能に加えてデザイン面も完成形に近づけるので、機能面のチェックに加えて視認性も確認できることです。また、本開発に近いレベルまで解像度を上げることは、操作性などユーザーの「感性・感覚」までを含めた検証を可能とします。

コンテクスチュアルプロトタイプ

コンテクスチュアルプロトタイプは、文脈的なプロトタイプを意味します。ユーザーに製品の利用時のイメージを抱いてもらうためのプロトタイプという理解をしていただくとよいでしょう。
たとえば、アプリを実際に使用している様子を動画で撮影し、ユーザーへ公開するといったイメージです。

コンテクスチュアルプロトタイプを選ぶメリットとしては、ユーザーに疑似体験をしてもらうことで、実体験のように体感した感覚で新しい製品の良し悪しがわかることです。

⑥体制・役割

プロトタイプの方針を決めたら、次はチーム体制を考えましょう。
PoC の目的や KPI、スコープなどが見えてきたらアサインすべき最適なメンバーが判断できるようになります。

考えられるアサインメンバーは、ビジネスディベロップメント・マーケター・UI/UXデザイナー・UXリサーチャー・エンジニアなどです。

PoC を社内で進める場合は、関連部門などもあわせて体制を整えてください。
社外に依頼する場合は、この時点で細かく決めずともある程度提案してもらえると考えてよいでしょう。

⑦スケジュール

チーム体制を考えたら、次に PoC のスケジュールを決めましょう。
PoC の納期を区切るだけでなく、PoC の準備フェーズや PoC 後の流れも踏まえてある程度大筋を整理する必要があります。

PoC の準備フェーズでは、ユーザーリサーチやコアバリュー策定などで最短でも1か月ほどかかります。
PoC 実施では、実際にプロトタイプ開発を実施し、検証を行います。選択したプロトタイプの種別によってスケジュール感は大きく変わってきますが、ここも最低でも1か月はかかることが多いです。
PoC 後の流れというのは、PoC の実施後の本開発などを指します。この段階で詳細なスケジュールを決める必要はありませんが、PoC がうまくいった場合はその次にどう進めていくのかをざっくりで良いので考えておきましょう。
実際のプロダクトローンチの期限がある程度予測できるのであれば、今後の PoC のスケジュールにも大きくかかわってくるため明文化しておいた方がよいでしょう。

また、PoC 後そのまま本開発に入りたい場合は、極力本開発の際の実現可能性を踏まえて進めてください。

具体的には、実際の本開発で実装できるかどうかという観点でエンジニアレビューを入れたり、問題がある場合は即座に解決方法を探したりと持続的に実現可能なプロダクトなのかを判断します。
プロトタイプ段階でエンジニアによるレビューを入れることで、本開発に進んだ際の手戻りを防げます。実現可能性や費用対効果をみながら検証することが重要です。

そうすること、スピーディに PoC から開発へ進めることが可能です。

当社、スパイスファクトリーは、PoC から本開発までの一気通貫支援を強みとしています。PoC や開発まわりでお悩みの方はぜひください。

⑧予算

スケジュールを立てる際に、会社の予算が決まっている場合はそこに合わせて計画を立てていく必要があります。
特に予算が決まっていない場合で、他部署が PoC や DX に関する取り組みをしている場合はその際の予算や実施内容をひとつの参考にするのもよいでしょう。

また、一般的に PoC の予算相場は、サービス内容や開発期間にもよりますが、100万円〜数百万円となります。
すでに構築しているものをカスタマイズして開発する場合は、費用が安くなる場合もあります。
逆に一から開発を行う新規プロダクトの場合は、相場より高くなる場合もあります。

正しい計画の立て方を実践し、PoCプロジェクトの成功へ

PoC の計画を立てるにあたって、押さえるべき項目をお伝えしてきました。
少しでも、あなたのビジネスのお役に立てましたら幸いです。PoC の計画を立てる際はもちろん、計画書や RFP 作成にもお役立てください。

また、本記事の中でご不明点などございましたら、お気軽にご相談くださいませ。

当社は PoC から本開発までの一気通貫支援や、最短2か月でのPoC 実施が可能です。
弊社の詳しいサービス内容は（新しいタブで開きます）をご覧ください。
PoC やシステム開発、新規ソフトウェアの開発についてお悩みがありましたら、ぜひください。

また、弊社スパイスファクトリーは豊富な実績を持ち、これらのプロセスを効率的に進めるためのサポートを提供いたします。

詳細を知りたい方は、こちらからサービス紹介資料をダウンロードしてください。

アトミックデザインとは、パーツ単位でUIデザインを設計する手法のことです。

一番の特徴は、UI の構成要素を5段階に分けて考えるという点にあります。

これまでのウォーターフォール型のデザイン設計フローを見直すことで、よりスムーズで効果的なアジャイル開発を進めることができます。

この記事では、アトミックデザインというデザイン設計の手法についてお伝えします。
弊社の（新しいタブで開きます）はこちらです。

なお、弊社スパイスファクトリーではUI/UXデザインにおいて豊富な実績があります。

弊社の概要やサービスプラン、過去の導入実績などをまとめた資料をご用意しました。気になる方はこちらからダウンロードしてください。

アトミックデザインとは？

アトミックデザイン（Atomic Design）とは、パーツ単位でUIデザインを設計する手法のことです。
これは、アメリカのWebデザイナーのBrad Frost氏によって考案・提唱されました。一番の特徴は、UI の構成要素を5段階に分けて考えるという点。それぞれの要素ごとに UI を作成し、それを組み合わせて最終的な UI を設計していきます。

Brad Frost氏執筆のアトミックデザイン概要に関するドキュメントは一般公開されており、以下のリンク先からご覧いただけます。
『Atomic Design by Brad Frost』（新しいタブで開きます）

アトミックデザインの構成要素

アトミックデザインの基本的な考え方になる5つの構成要素。ただし、それぞれの定義については会社によって解釈が異なるケースが多いです。そこで今回は、スパイスファクトリーでの定義をもとにご紹介していきます。

Lv.1 原子 / Atoms

“原子”とは、UIの最小単位となるデザインパーツを指します。当社では、最小の html タグとほぼ同等の意味で解釈しています。ボタンやアイコン、フォントなどが原子に値します。こうした最小単位からデザインを構築し、最終的なUIへと組み合わせていきます。

Lv.2 分子 / Molecules

“分子”とは、いくつかの原子を組み合わせた集合体を指します。分子単位での使い回しや、原子の集合にUIパーツ的な意味づけ行うといった目的があります。また、分子はデザインや UI の観点から再利用可能な単位で汎用性が高い特徴があります。

Lv.3 生体 / Organisms

“生体”とは、単体で機能するアプリケーションパーツ（widget）のことで、原子と分子を組み合わせて構築されます。特定の役割にしか使用されず、他の役割での再利用は行われないという特徴があります。生体ではサーバーとの通信やローカルストレージへのアクセスなども行われ、生体単位で役割に沿った命名を行います。

Lv.4 テンプレート / Templates

“テンプレート”とは、画面のレイアウトのことです。原子と分子、生体を組み合わせて作成します。この段階では、まだ具体的なテキストや画像は挿入されません。また当社でのテンプレートは、フロントエンドフレームワークの Next.js の pages で表現しています。

Lv.5 ページ / Pages

“ページ”とは、ユーザー側に表示される最終的な画面のことです。テンプレートにテキストや画像を挿入することで、実際のサービスイメージを明確にできます。また、生体やテンプレートの段階では発見できなかった抜け漏れに気づくことができます。

アトミックデザインのメリット

アトミックデザインを採用するメリットとして大きく以下3つがあります。

デザイン変更がラクになる

粒度の小さい単位から順にデザインを構成していくため、高次の段階で変更が発生した際にもコンポーネント単位での細かな変更が可能になります。これまでの手法だと、仮にLv.4のテンプレートの段階で変更が発生した場合、エンジニアの大幅な出戻り工数が発生していました。しかし、アトミックデザインでは早い段階からLv.1の原子とLv.2の分子のUIがチームに共有されているため、原子や分子を置き換えるだけで調整ができるようになります。

エンジニアとデザイナーの連携が容易になる

パーツごと段階的にUIを設計していくため、それぞれのパーツにおける機能や目的、全体の構成を理解しやすくなります。そのため、UIデザインとコンテンツの変更を行う際、エンジニアとデザイナーの連携作業がよりスムーズになることが期待できます。

一度作成したコンポーネントを再利用できる

コンポーネントを一度作成してしまえば、同様の構造をもつ他のサービスやWebサイトを作成する際にもそれを再利用することができます。カンプベースでは、気づいたら独自コンポーネントが大量発生し毎回デザインを一から作成していたのに対し、アトミックデザインではコンポーネントを他でも活用できるためデザインにおける大幅な工数を削減できます。

アトミックデザインで気を付けるポイント

アトミックデザインを運用するうえで最初に押さえておくべきポイントとして、当社での実体験をもとにした2点をご紹介します。

コンポーネントの定義を明確にする

アトミックデザインを長期的に運用していく上で、Atom、 Molecules、 Organisms それぞれのコンポーネントの定義を明確にすることは重要です。これは複数人のデザイナーがアトミックデザインを運用する場合に特に気を付けた方がいいポイントです。
例えば「ボタン」のようなコンポーネント1つ取っても、ボタンを Atom とするか Molecules とするかは人によって意見が分かれる部分です。各コンポーネントの定義が明確でない場合、徐々にルールに矛盾が生じ、デザインシステムが破綻しやすくなります。
こういった問題は デザイナーが一人でアトミックデザインを用いてデザインする場合には表面化しづらいですが、複数人のデザイナーが関与する場合に発生しやすいものです。
あらかじめコンポーネントの定義を明文化し、誰にとっても直感的にわかりやすいルールを明示しておくことで、長期的に安定してアトミックデザインを運用することが出来るでしょう。

あらかじめコンセプトやスタイルを決めておく

アトミックデザインにおける最小単位であり最も重要な構成要素である原子。その原子を作成する前に、そのサービス特有のコンセプトやスタイルを確立しチームで共有できていることが大切です。最小単位から唯一無二のブランドイメージを反映させることで、より強力なブランドアイデンティティを構築することができます。

アトミックデザインでより効果的なアジャイル開発を

今回の記事では、アトミックデザインのメリットや気を付けるべきポイントをお伝えしてきました。これまでのウォーターフォール型のデザイン設計フローを見直すことで、よりスムーズで効果的なアジャイル開発を進めることができます。

スパイスファクトリーでは、アトミックデザインの手法を活用したエンジニアとデザイナーの柔軟な連携体制のもと、さまざまな企業のサービスやWebサイト開発を支援しています。

アトミックデザインを採用してから、よりクライアントさまのご要望を詳細に実現できるようになりました。一気通貫のアジャイル開発支援にご関心のある方、ぜひください。

弊社スパイスファクトリーは豊富な実績を持ち、これらのプロセスを効率的に進めるためのサポートを提供いたします。

詳細を知りたい方は、こちらからサービス紹介資料をダウンロードしてください。

スパイスファクトリー株式会社の古茶です。
コロナ禍で一層デジタル化が進む中、Webサイト上でのユーザー体験はより重要度を増してきています。デザインの見やすさから機能面での使いやすさまで、様々な要素が Web 上でのユーザー体験を形作ります。
そこで今回は、デザインから開発まで一気通貫で支援を行う当社が取り組んでいる「ペアデザイン」についてご紹介します。また弊社の詳しいサービス内容は（新しいタブで開きます）をご覧ください。

エンジニアとデザイナーによるペアデザインとは

まず、ペアデザインとは何かについてご説明していきます。

ペアデザインとは、2 人以上で同じデザインタスクを行うことです。

一般的な開発手法では、デザインはデザイナーのみで進め、開発はエンジニアのみで進めるケースが多いです。
よって、ペアデザインはデザイナー同士で行うことがほとんどです。

しかし、この場合デザイナーとエンジニアの役割が分断されてしまい、プロジェクトの進行やプロダクトの開発自体に様々な弊害が生じる可能性があります。

そのため、スパイスファクトリーでは、デザイナー同士のみでなくデザイナーとエンジニアでもペアデザインを行っています。
エンジニアとデザイナーが同時にデザイン設計に入り密にコミュニケーションをとることで、エンジニア・デザイナー両者の視点を取り入れながらプロダクトを製作していくことができます。これがプロダクトのクオリティ最大化につながるのです。

なぜペアデザインをやるのか

ペアデザインを行う理由は大きく分けて2つあります。

より良い顧客体験の実現

冒頭でも述べた通り、良い Webサービスを作るためには、ユーザーにいかに優れた体験を提供するかという UI/UX の視点が欠かせない時代になってきました。

そこで、デザイナーだけでなくエンジニアにもユーザー体験設計プロセスに入ってもらうことで、より良い顧客体験を実現できるWebサービス制作が可能になります。良いWebサービス制作にはエンジニアとデザイナーの協業は必要不可欠になるのです。

作業工程の効率化

エンジニアとデザイナーで作業工程が分かれていることにより発生する問題を防ぐため、というのが大きな理由です。

一般的に、デザイナーは良いユーザー体験ができることを考え、エンジニアはそのデザインが実現可能かを考えます。このように作業が分断される中で起こりうる問題は以下のようなものです。

 

• 意思疎通が上手くいかず、スムーズに課題の解決が進まない
• お互いの高度なスキルを最大限活かしきれない
• ゴールへの考え方や価値観が異なり、開発過程で行き違いが起こる

 

 

デザイナーがせっかく良いデザインを考えたのに、実現が不可能だったら意味がないし時間の無駄になってしまいすよね。
このような問題が起きないようにするためにも、設計フェーズからエンジニアとデザイナーが共にペアデザインを行う必要があります。
デザイナーとエンジニアが同時にデザインの作業工程を進めることで、スムーズに開発を進められるのです。

よって、エンジニアとデザイナーのペアデザインは実現可能な範囲でより良いユーザー体験を考える方法だと言えます。
（新しいタブで開きます）

ペアデザインの流れ

今回は、当社で行っているペアデザインの進め方について説明していきます。フローは以下の通りです。

• 1. エンジニア・UIデザイナー・UXデザイナー・場合によってはクライアントが共同でフローチャートやユーザーストーリーを書く
  2. 共同で「サービス内でユーザーができうる全ての行動」をユーザー視点で洗い出す
  3. UXデザイナーが体験設計を検討する
  4. UIデザイナーが体験設計に合ったインターフェイスを検討し用意する
  5. エンジニアが実現可能性を検討し、デザイナーの設計にレビューを入れる

通常、ペアデザインでは、作業をする人とその人にアドバイスをする人、という2つの役割を置きデザインを行います。しかし、当社では必ずしもそれらの役割を明確に設ける必要はないと考えています。

エンジニアとデザイナーが別観点で意見交換をすることをメインの目的とし、ペアデザインを導入している場合は、常に意見交換をしながら作業を進めていけば良いのです。

ペアデザインをすることのメリット

ここでペアデザインを行うことのメリットをご紹介していきます。

相手のスキル・思考法を学ぶことができる

異なる知見や価値観をもったエンジニアとデザイナーが共にデザインタスクを行うことで、相手のスキルや思考法を学ぶことができます。また、1人では解決できなかったこともスピーディーに解決することができるでしょう。

知識を共有し合うことで、新たな視点を互いに取り入れることが可能になり、全社的なスキルアップにも繋がります。

意思決定や開発全体のスピードがあがる

ペアデザインでは、エンジニアとデザイナーが 2人以上ですり合わせをしながら設計を行っていきます。
そのため、ウォーターフォール型の開発にありがちな「実装負担を無視した実現性のないデザイン」が出来上がることを避けることができ、結果的に意思決定や開発全体のスピードが上がります。

また、お互いにリカバリーし合いながら開発を進めることで意思決定時の個人への負担が軽減され、アジャイル思考で開発を進めていくことができます。

ウォーターフォール型開発とアジャイル開発についての詳細はこちら（新しいタブで開きます）をご覧ください。

早い段階でプロトタイプができる

ペアデザインで開発を進めることで、プロジェクトの初期段階から比較的解像度の高いプロトタイプ（デザインの作りこみや画面遷移などが設定されているデモ環境）を作成することができます。

これにより、早い段階でユーザビリティテストを実施することができます。つまり、クライアントやユーザーにも早い段階でプロダクトの具体的なイメージを持ってもらうことができるのです。

このようにペアデザインは、社内にもお客様にもメリットの大きい手法となっています。

ペアデザインでクオリティを最大化する

以上、ペアデザインについて、概要や進め方、メリットをご紹介しました。
ペアデザインを行うことは、プロジェクト全体の工数削減のみならず、プロダクトのクオリティの向上にもつながります。

スパイスファクトリーでは、最新テクノロジー、UIUX、アート、マーケティングなどあらゆる技術・メソッドを用いてクライアントのデジタルトランスフォーメーションを支援しています。

デザインや開発についてお悩みやご質問をお持ちの方は、是非一度ください。
また弊社の詳しいサービス内容は（新しいタブで開きます）をご覧ください。