メニュー

お問い合わせ
Logo
プレス

Webポータルとアプリ

複雑なポータルは、利用者の離脱を招きます。

顧客は手続きを完了させたいと考え、外勤チームは現場での情報を必要とし、業務部門は信頼できる全体像を求めています。適切な利用者フロー、透明性のある権限設定、貴社の既存システムとの連携を備えたWebポータルとモバイルアプリを開発します。

ノートパソコンとスマートフォン間でのアプリケーションの調整、イメージ画像
課題設定から文書化された引き渡しまで。

このサービスが役立つ場面

Webポータルとアプリ:私たちへのご依頼内容。

  • 顧客ポータルとパートナーポータルを提供する
  • モバイルでの業務フローを支援する
  • フォームと申請プロセスをデジタル化する

顧客、外勤、業務部門向けのWebアプリケーションとモバイルアプリを、両方のチャネルを同じインターフェースで処理するバックエンドとともに提供します。ユーザーインターフェースはReact、Next.js、Vueで構築し、アプリはReact Nativeによるクロスプラットフォーム開発、またはKotlinとSwiftによるネイティブ開発とし、WCAGに基づくアクセシビリティを検証します。ログイン、セッション、オフラインデータは、WebとモバイルそれぞれのOWASPガイドラインに従って保護します。

依頼に含められる内容

  • 開発前に行う、クリック可能なプロトタイプと、業務部門または顧客によるユーザーテスト
  • React、Next.js、VueによるWebフロントエンド、WCAG 2.2に基づくアクセシビリティ
  • React Native、またはKotlinとSwiftによるネイティブ開発のモバイルアプリ(ストアへの公開を含む)
  • OpenID Connectによるログイン、OWASP MASVSに基づくセッション保護と証明書ピンニング
  • オフライン対応、プッシュ通知、GDPRに基づく同意を得たテレメトリ

具体的な範囲、検収、貴社の関与については、提案書で定めます。

全体のつながりを一目で

優れたデジタルプロセスは、目的地まで導く。

  1. 01

    アクセス

    本人確認と権限を明確にする

  2. 02

    タスク

    利用者を分かりやすく手続きへと導く

  3. 03

    処理

    データを安全に業務システムへ引き渡す

  4. 04

    フィードバック

    状況と次のステップを可視化する

計画、実施、意思決定

Webポータルとアプリで重要なポイント。

01

最初のアクセスから案件の完了まで

ポータルが役立つのは、利用者が回り道をせずに目的を達成できる場合です。ログイン、データ入力、アップロード、問い合わせ、状況確認までの一連のフローを設計します。エラー発生時の対応も設計に含めます。セッションの期限切れ、不備のある書類、接続の中断が原因で、すでに入力した作業内容が失われることがあってはなりません。

クリック可能なプロトタイプによって、実装前にこれらのフローを検証できます。業務部門と利用者グループからのフィードバックは、ナビゲーション、フォーム、分かりやすいメッセージに反映します。共通のコンポーネントシステムにより、新しい機能にも同じ操作ロジックが適用されます。

02

Web、プログレッシブウェブアプリ、それともネイティブアプリか?

選択は用途に応じて決まります。ブラウザベースのポータルは、インストール不要で手軽にアクセスできます。プログレッシブウェブアプリは、特定のモバイル用途には十分な場合があります。デバイスのインターフェース、バックグラウンド処理、オフライン要件が必要とする場合には、ネイティブアプリやクロスプラットフォームアプリが選択肢になります。必要な機能については、実機で検証します。

オフラインデータには、ローカル保存、同期、競合に関するルールが必要です。例えば外勤アプリでは、2人が同じ案件を処理した場合にどちらの変更を優先するかを明確にしておく必要があります。これらの点はユーザーインターフェースだけでなく、バックエンドや権限にも影響します。

03

利用状況におけるアクセシビリティとセキュリティ

キーボード操作、識別しやすいフォーカス状態、分かりやすいエラーメッセージ、拡大可能なフォントは、ユーザーインターフェース設計の一部です。アクセシビリティに必要な検証範囲は貴社とすり合わせます。ビジュアルデザインや自動スキャンだけでは、アクセシビリティの完全な証跡にはなりません。

