概要
ウィジェットビルダーは、Workvivo HQのカスタムランディングページ作成におけるクリエイティブエンジンであり、柔軟なウィジェットライブラリを使用して組織のホームページをデザインできます。これらのウィジェットの多くは画像を表示しますが、画像の表示サイズは、ウィジェットの種類、設定時に選択した表示スタイル、ランディングページタブに適用されるダッシュボードレイアウトの3つの要素によって決まります。
この記事では、それぞれの組み合わせにおける推奨画像サイズとアスペクト比を示します。適切なサイズを使用することで、不要なトリミングや歪みを回避し、カスタムランディングページがどのレイアウトでも洗練された見た目になることが保証されます。
重要：画像はウィジェットの設定時ではなく、ソースコンテンツの作成時（ニュース記事、イベント、旅行プランの作成時など）にアップロードされます。そのため、レイアウトごとに異なる画像サイズを設定することはできません。この記事で推奨されているサイズは、各レイアウトに最適な解像度を示していますが、 2:1のアスペクト比を維持している限り、画像は異なるレイアウトでもレスポンシブコンテナに合わせて自動的にリサイズされます。
ダッシュボードのレイアウト
カスタムランディングページのダッシュボードグリッドゾーンは、4種類のレイアウト構成をサポートしています。レイアウトによって列幅が異なるため、ウィジェット画像の表示方法に直接影響します。
| レイアウト | 説明 |
|---|---|
フィード＋両側のウィジェット |
中央にフィードカラムがあり、左右に幅の狭いウィジェットカラムが配置されている。 |
3列グリッド |
等間隔に配置された3つの列 |
2列グリッド – 均等幅 |
幅が等しい2つの列 |
| 2列グリッド – 左展開 | 左の列は幅が広く、右の列は幅が狭い。 |
注：ウィジェットはページ上部のヘッダーゾーンにも配置でき、その場合は全幅で表示されます。この記事に掲載されている画像のサイズは、ダッシュボードのグリッドゾーンの配置に基づいています。
注目のニュース、ニュース、注目のページ＆ページ
リストスタイル（デフォルト、狭い列幅）
| レイアウト | 推奨サイズ（幅×高さ） | 推奨比率 |
|---|---|---|
フィード＋両側のウィジェット |
245 × 122.5ピクセル |
2:1 |
3列グリッド |
334 × 167ピクセル |
2:1 |
| 2列グリッド - 左側拡張（右列） | 345 × 172.5ピクセル |
2:1 |
モザイクスタイル（自動スタイル、幅広柱、3点表示）
| レイアウト | 推奨サイズ（幅×高さ） | 推奨比率 |
|---|---|---|
| 2列グリッド - 均等幅 | 200 × 100 ピクセル |
2:1 |
| 2列グリッド - 左展開 | 352 × 176ピクセル |
2:1 |
カルーセル形式（手動切り替え、単一アイテム）
| レイアウト | 推奨サイズ（幅×高さ） | 推奨比率 |
|---|---|---|
フィード＋両側のウィジェット |
245 × 122.5ピクセル |
2:1 |
3列グリッド |
334 × 167ピクセル |
2:1 |
| 2列グリッド - 均等幅 | 530 × 265ピクセル |
2:1 |
| 2列グリッド - 左側拡張（左列） | 352 × 176ピクセル |
2:1 |
| 2列グリッド - 左側拡張（右列） | 345 × 172.5ピクセル |
2:1 |
今後のイベント、イベント＆旅
コンパクトスタイル（狭い列幅）
| レイアウト | 推奨サイズ（幅×高さ） | 推奨比率 |
|---|---|---|
フィード＋両側のウィジェット |
245 × 122.5ピクセル |
2:1 |
3列グリッド |
334 × 167ピクセル |
2:1 |
| 2列グリッド - 左側拡張（右列） | 345 × 172.5ピクセル |
2:1 |
拡張スタイル（幅広カラム、説明文の表示）
| レイアウト | 推奨サイズ（幅×高さ） | 推奨比率 |
|---|---|---|
| 2列グリッド - 均等幅 | 530 × 265ピクセル |
2:1 |
| 2列グリッド - 左側拡張（左列） | 352 × 176ピクセル |
2:1 |
トレンドのスペース＆スペース
カルーセルサムネイル
| レイアウト | 推奨サイズ（幅×高さ） | 推奨比率 |
|---|---|---|
フィード＋両側のウィジェット |
245 × 122.5ピクセル |
2:1 |
| 2列グリッド - 均等幅 | 530 × 265ピクセル |
2:1 |
Billboards機能
| スタイル | 推奨サイズ（幅×高さ） | 推奨比率 |
|---|---|---|
| 単一バナー画像 | 269 × 134.5ピクセル（最小） |
- |
同じ比率の大きな画像は、きれいに縮小されます。ウィジェットごとに最大5つの広告アイテムを追加できます。
カウントダウンクロック
| スタイル | 推奨サイズ（幅×高さ） | 推奨比率 |
|---|---|---|
| 背景/ヘッダー画像 | 245 × 122.5ピクセル |
2:1 |
注目のポッドキャスト／最新ポッドキャスト
| スタイル | 推奨サイズ（幅×高さ） | 推奨比率 |
|---|---|---|
| カバー | 400 x 400ピクセル |
1:1 |
カスタム画像アップロード機能のないウィジェット
以下のウィジェットは、カスタム画像のアップロードをサポートしていません。画像はシステムによって生成されたものか、ソースコンテンツから継承されたもののいずれかです。
- 注目のドキュメント- システムで生成されたファイルタイプのアイコンを表示します
- おすすめアプリ／お気に入りアプリ- アプリの登録済みアイコンを表示します
- クイックリンク- アプリの登録済みアイコンを表示します
- マイチーム- ユーザーのプロフィール写真アバターを表示します
- 投稿- 元の投稿から画像を継承します
最高の結果を得るためのヒント
2:1のアスペクト比を優先してください。画像はウィジェットごとではなくソースコンテンツレベルで設定されるため、2:1の比率を維持することが最も重要なことです。これにより、ダッシュボードのレイアウトに関わらず、画像が綺麗にリサイズされることが保証されます。
ヘッダーゾーンの画像は異なる場合があります。ヘッダーゾーンにドラッグされたウィジェットは、全幅表示に昇格されます。この記事に記載されているサイズは、ダッシュボードのグリッドゾーンに適用されます。