企業のWebサイト活用・管理を支援するWebサイト構築パッケージ「CONNECT」

  • UX/UIデザイン
  • コミュニケーションデザイン
  • 足立大輔

    足立大輔プロデューサー/ディレクター

「CONNECT」は、WebサイトのUI設計、デザインからHTML制作までをシームレスに行えるWebサイト構築パッケージです。企業のWebコミュニケーション活動を支援するコンセントのソリューションである「Webガバナンス構築支援」向けに開発したツールとして提供しています。

企業Webサイトの現状

昨今の企業Webサイトは、Googleの推奨するSEOの観点からも、スマートフォンをはじめとするユーザーの閲覧環境への対応は最低限であり、Webサイトの管理者には、多様なステークホルダーに対する使い勝手の担保と、増え続ける情報資産をいかに安全で効率的に運用するかが求められています。

一方で、企業のWebサイト管理者が本来一番に考えるべきことは、Webサイトを「どうつくるか」ではなく、「どんな情報を誰に届けるか」であり、一定の品質でWebサイトの運用をまわす仕組みや、それを実施できる外部パートナーを含めた体制が用意できれば、「どんな情報を誰に届けるか」に十分な時間をかけることが可能になります。

そんな悩みをもつWebサイト管理者の支援のため、顧客向けのWebサイトのデザインだけではなく、業務フロー設計やCMS導入支援、各種ガイドライン制作など、Webサイトの運用業務をデザインし、さまざまなガバナンス構築を行ってきたコンセントのノウハウから、Webサイト構築の「UI設計」「デザイン」「HTML制作」各工程のアウトプットにおいて標準化し利用可能な要素を集約し、「CONNECT」としてツール化しました。

導入メリット

  • レスポンシブWebデザインへの標準対応
  • 簡易なWebサイトガバナンス構築
  • 制作者のスキルレベルに依存しない品質
  • マークアップレベルでのアクセシビリティ標準対応(WCAG 2.0レベルA相当)

導入に適したプロジェクト

  • コーポレートサイト・製品情報サイト
  • マルチデバイス対応
  • Webサイトガバナンス構築
  • UI改善
  • 運用体制・フロー見直し など

CONNECTについて

コンセプト

CONNECTは、「コンポーネント指向が求められるWebサイト構築において、コンセント社内で生まれたデザインファンデーションという考え方をもとに、UI設計、デザインからHTML制作までをシームレスにつなげるノウハウがまとめられたツール」です。

コンポーネント指向

Webサイト構築におけるコンポーネント指向とは、コンテンツを格納する画面上の要素を、機能や役割ごとに「文書構造+スタイル」を組み合わせた部品としてパターン化し、一定のガバナンスの元で管理・運用する取り組み、またはその考え方を指しています。コンテンツと画面を構成する部品を分けて管理することで、ブランドやコンテンツの独自の世界観と、統一されたユーザー向けの使い勝手をバランスよく実現するとともに、品質維持と生産性向上も期待することができます。

コンポーネント指向のWebサイト構築では、コンポーネントの組み合わせで画面を展開。コンテンツやデバイスの違いに対しても柔軟に対応できる。

デザインファンデーション

コンセントでは、Webサイトのデザインを階層的に捉え、そのレベルに応じてスタイルの自由度を管理するデザイン設計を実践しており、その最深部となる基礎部分を 「Design Foundation」として定義し、不変とすることで、Webサイト全体のデザインの一貫性と拡張性を担保しています。基礎部分は主に色・書体・サイズ・フォルムなどの基本スタイル、アイコンや基本的なUIパーツ、レイアウトの基準となるグリッドシステムなどが含まれます。

デザインファンデーションは、画面デザインの前提となる基礎ルール。サイト全体の一貫性を維持しつつ、コンテンツや機能に柔軟に対応可能。

提供ツール

CONNECTで提供するUI設計、デザイン、HTML制作の各ツールのイメージ

UI設計

  • 基本検討項目一覧
  • コンポーネント一覧
  • コンポーネント一覧 Adobe XD版
  • ワイヤーフレーム雛形(UI設計用)

デザイン

  • デザインファンデーション雛形
  • コンポーネント一覧雛形(デザイン用)
  • デザインデータ雛形

HTML制作

  • 開発ツール ライト版
  • 開発ツール スタンダード版
  • スタイルガイド
  • JavaScript APIドキュメント

※ご発注いただいた場合の納品物に上記が含まれます。

