◆TOPページデザインを制作する際の注意点　※別紙（sample_1

Transcription

1 2011/4/26 改 定 デザインカンプ 制 作 ガイドライン 別 紙 (sample_1.pdf) 参 照 カンプ 制 作 に 入 る 前 にディレクターと 打 ち 合 わせを 行 い 目 的 に 合 ったトップページデザインを 制 作 すること 1. 著 作 権 について デザインで 使 用 する 写 真 素 材 およびイラスト 素 材 は 弊 社 提 供 の 素 材 集 サイトから 使 用 すること それ 以 外 で デザイナーが 所 有 している 個 人 的 な 写 真 他 社 の 写 真 素 材 サイトからダウンロードしたものは 著 作 権 フリ ー(ロイヤリティフリー)かどうかを 確 認 した 上 で 使 用 すること 規 定 外 のフォントを 使 用 する 場 合 も 著 作 権 フリー(ロイヤリティフリー)かを 確 認 した 上 で 使 用 すること 著 作 権 フリー(ロイヤリティフリー)ではない 写 真 フォントを 使 用 した 場 合 の 責 任 はデザインを 制 作 した 側 にあるものとし 該 当 する 写 真 の 差 し 替 えを 求 めたり 著 作 権 使 用 料 や 賠 償 金 を 請 求 したりする 場 合 もあるので 注 意 すること 2. カンプサイズ カンプの 横 幅 は 基 本 960px 以 内 に 収 めること ディレクターから 指 示 がある 場 合 は その 横 幅 で 作 成 すること 3. ヘッダー フッター 3-1.ヘッダー ヘッダー 上 部 に SEO 対 策 文 を 入 れる 際 カンプ 制 作 段 階 でもテキストだとわかるように 入 れること トップページのヘッダー 部 分 には HOME ボタンを 配 置 しないため カンプの 段 階 でも 入 れない ただし トップページでもグローバルメニュー 内 なら 表 示 は 可 能 3-2.フッター 案 件 内 容 ごとに 全 ページのフッターの 右 下 に 指 定 された 文 言 のリンクを 入 れる 業 種 別 のフッターリンクを 貼 る 場 合 はディレクターより 指 示 があるのでそれに 従 うこと Flash PDF を 使 用 するサイトには plugin のバナー コメントを 入 れる 4. 新 着 部 分 新 着 部 分 は 仕 様 上 スクロールバーが 表 示 されるので カンプ 段 階 でも 表 示 すること(ブラウザ 等 で 表 示 されるもの) デザイン 的 にスクロールバーを 表 示 させたくない 場 合 色 を 指 定 したい 場 合 はディレクターの 指 示 を 仰 ぐこと RSS に 対 応 していることを 明 確 にするためアイコンを 付 ける( 画 像 作 成 ) 5. テキストリンク 箇 所 コーディングの 際 新 着 を 含 めたテキストリンクについては ロールオーバー 時 に 色 が 変 わるようにするため カンプの 段 階 でもそれを 想 定 した 上 で 制 作 すること 新 着 に 関 しては 下 線 もしくは 矢 印 アイコンなどでリンクだとわかるようなデザインにする

2 6. 提 出 方 法 カンプは HTML に 貼 り 付 けて 提 出 すること HTML に 貼 り 付 ける 際 実 際 にコーディングした 状 態 と 同 じように 見 えるようにする センター 寄 せのデザインの 場 合 はセンター 寄 せにし 背 景 も CSS を 使 って 表 示 すること カンプの 実 際 の 画 像 サイズと HTML での 指 定 サイズはきちんと 合 わせること 必 ずデザインコンセプトを 付 記 して 提 出 すること グローバルメニュー 等 については ロールオーバー 時 のものも 併 せて 提 出 すること カンプ 提 出 時 に 採 用 カンプ 不 採 用 カンプ 問 わず 制 作 データ(PSD ファイルなど)を 提 出 し 回 収 方 法 についてはディ レクターの 指 示 に 従 うこと PSD データはフォルダ レイヤーにわかりやすい 名 前 を 付 けること( 例 : ヘッダー フッター Flash など)

