見やすい社内ポータルのデザイン｜掲載の優先順位と四つのレイアウト型、作り込む判断基準

ポータルを刷新した三か月後に、社員はやはりチャットで「経費の申請書はどこですか」と聞いてくる。デザインの相談で最初に持ち込まれるのがこの症状です。原因はたいてい配色や装飾ではなく、トップページに何を残して何を下層へ落とすかを決めきれていないところにあります。

この記事で扱うのは、集客サイトと評価軸が分かれる理由、毎日見る情報と月に一度の情報を分ける三層の画面構成、カード型をはじめとする四つのレイアウト型の選び分け、配色と文字サイズの具体値、そしてテンプレートで足りる場合と受託で作り込む場合の線引きです。機能の全体像や内製と外注の判断そのものは社内ポータルサイトとは？機能・作り方・内製と外注の判断基準まで解説で扱っているため、ここでは画面の設計に絞ります。

まとめ：見やすい社内ポータルのデザインは掲載の優先順位で決まる

結論から書きます。社内ポータルの使われ方を分けるのは意匠の完成度ではなく、ファーストビューに残す導線を三つから五つに絞り込めたかどうかです。全社共通で毎日触る導線だけを上に置き、残りを検索とカテゴリへ逃がした画面は、公開から一年経っても開かれ続けます。

逆に、各部署から集めた掲載要望をそのままトップへ並べた画面は、リンクが四十本を超えたあたりで探す時間が紙の掲示板より長くなります。この状態は配色を整えても回復しません。社員はよく使う三本をブラウザのブックマークに登録し、ポータル自体を開かなくなるからです。

作り方の判断にも明確な線があります。掲載情報が全社共通で、他システムのデータを画面に出す必要がないなら、SharePointやGoogleサイトの標準部品に配色とロゴを合わせるだけで十分です。一方、勤怠や販売の数値をトップに表示する、役職と部署で表示を切り替える、といった要件が入った時点で標準部品の範囲を超えます。ここが受託でデザインと構築を作り込む側へ切り替える分岐点です。どの用途を主目的にポータルを組むかで画面の優先順位も変わるため、社内ポータルの事例を用途パターン別に整理した解説もあわせて確認してください。

社内ポータルのデザインが集客サイトと別基準になる理由と使われない状態の症状

社内ポータルの読者は最初から社員です。興味を引いて滞在させる必要がなく、むしろ滞在時間は短いほど良い画面になります。評価軸がコーポレートサイトと反転する点を押さえないまま制作会社に依頼すると、見栄えの良い使いにくい画面ができあがります。

見た目の印象ではなく探す時間の短さで評価される社内ポータルの判断軸

コーポレートサイトは初めて訪れた人に印象を残すための設計です。社内ポータルは同じ人が一日に何度も開きます。判断軸になるのは三つ、目的の情報に届くまでのクリック数、トップに置いた情報の鮮度、迷ったときの逃げ道が用意されているかどうかです。

ノートパソコンの表示領域は縦およそ700から800ピクセル。スクロールせずに見える範囲へ収まる要素は、余白を確保すると実質六個から八個です。勤怠打刻、経費申請、全社のお知らせ。この枠を何に使うかが設計の中心になります。

装飾の作り込みに予算を回すより、ファーストビューの要素数を減らすほうが数字は動きます。凝ったアニメーションを入れた画面でも、目的のリンクが三画面下にあれば使われません。

リンクが並ぶだけのトップページで社員がブックマークに逃げる失敗パターン

典型的な失敗は、全部署にヒアリングして出てきた要望をすべて掲載してしまうことです。総務が規程、人事が申請書、情報システムがマニュアル、各事業部がそれぞれの資料。集めるとトップのリンクは六十本前後になります。

この画面で起きるのは、社員が自分の使う三本だけをブラウザに登録して直接開く行動です。ポータルは経由されなくなり、全社周知の告知も読まれません。アクセスログを見ると、トップページの表示回数に対して下層への遷移が伸びていないという形で現れます。

