ポータルページの理解

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

このヘルプページは、2026年6月1日以降に作成されたポータルを利用しているCreator 6ユーザー向けです。

それ以前に作成されたポータルについては、古いバージョンのポータルページのカスタマイズについてこちらのドキュメントを参照してください。
Creator 5をご利用の場合は、こちらのドキュメントを参照してください。Creatorのバージョンを確認してください。

概要

ポータルページは、ポータルを構成する基本要素です。対象ユーザーに合わせてカスタマイズされた使いやすい操作画面を作成し、ブランドイメージを強化できます。標準で用意されている4つのページ（サインイン、サインアップ、パスワードの作成、パスワードのリセット）を使用することも、要件に合わせてカスタムページを作成することもできます。各ページは、ユーザーのオンボーディング、情報共有、ナビゲーションの案内、操作の実行など、特定の目的に合わせて設計できます。これらのページにより、ユーザーとのあらゆる接点で一貫性があり視覚的にも統一された導線を提供し、外部ユーザーのポータルアクセスの各段階を支援できます。

利用条件

ポータルページは、Creatorのすべての有料プランで作成できます。
ポータルページを作成および管理できるのは、特権管理者、管理者、開発者のみです。

1. 概要

Zoho Creatorのポータルページを使用すると、外部ユーザー向けのポータル画面を作成、管理できます。ポータルの構成、レイアウトの設定、コンテンツブロックの管理に役立ちます。事前作成済み（標準）ページとカスタマイズ可能なページを統一された仕組みで利用できるため、外部ツールに頼らず、ブランドや用途に沿った一貫性のある操作画面で、ユーザー向けページの設計、新しいページの作成、管理を行えます。

ZohoのAIアシスタントであるZoho Ziaを使用し、プロンプトや参考画像を指定してポータルページを作成することもできます。これにより、要件に合ったページをすばやく設計し、コンテンツを追加しやすくなります。ログイン、サインアップ、パスワードのリセットなどの基本的なアクセスページから、ビジネス要件に合わせて完全にカスタマイズされたページまで、ポータルページを利用することで、あらゆる接点で統一感があり、視覚的に魅力的で使いやすいポータルを提供できます。

2. 活用例

Zoho Creatorを使用して、学生、教職員、志願者向けの包括的なポータルを構築する教育機関を例に考えてみましょう。ポータルページを使用することで、志願者のオンボーディング、学生向けリソースの提供、教職員とのやりとりなど、ユーザーごとのニーズに合わせた完全で体系的な体験を、ブランドイメージに沿った一貫した操作画面内で設計できます。

ホームページ：おすすめコース、プログラムの特長、教職員の実績、重要なお知らせを掲載します。
入学案内ページ：入学希望者向けに、出願手続き、出願資格、期限、必要書類の詳細を提供します。
コースカタログページ：受講可能なコースを、説明、スケジュール、担当教員の情報とともに表示します。
学生ダッシュボード：学生が履修中のコース、課題、成績、通知を確認できる個人用スペースを提供します。
教職員・研究ページ：教職員のプロフィール、研究内容、出版物、連絡先の詳細を紹介します。
イベント・お知らせページ：今後のセミナー、ワークショップ、キャンパスイベントのほか、試験日程、結果、規定の変更などの重要な更新情報を共有します。
サポート／ヘルプページ：学生や志願者向けに、よくある質問、連絡先、サポートリソースを提供します。

この方法により、学生の利用体験全体を通じて、体系的で魅力的かつ一貫性のあるポータルを提供できます。Zoho Creatorのポータルを使用することで、この教育機関は外部ツールへの依存を減らしながら、Webサイトのような完成度の高い操作画面を構築できます。

3. ポータルページへの移動ガイド

左側のパネルで［公開］→［ポータル］に移動し、対象のポータルを選択して、右側の［ポータルページ］タブを開きます。カスタマイズを開始するには、［ビルダーを開く］をクリックします。

4. ポータルページ

4.1. ポータルページの種類

ポータルページには標準ページとカスタムページの2種類があり、それぞれポータル体験において異なる役割を持ちます。

標準ポータルページ

これらは、サインイン、サインアップ、パスワードのリセット、パスワードを忘れた場合など、ユーザーがポータルにアクセスするために必要なシステム生成ページです。削除することはできませんが、ブランドや要件に合わせてレイアウトや外観をカスタマイズできます。ポータルページをカスタマイズする方法をご確認ください。