3 コーディング 制 作 ガイドライン コーディングをする 際 タグは 基 本 的 に 全 て 小 文 字 で 記 述 し 全 体 のレイアウト 部 分 (ヘッダー フッター メニュー)を CSS でレイアウトすること ブラウザでの 崩 れを 極 力 防 ぐため 特 に 上 記 指 定 ブラウザでチェックができない 人 は 崩 れないような 組 み 方 を 極 力 行 うこと table を 使 用 してレイアウトしないこと また CSS を 使 用 する 際 後 々のブラウザを 考 慮 し CSS ハックは 極 力 使 わないこと コーディングを 行 う 際 に デザイン 的 に CSS で 行 うのが 難 しい 場 合 は 事 前 に 必 ずディレクターに 相 談 すること ロールオーバー 新 着 情 報 商 品 紹 介 で 使 用 するLightBox 画 像 切 替 以 外 の JavaScript は 基 本 使 用 しないでください 使 用 する 場 合 は ディレクターに 確 認 してください 1. ディレクトリ 構 成 1-1.ディレクトリ 構 成 セカンドページ 以 降 は コンテンツごとに 全 てフォルダを 作 成 する 各 コンテンツの TOP は 必 ず index.html にする 各 ページに 共 通 して 使 用 する 画 像 は common_img フォルダに 入 れる 各 フォルダ 毎 に images フォルダを 作 成 し そのフォルダのみで 使 用 する 画 像 を 入 れる CSS や JavaScript は 第 一 階 層 にフォルダを 作 成 し 全 てそこに 入 れる Flash は 設 置 する HTML と 同 じ 階 層 に 置 く 1-2.ディレクトリ 構 成 サンプル 図

4 2. HTML 記 述 指 針 2-1.マークアップ HTML 属 性 lang="ja" 文 書 型 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " " 文 字 コード EUC-JP 日 本 語 以 外 のページを 作 る 場 合 はディレクターに 相 談 すること meta 要 素 description:ディレクターの 指 示 に 従 う keyword:ディレクターの 指 示 に 従 う robot:index,follow noindex,nofollow にしない media type all 2-2.CSS JavaScriptの 記 述 CSS および JavaScript は HTML 上 には 記 載 せず 外 部 ファイルに 記 載 する 詳 細 は 上 記 の 1-1.ディレクトリ 構 成 を 参 照 特 別 に JavaScript などを 使 用 する 場 合 どうしても html ファイル 内 に 記 載 が 必 要 な 場 合 は コメントでわかるように 説 明 を 入 れる CSS 外 部 CSS フォルダの 中 に 記 載 する 各 ファイル 名 の 命 名 等 は 下 記 の 3.CSS 記 述 指 針 を 参 照 JavaScript 外 部 js フォルダに 記 載 する MacIE5.x のアラート 用 JavaScript は 必 ず 記 述 すること 2-3.リンク 各 ページへのリンクを 記 述 する 際 プログラムの 導 入 を 考 慮 し リンク 先 が 各 階 層 の TOP( 必 ず index.html)の 場 合 は.html の 記 述 をしない ディレクトリ 構 成 については 1-1.ディレクトリ 構 成 を 参 照 例 ) <a href= "contact/"> トップページは php ファイル(index.php)になるため トップページへの 各 リンクはフォルダ 止 めとする 例 ) <a href= "../"> テキストリンクについては ロールオーバー 時 に 色 が 変 わるようにする トップページの 新 着 テキストに 関 しても 色 変 化 や 下 線 などの 変 化 を 付 けること