掲載枠に上限を設けるところから直します。トップのリンクは二十本以内、新しく載せるときは何を外すかを同時に決める。この運用ルールが無いと、公開直後は整っていた画面が半年で元の状態へ戻ります。仕組みとして情報が回らない構造的な理由は情報共有とは？目的とメリット、うまくいかない原因と仕組み化の進め方を解説で整理しています。

トップページに載せる情報の優先順位と社員の探し方に沿った情報設計の組み立て

情報設計はデザイン工程の前段にあります。ここを飛ばしてビジュアルから入ると、配色のレビューを終えた後に構成の差し戻しが発生し、工程が二週間単位で伸びます。

毎日見る情報と月に一度しか使わない情報を分ける三層の画面構成

掲載候補を利用頻度で三層に割り振ります。第一層は毎日触るもの、勤怠打刻や全社のお知らせ、当日の予定。第二層は週に一度前後、経費精算や各種申請、会議室予約。第三層は必要なときだけ開く規程類、様式、組織図、業務マニュアルです。

第一層は五要素以内に抑え、第二層はカード状の部品で八個から十二個、第三層は検索とカテゴリからの到達に任せます。判断は感覚ではなく、既存ポータルのアクセスログにある月あたりの利用回数で決めてください。

迷ったときの目安を一つ。月間の利用回数が社員一人あたり一回を切る情報は、第一層に置く理由がありません。

全社周知・申請導線・ナレッジという用途別に置き場を決める分類の基準

情報は用途によって並べ方が変わります。全社周知は新しいものが上に来る時系列、申請導線は業務の流れの順、ナレッジ類は検索前提のカテゴリ。この三つを同じ並べ方で扱うと、どれかが必ず使いにくくなります。

ありがちな崩れ方は、時系列で並べるべき告知を検索前提の場所に置いてしまう例です。半年前の告知が上位に残り、社員は掲載日を確認する習慣を失います。

スケジュールと掲示板は、グループウェア側にも同じ機能があります。どちらを正とするかを設計時に決めないと、両方に投稿されて両方とも更新が止まります。製品としての守備範囲はグループウェアとは？主な機能とクラウド型・オンプレ型の違い、選び方を解説で整理しました。

検索窓とナビゲーションの併用で目的の情報に三クリックで届く導線設計

検索窓はヘッダーに固定し、全ページで同じ位置に置きます。位置が画面ごとに動くと、社員は探すのをやめてチャットで人に聞きます。

分類ナビゲーションは第一階層を七項目前後、深さは三階層までに収めます。四階層に入ると、どこにいるかを見失う社員が出ます。目安は、トップから目的の文書まで三クリック以内です。

検索結果の画面には、文書種別での絞り込みを付けてください。規程、様式、マニュアル、お知らせの四種別があるだけで、「様式だけ見たい」という探し方に応えられます。

カード型・ヒーローヘッダー型など四つのレイアウト型と組織規模別の向き不向き

レイアウトは好みで選ぶものではなく、掲載する情報の性質と組織規模で決まります。デザイン例を集めるときも、意匠ではなく「どの型を採っているか」で見ると判断が速くなります。

カード型・一覧型・ヒーローヘッダー型・分割型の四つの特徴と選び分け

社内ポータルで実際に使われる型は四つに整理できます。それぞれ向く情報と規模が異なります。

迷ったときはカード型と一覧型の組み合わせが外れにくい構成です。上部に申請導線をカードで六個から八個並べ、その下に告知を一覧で流す。ヒーローヘッダー型は経営メッセージを毎月更新できる体制がある組織に限って採用してください。写真と一文を半年放置した画面は、他がどれだけ整っていても古い印象を与えます。

デザインテンプレートをそのまま使ったときに起きる情報量の不一致

市販のテンプレートやSharePointの既定レイアウトは、大きな写真と三枚から五枚のカード、短い説明文を前提に組まれています。ところが社内の実データは写真がなく、文字が多い。この不一致が公開直前に表面化します。

症状は二つ。写真枠を埋めるために無関係なフリー素材が入り、カードの説明文が全角四十字を超えて折り返しでカードの高さが揃わなくなります。