カスタムポータルページ

これらは、ポータル体験を拡張するために管理者が作成するページです。ランディングページ、オンボーディングフロー、用途に合わせた業務固有のコンテンツの作成に使用でき、より包括的でパーソナライズされたポータルを設計できます。

標準ページはポータルの基本機能を確保し、カスタムページは対象ユーザーに合わせたやりとりを柔軟に設計できるようにします。

4.2. ポータルページビルダー

ポータルページビルダーは、コンポーネントとレイアウトコントロールを使用してポータルページを設計、構成、設定できる一元的なビジュアル作業スペースです。コンポーネントを追加し、レイアウトを整理し、構造化された環境内でプロパティを設定することで、ドラッグ＆ドロップ操作の画面でポータルページを作成できます。最初から作成することも、事前作成済みテンプレートを選択して要件に応じたページをすばやく作成することもできます。

ビルダーの操作画面は、ポータルページを効率的に作成および管理するための複数のセクションに分かれています。

1. 上部ペイン - ページの操作とアクション

上部ペインには、アプリケーションの識別、ポータルページの管理、ページ単位の操作に使用するコントロールが含まれています。

要素	説明
アプリケーション名	ポータルが属するアプリケーションの名前が表示されます。
ポータルページのドロップダウン	既存のポータルページを切り替えることができます。ページは探しやすいように、標準とカスタムのカテゴリに分類されます。ページを選択すると、編集用にビルダーに読み込まれます。
［新しいポータルページの作成（+）］	新しいポータルページを追加し、設計を開始できます。
［元に戻す］／［やり直す］	ビルダーで直近に行った変更を取り消し、または復元します。
［ポータルページの設定］	ページ単位のプロパティを設定できる設定パネルを開きます。
［保存］	ポータルページに加えた変更を保存します。
［閉じる］	ポータルページビルダーを終了し、ポータルタブに戻ります。

2. 左側ペイン - コンポーネント

左側ペインには、ポータルページの設計時に使用できるコンポーネントが一覧表示されます。これらのコンポーネントをビルダーの作業スペースにドラッグして配置し、ポータルページのレイアウトと機能を構成できます。利用可能なすべてのコンポーネントはこちらで確認できます。

3. ビルダーの作業スペース

中央のビルダースペースは、ポータルページを作成および構成するメインの設計エリアです。この「見たままがそのまま反映される」作業スペースでは、コンポーネントの配置、レイアウトの定義、ユーザーに表示されるとおりにポータルページを視覚的に作成できます。

4. 右側ペイン - コンポーネントのプロパティ

右側ペインには、ビルダーの作業スペースで現在選択されているコンポーネントの設定オプションが表示されます。ここから、外観、動作、その他のコンポーネント固有の設定などのプロパティを変更できます。利用可能なすべての共通プロパティと特定のコンポーネントに固有のプロパティを確認できます。

4.3. ポータルページのコンポーネント

ポータルページは、コンテンツの構成、情報の視覚的な表示、ポータル内でのユーザー操作を可能にする、設定可能なコンポーネントの集合を使用して作成されます。これらのコンポーネントは、コンポーネントペインからドラッグ＆ドロップしてビルダーの作業スペースに配置し、ポータルページのレイアウトを設計できます。