5 2-4.カラー 色 を 指 定 する 場 合 カラーネーム( 色 の 名 前 )ではなく 16 進 数 6 桁 表 記 で 記 述 し 必 ず # をつける Web セーフカラー の 制 限 は 無 く フルカラーでの 色 指 定 を 可 とする rgb rgba は 使 用 しない 2-5. 画 像 ファイル 名 の 命 名 画 像 ファイルはどこで 使 用 しているファイルなのかわかりやすい 名 前 を 付 ける ボタン 画 像 ファイルは 下 記 に 示 すようにロールオーバー 時 とロールアウト 時 の 区 別 がわかりやすいように 命 名 する 例 ) <img src= "menu_on.gif " alt= ""> <img src= "menu_off.gif " alt= ""> 2-6. 代 替 テキスト 基 本 的 に 全 ての 画 像 に alt を 付 ける 画 像 に 文 章 が 含 まれている 場 合 その 内 容 を 簡 潔 にまとめた 代 替 テキストを 記 述 する また spacer.gif を 使 用 する 場 合 は 空 の 代 替 テキストを 使 用 する 例 ) <img src= "spacer.gif" alt= ""> 2-7.ボーダー ボーダーを 表 示 させる 場 合 table タグの 入 れ 子 ではなく スタイルシートを 使 用 する 2-8. 段 落 各 段 落 には p タグを 使 用 する また 段 落 と 段 落 の 間 のスペースを 空 けるために br タグの 連 続 使 用 はせず margin お よび padding プロパティを 使 用 する 2-9.SEO 対 策 文 の 導 入 ヘッダー 上 部 に h1 タグで SEO 文 を 記 入 する フォントサイズは 10px 2-10.フッター 案 件 内 容 ごとに 全 ページのフッターの 右 下 に 指 定 された 文 言 のリンクを 入 れる(title 属 性 にも 同 様 の 文 言 を 入 れるこ と) フッターリンク 文 章 一 覧 を 参 照 し カンプ 制 作 時 の 日 付 の 文 言 を 入 力 する 業 種 別 のフッターリンクを 貼 る 場 合 はディレクターより 指 示 があるのでそれに 従 うこと Flash PDF を 使 用 するサイトには plugin のバナー コメントを 入 れる( 下 記 フッターリンク 文 章 一 覧 を 参 照 ) 2-11.ページTOPへ 戻 るボタン トップページ 以 外 のページに 原 則 ページ TOP へ を 設 置 すること( 表 記 は ページトップへ ページの 先 頭 へ 戻 る など サイトに 合 わせてください) セレクタ 名 は page-up で 統 一 すること 新 着 情 報 プログラムについて HTML+CSS と PHP プログラムで 作 成 する RSS アイコン 部 分 は 下 記 のリンク 先 を 貼 りターゲットブランクにしておくこと <a href="./rss.php" target="_blank"> </a>

6 RSS のボタンは 新 着 情 報 詳 細 ページがある 場 合 にも 必 要 なので 新 着 情 報 詳 細 ページの 目 に 付 く 部 分 (ページの 右 上 等 )に RSS のボタンを 付 けること (リンク 先 の 階 層 注 意 ) 新 着 情 報 詳 細 ページを 制 作 する 際 は 下 記 のサンプルを 参 考 に 制 作 すること 2-13.お 問 い 合 わせフォーム お 問 い 合 わせ 項 目 の 必 須 項 目 には ではなく 必 須 アイコン 付 け 任 意 項 目 には 任 意 アイコンを 付 けること お 問 い 合 わせフォームの 送 信 ボタンは<a>タグではなく <input>を 使 用 すること 例 ) <input type="image" src="images/kakunin.jpg"> クライアントに 見 せるために 送 信 ボタンに<a>タグを 使 用 している 場 合 は<form>タグの action の 値 を 次 のペー ジの html の 値 に 指 定 してください <input>のボタンを 押 すと 指 定 したページに 移 動 します SSL 対 象 ページへのリンクは 全 て 絶 対 パスで 指 定 すること また SSL 対 象 ページから 他 のページへのリンクも 絶 対 パスで 指 定 すること リンク 先 アドレスはディレクターの 指 示 に 従 うこと SSL が 導 入 されるページには 確 認 画 面 への 誘 導 ボタンおよび 送 信 ボタンの 下 に 必 ず 以 下 の 文 言 を 入 れること ご 入 力 いただいた 情 報 は SSL により 暗 号 化 され 安 全 に 送 信 されます 2-14.Copyright( 著 作 権 表 示 )について Copyright 等 著 作 権 表 示 は 入 れないこと 準 備 中 コメントについて 未 制 作 制 作 途 中 のページをサーバーに 上 げる 際 は 下 記 の 文 章 を 表 示 すること ただし 準 備 中 のコメントがあると Yahoo! 登 録 ができないので その 際 はディレクターの 指 示 に 従 うこと 通 常 の 準 備 中 コメント ただいま 準 備 中 のため もうしばらくお 待 ちください 英 語 表 記 にする 場 合 This page is under construction now. Please check back at a later time. または Under construction 中 国 語 表 記 にする 場 合 正 在 製 作 中 請 稍 等 2-16.サイト 内 表 記 統 一 一 部 の 文 言 数 字 に 関 しては 下 記 のとおり 表 記 すること 文 言 お 問 合 せ お 問 合 わせ お 問 い 合 せ お 問 い 合 わせ 下 さい ください 致 します いたします 頂 きます いただきます 税 込 み 税 込 為 ため 数 字 桁 数 問 わず 半 角 に 統 一