防ぎ方は単純です。テンプレートを選ぶ前に、直近一か月のお知らせタイトルと申請メニューの実物を並べ、最長の文字数を測ってから枠を決めます。見た目のかっこよさで先にテンプレートを確定させるやり方は、社内ポータルでは高い確率で作り直しになります。

配色・文字サイズ・余白の具体値とアクセシビリティを満たす画面設計の基準

見やすさは感覚で議論すると結論が出ません。数値で決められる部分を先に固定しておくと、レビューの論点が意匠の好みから外れます。

基調色二色と強調色一色に絞る配色ルールとコントラスト比の下限

使う色は、白と薄いグレーの基調二色に、コーポレートカラーを強調色として一色。これで足ります。強調色は申請ボタンなど行動を促す箇所にだけ使い、装飾の面積を広げません。

下限は規格で決まっています。WCAG 2.2はW3Cの勧告として2023年10月に公開されており、2026年8月時点でレベルAAの文字色と背景色のコントラスト比は通常のテキストで4.5:1、18ポイントまたは24ピクセル以上の大きな文字で3:1です。国内では JIS X 8341-3:2016 の等級AAが同水準の目安になります。

実務でつまずくのは、コーポレートカラーが淡い黄色や水色の企業です。そのまま文字色に使うと4.5:1を割ります。文字は濃いグレーに固定し、企業色は背景や枠線、見出しの下線に回してください。

本文の文字サイズと行間・余白を数値で決める可読性の設定基準と検証方法

本文はブラウザ既定の16ピクセルを基準にします。情報量を詰め込みたいという理由で12ピクセルまで落とした画面は、四十代以上の社員から読みにくいという声が上がります。

行間は文字サイズの1.5倍から1.8倍、一行の文字数は全角で35字から45字に収めます。カード同士の間隔は16から24ピクセル、章の区切りは48ピクセル以上。余白を削って要素を詰めるほど、視線は迷います。

設定値を決めたら、必ず実データで検証してください。最長のお知らせタイトル、部署名が長い組織図の項目、桁数の多い申請番号。この三つを入れて折り返しが崩れないかを見れば、公開後の崩れはほぼ防げます。

スマートフォン閲覧とアクセシビリティ対応で押さえる操作領域の下限値

店舗や工場、現場を持つ企業では、ポータルの閲覧がスマートフォン中心になります。パソコン画面だけでデザインを確定させると、現場の社員には使えない画面ができます。

タップ領域には具体的な下限があります。WCAG 2.2で追加された達成基準2.5.8「ターゲットサイズ（最小）」はレベルAAで24×24CSSピクセル、Appleのヒューマンインターフェイスガイドラインは44×44ポイント、Material Designは48×48dpを目安として公開しています（いずれも2026年8月時点）。並んだリンクの間隔が詰まっていると、隣を押してしまう操作ミスが増えます。

あわせてキーボード操作時のフォーカス表示と、画像への代替テキストを標準の作法として組み込んでおきます。社外向けサイトで議論されている対応義務の線引きはWebアクセシビリティは義務化されたのか？2024年改正法の線引きと企業がやるべきことで整理しました。社内向けであっても、従業員に見えづらい画面を配る理由はありません。

目的定義からワイヤーフレームまで五段階で進めるデザイン作成の実務手順

進め方を固定しておくと、社内の合意形成にかかる時間が短くなります。特に効くのは、ビジュアルを見せる前に構成の合意を取っておくことです。

利用実態の調査からワイヤーフレーム確定までの五段階と各段階の成果物

成果物を段階ごとに決めておくと、どこまで進んだかが関係者に伝わります。

1. 目的と対象業務の定義：解決する課題と対象部署の一覧
2. 利用実態の調査：既存ポータルのアクセスログと、情報システム部門への問い合わせ上位20件
3. 情報設計：サイトマップと三層の掲載枠一覧
4. ワイヤーフレーム：トップ・一覧・詳細の3画面
5. ビジュアルデザイン：配色・文字・部品の定義書

社員300名規模で、1から3までにおよそ4週間から6週間を見ておくと現実的です。この配分に驚かれることがありますが、時間が掛かるのは調査と合意であって、画面を描く作業ではありません。問い合わせ上位20件は特に効きます。社員が実際に迷っている場所がそのまま設計の入力になるからです。

