Infinitec D-Transporter website 2020

教育現場の情報漏えいリスクを低減する「D-Transporter」製品サイトのUI/UX戦略

教職員の働き方改革やICT教育の進展に伴い、校外へのデータ持ち出しにおけるセキュリティ対策は、今日の教育機関において極めて重要な課題となっています。 本プロジェクトは、ハードウェアからソフトウェアまでを一貫して自社開発する株式会社インフィニテック（現：株式会社プリバテック）のセキュリティソリューション「D-Transporter（ディートランスポーター）」の製品紹介Webサイト（Branding, UI/UX, Web design, Website）を構築した事例です。 市販のUSBメモリを強力に暗号化し、自宅パソコンにデータを残さないという高度な安全性を、教育関係者へ向けて分かりやすく紐解くビジュアル設計と情報設計（IA）を実践しました。 学校市場において確固たる信頼を築くクライアントが開発した「D-Transporter」は、米国政府も採用する堅牢な暗号化規格「AES256bit」の実装や、パスワードブロック機能、操作ログ取得といったプロフェッショナル仕様の機能を備えています。 しかし、BtoBや教育現場に向けた製品サイトにおいては、こうした専門的で硬質な技術スペックをそのまま並べるだけでは、導入のメリットや具体的な利用イメージが伝わりにくいという課題がありました。 そこで本デザイン制作では、直感的なイラストと論理的な色彩計画（カラーマネジメント）を用い、教職員が抱える「紛失・漏えいへの不安」を安心感へと変えるUX（ユーザー体験）の提供を目指しました。

信頼感を与えるセキュリティカラーとスクロールを促すレイアウト設計

Webサイトのビジュアルアイデンティティ（VI）の核として、安心感や先進性、論理性を象徴するクリーンなグリーンをキーカラーに採用しました。 ファーストビューからコンテンツの区切りにいたるまで、この象徴的なグリーンを効果的に配置することで、サイト全体に一本の筋が通ったような視覚的安定感を生み出しています。 また、重要な導線であるコンバージョンボタンやヘッダーの案内板には、背景の白やグリーンに対して補色に近い鮮やかなイエローやブルーをゾーニングとして適用し、視認性を最大化してユーザーのネクストステップを自然に促すUIデザインを確立しました。 スクロールを誘引する縦長のデザイン（ランディングページ形式）の中に、イラストを交えたストーリー性のある構成を組み込んでいます。 ページ冒頭では、「D-Transporterとは？」という直截的な見出しと共に、会社・外出先・自宅の間を安全に往来するデータ運用の仕組みを図解（インフォグラフィック）で提示。文字情報を適切にグループ化し、余白（ホワイトスペース）を贅沢にコントロールすることで、ユーザーの認知負荷を最小限に抑えながら、製品の基本概念をファーストスクロールで理解させるレイアウトを構築しています。

「なぜ（思考の根拠）」を明確にするコンポーネントデザインの追求

多様なセキュリティ機能を体系的に提示するため、情報の粒度を揃えたコンポーネント設計を徹底し、サイト訪問者のリテラシーに応じた3つの主要コンテンツを展開しました。

• 機能の核心を突く「7つのポイント」： AES256bit暗号化やコピー禁止制限、パスワードブロックといった強固な技術要件を、整然としたリスト形式で配置。左側にアイコン調のビジュアル、右側に平易な解説テキストを配置する構造により、スクロールしながらでも要点が瞬時に目に入るグリッドシステムを採用しています。
• 利用環境を可視化する「自宅で安全に利用するために」： 画面キャプチャ（Print Screen）の禁止や印刷禁止、インターネット・メールの制限といったPC内の挙動制御について、パソコンから放射状に伸びる赤いシグナル線を用いたイラストで図解。文章だけではイメージしづらい「制限の範囲」を一目で直感的に理解できるビジュアルソリューションへと昇華させました。
• 複合的なソリューションを示す「校務セキュリティーシステム」： 単体のソフト紹介にとどまらず、ローカルへのファイル移動を禁止する同社製品「D-Protector」との連携による「万全の運用体制」を提案。持ち込み・社内PC・持ち出しの3つのフェーズをアイコンと3カラムのボックスで対等に並べ、包括的な情報漏えい対策としてのパッケージ価値を訴求しています。

技術の本質を正しく伝える、機能的Webブランディングの確立

暗号化ソフトウェアという目に見えない技術の価値を最大化するためには、ユーザーの利用シーンに寄り添った的確な視覚伝達が不可欠です。 「D-Transporter」の製品サイト構築においては、ターゲットである教育機関や自治体の選定者が求める「確かな安全性」と「運用のしやすさ」を、洗練されたUI/UXデザインによって見事に具現化しました。 現在、クライアントは株式会社プリバテックとして新たな体制を整え、PCIホールディングスグループおよびレスターグループの強固な基盤のもと、LSI設計やソフトウェア開発、画像処理製品の開発までを手掛ける総合的な技術企業へと躍進を遂げています。 ビジネスや教育の現場におけるセキュリティの重要性が日々増大する現代において、優れたソリューションを市場へ正しく届けるためのビジュアルコミュニケーションは、製品のDNAを守り、企業の信頼を形づくる重要な基盤であり続けます。 今後も長期にわたって確かなマーケティング効果を発揮する、戦略的なシステムデザインを提供してまいります。

