HD-DLS System Design

大学間連携を支える「HD-DLS」ハイビジョン遠隔講義システムのUI/UXデザイン開発

教育機関におけるICT活用の先進事例として、複数の大学を結ぶ「HD-DLS（Hi-Definition Television Distance Learning System）」。 本プロジェクトは、遠隔講義ソリューションおよび遠隔ハイビジョン伝送システムコントローラのインターフェース全般（Software design, System Design, UI/UX）を最適化したデザイン事例です。 開発元である株式会社インフィニテック（現：株式会社プリバテック）の高度な映像伝送技術を、教育現場の指導者やオペレーターが迷わず直感的に操作できるよう、論理的な画面設計とグラフィックの再構築を行いました。 遠隔講義システムは、リアルタイムでのスムーズな双方向通信、高精細な映像配信、そして授業進行を妨げない確実な操作性が求められる極めてクリティカルなシステムです。 導入先となる大学の講義室では、機材操作に必ずしも習熟していない教員や、限られた時間内で正確な設定を求められるシステム管理者が操作を行います。 本デザイン制作では、複雑な通信制御や映像ソースの切り替えプロセスを可視化し、メンタルモデルに沿ったUX（ユーザー体験）を提供することで、システム全体の信頼性と製品価値を高めるアプローチを実践しました。

操作ミスを軽減するダークモードと情報の視覚的グループ化

インターフェースデザインにおいて、最も重視したのは「授業中の暗い環境でも目が疲れにくく、誤操作を防ぐ」ためのビジュアル設計です。 Apple が、2018-2019年頃、iPhone（iOS）やSafariに導入したダークモードよりはるかに早い2011年にダークモードを導入しています。 大学の大型スクリーンやプロジェクターを使用する遠隔講義室では、部屋の照明が落とされることが多いため、画面の発光によるオペレーターの疲労を軽減するダークトーンの背景を採用しました。 画面構成は、認知負荷を最小限に抑えるために、グリッドシステムに沿って論理的にエリアを分割しています。 基本操作画面（メインモード）では、「伝送モード」「接続」「接続先リスト」という独立したコントロールパネルをボックス分けして配置し、各エリアの境界を明確に定義しました。 これにより、ユーザーは視線をあちこちに移動させることなく、上から下、あるいは左から右への自然な視線誘導の中で、通信状態の確認から接続先の選択、実行までの一連のタスクを円滑に完結させることが可能となります。

直感的なステータス把握を可能にするコンポーネントデザイン

システムの運用状態を瞬時に把握できるよう、ボタンの質感やフォント、カラーマネジメントには工業用コントロールパネルのような厳格なルールを設けています。

• 視認性に優れた立体的なボタン造形： 操作要素であるボタンには、適度なグラデーションとシャドウ（陰影）を施すことで、画面内で「押せる要素」（アフォーダンス）であることを明確に表現しています。これにより、タッチパネルディスプレイでの運用時にも高い操作追随性を感じさせる立体感を持たせました。
• ユニバーサルな3色カラーシグナル： 接続状態や通信速度を示すテキストには、視認性の高い蛍光グリーン（#00FF00等）を採用し、黒背景とのコントラストを最大化しています。待機、動作中（送信中・受信中・接続中）、警告といったシステムステータスをカラーコーディングすることで、一目で現在の稼働状況を把握できるように設計しました。
• 柔軟なマトリクス型映像ソース選択（メイン画面・サブ画面）： 講義中のメイン映像およびサブ映像の選択エリアでは、自分側と相手側の「HD-1」「HD-2」「SD-1」「SD-2」「SD ALL」といった複数の映像ソースをタイル状に配列。配置場所（左上、右上、左下、右下）の指定トグルと組み合わせることで、複雑な画面分割表示（PnP：ピクチャー・イン・ピクチャー）の設定ミスを構造的に排除しています。
• シームレスな録画ファイル管理と再生コントロール（再生モード）： アーカイブされた講義の検索・再生を管理する「再生画面」では、ファイルリストとコントローラを左右に配置。再生、停止、一時停止、巻き戻し、早送りといった標準的なメディアコントロールアイコンに加え、「x0.5」「x1.0」「x1.5」といった変倍速ボタンを同一エリアに集約し、講義内容の確認作業を効率化します。

技術の進化に追従するプロフェッショナルなシステムデザイン

遠隔講義システムにおけるデザインとは、単なる画面の装飾ではなく、複雑なネットワーク技術とユーザーを繋ぐ強固な架け橋（UI/UX）そのものです。 「HD-DLS」における画面デザインは、株式会社インフィニテックが培ってきた最新のWeb・映像関連ソフトウェア開発力を、教育現場における「実用的な道具」へと昇華させる重要な役割を果たしました。 現在、クライアントは株式会社プリバテックとして組織を刷新し、PCIホールディングスグループおよびレスターグループのもとで、ソフトウェア開発からLSI設計、基板開発、画像処理系製品の開発までを手掛ける総合的な技術受託企業へと大きく躍進しています。 最先端の通信技術やセンサ技術がどれほど高度化しようとも、エンドユーザーが最初に触れるインターフェースの「使いやすさ」と「信頼性」の担保は不可欠です。 私たちは今後も、技術のコアバリューを最大限に引き出し、持続可能な運用の基盤となるシステムデザインソリューションを提供してまいります。