アクセスは、すべてのロールと操作についてサーバー側で検証します。ファイルアップロード、セッション、データ共有にはそれぞれ専用の保護対策を設けます。展開に向けては、テスト端末、必要に応じたアプリストアの承認、サポート経路、貴社の利用者への導入を計画します。

ツールは課題に合わせて選ぶ

貴社の環境に合った技術。

  • React
  • Next.js
  • Vue
  • React Native
  • Kotlin
  • Swift

選定は既存システム、貴社のチーム、その後の運用に応じて行います。すべてのプロジェクトが、挙げた技術をすべて必要とするわけではありません。

業務部門の責任者と技術チーム向け

実装の背後にある意思決定。

04

ID管理、代理設定、安全なセルフサービスプロセス

顧客アカウントはログインだけで完結するものではありません。招待、所属組織の変更、ログイン情報の紛失、代理設定、従業員の退職といった状況が権限モデルに組み込まれている必要があります。新規利用者を誰が承認できるか、どのステップで再確認が必要かを明確にします。一元管理されたIDを連携させることもできますが、個々の案件に関する業務上の判断はポータル側の役割として残ります。

申請プロセスとアップロードについては、社内処理に至るまでの一連の流れ全体を検討します。ファイルサイズ、許可するコンテンツ、隔離処理、承認は、分かりやすいステータス表示と併せて計画します。アップロードが成功したからといって、書類が確認済み、または受理されたことにはなりません。下書き、自動保存、別端末での再開には、表示範囲に関する明確なルールが必要です。機密性の高い情報は、通知やURL、診断メッセージに誤って表示されないようにします。

05

データの混乱を招かないオフライン利用と同期

倉庫や外勤で使うモバイルアプリケーションは、常に安定した通信環境を前提にはできません。閲覧用のオフラインデータとローカルで入力した変更内容を区別し、それぞれの有効期間を定めます。大量のデータを無差別にすべての端末へコピーすることはしません。利用者の権限、端末のストレージ容量、端末紛失時の対応もこの設計に組み込みます。

再接続した時点で、同じデータがサーバー側ですでに変更されている場合があります。「最後の変更を優先する」という一律のルールは、多くの業務プロセスには適していません。どの項目を自動的に統合できるか、どの競合に判断が必要かを定義します。送信待ちのデータは利用者から見える状態を保ちます。テストでは、送信中の通信切断、複数回の再送、セッションの期限切れ、入力から同期までの間の権限変更を確認します。

06

実環境での使いやすさと管理された展開

ポータルは開発用の大きなモニターだけで使われるわけではありません。長い名前、翻訳文、拡大されたフォント、画面キーボード、動作の遅い端末は、いずれもレイアウトに影響します。そのため、実際に使用する端末上で、さまざまな入力方法により一連の作業全体を検証します。エラーメッセージは修正すべき内容を説明し、該当箇所へ誘導します。再ログインが必要になっただけで、フォームの入力内容が失われてはなりません。

導入にあたっては、対象利用者を限定し、すぐに問い合わせられるサポート体制と、実際の業務フローからのフィードバックを計画します。モバイルアプリでは旧バージョンが残ったまま使われることがあるため、バックエンド側は合意した移行期間を考慮する必要があります。利用状況の計測は、どの時点で案件が中断されるかなど、具体的な改善課題に答えられるものであるべきです。どの計測を実施してよいか、そのためにどの情報が必要かは、実装前に明確にします。

透明性のある作業成果

貴社の手元に残るもの。

成果01

ソースコード付きの公開済みアプリとWebアプリケーション

成果02

デザインシステムとアクセシビリティレポート

成果03

OWASP MASVSに基づくセキュリティ検証レポート

プロジェクトの進行例

支援はたとえばこのように進みます。

パートナーポータルはメールでの問い合わせに代わるものです。パートナーは自分の案件のみを閲覧し、資料をアップロードし、処理の過程で問い合わせを受け取ります。社内処理では同じデータを使用しますが、ロールと承認権限が異なります。

説明のためのシナリオであり、顧客事例や成果の保証ではありません。

着手に役立つもの

  • 利用者グループと主要業務
  • 既存のログインとロールモデル
  • 必要な端末とオフライン利用シーン