7 4 桁 以 上 の 数 字 にはカンマを 入 れること 例 :\3,500 ディレクターから 指 示 がある 場 合 はそちらに 従 うこと 3. CSS 記 述 指 針 3-1. 寸 法 の 単 位 マークアップ 言 語 の 属 性 の 値 やスタイルシートのプロパティの 値 には 原 則 として px を 使 用 する また 0 を 記 述 する 場 合 は px を 付 けても 付 けなくても 良 い 例 ) #main { margin-left:10px; } #main { padding-left:0; } 3-2.フォント フォントサイズの 値 には px を 使 用 する 例 ) #main { font-size:10px; } font-family プロパティは 必 ず 記 述 し 原 則 として 下 記 を 使 用 する font-family:"ms Pゴシック", Osaka,sans-serif 3-3.CSSファイル 名 の 命 名 ファイル 名 は 半 角 英 数 字 ( 英 字 は 小 文 字 )とする ファイル 名 は 拡 張 子 を 含 んで 16 文 字 程 度 ( 最 大 31 文 字 )とする CSS は 下 記 に 示 すように 決 められたファイル 名 で 決 められた 内 容 を 記 述 する また 各 ファイルに 必 ず charset を 記 述 する css ファイル 名 記 述 内 容 import.css インポートファイル 各 css ファイルを 集 約 して 読 み 込 む base.css 全 体 のレイアウト 共 通 設 定 用 top.css top ページの 設 定 用 content.css セカンドページ 以 降 のコンテンツ 部 分 用 form.css お 問 い 合 わせなどで 使 用 する form 設 定 用 shop.css shop セット 用 3-4.セレクタの 命 名 レイアウトで 必 ず 使 用 する id および class のセレクタ 名 を 以 下 のように 共 通 化 する その 他 はわかりやすい 名 前 で 任 意 に 指 定 する セレクタ 名 使 用 箇 所 #wrapper ページ 全 体 ラッパー(コンテナ) 要 素

