---
tags: yakisweets, ohayo, brand
title: 焼スイーツ
---
作成：2020/03/31（火）
担当：麻生

# 概要
- リニューアル日時：2020/03/24
https://www.ohayo-milk.co.jp/brand/yakisweets/
- 通常更新や改修が発生した時のための書き置きです。

# INDEX
- ディレクトリ構造
- Dockerについて
- Scssについて
- 定期更新について

## ディレクトリ構造

ohayo-milk.co.jp
├ dest
│ └ brand
│ 　 └ yakisweets
│ 　 　 ├ css
│ 　 　 │ └ yakisweets.css
│ 　 　 ├ img
│ 　 　 ├ index.html
│ 　 　 ├ js
│ 　 　 │ └ yakisweets.js
│ 　 　 └ old
├ docker-compose.yml
├ docker-config
├ gulpfile.js
├ package-lock.json
├ package.json
├ README.md
└ src
　 └ brand
　 　 └ yakisweets
　 　 　 └ css
　 　 　 　 ├ _import.scss
　 　 　 　 ├ _mixin.scss
　 　 　 　 ├ _userAgent.scss
　 　 　 　 ├ _variables.scss
　 　 　 　 ├ component
　 　 　 　 │ ├ _carousel.scss
　 　 　 　 │ └ ..etc..
　 　 　 　 └ yakisweets.scss

## Dockerについて
ohayo-milk.co.jpディレクトリの直下にREADME.mdがありますので、そちらを参照。

## Scssについて
「Dockerについて」のREADME.mdに書かれていますが、gulp watchが自動で走るため、docker-composeを起動すればコンパイルが行われます。

### Scssのsrcディレクトリの取り扱いについて
- ディレクトリ名がcssのままになっていますが、気が向いた時に直してください（gulpファイルの修正も必要）
- _（アンダーバー）のファイルは構成ファイルなので直接出力はされないです。全て_import.scss経由でyakisweets.scssに集約されyakisweets.cssとしてコンパイルされます。

### Scssファイルの運用について
* ID毎にcomponentディレクトリ内にScssファイルを作成しています。
* IDを追加する毎にcomponentディレクトリ内にScssファイルを新規追加してください。
* Scssファイルを新規で作成したら_import.scssファイルに@importで追記してください。
* ID以外でScssを新規で作成する場合はcssディレクトリ直下に作成してくださ
* それぞれのファイルの意味と運用方法については下記を参照してください。

●_import.scss
- 全てのファイルをここにインポートさせています。新規scssファイルを作成した場合はこちらに追記してください。

●_mixin.scss
- Sass(Scss)のmixin機能をまとめるファイル

●_userAgent.scss
- ブレイクポイントではなくiphone用やAndroid用にスタイルが必要になった場合はここに記述

●_variables.scss
- Sass(Scss)の定数定義用ファイル

●componentディレクトリ
- 各パーツ分けしたScssファイルをまとめる場所。パーツ分けに関しては下記に記述。

●パーツ分けについて
- ID毎にScssファイルを分けています。IDを増やした場合はScssファイルを新規で追加してください。

●yakisweets.scss
- インポートで集約した内容をまとめる場所。
- commonスタイルはこちらに書いています。

## その他のファイルについて
- HTML・jsファイルはdestディレクトリ内のファイルを更新・改修してくだい。

## 定期更新について
- 画像はtinypngで圧縮してください。
- https://tinypng.com/

## 改修について
- class名についてはBEMを採用しています。
- 理由はScssと相性が良いからです。
- コーディングの際は留意してください。ネーミングに関しては厳密な規則はないので一般的なBEM規則で大丈夫です。

# デザイン関連
## フォントについて

| 適用場所 | フォント名 | webフォント |
| -------- | -------- | -------- |
| 商品名の筆記体 | Eye Catching Pro | なし |
| 見出し | 明石 | 【TypeSqure】 font-family: 明石 または Akashi|
| その他本文 | 秀英横太明朝 M | 【TypeSqure】 font-family: 秀英横太明朝 M または Shuei Yokobuto Min M|
- 明石はそのままだと細すぎるので、psd上で境界線を1pxつけています。

## MVエリアについて
- Illustratorにて作成
- 右端が季節限定商品
- 写真のリンクを入れ替え、テキストを変更してください。

## 商品詳細エリアについて
- Photoshop・Illustratorにて作成
- 商品の入れ替えがあった場合には、テンプレートをもとに画像を作成し直してください。
- pc、sp両パターンあり
- 枠(ai)などの基本カラーは商品の入稿データ内メインカラーを使用すること

## ラインアップエリアについて
- psdにて作成
- ボタンの色は商品詳細エリアで使用したメインカラーと合わせること