「Japan Web Production Standards」について

UIコンポーネント+プロトタイピング+アクセシビリティ+CMS

Japan Web Production Standardsは統一ルールに基づいたCSSのUIコンポーネントとJavaScriptのUIコンポーネントを組み合わせたwebサイト用のビジュアルスタイルガイドを含むフレームワークです。
UIコンポーネントを組み合わせてwebページを構築していく手法を得意とし、CMSを構築に必要なCSS、JavaScriptがまとまっています。
また、アクセシビリティ達成基準のレベルAに加え、AAのうち一部の達成基準に配慮しています。
最終的には達成基準のすべてを満たすことを目指していますが、現時点ではすべての達成基準を満たすことはできていません。

UIコンポーネントとは

統一ルールに基づいたUIデザインパーツを組み合わせてwebページを構築していくというweb制作の手法です。PC、スマホ共通パーツを用いるレスポンシブデザインと親和性が高いのが特長です。
パーツは必要最小限になるため運用担当者の学習コストが低く、すぐに扱えるようになります。
また、デザインが破綻しにくくメンテナンス性も高いものになります。

プロトタイピングとは

デザインを固めてからコーディングに入る従来の方式ではなく、デザイン前に早々にCMSを仮の状態（プロトタイプ）で動かしてしまい原稿やサイト構成を作ってしまうことで、使用した上でのアイデア・問題点（求める制作物との齟齬など）の洗い出し、使用感を伴ったフィードバック、改修を公開前に行うという手法を指します。

アクセシビリティとは

「アクセシビリティ」という言葉からは、障害者への対応というイメージを持たれることが多いですが、それだけではありません。アクセシビリティが向上すれば、アクセスできる人の母数が増えます。アクセシビリティへの配慮を行う事は、障害者や高齢者だけでなく、あらゆる人に恩恵をもたらす可能性があります。また、SEOにも有利になります。

CMSとは

コンテンツ・マネジメント・システムの略で、webサイトを管理・更新できるシステムのことをいいます。

デザインリソース

StyleGuide

Download design files (XD)

アイコン部分が文字化けしてしまう方へ

このファイルでは「Google Material Icons」をアイコンフォントとして使用しています。
以下のURLから「MaterialIcons-Regular.ttf」をダウンロードして、お使いのPCにインストールすることでアイコンが文字化けせずに表示されます。

https://github.com/google/material-design-icons/blob/master/iconfont/MaterialIcons-Regular.ttf

開発ガイドライン

コーディングマナー

メンテナンス性、可読性を意識したコーディングを心がけます。
拡張性、再利用性、柔軟性、効率を意識したルールを持たせます。
要素の追加・削除のし易さを心がけます。
アクセシビリティに配慮します。

対応ブラウザ

Internet Explorer11、Microsoft Edge 最新ver、Firefox 最新ver、Chrome 最新ver Safari 最新ver
スマートフォンOSに搭載されている標準のブラウザ
旧ブラウザは閲覧性を重視します。

おおまかに説明

frontend/sourceフォルダが作業場所です。
gulp serveすることでfrontend/sourceを開発用ルートとしてファイルをwatchします。
npx gulp buildすることでfrontend/sourceを公開用に調整しhtmlへ書き出します。
画像圧縮はしていません。必要に応じて圧縮してください。
Sassのmixinはbourbonファミリーを使用・参考にします。
source/assets/src/bundle/ or /vendor/以下に配置したJSファイルは1ファイルに結合されます。

使用する主なToolについて

デバイス判定用

デバイスを判定してbodyタグに出力します。

data-device="desktop" data-touch-device="true"

環境構築

必要環境

Node 10.16.3
npm 6.9.0
yarn 1.19.0

インストール

//通常
$ cd frontend
$ yarn install

//hologramを使う場合
$ bundle install --path vendor/bundle

開発サイクル

//開発時
$ npx gulp serve

frontend/source/フォルダをルートとしてファイルをwatchします。
localhost:9000を見に行きます。


//公開時
$ npx gulp build

JS、CSSなど圧縮、または不要ファイルを削除します。
画像圧縮はしていません。必要に応じて圧縮してください。

//スタイルガイド作成
$ cd hologram
$ hologram

//docsフォルダ作成
$ npx gulp docs
hologramで書き出したファイルをdocsフォルダに移動します。

ディレクトリ構造

.
 ├── frontend
 │   ├── source（開発用）
 │   │   ├── assets
 │   │   │   ├── fonts
 │   │   │   ├── img
 │   │   │   ├── src
 │   │   │   └── sass
 │   │   │
 │   │   ├── styleguide（必要に応じてhologramで作成）
 │   │   │   ├── index.html
 │   │   │   ├── started.html
 │   │   │   └── ....html
 │   │   │
 │   │   ├── index.html（必要に応じてhtmlファイルを追加）
 │   │   ├── 404.html
 │   │   └── ....
 │   │
 │   ├── package.json
 │   ├── yarn.lock
 │   └── gulpfile.js
 │
 ├── html（公開用 ）
 │   ├── index.html
 │   └── assets
 │
 ├── design（デザインファイル）
 │   └── JWPS.xd
 │
 ├── docs（スタイルガイド表示用 必要に応じて作成）
 │   └── ...
 │
 ├── LICENSE.txt
 └── README.md

スタイルガイドについて