8 #header ヘッダー #gnav グローバルナビゲーション #main メインコンテンツ #content 各 コンテンツ 詳 細 部 分 #footer フッター.page-up ページトップへ 戻 る.clear 空 のクリア float の 回 り 込 みを 解 除 する 3-5.インデント ソースコードはインデントを 設 定 し 読 みやすくすること 3-6.float 解 除 float を 使 用 した 場 合 float させた 要 素 の 最 後 に 必 ず float 解 除 を 記 入 すること ブラウザの 崩 れを 防 ぐために 必 ず 記 入 すること <div class="clear"></div>.clear { clear:both; } コーディング 終 了 後 に 第 三 者 による 修 正 や 更 新 等 が 入 るため コーディングとして 正 しいと 思 われる 記 述 があったとしても ルールに 沿 ったマークアップをすること 3-7. 画 像 置 換 の 使 用 禁 止 display:none; や text-indent:-9999px; のような 画 像 置 換 は SEO のマイナス 要 因 になるおそれがあるため 使 用 禁 止 とする 基 本 的 に 画 像 は 画 像 +alt ボタンやメニューのロールオーバーは JavaScript での 制 御 で 統 一 すること 4. 新 着 情 報 商 品 紹 介 の 画 像 について 新 着 情 報 ページの 画 像 商 品 紹 介 詳 細 ページの 画 像 ( 商 品 紹 介 の 詳 細 ページがない 場 合 は 一 覧 ページの 画 像 )は Lightbox を 使 用 して 拡 大 画 像 を 表 示 させること 拡 大 する 画 像 は 縦 480px 内 に 収 まるように 作 成 すること ディレクターから 指 示 があった 場 合 はそれに 従 うこと 基 本 は 以 下 をダウンロードして 使 用 する (デザインなどはサイトに 合 わせて 変 更 すること) この 2 つ 以 外 を 使 用 したい 場 合 にはCDに 確 認 相 談 すること

9 5. メールアドレスの 記 述 について 迷 惑 メール 対 策 のためメールアドレスは 下 記 のサイトで 暗 号 化 し 記 述 すること ID: kamakurabakufu PASS: 5678 手 順 1. 必 要 項 目 入 力 メールアドレス リンク 文 字 列 ( 画 像 ボタンの alt または JavaScript 未 対 応 時 に 出 力 される 文 字 列 ) 画 像 入 力 欄 ( 画 像 によるボタンの 場 合 に 入 力 テキストリンクの 場 合 は 入 力 の 必 要 なし) 2. 変 換 ボタンを 押 す HTML ページに 貼 り 付 けるタグが 生 成 される 画 像 のパス エリア Map の 座 標 等 がページごとに 異 なる 場 合 はその 都 度 出 力 作 業 を 行 うこと 3. 生 成 されたタグを HTML ページに 貼 り 付 ける 6. 地 図 作 成 について 6-1. 国 道 および 都 道 府 県 道 について 地 図 内 の 国 道 および 都 道 府 県 道 を 標 識 で 表 す 場 合 は 以 下 の 形 で 統 一 すること 国 道 逆 三 角 形 で 番 号 を 囲 む 都 道 府 県 道 六 角 形 で 番 号 を 囲 む コンビニなどの 使 用 許 可 を 得 ていないロゴは 使 用 しない( 基 本 文 字 で 表 現 ) 6-2.Googleマップについて Google マップは 以 下 の 方 法 で 使 用 すること 特 定 の 場 所 を 表 示 した 状 態 で その 地 図 にリンクさせる HTML を 貼 り 付 けて 地 図 を 埋 め 込 む スクリーンショットの 貼 り 付 けは 不 可