デザイン確定前に社員十名で試す使い勝手の検証と手戻りを防ぐ確認項目

ワイヤーフレームの段階で、部署の異なる社員に操作してもらいます。「経費精算の申請書を探してください」「育児休業の規程を開いてください」といった課題を五つ渡し、画面を触る様子を見ます。

見るのは正解率ではありません。迷った箇所と、最初にクリックした場所です。設計者がナビゲーションに置いた言葉と、社員が使っている呼び方がずれている場合、最初のクリックが必ず別の場所へ向かいます。

人数は十名前後で足ります。Nielsen Norman Groupは少人数の被験者で大半のユーザビリティ問題が検出できるとする指針を公開しており（2026年8月時点）、部署をまたいで十名確保すれば部署固有の用語のずれまで拾えます。デザイン完成後に部長会でレビューする進め方は避けてください。議論が配色の好みに寄り、導線の問題が残ったまま公開されます。

テンプレート流用で足りる場合と受託でデザインを作り込むべき場合の判断基準

ここは費用対効果が大きく分かれる分岐です。作り込むほど良くなるものではなく、条件が揃っているなら標準機能で仕上げたほうが早く、運用も軽くなります。

SharePointなど標準機能の範囲で仕上げて問題ない三つの条件

次の三つが揃うなら、デザインに費用を掛ける理由はありません。掲載情報が全社共通で部署別の出し分けが要らないこと。他システムのデータを画面に表示する必要がないこと。更新担当が情報システム部門か総務に集約されていること。

この条件下では、Microsoft 365のSharePointコミュニケーションサイトやGoogleサイトの標準部品で組み、配色とロゴを企業のものに合わせるだけで実用に耐えます。SharePointの場合はViva ConnectionsからTeams内に表示させる構成も取れるため、社員が普段開いているアプリの中に導線を置けます。

この規模で外部にデザインを依頼するなら、画面制作ではなく情報設計と掲載ルールの策定に費用を使うほうが成果につながります。

基幹システム連携と権限別表示が要るときに受託構築へ切り替える線引き

切り替えの線は明確です。勤怠・販売・在庫といった基幹システムの数値をトップに表示する。役職や部署、雇用形態によって見えるメニューを変える。申請の進捗をポータル側で追えるようにする。このいずれかが要件に入った時点で、標準部品の組み合わせでは表現しきれません。

無理に標準機能で寄せようとすると、権限別のページを部署の数だけ複製することになり、掲載情報の更新が全ページに波及して運用が破綻します。画面設計から連携まで一体で組む必要があるため、この段階ではポータルサイトシステム開発として要件定義から入る進め方が現実的です。

採用を見送るべき場面も書いておきます。社員50名以下で、申請が紙とメールで回っている組織にポータルを作っても、載せる情報が集まりません。この場合は申請そのものの電子化が先で、ポータルの構築は後回しにしてください。順序を逆にした組織では、公開したポータルが規程置き場のまま更新されなくなります。

公開後に見やすさを数値で測る四つの指標と三か月ごとの改善サイクル

デザインは公開して終わりではありません。掲載枠が有限である以上、入れ替えの判断を続けないと画面は必ず膨らみます。

検索利用率と主要リンクのクリック率で使われ方を見る四つの計測指標

追うのは四つで足ります。トップページだけ見て離脱した割合、検索窓の利用率、主要リンク上位10本のクリック分布、そして情報システム部門への「どこにありますか」という問い合わせ件数です。

読み方に癖があるのは検索利用率です。数字が高いほど便利に見えますが、ナビゲーションから辿り着けていない裏返しでもあります。検索経由の到達が過半を占めるなら、検索語の上位をそのままトップの導線に昇格させてください。

クリック分布も判断材料になります。上位3本に8割が集中しているなら、残りは第一層から外して問題ありません。外した分の枠を余白に回すと、上位3本の押しやすさが上がります。

四半期ごとに掲載枠を入れ替える運用体制と更新が止まったときの対処

棚卸しは四半期に一度が現実的な頻度です。クリック数の下位から順に見て、下層へ落とすか掲載自体をやめるかを決めます。月次だと担当者の負荷が高く、年次では画面が古くなる期間が長すぎます。

