Glass とは
Glass は、EC-CUBE 4.2 系 / 4.3 系向けのデザインテンプレートです。適用すると、ショップ全体の見た目が入れ替わります。
カード・ヘッダー・ボタンなどの面を、半透明にして背後を透かします。 不透明な色の面は、その色自体が主張します。商材の色とぶつかることもあります。半透明の面は背後の色を拾うため、写真の上に置いても、白い商品の隣に置いても浮きません。商品写真の色を邪魔しないことを狙った作りです。

配色は 4 種類、それぞれにダーク
aurora(紫×水色)・cosmetic(桜色)・aqua(翡翠色)・mono(無彩色)の 4 種類。 ブロックの 2 行を書き換えるだけで切り替わります。CSS を書く必要はありません。
8 通りすべてについて、文字と背景のコントラストが WCAG 2.1 AA(4.5:1)を満たすことをスクリプトで検証しています。



写真が無くても成立します
買った直後、まだ写真を入れていない状態でも、CSS で描いた面だけで形になります。 写真はあとから差し替えられます。
下は、写真を 1 枚も入れていない状態のトップページです。

商品一覧と商品ページ
商品一覧には、NEW・残りわずか・品切れ・商品タグが写真の上に出ます(EC-CUBE 標準の一覧にはタグが表示されません)。写真にカーソルを乗せるとクイックビューが開き、ページを移らずに規格を選んでカートへ入れられます。


設定は管理画面から
文言・配色・写真・ロゴは、[コンテンツ管理] → [ブロック管理] で変えられます。 FTP も、ファイルの書き換えも必要ありません。

数字で言えること
| 対応バージョン | 4.2 系 / 4.3 系に、同一パッケージのまま |
| 本体ページの上書き | 6 ファイルだけ(4.2 と 4.3 で内容が同じものに限る) |
| 標準プラグイン | 関連商品・クーポン・おすすめ商品管理・商品レビュー管理の 4 種に対応 |
| 外部へのリクエスト | 0(Font Awesome 不使用。アイコンは SVG を内蔵) |
| 配色のコントラスト | 8 通りすべて WCAG 2.1 AA |
| スクロール中のフレーム時間 | p95 9.2ms 以下(16.7ms 超のコマは 137 回中 0 回) |
それぞれの根拠は、次の「壊れないための作り」にあります。