10 コーディング 提 出 時 の 注 意 点 チェック ディレクターに 提 出 する 前 に 下 記 の 項 目 を 必 ずチェックすること セカンドページで 作 成 したデータ(psd png など)を 提 出 し 回 収 方 法 についてはディレクターの 指 示 に 従 うこと トップページ 以 外 のヘッダーロゴにトップページへのリンクが 貼 られているか またリンク 先 はフォルダ 止 めになっているか トップページのロゴにはリンクを 貼 らないこと プログラムが 入 った 後 トップページは php になるので 必 ずリンク 指 定 は フォルダ 止 めにする トップページ 以 外 に トップページに 戻 る ボタンがあるか(グローバルメニューにあれば 不 要 ) またリンク 先 はフォルダ 止 めになっているか トップページには トップページに 戻 る ボタンを 付 けないこと(ただし グローバルメニュー 内 なら 表 示 は 可 能 ) プログラ ムが 入 った 後 トップページは php になるので 必 ずリンク 指 定 はフォルダ 止 めにする トップページ 以 外 の 下 部 に ページ TOP へ のリンクが 設 置 されているか 原 則 として 全 てのセカンドページに 設 置 すること ただし スクロールバーが 出 ないような 短 いページには 必 要 ない 地 図 印 刷 時 に 地 図 と 住 所 連 絡 先 がきちんと 一 緒 に 印 刷 されるか 住 所 連 絡 先 (テキスト)と 地 図 の 画 像 が 一 緒 に 印 刷 されるようにするか 地 図 画 像 の 中 に 住 所 連 絡 先 を 書 き 込 む 住 所 連 絡 先 と 地 図 が 別 ページで 印 刷 されてしまうのは 不 可 ブログ 各 種 プラグインのダウンロードページといった 外 部 リンク 先 および PDF ファイルが 別 ウィンドウで 開 くようになっ ているか メールアドレスをクリックするとメーラーが 起 動 するようになっているか またメーラー 起 動 時 に 正 しいアドレスが 表 示 され ているか 各 画 像 に 適 切 な alt タグが 設 定 されているか リンクの 指 定 は 間 違 っていないか またリンク 先 はフォルダ 止 めになっているか グローバルメニュー ボタン テキストリンクがマウスオーバーで 変 化 があるか 1.プログラム 導 入 後 の 修 正 について プログラム 導 入 後 は サイト 内 共 通 箇 所 (ヘッダー フッター グローバルなど)については インクルードファイルが 設 置 さ れています そのため 共 通 箇 所 の 修 正 については 該 当 ページの html ファイル PHP ファイルではなく インクルードファ イルを 修 正 してください インクルードのメリット 複 数 のページに 共 通 化 させたい 箇 所 に 1 つのインクルードファイルを 読 み 込 ませることで 修 正 を 一 度 に 素 早 く 効 率 的 に 行 うことが 可 能 になります ( 例 ) 修 正 内 容 :10 ページあるサイトのフッターテキストの 文 章 を 変 更 これまで:10 ファイルに 対 して 修 正 を 行 う これから:インクルードファイル(1 ファイル)のみ 修 正 を 行 う 上 記 内 容 に 伴 う 修 正 を 行 った 場 合 サーバーにアップロードなどして 必 ず 表 示 確 認 してください

11 Flash 制 作 ガイドライン 1. 推 奨 フレームレート 24fps~30fps 指 定 ではなく 推 奨 です(24fps 以 下 だとぎこちない 動 きになるため) 2.ActionScriptバージョン バージョン で 制 作 すること 3. 書 き 出 しバージョン 基 本 的 には Flash Player Ver.8 用 に 書 き 出 すこと クライアント 先 指 定 等 ディレクターから 指 示 があった 場 合 はそれに 従 うこと 4. 組 み 込 み 方 法 SWFObject.js( 使 用 するバージョンは ver.2.2)を 使 用 する 5. 提 出 方 法 指 定 された html ファイル php ファイルに 組 み 込 んで 提 出 すること いきなり index.html index.php に 組 み 込 んではいけない 案 件 はディレクターが 指 定 すでに 本 番 に 上 がっている 案 件 も 同 様 html に 組 み 込 んで 提 出 する 際 にデータも 提 出 すること Flash バージョン CS3 以 上 の Fla ファイルは バージョンをひとつ 下 げたファイルと 2 つのファイルを 提 出 し 回 収 方 法 についてはディレクターの 指 示 に 従 うこと ロゴ 制 作 ガイドライン ロゴは Illustrator で 制 作 すること Photoshop の 場 合 は 印 刷 サイズも 考 慮 に 入 れて 大 きめに 制 作 すること ロゴは 採 用 後 データを 回 収 する ロゴ 内 にテキストがある 場 合 はアウトライン 化 し 修 正 可 能 にするためアウトライン 前 のデータも 合 わせて 提 出 するこ と Photoshop の 場 合 は レイヤーの 統 合 前 と 統 合 後 のデータを 提 出 すること