コンポーネント	説明
テキスト	テキストは、ポータル内に見出し、説明、手順、案内メッセージなどの文章コンテンツを追加するために使用します。ユーザーを案内し、重要な情報を分かりやすく伝えるのに役立ちます。
画像	画像は、ポータルページにバナー、イラスト、商品画像などの視覚的なコンテンツを表示するために使用します。全体の見た目を向上させ、情報を視覚的に伝えるのに役立ちます。
アイコン	アイコンは、ポータル内の操作、機能、セクションを表すために使用する図形シンボルです。画面を理解しやすくする視覚的な手がかりを提供します。
キャンバス	キャンバスは、ページ内のセクションで複数のコンポーネントを整理して配置するための柔軟なレイアウト用コンテナーです。コンテンツを構造化し、レイアウトを効果的に管理するのに役立ちます。
ナビゲーション	ナビゲーションは、ポータル内の別のページやセクションへ移動するためのメニューやリンクを追加するために使用します。ポータル内をスムーズかつ直感的に移動できるようにします。
ヒーローセクション	ヒーローセクションは、ページ上部で重要なコンテンツを強調するために使用します。通常、テキスト、画像、行動喚起を組み合わせて注目を集め、重要な情報を伝えます。
フォーム	フォームは、ポータル内でユーザーの入力を収集して送信するために使用します。ユーザーがページ上で直接情報を入力できるため、やり取りが可能になります。
フッター	フッターはポータルページの下部に表示され、補助リンク、連絡先情報、追加のナビゲーション項目などを含みます。補足コンテンツに簡単にアクセスできるようにします。
ブランディング	ブランディングは、ポータル内にロゴやブランド用のビジュアルなどの要素を追加するために使用します。一貫性があり、認識しやすい外観を維持するのに役立ちます。
テキストコンポーネント	テキストコンポーネントでは、見出し、小見出し、段落などの構造化された要素を使用できます。コンテンツを整理し、分かりやすく読みやすい形式で表示するのに役立ちます。
タイル	タイルは、機能、操作、セクションを強調するカード形式のレイアウトでコンテンツを表示します。情報にすばやくアクセスできるよう、視覚的に整理して提示できます。

4.4. 共通プロパティ

ほとんどのコンポーネントには、ポータルページ内の要素の見た目や配置を制御するための共通のスタイル設定とレイアウトのプロパティがあります。

各コンポーネント内の行と列もカスタマイズできます。行の設定には、間隔、塗りつぶしの色、HTMLの編集、枠線があります。列の設定には、塗りつぶしの色と枠線があります。列の幅は、境界線をドラッグして調整できます。

プロパティ	説明
レイアウト	レイアウトでは、ページ内でコンポーネントをどのように配置し、揃えるかを定義します。構造化され、バランスの取れたレイアウトを維持できるよう、要素を効果的に整理できます。
表示プロパティ	表示プロパティでは、ページ上でコンポーネントをどのように表示するかを決定します。レイアウト内でのコンポーネントの表示と見せ方を制御します。
背景	背景設定では、コンポーネントの背後の見た目を定義します。色、画像、スタイルを適用して、ページの見た目を向上させるために使用できます。
余白	余白では、コンポーネントのコンテンツと枠線の間のスペースを定義します。コンポーネント内の読みやすさと間隔を改善するのに役立ちます。
角丸	角丸では、コンポーネントの角の丸みを制御します。調整することで、角をシャープにしたり、よりなめらかな丸みのある角にしたりできます。
枠線	枠線では、コンポーネントの外枠を定義します。スタイル、太さ、色を調整してカスタマイズすることで、要素を強調したり区切ったりできます。
影	影は、シャドウ効果を作成してコンポーネントに奥行きを加えます。要素を強調し、ページ上の視覚的な階層を分かりやすくするのに役立ちます。

4.5. コンポーネント固有のプロパティ

一部のコンポーネントには、そのコンポーネントの種類に固有の追加プロパティがあります。これらのプロパティを使用すると、特定の動作や視覚要素を設定できます。

プロパティ	対象コンポーネント	説明
フォントファミリー	テキスト	フォントファミリーを選択して、ポータルに表示されるテキストの書体を定義できます。これにより、一貫した視覚的な印象を維持し、各セクションの読みやすさを向上できます。
フォントの太さ	テキスト	テキストの太さ（例：細字、標準、太字）を調整して、重要なコンテンツを強調し、分かりやすい視覚的な階層を作成できます。
フォントサイズ	テキスト	テキストのサイズを設定して、ポータル内のコンテンツを読みやすくし、適切に強調できます。
テキストの色	テキスト	テキスト要素に色を適用して、ブランドガイドラインに合わせ、視認性とコントラストを向上できます。

テキストの配置

テキスト

テキストは水平方向（左、中央、右）に配置でき、コンテナー内でのコンテンツの表示方法を調整できます。

垂直方向の配置

テキスト

テキストはコンテナー内で垂直方向に配置でき、適切な位置揃えとバランスの取れたレイアウトを実現できます。

パディング

すべてのコンポーネント

パディングを適用して、コンポーネントのコンテンツと端の間の内側の余白を調整し、レイアウトと読みやすさを向上できます。

画像ソース

画像