---

UI/UX Design Development for “HD-DLS” High-Definition Distance Learning System Supporting Inter-University Collaboration

The “HD-DLS (Hi-Definition Television Distance Learning System)” serves as an advanced case study of ICT utilization in educational institutions, connecting multiple universities. This project is a design case study where the overall interface (Software design, System Design, UI/UX) for the distance learning solution and the remote high-definition transmission system controller was optimized. To ensure that instructors and operators on the educational frontlines could navigate and operate the advanced video transmission technology developed by the client, Infinitec Co., Ltd. (currently Privatec Co., Ltd.), intuitively and without confusion, we performed logical screen design and graphic reconstruction. A distance learning system is an extremely critical system that demands smooth real-time bidirectional communication, high-definition video distribution, and foolproof operability that does not disrupt the flow of a class. In the lecture rooms of the adopting universities, operations are conducted by faculty members who are not necessarily proficient in operating equipment, or by system administrators who are required to establish accurate configurations within limited timeframes. In this design production, we visualized complex communication controls and video source switching processes to provide a UX (user experience) aligned with user mental models, executing an approach that enhances overall system reliability and product value.

Dark Mode and Visual Grouping of Information to Reduce Operational Errors

In the interface design, the highest priority was placed on a visual setup aimed at “preventing eye fatigue and misoperations even in the dark environments of ongoing classes.” We introduced a dark mode in 2011, far earlier than when Apple introduced dark mode to iPhone (iOS) and Safari around 2018–2019. In distance learning rooms utilizing large university screens or projectors, the room lights are frequently dimmed; therefore, we adopted a dark-toned background to reduce operator fatigue caused by screen glare. The screen composition logically divides areas along a grid system to minimize cognitive load. In the basic operation screen (Main Mode), independent control panels for “Transmission Mode,” “Connection,” and “Connection Target List” are placed in separate boxes, clearly defining the boundaries of each area. This allows users to smoothly complete a sequence of tasks—from checking communication status to selecting and executing connections—within a natural eye movement flow from top to bottom or left to right, without having to shift their gaze erratically.

Component Design Enabling Intuitive Status Identification

To enable instantaneous recognition of the system’s operational status, rigid rules resembling industrial control panels were established for button textures, typography, and color management.

• Three-Dimensional Button Sculpting with Excellent Usability: By applying moderate gradients and shadows to the buttons as operational elements, we clearly expressed that they are “pressable elements” (affordance) on the screen. This gave them a three-dimensional feel that provides a high sense of responsiveness during operation on touch-panel displays.
• Universal Three-Color Signals: For text indicating connection status or communication speeds, high-visibility fluorescent green (such as #00FF00) was adopted to maximize contrast against the black background. By color-coding system statuses such as standby, active (sending, receiving, connecting), and warnings, the design allows users to grasp the current operating scenario at a single glance.
• Flexible Matrix-Type Video Source Selection (Main Screen / Sub Screen): In the selection area for the main and sub-videos during a lecture, multiple local and remote video sources—such as “HD-1,” “HD-2,” “SD-1,” “SD-2,” and “SD ALL”—are arranged in a tile layout. Combined with toggle switches specifying destination positions (top-left, top-right, bottom-left, bottom-right), configuration errors for complex split-screen displays (PnP: Picture-in-Picture) are structurally eliminated.
• Seamless Recorded File Management and Playback Controls (Playback Mode): On the “Playback Screen” that manages searching and playing back archived lectures, the file list and controller are positioned on the left and right. Alongside standard media control icons such as play, stop, pause, rewind, and fast-forward, variable speed buttons like “x0.5,” “x1.0,” and “x1.5” are consolidated within the same area, streamlining the task of reviewing lecture content.

Professional System Design Keeping Pace with Technological Evolution

Design in a distance learning system is not mere screen decoration; it is the robust bridge (UI/UX) itself connecting complex network technology with the user. The screen design for “HD-DLS” played a vital role in sublimating the latest web and video-related software development capabilities cultivated by Infinitec Co., Ltd. into a “practical tool” for educational settings. Today, the client has refreshed its organization as Privatec Co., Ltd., making major leaps forward as a comprehensive technical contract enterprise handling everything from software development to LSI design, board development, and the development of image processing products under the PCI Holdings Group and the Restar Group. No matter how advanced state-of-the-art communication or sensor technologies become, guaranteeing the “ease of use” and “reliability” of the interface that end-users interact with first remains indispensable. We will continue to extract the maximum core value of technology and provide system design solutions that serve as foundations for sustainable operations.

---