スマートフォンサイト制作品質ガイドライン

スマートフォンサイト制作品質ガイドライン
株式会社 WEBY
2014.10.01 改訂
目的
・クライアント様へ安定した品質のサイト提供
制作にあたっての心がけ
・サイト制作のベースとなる機種は【iPhone5s】とする。
・retina ディスプレイに合わせた画像の切り出しをする。※ 1.デザイン基本事項参照
・HTML5+CSS3+JS で構築する。
・コーディングの際、画像サイズは半分に指定をし配置する。
※原寸 120px×20px であれば width=”60” height=”10”ということになる。
・サイト文章は見やすくなるよう心掛ける。
・サイトコンテンツに関して、コンテンツ毎境目がわかりやすくなるよう配慮すること。
1.デザイン
基本事項
・弊社提供の iphone_ui.psd を利用しデザインをする。
・フォントサイズは原則 14px 以上とし、補足などにのみ 12px フォントは使用する。
・デザイン解像度は、retina ディスプレイに対応した 640×1136px で制作し、切り出す。
・切り出しの画像サイズは、縦横共に偶数に統一する。
・jpg、png の使い分けについて、写真が含まれるものは jpg、イラスト等は png で切り出す。
・jpg 切り出しの際は、画質を 80 未満にすること。
配色
・原則、全てにおいて黒(#000000)は使用しない。
・コンセプトカラーは原則 3 色以内に抑える。
・背景とフォントカラーはなるべくコントラストをつける。
・ボーダーにはサイトのコンセプトカラーもしくはグレーを使用する。
リキッドデザイン
・原則、指定がない限りスマートフォンのランドスケープモードにも対応したデザインにする。
・ランドスケープモード時に文字横に配置した画像の回り込みが起こらないない様、
overflow:hidden;などで回避すること。(PC で画面横幅を伸ばして確認。)
2.コーディング
■フォルダ・ファイル管理方法について
HTML
HTML ファイル名は各ページごと index.html をトップページとする。
・上記に従って下層ページを作成する際は、ページごとにディレクトリを作成する。
・ページのディレクトリ名は、なるべく短く設定すること。下記参照
サービスページ→/service/index.html
会社概要ページ→/company/index.html
お問い合せページ→/inq/index.html
サンクスページ→/inq/thanks.html
images
images フォルダは、トップディレクトリのみに配置する。
・全ページに利用する images ファイルは【global】フォルダに格納する。
・各 HTML フォルダに当たるフォルダ名を作成し格納する。
・ images ファイル名は、
【タイプ_用途.png(.jpg)】などとなるよう、概ね内容が何か解るようにリ
ネームする。
参考例
images/global/logo_top.png
images/global/btn_event.png
images/service/pic_content1.jpg
images/inq/cap_form.png
リンクについて
・サイト内リンクの指定をする際は、極力 index.html を省き「../」という用に URL の統一をする
こと。※アンカーリンクの場合などを除く。
CSS
・ css フォルダは、トップディレクトリのみに配置する。
・ css ファイルは、global.css（弊社提供テンプレート）のみを利用し、すべて
のスタイルはこの中に記述する。
・基本的には、CLASS のみを利用する。
・ ID/CLASS 名はどこに利用しているか概ね解るよう設定する。
参考例
.logo
.inq_bg
・ CSS 内に記載されているカテゴリ内に記述する。
スタイルシート「global.css」内記述の下記項目ごとに記述。
[1-GLOBAL]
[2-HEADER]
[3-FOOTER]
[4-CONTENTS]
[5-UNDER PAGES]
[6-JAVASCRIPT]
・ CSS 背景画像サイズ指定方法
参考例（原寸サイズ 4×100px の場合）
background-size:2px 50px;
-moz-background-size:2px 50px;
-ms-background-size:2px 50px;
-o-background-size:2px 50px;
-webkit-background-size:2px 50px;
height:50px;
・CSS 背景グラデーション指定
下記のサイトにて生成
http://www.colorzilla.com/gradient-editor/
・CSS ボタン生成
下記のサイトにて生成
http://css3button.net/JavaScript
JavaScript
・ js フォルダは、トップディレクトリのみに配置する。
・弊社提供の index.js を利用する。
・ js を利用する際は js ファルダ内、jquery を利用する。（外部読み込みは基本 NG）
・その他、利用する js は、jquery のプラグインに限定する。
WEBY 担当者用マニュアル
1.スマートフォン転送設定
・転送設定には下記 URL よりダウンロードしたファイル「/script/script.html」内のソースを利用
すること。
http://www.smartphone-research.com/public/create/docs.zip
・お客様のサイトの文字コードを確認して、文字コードにあったソースを組み込むこと。
2.お客様サーバへアップする際の注意
・指示がない場合はスマートフォンサイトを/sp/ディレクトリを作成し、アップロードする。この際
必ず該当ディレクトリへ移動してからファイルをアップロードすること。
・編集したファイルのみアップロードすること。
・更新時は、必ず最新ファイルをダウンロードしてから編集を行う。
・アップロード時は必ず上長に一言確認してから行うこと。
以上

Download Report