スマートフォンサイト制作品質ガイドライン 株式会社 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/ディレクトリを作成し、アップロードする。この際 必ず該当ディレクトリへ移動してからファイルをアップロードすること。 ・編集したファイルのみアップロードすること。 ・更新時は、必ず最新ファイルをダウンロードしてから編集を行う。 ・アップロード時は必ず上長に一言確認してから行うこと。 以上
© Copyright 2024 Paperzz