更新が止まる原因のほとんどは兼務です。ポータルの更新担当が他業務と兼ねている場合、繁忙期にまず後回しになります。部署ごとに更新責任者を明記し、月次で誰が何を更新するかを決めておくと止まりにくくなります。

公開時だけ外部に委託して運用設計を引き継いでいない組織は、半年で情報が古くなります。委託する場合は、掲載ルールと棚卸しの手順書までを納品物に含めてください。

よくある質問

社内ポータルのデザインについて、相談の場で実際に多い質問をまとめました。

社内ポータルサイトのデザインテンプレートは無料のものでも問題ありませんか？

掲載情報が全社共通で権限による出し分けが不要なら、無料テンプレートやSharePointの既定レイアウトで十分に実用に耐えます。判断すべきはテンプレートの価格ではなく、想定されている情報量が自社の実データと合っているかどうかです。写真前提の枠に文字情報を流し込むと崩れます。選定前に直近一か月のお知らせタイトルと申請メニューを並べ、最長の文字数を測ってから決めてください。

かっこいい社内ポータルにしたいと言われたとき、何から決めればよいですか？

意匠から入らず、ファーストビューに残す導線を三つから五つに絞る作業から始めます。社内ポータルで見栄えが良いと評価される画面は、装飾が多い画面ではなく、要素が少なく余白が確保された画面です。要素を減らしたうえで、配色を基調二色と強調色一色に整理し、文字サイズと余白を数値で固定する。この順序で進めると、意匠の議論は最後の一工程で済みます。

社内ポータルのデザイン例はどこで見られますか？

公開されている社内ポータルは基本的に社外から見られないため、事例として出ているものは制作会社やツールベンダーが自社サイトに掲載している画面に限られます。参考にする際は意匠ではなく、カード型・一覧型・ヒーローヘッダー型・左ナビ分割型のどれを採っているか、第一層に何個の要素を置いているかという構造で見てください。同じ規模帯の事例なら、掲載枠の数がそのまま自社の目安になります。

社内ポータルのデザインを作り直す費用はどのくらいかかりますか？

画面の見た目だけを差し替える改修と、情報設計からやり直す再構築では工程数が大きく変わるため、金額の幅も広くなります。見積もりを取る前に、掲載枠の数、連携するシステムの本数、権限による出し分けの有無という三点を確定させてください。この三点が決まっていない状態で相見積もりを取ると、各社の前提がばらついて比較になりません。構築方法別の相場と、三年・五年の総額で見た分岐点は社内ポータルの費用相場と内訳にまとめています。既存ポータルのアクセスログがあれば、あわせて共有すると精度が上がります。

スマートフォン対応は社内ポータルでも必要ですか？

店舗・工場・訪問営業など、パソコンを常時使わない社員が一定数いる組織では必要です。逆に全社員が業務時間中にパソコンを開いている組織では、スマートフォン向けの作り込みを後回しにしても支障は出ません。判断は社員構成で決めます。対応する場合は、タップ領域の下限（WCAG 2.2の達成基準2.5.8で24×24CSSピクセル、2026年8月時点）と、リンク同士の間隔を確保する設計を最初から入れてください。

関連記事

• 社内ポータルサイトとは？機能・作り方・内製と外注の判断基準まで解説：搭載する機能の全体像と、内製と外注のどちらで進めるかの判断軸をまとめています
• グループウェアとは？主な機能とクラウド型・オンプレ型の違い、選び方を解説：スケジュールや掲示板の機能が重なる範囲と製品の選び方を確認できます
• 情報共有とは？目的とメリット、うまくいかない原因と仕組み化の進め方を解説：画面を整えても情報が回らない場合の、運用側の構造的な原因を扱っています
• ナレッジマネジメントとは？意味とSECIモデル、属人化を解く導入手順を解説：第三層に置くナレッジ類を、貯めて使える形にする考え方の参考になります
• Webアクセシビリティは義務化されたのか？2024年改正法の線引きと企業がやるべきこと：コントラスト比や代替テキストの根拠となる規格と法制度を整理しています