株式会社シーエムエー（以下当社）は制作指針に基づきWebサイト制作を行い、お客様への品質の担保と品質の維持に努めます。
また、品質向上のため定期的な見直しと継続的な改善を図ります。
- 1.推奨環境
- 2.サーバー設定・セキュリティ対策
- 3.ヒアリング・デザイン作成
- 4.ECサイト設計
- 5.サイト設計・SEO
- 6.CMS
- 7.アクセシビリティ
- 8.EFO対策
- 9.サイト公開時
- 10.アフターフォロー
1.推奨環境
文字コード
- 要件に含まれない限り、文字エンコーディングはUTF-8で制作
- 日本語は<html lang="ja">で指定
拡張子
- 要件に含まれない限り、PHPを使用
※サイトの規模やコンテンツ内容により異なります。
HTML
- HTML Living Standard・CSS3で制作
- HTMLは文書構造に沿ってマークアップ
- レイアウト・装飾はCSSにて調整
フォントサイズ
16px以上
推奨ブラウザ・OS
| PC | スマートフォン |
|---|---|
| Windows Google Chrome（最新版） Mozilla Firefox（最新版） Microsoft Edge（最新版） |
Android（最新版） Google Chrome（最新版） |
| Mac Safari（最新版） |
iPhone iOS（最新版） Safari（最新版） |
サポート対象外ブラウザ・OS
Internet Explorer 11（2022年6月15日サポート終了のため）
※上記に掲載のないブラウザは別途ご相談ください。
※タブレットについては、PC表示を基準に調整します。
Javascript・CSSの設定について
- Javascript・CSSの設定は有効
スタイルシート
- スタイルシートはCSS3に準ずる
- 要件に含まれない限り、文字コードはUTF-8を使用
クッキーの使用
- フォームやショッピングカート、会員サイトなどの各種プログラムにおいてクッキーを使用
※お客様のブラウザや端末の設定により、クッキーを無効化した場合、フォームやショッピングカート、会員サイトの機能がご利用いただけない可能性がございます。
2.サーバー設定・セキュリティ対策
| PHPバージョン | MySQLバージョン |
|---|---|
| 8.x以上推奨 Wordpressを利用する際は必ず最新のPHPのバージョンを確認 |
5.6以上推奨 |
- FTP情報は第三者に開示しない
- SSL（暗号化通信）は必須
※証明書の更新のため、制作次年度以降は毎年費用が発生します。 - WAF（Webアプリケーションファイアウォール）はセキュリティ対策として推奨
※導入の場合には、別途費用が発生します。
※一部のアプリケーションで動作不良を起こす可能性があるため検証してから導入します。 - メールサーバの導入支援は別途費用で対応
- 公開前のテスト環境は必ずベーシック認証を設定
- htaccessが許可されたサーバーを推奨
3.ヒアリング・デザイン作成
- デザインヒアリングの実施・提案
- ワイヤーフレームの作成
- トップデザインは基本1案のみ
※2案以上をご希望の場合は別途ご相談ください。 - 制作ツールはAdobeXDまたはPhotoshopCC
※上記以外のツールでの制作は承りません。 - 当社にて購入した素材（画像・動画など）の著作権は当社へ帰属
※当社購入素材のお渡しは二次利用となり提供ができません。
※代理購入素材の権利はお客様へ帰属します。 - 当社で制作した創作物（ロゴ、PSDファイル、撮影写真、動画）の著作権は当社へ帰属
別途ご相談対応
- 複雑な図・イラストの作成
- 過度な画像の補正、切り抜きなど
- 1ページ内に想定以上の図やイラストの配置
- ページの印刷対応
4.ECサイト設計
| 対応モール | 推奨ASP | その他のサービス |
|---|---|---|
| 楽天 Yahooショッピング Wowma! ポンパレモール Amazon（ベンダーセントラル） |
FutureShop2 Makeshop カラーミー ショップサーブ shopify |
EC-CUBE4（symfony） |
| ※新規構築時までに契約・初期設定は完了してください。 ※対象モールの仕様により対応できないことがあります。 |
※利用ASPの仕様に合わせて構築します。 ※ASPの仕様上、意図したデザインにならないことがあります。 |
※当社の開発費用が別途必要となります。 ※本番環境と同じテスト環境を構築して制作します。 |
非サポート・別途ご相談対応
- EC-CUBE2での構築はセキュリティの問題から非推奨
※上記以外のサービスをご希望の場合は、別途ご相談ください。
5.サイト設計・SEO
PC・スマートフォン共通
- W3Cに準拠したマークアップ
- レスポンシブデザインでの制作
- ブレイクポイントは599px、1,025pxで設定
- ファビコンの設定
- Webクリップの設定
- OGPの設定
- 解析タグ（Googleアナリティクス・タグマネージャーなど）の設置
- 404エラーページを作成・設定
- 本番サーバーに不要ファイルを残さない
- ディレクトリ種別・命名ルールに基づいて設計
- WebサイトへのInstagramの埋め込みはAPIを使って設置
- CSS→JSの順番で読み込みを行う
- FLOCSSでCSS設計
- SASS記法で行いCSSへコンパイル
- 共通部分はモジュール化し、メンテナンス性を高める
- 機種依存文字は文字化けの原因になるため使用しない
- メタ情報（ディスクリプション・キーワードなど）はページごとに固有のテキストを設定
- 構造化マークアップ対応
- ページごとに固有のタイトルを設定
- 画像の代替テキストを入れる
- WebP（次世代画像フォーマット）の活用
- 可能な限りWebフォントを利用
スマートフォン
- ボタンのサイズは幅・高さ40px以上で作成
- ピンチイン・ピンチアウトが自由にできる
- 図は文字が認識できるように配慮
- スマホで電話番号をタップできる（FAXはタップしない）
- スライドコンテンツはフリック操作できる
非サポート・別途ご相談対応
- Retina対応
6.CMS
- Wordpress（最新）およびMovableType（最新）を推奨
- ログインやIP制限などセキュリティ対策の実施
- アップデートの際には、既存機能（プラグインなど）が利用できなくなる場合もあるため、お客様と相談して対応
- テスト投稿記事や画像など不要な記事・ファイルは削除
- Wordpress公開時にnoindexの設定チェックを必ず外す
- 操作マニュアルの作成・レクチャーを行う
非サポート・別途ご相談対応
- Wordpress（最新）およびMovableType（最新）以外のCMSでの構築は基本的に非対応
- 当社指定のプラグイン以外の設置は別途ご相談
- お客様側で誤ってアップデートし、不具合が発生した場合は別途ご相談
- 過去のバージョンについての不具合はサポート対象外
- 脆弱性が発見された場合は別途ご相談の上対応する
- 既存の記事の移植は別途ご相談・お見積もり
7.アクセシビリティ
- 意図しないPOPアップの禁止
- 右クリック禁止をしない（ユーザーの行動を邪魔しない）
- ブラウザの戻るボタンの禁止をしない（ユーザーの行動を邪魔しない）
- 廃止されたタグを使わない
- 情報取得の邪魔になるようなアニメーションなど過度なアニメーションはしない
- 表示に時間がかかる場合はローディング表示し、ユーザの不安を回避
- ページの読み込み速度の向上を図るため、Lazy Loadで画像を遅延ロード
- 外部リンクは別ウインドウで開く
- PDFのリンクはPDFであることがわかるようアイコンをつけ、容量も合わせて記載
- 背景色と前景色には、コントラストの差を確保
- 同一サイト内での金額の単位や日付の表記方法を統一
- 同一サイト内でのフォント統一
- 同一サイト内での矢印アイコンのデサインを統一
- 同一サイト内での表記ルール
- 項目リストは、できるだけ番号をつけてわかりやすく
- 長い文章は適切な見出し、改行、段落をつけて見やすく
- 文字と文字の間にスペースをつけて分割しない
- 文字が認識できないようなコントラストを避ける
- 目的のページに迷わずアクセスできる
- 動画等の音声の初期値はOFF
- ページの先頭へ戻るボタンの設置
- youtubeの埋め込みタグに関連動画を表示させない
※元のYouTubeの仕様にもよります。
8.EFO対策
- 必須設定を分かりやすく表示
- 確認画面は入力画面の値を引き継ぎ表示
- 完了画面はトップページに戻るボタンを設置し、自動返信メールが届くことをユーザーに伝えるための文章を記載
- 自動返信メールはお客様の基本情報（会社名・住所電話番号）を署名として記載
- ユーザーの現在位置がわかるフロー図（入力画面・確認画面・完了画面）の設置
- 必須のエラー表示を必ず設定
- 戻るボタンは確認ボタンより小さく目立たないように
- 郵便番号を入力すると住所の市区町村までは自動で補完
- 未入力のフィールドは視覚的に判別しやすく
- プライバシーポリシーのリンクもしくはチェックボタンを設定
- 電話番号を半角に自動変換
- 郵便番号や電話番号のハイフンは自動的に付与もしくは削除
- 入力項目は入力しやすい大きさで設置
- input要素のtype属性には適切な指定（number・email）
- label要素を指定してフォームを使いやすく
- 確認画面から戻るボタンを押しても入力内容は保持
- 文字入力にエラーがある場合は、瞬時にエラー内容を表示
- 入力漏れやエラーがある場合は、送信ボタンをクリックできないように
- 入力する項目数は必要最低限にし、ユーザーの手間を極力かけない
非サポート・別途ご相談対応
- ファイル納品（パーミッションやサーバーの環境により動作しないことがあるため）
- 入力画面をページ分割する仕様
- お客様側でのフォームの修正（項目の追加やテキスト修正）
9.サイト公開時
当社の確認完了後に、納品後チェックリストを共有させていただきます。
お客様の環境でもご確認の協力と検収をいただきます。
PC・スマートフォン共通
- 当社推奨環境で表示チェック
- リンク切れ・リンクミスがないかチェック
- GoogleのUX指標Core Web Vitalsでチェック
- トップページの表示速度を適切に
- htaccessによるwwwとindexの統一
- ダミー画像が入ってないかチェック
- PNG、JPEGなど画像の圧縮
- htaccessによるブラウザキャッシュと圧縮を有効
- フォームの送信テスト（自動返信と受信画面の添付）
- 構造化マークアップの動作チェック
- noindexの設定を入れている場合は解除のチェック
- sitemap.xmlのアップ
- OGPの設定が正しいか表示をチェック
- 不要なファイルをサーバーにアップしない・残さない
- 既存サーバーでの切り替えは既存サイトのバックアップ後に対応
- CMSなど利用している場合には記事の差分のチェック
- Googleアナリティクスの計測チェック
スマートフォン
- iPhone最新、Android最新の端末で確認
10.アフターフォロー
- 不具合や間違いなどの瑕疵対応は制作契約書の内容に基づいて対応
- 運用開始後の保守・メンテナンス・更新サポートについては、相談の上別途契約