現行バージョンのスコープ

  • スマートフォン・タブレット・PCの3デバイスを対象としたレスポンシブWebデザイン
  • 企業サイト構築向け標準コンポーネント
  • 独自コンポーネントの追加可能な拡張性
  • 利用頻度の高い機能を実現するJavaScriptライブラリ

開発の背景

コンセントでは、グローバルWebガバナンス構築やマルチブランド展開など、企業の情報資産の発信基盤を整備するさまざまなプロジェクトを支援してきました。

大規模なプロジェクトでは、多数のステークホルダーの個別要件へ最適化するために、サイト設計やフロントエンドの実装においても、都度スクラッチで検討することが多く、長期間プロジェクトに関わるメンバーも多いことから、知見やノウハウは人に依存して蓄積され、社内への展開も十分とは言えない状況でした。

また、最適の追求によりその都度見直されるドキュメント作成コストや、高度な設計を複数人で分担して行うことによる各工程間のインプット・アウトプットのコミュニケーションコストが課題になっていました。

当初は、社内のノウハウの共有と、各工程間のコミュニケーション改善を目的として、"標準化"を目指す計画を検討していましたが、その過程で、クライアントの抱える課題も、コンセントの課題も共通部分が多く、目指すべき方向性をプロジェクトでノウハウを提供できるツールの開発に定めました。

開発メンバー

CONNECT開発プロジェクトリーダー

株式会社コンセント フロントエンドテクノロジスト

小山 直樹

顔写真:小山 直樹

Webデザイナーとして受託制作・サービス開発を経験し、2013年フロントエンドテクノロジストとしてコンセントに入社。主にコーポレートサイト、ブランドサイトのフロントエンド開発を担当。大手電機メーカーBtoBサイト統合プロジェクトや大手エンターテイメント企業のキャラクターポータルサイト基盤構築開発プロジェクトなど大規模サイトの基盤開発に従事する。

株式会社コンセント アートディレクター/デザイナー

見野 伸太郎

顔写真:見野 伸太郎

2002年より、デザイナーとしてコーポレートサイト、キャンペーンサイトの制作に携わる。2011年、株式会社コンセントに入社。アートディレクターとしてデジタルメディアの設計・デザインに従事。大手化粧品メーカーのブランドサイト、大手電機メーカーのコーポレートサイト、大手エンターテイメント企業のAEM基盤構築、業務管理システムのUIなど、さまざまな業種業態のプロジェクトにおいて立ち上げから運用支援まで幅広く携わっている。

株式会社コンセント ディレクター

浜島 恵美

顔写真:浜島 恵美

2004年よりWebコンサルファームにて、Webのアクセスログ解析やサイト群構造分析等の各種調査・分析、分析結果を受けたUXデザイン・UIデザインから、制作、運用までの一連のデザインプロセスを実践し、大規模サイト再構築、ガイドライン・ガバナンス策定、ECサイト立ち上げ・運用などを経験。2009年より情報アーキテクチャを大切にする株式会社コンセントのディレクターとして、大手の学習塾、紳士服、下着メーカー、出版社など、Web関連プロジェクトの戦略フェーズから運用フェーズまで幅広く従事している。

更新履歴

2019.7.18
タブレット向け表示に標準対応し、コンポーネント指向で構築するWebサイトのために開発したツールを追加。
CONNECTの機能拡充に伴い「提供ツール」と「現行バージョンのスコープ」を更新しました。

コンセントのソリューション

ユーザーへの深い理解と「ストーリー」がビジネスをドライブする

コンセントのデザインは、ユーザーの背景にある文脈や価値観を深く理解し、ビジネス要件をふまえた上で、最適な体験を紡ぎ出すプロセスです。表層的な見た目や印象だけではなく、深く、長い時間軸をもった「ストーリー」まで設計し、アウトプットできることが私たちの強みです。ユーザーや顧客、時には社員やその他ステークホルダーの視点をもった代弁者として、ビジネスをデザインの力でドライブしていきます。

コンセントの提供するソリューションの一覧を見る

お問い合わせ

詳細についてのお問い合わせはお気軽に以下までお願いいたします。
CONNECT紹介希望の旨をお問い合わせ内容にご記入ください。

お問い合わせフォーム(案件のご依頼やご相談)

なお、CONNECTはダウンロード提供はしておりません。コンセントの提供するソリューションの成果物として納品いたします。

[ 執筆者 ]

コンセントは、企業と伴走し活動を支えるデザイン会社です。
事業開発やコーポレートコミュニケーション支援、クリエイティブ開発を、戦略から実行まで一貫してお手伝いします。

ページの先頭に戻る