---

Product Site UI/UX Strategy for “D-Transporter,” Mitigating Information Leakage Risks in Educational Settings

With the advancement of work-style reform for faculty and staff and the proliferation of ICT education, implementing security measures for taking data outside schools has become an exceptionally critical challenge for today’s educational institutions. This project is a case study of building the product introduction website (Branding, UI/UX, Web design, Website) for “D-Transporter,” a security solution provided by Infinitec Co., Ltd. (currently Privatec Co., Ltd.), which handles the in-house development of both hardware and software consistently. We executed a visual and information architecture (IA) design that clearly demystifies advanced safety features for educational professionals—such as robustly encrypting off-the-shelf USB flash drives and ensuring no data remains on home PCs. Developed by a client with a solid foundation of trust in the school market, “D-Transporter” comes equipped with professional-grade features, including the implementation of “AES 256-bit”—a robust encryption standard adopted by the U.S. government—password blocking, and operation log acquisition. However, for a product site targeted at BtoB markets and educational settings, simply listing these specialized, hard technical specifications made it difficult to convey the benefits of adoption and concrete usage scenarios. Therefore, in this design production, we aimed to provide a UX (user experience) that transforms the anxiety over loss and leakage held by faculty into reassurance, utilizing intuitive illustrations and a logical color scheme (color management).

Security Colors Directing Reassurance and Layout Design Promoting Scrolling

As the core of the website’s visual identity (VI), we adopted a clean green—symbolizing reassurance, advanced technology, and logic—as the key color. Effectively positioning this iconic green from the first view to content boundaries generates a sense of visual stability that runs like a single thread through the entire site. Furthermore, for conversion buttons and header navigation blocks that serve as critical user paths, we applied vibrant yellows and blues, which act nearly as complementary colors against the white and green backgrounds, to establish a UI design that maximizes visibility and naturally prompts users toward their next step. Within a vertically long design that induces scrolling (landing page format), we embedded a narrative structure interspersed with illustrations. At the beginning of the page, alongside the direct heading “What is D-Transporter?”, the mechanism of data operations safely traveling between the office, on-the-go, and home is presented via diagrams (infographics). By properly grouping textual data and luxuriously controlling white space, we constructed a layout that allows users to comprehend the basic concept of the product on the first scroll while minimizing cognitive load.

Pursuing Component Design That Clarifies the “Why (Design Rationale)”

To systematically present diverse security features, we thoroughly executed a component design with uniform information granularity, deploying three primary content sections tailored to the literacy of site visitors.

• “7 Key Points” Piercing the Core of Functionality: Robust technical requirements—such as AES 256-bit encryption, copy-prohibition restrictions, and password blocking—are arranged in an orderly list format. By placing icon-style visuals on the left and plain explanatory text on the right, the structure utilizes a grid system that captures key points instantly, even while scrolling.
• Visualizing the Usage Environment via “For Safe Use at Home”: In-PC behavioral controls, such as prohibiting screen captures (Print Screen), printing, and internet/email access, are illustrated using red signal lines radiating from a PC. This sublimated the “scope of restrictions,” which is difficult to visualize through text alone, into an intuitive visual solution at a glance.
• “School Affairs Security System” Presenting a Composite Solution: Moving beyond introducing a standalone software, the layout proposes a flawless operational system by linking with their product “D-Protector,” which prohibits moving files to local drives. The three phases of bringing-in, internal PC use, and taking-out are aligned equally using icons and 3-column boxes to appeal to its package value as a comprehensive information leakage measure.

Establishing Functional Web Branding That Correctly Conveys the Essence of Technology

To maximize the value of an invisible technology like encryption software, accurate visual communication that aligns with user utilization scenarios is indispensable. In building the product site for “D-Transporter,” the “definite safety” and “ease of operation” demanded by selectors at targeted educational institutions and municipalities were brilliantly materialized through refined UI/UX design. Today, the client has arranged a new organizational structure as Privatec Co., Ltd., making rapid strides as a comprehensive technology enterprise handling everything from LSI design and software development to the development of image processing products under the solid foundation of the PCI Holdings Group and the Restar Group. In a modern era where the importance of security in business and educational settings escalates daily, visual communication aimed at correctly delivering excellent solutions to the market remains a vital foundation for protecting a product’s DNA and shaping corporate trust. We will continue to provide strategic system designs that exert steady marketing efficacy over the long term.

---