A. ブラウザ幅いっぱい

• 画面幅を最大限に活用し、情報を多く表示できるためダイナミックな印象になる。
• 様々な画面サイズに対応するため、コンテンツの配置やデザインの管理が複雑になり、一貫性を保つのが難しい。

B. 固定幅で中央配置（左右に余白）

• 固定幅の配置領域を使用することで、コンテンツの配置やデザインを一貫して維持しやすい。
• 大画面ディスプレイの場合、左右に大きな余白が生じる。

A. メニュー（上部右寄せ）

• ロゴ：左側
• メニュー：右側

B. メニュー（左縦）

• ロゴ：左上部
• メニュー：ロゴ下

C. ハンバーガーメニュー（三本線）

• 三本線クリックでメニューがスライドイン
• デスクトップ版とスマホ版＝同じ形式

A. 投稿日・タイトル（縦並び）

• 時系列（縦並び）
• 投稿日とタイトルの一覧
• タイトルをクリックでその詳細（記事）ページへ

B. サムネイル・タイトル・投稿日・本文の冒頭（縦並び）

• 時系列（縦並び）
• サムネイルとテキスト箇所は横並び
• 本文の冒頭（指定文字数出力）し、サムネイル、タイトル、moreボタンで詳細頁へ

C. サムネイル・タイトル・投稿日・本文の冒頭（グリッド並び）

• 時系列（左上が最新、右下が最古）
• 格子状の配置
• 本文の冒頭（指定文字数出力）し、サムネイル、タイトル、moreボタンで詳細頁へ

D. よくあるブログ形式（縦並び）

• 記事を縦に連続表示
• 任意の箇所にmoreボタン配置可能で詳細頁へ
• 詳細頁なしも可

A. サムネイル（グリッド並び）

• マウスオーバーでサムネイル透過（クリックで詳細頁）
• マウスオーバーでサムネイル透過、タイトルがサムネイル箇所に浮き出るように表示（クリックで詳細頁）

B. サムネイル+タイトル（グリッド並び）

• マウスオーバーでサムネイル透過（クリックで詳細頁）
• サムネイル下にタイトル（所在地等）

C. サムネイル＋タイトル＋その他情報（縦並び）

• マウスオーバーでサムネイル透過（クリックで詳細頁）
• タイトルの他に詳細情報

A-1. サムネイル（クリック拡大 /ブラウザ内）

• 元のページの上に画像が拡大し、浮き上がらせる（元のページは、背景として暗くなる）
• 拡大した画像の中で左右に画像を「次へ」「前へ」推移

EXAMPLE / 動作サンプル

A-2. サムネイル（クリック拡大 /ブラウザ内orスクリーン全体）

• ブラウザ全体に黒背景色が入り、画像を表示
• 拡大した画像の中で左右に画像を「次へ」「前へ」推移
• 四方面鉤括弧アイコン（右上）をクリックでスクリーン全体に画像を広げる

EXAMPLE / 動作サンプル

B. スライドショー (サイズ固定/ブラウザの中央配置)

• 矢印、画像下のドットで画像をスライド
• サムネイルがないため、特定の画像をすぐに閲覧したい場合には不向き

EXAMPLE / 動作サンプル

C. スライドショー (ブラウザ横幅いっぱい)

• 矢印、画像下のドットで画像をスライド
• サムネイルがないため、特定の画像をすぐに閲覧したい場合には不向き
• 画質を考慮し、大きい画像を用意しないとならず、また縦画像が扱いにくい

EXAMPLE / 動作サンプル

D. スライドショー (ブラウザ横幅いっぱい/前後の画像をチラ見せ)

• 矢印、画像下のドットで画像をスライド
• サムネイルがないため、特定の画像をすぐに閲覧したい場合には不向き
• 画質を考慮し、大きい画像を用意しないとならず、また縦画像が扱いにくい

EXAMPLE / 動作サンプル