© 2012 XING Inc. All Rights Reserved. 1 CONFIDENTIAL WEB 制作ガイドライン 2013.06.13 BMB インターナショナル.

Presentation on theme: "© 2012 XING Inc. All Rights Reserved. 1 CONFIDENTIAL WEB 制作ガイドライン 2013.06.13 BMB インターナショナル."— Presentation transcript:

1 © 2012 XING Inc. All Rights Reserved. 1 CONFIDENTIAL WEB 制作ガイドライン 2013.06.13 BMB インターナショナル

2 © 2012 XING Inc. All Rights Reserved. 2 CONFIDENTIAL 目次 1. 表紙 2. 目次 3. はじめに 4. 画像の切り出し方法 5.joysound.com 独自ルール 6. オーディションの制作について 7. コーディングルール 8. 文字・記号について 9. ファイルの命名 10. ファイルの命名 -2 11. ファイルの命名 -3

3 © 2012 XING Inc. All Rights Reserved. 3 CONFIDENTIAL はじめに ページラフなどのグラフィックはレイヤーを残し、スライスを切った psd を作成してください。 また、スライス名として出力ファイル名を入力しておいてください。 ページは xhtml+css で記述してください。 確認するブラウザ 【 Windows 】： Internet Explorer 8 、 9 Mozilla Firefox Google Chrome 【 Macintosh 】： Apple Safari 4 以上 Mozilla Firefox 想定画面サイズは SVGA （ w1024×h768 ）以上 とします。 タグを閉じるのを忘れないようにしてください（ 、 など）。 ファイル容量が大きくなりすぎないように注意して下さい。

4 © 2012 XING Inc. All Rights Reserved. 4 CONFIDENTIAL 画像の切り出し方法 画像の切り出しはできるだけ、後から編集が容易となるようにおこなって 下さい。他の担当者が修正などの対応をする場合があります。 css でレイアウトを行うようにしてください。レイアウトを目的として を多用することは避けてください。※表（曲リストなど）には を使用していただいて構いません。 このように切ってしまうと 後から編集が難しい。 可能な限り、こちらのような切り方でお願いし ます。

5 © 2012 XING Inc. All Rights Reserved. 5 CONFIDENTIAL コーディングルール 指定について → 「 bmb.com 」ドメイン内のページへのリンクであれば にしない → 外部（他社）サイトへのリンク時には にする → とくに指示された場合は、指示を優先する テキストを画像に置き換える場合 ■ css で画像を背景に設定し、テキストの内容を text-indent:- 9999px で隠す ■ 画像の alt にテキストを入れ、 として貼る 上記のうち適切なほうを使用する 例）ロゴにグラフィックをデザインしたタイトルバナー的なも の： img タグ、 4 行程度のテキストをグラフィック化したも の： css で background-image を設定

6 © 2012 XING Inc. All Rights Reserved. 6 CONFIDENTIAL 文字・記号について 半角カナテキストは使わず、全角カナに変 換する 日時の日本語表記： 2012 年 1 月 11 日 11 時 11 分、アルファベット表記： 2012.1/11 11:00 のように記述。時刻は 24 時間表記（ × ： PM 11:00 ○ ： 23:00 ） ※ 別途指示された場合はその内容を優先 特殊文字「＆」などの文字をそのまま掲載 するのではなく html の文字参照を使用する。 → 但し、 title 要素内に関しては、通常のテ キストで入力する。 「〜」と「～」（「波ダッシュ」と「全角 チルダ」）は、すべて「～」全角チルダに 統一する。 文字実体参照する記号 記号文字実体参照説明 "" 二重引用符 && アンド << 小なり >> 大なり ©© 著作権 ®® 登録商標 ™™ 商標

7 © 2012 XING Inc. All Rights Reserved. 7 CONFIDENTIAL ファイルの命名 コーディングファクトリー社の命名ルールを使用 Ⅵ ファイル作成ルール 1. ファイル名使用文字 –1.1. ファイル名に使用できる文字は以下のとおり。（ファイル名には拡張子必 須） ■ 「 a 」～「 z 」までの小文字のアルファベット（ 1 バイト） ■ 「 0 」～「 9 」までの英数字（ 1 バイト） ■ 「 - （ハイフン）」と「 _ （アンダースコア）」（いずれも 1 バイト） ■ 先頭には「 - （ハイフン）」「 _ （アンダースコア）」を使用しない。 ※ファイル名に 2 バイト文字とスペースは不可 2. ファイル名文字数 ■ 拡張子を含む半角小文字 31 文字以内とする。 ■ ページ名が長い場合は省略できるものとする。

8 © 2012 XING Inc. All Rights Reserved. 8 CONFIDENTIAL ファイルの命名 -2 3. 画像ファイル作成ルール 3.1. 画像の命名ルール 画像名は以下の通りとする。 [ 識別名 ] + ["_"] ＋ [ ファイル・カテゴリ名 ] （ + ["_"]+ [ 詳細 ] ） + [ 連番 2 桁 ]. 拡 張子 ※ [ ファイル・カテゴリ名 ] 、 [ 詳細 ] は不要だと判断される場合は省略可。 ※同種の画像が他にない場合でも、必ず 2 桁の連番をつける。 例） tit_top01.gif bg_lineup_form01.gif tit_top(_ 詳細 )01.gif 識別名ページ名・カテゴリ名 連番（ 2 桁） 拡張子

9 © 2012 XING Inc. All Rights Reserved. 9 CONFIDENTIAL ファイルの命名 -3 ■ 識別名一覧 識別名用途命名サンプル bg 背景や、ボーダー用にリピートさせて使わ れる画像 bg_top01.gif bg_dotx01.gif bg_dotx_3x1_01.gif btn ボタンとして使われる画像 btn_contact01_no.gif btn_contact01_on.gif ico アイコンとして使われる画像 ico_arrow01.gif ico_square01.gif bnr バナーとして使われる画像 bnr_side01.jpg h1 ～ h6 タグなどの論理タグで囲まれる見出し 画像 h2_business01.gif h3_service01.gif tit h1 ～ h6 等に用途が限られない見出し画像 tit_topic01.gif txt デザイン上、画像化するテキストの画像 txt_corporate01.gif pic 商品や人物、風景などの写真画像 pic_about01.jpg thumb 写真と連動するサムネイル（小さい）画像。 thumb01.jpg thumb02.jpg img 写真以外のイラストや図表などの画像 img_about01.jpg logo サイトのシンボルが画像 logo01.gif mainimg ページのメイン画像 mainimg_about01.jpg