社内ポータルサイトの見やすいデザインは？参考事例3選を紹介
社内ポータルサイトのデザインを見やすくするポイントを、参考事例3選つきで解説します。デザインのトレンドや、設計から公開までの手順も分かります。
目次
社内ポータルサイトは、作っただけでは社員に定着しないことも少なくありません。毎日使う業務ツールだからこそ、必要な情報へのたどり着きやすさはデザインによって左右され、利用率や業務効率にも差が出ます。
本記事では、社内ポータルサイトで見やすいデザインが重要な理由や最新トレンド、参考事例、作成の手順を解説します。ポータルサイトの構築やリニューアルを担当している方は、ぜひ参考にしてください。
社内ポータルサイトで見やすいデザインが重要な理由
社内ポータルサイトで見やすいデザインが重要な理由として、以下の4つが挙げられます。
- 業務効率化を実現できる
- 高い定着率を維持できる
- 社員エンゲージメントの向上につながる
- インナーブランディングを強化できる
それぞれ詳しく見ていきましょう。
関連記事：社内ポータルとは？構築する目的とメリット、作り方や事例を解説
業務効率化を実現できる
社内ポータルサイトが見やすくなると、社員が情報を探す時間は短くなります。規程やマニュアル、申請フォームの置き場所がひと目で分かれば、情報を探す時間を本来の業務に充てることができるようになります。例えば出張申請なら、申請フォーム・旅費規程・記入例にトップページの「申請」アイコンからまとめてアクセスできるようにしておけば、担当者に聞いて回る必要はありません。
また、「就業規則はどこですか」「申請書のフォーマットが見つかりません」といった問い合わせが減るため、対応する総務や人事の負担も軽くなります。
高い定着率を維持できる
見やすいデザインなら、社員は社内ポータルサイトを毎日開くようになります。説明会や操作マニュアルがなくても迷わず利用できるので、公開から数年たっても利用率は落ちません。
反対に、分かりにくい画面では社員は次第にアクセスしなくなります。「作ったものの誰も使わない」状態に陥りかねません。周知はメールや口頭に逆戻りし、載っている情報も更新されないまま古びていきます。設計の段階で、迷わず操作できる画面を作り込んでおきましょう。
社員エンゲージメントの向上につながる
見やすいデザインは、社員エンゲージメントの向上にもつながります。例えば、トップページに新規プロジェクトの進捗や社内表彰のニュースが並んでいれば、社員は自分の部署以外の動きも自然と把握できます。経営陣の想いや会社の方向性が視覚的に伝わると、組織の一体感や社員のモチベーションも高まるはずです。
テレワークや拠点の分散によって顔を合わせる機会が減っている企業ほど、社内ポータルサイトは全社員が毎日集まる共通の場になります。画面が見やすければ、離れた拠点にいる社員や在宅勤務の社員にも社内の空気が伝わるでしょう。
インナーブランディングを強化できる
社内ポータルサイトは、社員にブランドを浸透させる場にもなります。コーポレートカラーやロゴ、ブランドの世界観が統一された画面に毎日触れていると、企業のビジョンや行動指針も自然と伝わります。社外向けのWebサイトと同じトーンで整えれば、入社したばかりの社員も自社らしさを早くつかむことができるでしょう。
社内ポータルサイトを見やすいデザインにするポイント
社内ポータルサイトを見やすいデザインにするポイントは、次の8つです。
- 社員のニーズに合ったデザインを設計する
- 導線とカテゴリを整理する
- トップページやファーストビューに重要情報をまとめる
- アイコンやイラストを活用して直感的に情報を伝える
- デザインのルールを統一する
- ユニバーサルデザインを意識する
- マルチデバイスに対応する
- 企業のブランドイメージに合わせる
順番に見ていきましょう。
1. 社員のニーズに合ったデザインを設計する
社内ポータルサイトのデザインは、見た目の美しさやかっこよさより、社員にとっての操作性と利便性を優先しましょう。凝ったアニメーションや不要な機能を盛り込むと画面が複雑になり、本当に必要な情報が埋もれてしまいます。
実際に何を残すかは、各部署の社員に「どの情報を、どの頻度で見るか」をヒアリングして決めるのがおすすめです。営業部門は外出先のスマートフォンから最新の資料を探し、管理部門は申請や承認の機能を毎日使う、といった具合です。
利用の実態が分かれば、トップページに何を置き、何を下の階層へ送るかを判断できます。
2. 導線とカテゴリを整理する
社員がどこに何があるかをすぐ判断できるよう、次の3つを押さえておきましょう。
- ナビゲーションメニューやヘッダーに主要メニューを固定する
- よく使うコンテンツへのショートカットをトップページに置く
- 目的のページへ3クリック以内で到達できるようにする
固定するメニューは、全社員が日常的に使う項目だけに絞りましょう。項目が多すぎると、どれを選べばよいか分からなくなり、固定した意味が薄れてしまうからです。
カテゴリ分けだけでは拾いきれない情報を探すために、検索機能も不可欠です。検索窓を目立つ位置に置き、キーワードやタグで横断的に検索できるようにしておくと、階層をたどらなくても情報にたどり着くことができます。
3. トップページやファーストビューに重要情報をまとめる
全社員に伝えるべきお知らせや緊急の告知は、トップページを開いた瞬間に見える範囲に置きましょう。スクロールしないと見えない場所に配置すると、見落とされる可能性があるからです。人の視線は画面の左上から右下へ流れるため、最も伝えたいお知らせは左上に置くと気づかれやすくなります。
優先順位づけはトップページに限りません。各ページも、開いた瞬間に要点が目に入り、読み進めると詳細が分かる構成にしておきましょう。
4. アイコンやイラストを活用して直感的に情報を伝える
アイコンやイラストを添えると、社員は目的の場所を直感的に見つけることができます。書類のアイコンで申請メニューを、カレンダーのアイコンで予定表を示すなど、機能とイメージが一致する絵柄を選びましょう。「経費精算」「会議室予約」のような短いラベルを下に添えると、絵柄だけでは伝わりにくい機能も補足できます。
ただし、意味が伝わらない装飾だけのアイコンを増やすと逆効果です。初めて見た社員でも推測できる絵柄に絞りましょう。
5. デザインのルールを統一する
配色やフォント、余白の取り方、ボタンの形は、あらかじめルールを決めて全ページでそろえましょう。ページごとに見た目が変わると、同じサイトの中にいるのに別のサイトに移ったように感じられ、社員は操作に戸惑います。
配色は、背景色・メインカラー・アクセントカラーの3色程度に絞ると、強調したい情報が引き立ちます。「押せる要素は角丸のボタンにする」のように操作できる場所の見た目をそろえるだけでも、迷いにくくなるでしょう。決めたルールを文書化しておけば、担当者が変わってもページの品質を保つことができます。
6. ユニバーサルデザインを意識する
社員の誰もが同じように使えるよう、ユニバーサルデザインを取り入れましょう。ユニバーサルデザインとは、年齢や身体の状態にかかわらず、できるだけ多くの人が利用できるように設計されたデザインのことです。背景色と文字色のコントラストを十分に確保することや、文字を読みやすい大きさと太さに保つことが代表例です。
社内ポータルサイトは全社員が対象なので、一部の社員が読みづらい画面では情報格差が生まれます。デザインの段階で、年代や職種の異なる複数の社員に画面を確認してもらいましょう。
7. マルチデバイスに対応する
社内ポータルサイトは、PCだけでなくスマートフォンやタブレットからも見やすくしておきましょう。営業や現場のスタッフは、外出先や作業場でスマートフォンから利用することが想定されるからです。
画面幅に応じてレイアウトが切り替わるレスポンシブデザインにしておけば、デバイスごとにページを作らずに済みます。ただし、画面に収まることと使いやすいことは別です。移動中でも読みやすい文字の大きさか、指でタップしやすいボタンかなどは実機で確かめておきましょう。
8. 企業のブランドイメージに合わせる
社内ポータルサイトのデザインは、企業のブランドイメージに合わせましょう。コーポレートカラーをメインカラーに使い、ロゴやスローガンを配置すると、画面から自社らしさが伝わります。
ただし、コーポレートカラーをメインカラーに使うといっても、背景全体をコーポレートカラーにする必要はありません。鮮やかな赤やオレンジを広い面積に使うと、毎日何度も開く画面では目が疲れます。背景は白のままにして、ボタンや見出しの下線をコーポレートカラーにすれば、自社らしさは十分に出すことができます。
社内ポータルサイトの最新デザイントレンド
社内ポータルサイトのデザインで、いま広がっているのは次の4つです。
- カード型
- アイコン型
- ヒーローヘッダー型
- パーソナライゼーション型
いずれも見た目の流行ではなく、情報へのたどり着きやすさを高めるデザインとして定着してきました。1つずつ特徴を見ていきましょう。
カード型
カード型は、ニュースや申請フォーム、社員紹介といった内容を1件ずつ枠に入れて並べるデザインです。1つの枠に写真と見出し、短い説明をまとめて配置できるので、ページをざっと眺めるだけで、目的の情報にたどり着くことができます。
枠の並びは画面幅に応じて自動で変わるので、PCでもスマートフォンでも1つのページで対応できます。
アイコン型
アイコン型は、「勤怠」「経費」「会議室予約」といった機能の入口を、絵柄で並べるデザインです。カード型が写真と見出しで中身を見せるのに対し、アイコン型が示すのは「どこに何があるか」だけになります。
写真を使わないぶん、画面の統一感を出しやすいのも特徴です。ただし線の太さや色がそろっていない絵柄を並べると、かえって散らかって見えます。トップページのメニューはアイコン型、開いた先のニュース一覧はカード型といった使い分けもおすすめです。
ヒーローヘッダー型
ヒーローヘッダー型は、トップページの一番上に大きな画像や動画を置くデザインです。経営陣のメッセージや全社イベントの告知など、いま最も伝えたい内容を、開いた瞬間に届けることができます。
文字だけが並ぶ画面と違い、会社の空気まで伝わるのも強みです。拠点が複数ある企業やリモートワークを採用している企業なら、顔を合わせる機会の少なさを補うことができます。画像に載せる文字は最小限にとどめ、詳しい内容はリンク先で読んでもらってください。
パーソナライゼーション型
パーソナライゼーション型は、部署や役職に応じて、表示する情報を社員ごとに変えるデザインです。営業担当者の画面には最新の提案資料を、経理担当者の画面には承認待ちの精算を並べるといったイメージです。
社員は開いた瞬間から、自分の仕事に必要なものだけを閲覧できます。部署が多い企業におすすめです。
大企業向けの社内ポータルを構築できるLiferayのパーソナライゼーション機能では、属性をもとに社員をグループ分けし、閲覧している人に応じてページのレイアウトやコンテンツを変えることができます。
社内ポータルサイトのデザイン参考事例
ここからは、Liferayで構築された社内ポータルサイトのデザイン事例を3つ紹介します。
なお、Liferayの社内ポータル導入事例集はこちらのページからダウンロードできます。
住友商事株式会社
住友商事株式会社の社内ポータルサイトは、社員一人ひとりが自分専用の画面を持つことができるのが特徴です。国内外100以上の拠点で11,000名が利用するポータルを、同社はLiferayで再構築しました。以前のポータルは独自要件に合わせたカスタマイズが難しく、社員一人ひとりに合わせたページやコンテンツを提供できていませんでした。
新しいポータルでは、社員がマイページのレイアウトを自由に変更できます。お知らせは「一般」「セミナー・募集」といったタブで分かれ、「Japan」「Americas」のような地域タグも付いています。担当する地域や関心のある分類だけを確認できるので、全社の情報に埋もれる心配はありません。
画面の上部には、マイページやお知らせ、社員検索といった主要メニューがアイコン付きで固定されています。検索窓と言語の切り替えは右上にまとまり、横断検索やタグ検索が加わったことで、資料やリンクを探す時間も短くなりました。
また、コメントやQ&Aのスペースも加わり、一部の部署からの一方通行だった情報発信は、社員の誰もが発信できる双方向のやり取りへと変わりました。
住友商事株式会社の導入事例はこちらのページからダウンロードできます。
フォルクスワーゲン・グループ・フランス
フォルクスワーゲン・グループ・フランスが1つのポータルで支えているのは、5つのブランドです。Liferay DXPで社内ポータルと取引先ポータルを構築し、2万人を超える利用者と100以上のアプリを集約しました。同社が求めたのは、多くの利用者を抱えるサイトを手早く構築できることと、コンテンツごとに閲覧できる範囲を細かく設定できることでした。
Audi向けのポータルは、モノトーンを基調にブランドカラーの赤をアクセントとして使い、ロゴやスローガンまで含めてブランドの世界観を再現しています。上部のヒーローヘッダーで注目情報を大きく見せ、下に円形アイコンのショートカットを並べ、右側にカテゴリー別の最新情報を置いた構成です。ショートカットには資料集や料金、納期など、販売店の担当者が毎日使う項目が並びます。
ブランドごとに見た目を変えても、運用する基盤は1つで済みます。複数のブランドや事業を抱える企業には、参考になる作り方でしょう。
フォルクスワーゲン・グループ・フランスの導入事例はこちらのページからダウンロードできます。
トールグローバルエクスプレス社
トールグローバルエクスプレス社（現Team Global Express）は、オーストラリアを中心に荷物の輸送や配送を手がける大手の物流会社です。以前の社内ポータルサイトは必要な情報にたどり着きにくく、親会社が変わったのをきっかけに、Liferayで短期間に作り直しました。新しいポータルで、社員は給与明細や各種ポリシー、手続きを自分で確認できるようになりました。
トップページの上部には、給与明細や休暇申請、ITサービスデスクへの入口が並んでいます。使う頻度の高い手続きを最初の画面に置いた新しいポータルには、従業員から好意的なフィードバックが寄せられました。
経営陣のメッセージを伝える動画のヒーローヘッダーや、コメントといいねを付けることができるニュース欄、今後のイベント一覧も、同じトップページに並びます。
トールグローバルエクスプレス社の導入事例はこちらのページからダウンロードできます。
社内ポータルサイトの見やすいデザインを作る手順
全体の流れは、大きく5つの段階に分かれます。
- ターゲットと目的の明確化
- サイト構造と導線の設計
- ワイヤーフレームの作成
- ビジュアルデザインの作成
- テスト運用とフィードバックを基にした改善
各段階で行うことを解説します。
1. ターゲットと目的の明確化
最初に、社内ポータルサイトを「誰が」「何のために」使うのかを決めます。社内アンケートやヒアリングで現状の課題を調べ、「情報共有の遅れを解消したい」「申請手続きの窓口を一本化したい」のように、運用の目的を言語化しましょう。
ターゲット像は「入社2年目の営業担当」「工場勤務でPCをほとんど使わない社員」のように具体的に描くと、機能の取捨選択がしやすくなります。「書類の置き場所を尋ねる総務への問い合わせを月20件から10件に減らす」のような数値目標まで決めておけば、公開後にデザインの良し悪しを測ることができます。
2. サイト構造と導線の設計
次に、掲載する情報を洗い出して分類し、サイトマップに落とし込みます。「人事」「経理」「営業資料」のように社員が推測しやすいカテゴリ名を付け、利用頻度の高い情報ほど階層の浅い場所に置きましょう。
サイトマップができたら、主要な場面ごとに「トップから何クリックで目的の情報に届くか」を数え、深すぎる階層がないか確かめてください。
3. ワイヤーフレームの作成
サイトマップが決まったら、各ページのレイアウトを線画で示すワイヤーフレームの作成に取りかかります。色や装飾を付ける前に「どこに何を置くか」だけを固めておくと、後工程の手戻りを防ぐことができます。
ワイヤーフレームの作成段階で実際に社内ポータルサイトを使う社員に見てもらい、「よく使う機能が画面の下のほうにある」といったずれを直しておきましょう。
4. ビジュアルデザインの作成
ワイヤーフレームに配色やフォント、アイコン、画像を載せて、完成イメージとなるデザインカンプに仕上げます。「配色は3色まで」「押せる要素は角丸のボタン」といったルールを、ここで具体的な色や形に落とし込みましょう。
主要なページが固まったら、クリックできるプロトタイプで操作感を確かめておくと、開発に入ってからの修正を減らすことができます。
5. テスト運用とフィードバックを基にした改善
構築が終わったら、全社に公開する前に一部の部署で試してもらいます。「目的の資料まで何クリックかかったか」「どの画面で迷ったか」を聞き取り、内容を反映してから全社に展開しましょう。声をかける相手は、ITに慣れた部署だけでなく、現場寄りの部署や入社間もない社員も含めると、偏りのない意見が集まります。
公開後も、アクセス解析でよく見られるページや、途中で閉じられている画面を確認しましょう。社内ポータルサイトのデザインは、一度作って終わりではありません。利用状況に合わせて配置やカテゴリを見直し、ブラッシュアップしていきましょう。
カスタマイズ性に優れたLiferay DXP
Liferay DXPは、大企業向けのデジタルエクスペリエンスプラットフォーム（DXP）です。社員が使う社内ポータルサイトから、顧客や取引先が使うサイトまで、1つの基盤で作ることができます。世界2,500社以上で利用されており、CMSや検索、パーソナライゼーションなど、社内ポータルサイトに必要な機能を標準で備えています。
ページは、フラグメントと呼ばれる部品をドラッグ＆ドロップして組み立てることができます。色やフォントはスタイルブックでまとめて指定するので、コーポレートカラーをサイト全体にそろえるのも簡単です。
部署や役職に応じたコンテンツの出し分けや、PCやタブレット、スマートフォンなど画面サイズに合わせた表示にも対応しています。
提供形態は、次の3つです。
- Liferay SaaS（アプリケーションの管理からホスティングまでLiferayに任せる）
- Liferay PaaS（Liferayのクラウドインフラを使い、アプリケーションの保守は自社で担う）
- Liferay Self-Hosted（オンプレミスや自社管理のクラウドで運用する）
自社のIT要件に合わせて選ぶことができます。
大企業向け社内ポータルサイト構築ソリューションのページでは、機能の詳細や一般的なグループウェアとの比較、よくある質問を紹介しています。
まとめ
社内ポータルサイトのデザインを見直すと、社員が情報を探す時間が減り、ポータルを開く習慣も根づきます。他部署の動きや経営陣のメッセージも届きやすくなり、組織の一体感につながります。見やすくするには、社員のニーズを起点に、導線の整理や重要情報の集約、アイコンの活用、ルールの統一を積み重ねましょう。
住友商事株式会社やトールグローバルエクスプレス社の事例のように、デザインの工夫は1万人を超える規模の組織でも成果につながっています。まずは本記事の8つのポイントでいま運用しているポータルを点検し、構築やリニューアルを行う際には5つの手順を参考にしてみてください。
また、社内ポータルサイトの構築やリニューアルを予定しているなら、Liferay DXPも検討してみてはいかがでしょうか。
