サイトモック

ワイヤーフレーム相当のデザイン指針

1. 前提

項目 | 内容
最大横幅 | 1200px
コンテンツ幅 | 1100px
左右余白 | auto
ブレイクポイント | PC：1200px〜、SP：〜768px

2. レイアウト

a. Hero

サイズ
- PC：1920 × 900
- SP：750×1000
- 肉 / 酒の象徴的な1点ビジュアル or ループ短動画

b. Welcome

サイズ：600×400
- 比率：3:2
- 背景：桜島市の風景
- 右画像：県の位置

PC表示：横組み
SP表示：縦組み

c. Recommend

recommend.php

• WP化：「カスタム投稿タイプ」に置き換える


• サイズ：360×240

* 比率：3:2
* 肉 / 酒 / 野菜

PC表示：横 3列組み
SP表示：縦 1列組み



d. project


project.php


• サイズ：360×200

* 比率：16:9
* 子育て / 環境 / 観光のイメージ

PC表示：横 3列組み
SP表示：縦 1列組み



e. portal



• サイズ：{外部サイト要確認}

形 | サイズ
横長 | 88x31px / 88x32px
横長・縦積 | 120x60px / 180x70px
横長 | 234x60px / 240x120px
縦積 | 300x250px
横帯 | 468x60px
長方形 | 640x200px
横帯 | 728x90px

PC表示：横 5列組み
SP表示：縦 2列組み

f. Information

テキスト or テキスト画像（illustratorで作成）

3. 共通パーツ

header

header.php

PC表示：横組み
SP表示：縦組み or ハンバーガーメニュー

footer

footer.php

PC表示：横 2列組み
SP表示：縦 1列組み

4. ダミー画像

ダミー用CSS

css

.dummy {

  background: #eee;

  position: relative;

}



.dummy::after {

  content: "DUMMY IMAGE";

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: #999;

  font-size: 14px;

}

5. デザインシステム

CSS変数