資料が不足していても支障はありません。どの情報を先に揃えるべきかは、共に整理します。

貴社の取り組みの詳細

利用者と、その実際の業務のためのデジタル窓口。

情報を表示するだけでなく、一連の手続きを完結できるポータルやアプリケーションを開発します。利用状況、端末、権限、フィードバックが設計を左右します。

手続きを入口から確定まで一貫して捉える

利用者がどのようにアプリケーションにたどり着くか、どのような情報を持ち込むか、どこで支援を必要とするかを調査します。ログイン、フォーム、アップロード、ステータス通知は、一つのつながった流れとして設計します。適切な中間保存があれば、中断後にすべての項目を入力し直す必要がなくなります。

モバイル利用については、入力の種類、キーボードの挙動、利用可能な画面領域を確認します。キーボード操作、分かりやすいラベル、認識しやすいエラーメッセージは、構成の段階から考慮します。具体的なアクセシビリティ検証は、合意した要件に沿って計画するものであり、追加の操作バーで代替するものではありません。

ポータルと業務システムを適切に連携させる

魅力的なユーザーインターフェースが、内部システムへの安全でない近道になってはなりません。権限を限定したインターフェースを設計し、入力はサーバー側で検証し、ファイルは所定のセキュリティコンセプトに沿って扱います。ステータス表示では、「受付済み」「対応中」「業務上完了」の各状態を区別できる必要があります。

一般向けのサービスでは、これに加えて見つけやすさ、表示速度、主要コンテンツの提供が重要になります。限定公開のポータルでは、多くの場合、ID管理、組織ごとの分離、サポートが優先されます。どの要素を優先するかは、同じ技術的なひな形をすべてのアプリケーションに当てはめるのではなく、利用者の業務プロセスに基づいて決めます。

プロジェクトシナリオの例

このサービスが日常業務でどのように役立つか。

例:法人顧客が書類を提出し、対応状況を確認できるようにします。アップロード、受領確認、問い合わせ対応を一つの流れとして開発します。技術的なアップロードの成功を業務上の承認と混同することはなく、両者の状態を分かりやすく区別して表示します。

この例は想定される進め方を説明するものであり、顧客事例ではありません。

依頼の前に

Webポータルとアプリに関するご質問。

ポータルとアプリは同じバックエンドを使用できますか?

はい、データモデル、権限、インターフェースがそれに対応して設計されていれば可能です。共通サービスを使うことで、業務ロジックの重複を避けられます。それでも操作フローは、チャネルごとに合わせたものにします。小さな画面では、デスクトップの作業環境とは異なる操作手順が必要になることが少なくありません。

オフライン対応にはどのような要素が含まれますか?

ローカルに保存されたデータに加えて、競合解決のルール、安全な保存方法、同期状況を確認できる表示が必要です。どの操作をオフラインで許可するか、後から同期する際のエラーをどう扱うかを定めます。オフライン対応は具体的な業務フローに基づいてテストします。

既存のユーザーインターフェースの引き継ぎにも対応していますか?

コード、コンポーネント、利用状況データ、技術的な制約を確認した上で、個々のプロセスを改善するか、段階的な刷新を計画できます。全面的な置き換えが必ずしも必要というわけではありません。見た目だけのリデザインより、一貫した申請プロセスを整える方が効果が大きいことも少なくありません。

次のステップ

現在、どこでつまずいているか教えてください。

貴社のアプリケーション、課題、目標についての簡単な説明があれば、まずは十分です。選択したサービスは、お問い合わせ内容に反映されます。

このサービスについて問い合わせる

パートナー

  • Microsoft
  • Microsoft Azure
  • Amazon AWS
  • Google Cloud
  • Thales Group
  • Arrow ECS
  • Vodafone
  • IBM
  • Veeam
  • Atlassian
  • JetBrains
  • NinjaOne
  • OPSWAT
  • Utimaco
  • Eviden

アクセシビリティ

表示をご自身のニーズに合わせて調整できます。

このページには、まだやさしい日本語版がありません。

設定は現在、今回の閲覧にのみ適用されます。永続的な保存は「Cookie設定」で許可できます。