画像をアップロードしてポータルページに表示し、視覚的な見栄えを高めることができます。画像は通常、ポータル内のバナー、ロゴ、その他の説明用コンテンツに使用されます。

画像のフィット

画像

画像がコンテナー内に収まる方法を調整し、さまざまな画面サイズで適切に表示されるようにできます。

画像の位置

画像

コンテナー内の画像の位置を設定して、配置やフォーカス範囲を調整できます。

アイコン

利用可能なアイコンライブラリーからアイコンを選択し、ポータル内の操作やセクションを表すことができます。アイコンは、編集、削除、ナビゲーションなどの操作を視覚的に示し、操作画面をわかりやすくします。

キャンバスの種類

H-Stack, V-Stack

キャンバスの種類を設定してレイアウトの動作を定義し、ページ全体の構造をより細かく制御できます。

アイテムの配置

H-Stack, V-Stack

コンテナー内のアイテムを交差軸に沿って配置し、位置を調整して一貫したレイアウトを維持できます。

レイアウトスタイル

H-Stack, V-Stack

レイアウトスタイル（行、列、グリッドなど）を設定して、コンテナー内で子要素をどのように配置するかを定義できます。

オーバーフロー

H-Stack, V-Stack

オーバーフローの動作を設定して、コンテナーの境界を超えるコンテンツの扱い（非表示、スクロールなど）を制御できます。

コンテナーの背景

フォーム

コンテナーに背景色やスタイルを適用して、視覚的な区切りを明確にし、ポータルのデザインに合わせることができます。

コンテナーのパディング

フォーム

コンテナー内のパディングを調整して、コンテンツと枠線の間隔を制御し、レイアウトの一貫性を高めることができます。

コンテナーの角丸

フォーム

コンテナーの角の半径を変更して、角をシャープまたは丸くし、見た目を向上できます。

コンテナーの枠線

フォーム

コンテナーの周囲に枠線を適用し、スタイル、幅、色をカスタマイズして、輪郭をより明確にできます。

コンテナーの影

フォーム

コンテナーに影の効果を追加して奥行きを出し、要素を背景から目立たせることができます。

見出しの色

フォーム

フォーム内の見出しテキストに色を適用して、他のコンテンツと区別し、読みやすさを向上できます。

本文の色

フォーム

フォーム内の本文テキストの色を設定して、操作画面全体で明瞭さと一貫性を確保できます。

項目の背景色

フォーム

入力項目に背景色を適用して表示設定を改善し、他の要素と区別できます。

項目の枠線の色

フォーム

入力項目の枠線の色をカスタマイズして、フォーカス表示と視認性を高めることができます。

差し込み項目のテキスト色

フォーム

入力項目内の差し込み項目テキストの色を設定して、見やすくしながらユーザー入力と区別できます。

ボタンのテキスト色

ボタン

ボタンのテキスト色をカスタマイズして、読みやすさを確保し、全体のデザインに合わせることができます。

ボタンの背景色

ボタン

ボタンに背景色を適用して、視覚的に目立たせ、識別しやすくできます。

ボタンの枠線

ボタン

ボタンに枠線を適用し、スタイル、幅、色をカスタマイズして見た目を向上できます。

リンクの色

リンク

リンクの標準色を設定して、ブランドに合わせ、認識しやすくできます。

リンクテキストの色

リンク

リンクテキストの色を状態や状況に応じてカスタマイズし、使いやすさと一貫性を向上できます。

メニュー

メニューは、ポータルの主要なナビゲーション要素です。このセクションで有効または無効にできますが、ここではメニュー構造の作成や変更には対応していません。

メニュー項目

メニュー

メニュー項目は、メニュー内の個々の項目です。最初のメニュー項目で全体のスタイル（レイアウト、間隔、タイポグラフィなど）が定義され、他のすべてのメニュー項目には一貫性を保つためにこのスタイルが自動的に適用されます。

5. 関連トピック

ポータルページの設定

6. 関連動画

カスタマーポータル

次のステップ

前のステップ

次のステップ

ポータルページの設定方法を理解したら、次のステップは、ポータルユーザーに重要な更新情報を通知するために、メール通知について理解し、設定方法を確認することです。

前のステップ

ポータルページを設定する前に、Zoho Creatorのポータルについて理解していることを確認してください。また、ポータルページを理解し、その主な機能についても把握しておいてください。