更新日：2021年12月16日

全員共通の重要事項

コーディング作業者向け

｜総合点検｜コーディング｜GoogleAnalytics｜

CMS・データ取り込み作業者向け

｜総合点検｜CMS構築｜データ取り込み｜GoogleAnalytics｜

登録フォーム・論文収集システム・その他WEBシステム作業者向け

｜総合点検｜WEBシステム・プログラム共通｜登録フォーム｜アブストラクト収集フォーム｜

CMSマニューアル作成作業者向け

｜CMSマニュアル作成の注意点｜

ベータ版の総合点検作業者向け

｜総合点検｜ベータ版の総合点検｜

サーバ・データベース作業者向け

｜サーバ｜データベース｜

デザイン作業者向け

｜デザイン｜

[ このページの先頭に戻る ]

総合点検

[ このページの先頭に戻る ]

デザイン

全体のレイアウトデザインについて

1. 左寄せ・中央寄せ、レイアウトパターン、全体の横幅、サイドメニュー横幅、ヘッダーの高さなど、サイズ指示があれば従うこと。ただし、デザイン上不可能な指示やデザイン性が劣る場合にはディレクターに相談します。
2. bodyの背景は必要に応じて設定する。（作りこみ過ぎてCSSで再現が難しくならないよう注意。）
3. メインコンテンツに背景をしく場合は、文字が重なるときに読みやすい色・柄で設定すること。
4. トップページに、更新情報とイベント情報を同時掲載する場合、エリアを分けるか、「更新情報」「イベント」などのアイコンを先頭につけて、区別できるようにする。更新した日付か、イベント開催日の日付か混乱しないよう配慮する。
5. 基本的に自由にデザインすることは可能だが、下記に注意して作りこむ事。
6. コーディングへの配慮（画像の切り出し位置に余計な画像などがかぶっていないか、あいまいな太さのラインやボーダーがないか。使用するhtmlコード、ボックスの配置や更新性を考えて作る）
   
7. SEO対策への配慮（やりすぎも更新性を無くしたりするので注意）
   ユーザビリティ・アクセスビリティへの配慮（見やすさ・使いやすさなど導線を考えて作る）

デザイン・データについて

1. デザインデータは、fireworksで作成してください。
2. テキストは画像で配置するモノにいはアンチエイリアスをOn、テキスト入力で流し込む物にはPCデフォルトゴシック系フォントにOffをかけて、判別しやすくします。（コーディングを外注に出したり、お客様にプレシューする際にシェアの一番大きいWin　IE6のリアルな表示に出来るだけ近づけ、ブラウズしやすくします。（コーディングの際のすみ分けを分かりやすくするためです。お客様のPCがMacやWindows　Vistaの場合はその限りではありません。）
3. pngデータ内のレイヤーにはそれぞれ名前をつけ、適宜フォルダやグループに分けるなどして、他人が見てもわかりやすい状態にしておきます。
4. 指定のwidthでデザインカンプを制作したら、カンパスサイズを左右と上下に10px程度～必要な幅に広げ、背景の設定まで完成させます（コンテンツの左右両サイドにborderやshadowが入るとか、背景色や背景画像の設定があるかなど明確にするためです）。
5. ロールオーバー表示は別レイヤーに分けて作成し、コーダーに伝わりやすいよう作成してください。場合によっては、テザイン提出時に補足説明を加えてください。
6. 画像統合やアウトライン化していない元になるpngデータの受け渡し方法は、ディレクターの指示に従ってください。（不明の場合はディレクターへ確認）

その他

1. 各ページのフッターには「著作権表記（コピーライト）」をつけること。
2. 特に指示がなければ
   「copyright(c)または©（©と文字参照で入力）＋{西暦}＋{社名}＋All right reserved.【掲載の記事・写真・イラストなどの無断複写・転載を禁じます。】とし、西暦・日本語表記部分は省略可能。
3. 著作権に関連するような写真・イラスト・テキスト等は使用しないこと。
4. 個人情報を収集する際は、「取り扱い指針（「プライバシーポリシー」）などを明記すること。
5. ショッピング機能のあるサイトは、「特定商取引法に関する表記」のページも用意する。

[ このページの先頭に戻る ]

CMS構築

基本仕様

• パーマリンクは、必ずページ内容に合った英単語に設定にする。b2、b3といった、CMSのデフォルト名称のままにしない。

トップページの更新情報・イベント情報・お知らせなど、記事部分の設定について

• 最新の情報を、デザイン案に従い３～５件表示。不明な場合はディレクターに確認する。
• 見出し・内容の設定は、基本的にデザイン案に従う。不明な場合はディレクターに確認する。
• 特に指示がなければ、記事は新しいものが常に上に自動で並びかえされるよう設定してください。
  ※新しいものとは？：特に指示がなければ、公開日が新しいものが上にくるよう設定してください。

サブページ(下層ページ)

• ぱんくずリストを設置する。

管理者・ユーザ権限

• 管理者・ユーザ権限の一覧をもとに、CMS構築者が行う。
• CMS構築の報告後、作業指示者が確認する。
• 上記により、確認漏れをなくす。

■管理者・ユーザ権限の一覧

[ このページの先頭に戻る ]

CMS構築の注意点や不具合対策（CMS別に記載）

｜CMS:全般｜CMS:WordPress｜CMS:MODx｜

CMS:全般

CMS:WordPress

CMS:MODx

CMSマニュアルの作成

• CMS上でアップロードできるファイルの容量制限を必ず記載する。特に指示がなければ3MBとする。

コーディング

• フォルダ構成は下記とおり。
  imagesフォルダ　画像フォルダ
  cssフォルダ　cssファイル
• metaタグに、キーワード設定と、ページ紹介のデータを設定する。
• metaキーワードのワード間は必ず半角カンマ(,)で区切ること。
• ＜center＞は使用しない。
• ＜font＞は使用せずCSSで設定する。
• ＜ｂ＞＜i＞は使用せず、＜strong＞＜em＞を利用する。
• ＜td＞の高さを指定（height）や行揃え（align・valign）は極力使用せず、CSSで設定する。
• ＜br /＞を利用した高さ調整はしない。
• ＜td＞（全角スペース）＜/td＞は極力使用しない。spacer.gifまたは、場合によって＜td＞ ＜/td＞を使用する。
• 中身の無い＜p＞＜/p＞や＜div＞＜div＞など理由無く残さない。

マークアップ言語関連

1. HTML＋CSSが基本。
2. HTML・XHTMLタグは見出し＜ｈ＞、段落＜ｐ＞やリスト＜li＞など、要素の意味付けをふまえ正確に用いること。
3. タグは全て小文字で記述すること。
4. タグの属性地は引用符(" ")で囲むこと。
5. 不要なタグは理由がない限り残さないこと（中身の無いや
   タグ等）。
6. タグの順序には注意すること。
   悪い例＜ａ　ｈｒｅｆ＝"ｎｅｗ．ｈｔｍｌ"＞＜ｈ2＞新着情報＜/ｈ2＞＜/ａ＞
7. 色は色名（green.red等）ではなく、色指定値(#fff、#b8b85c等）で指定すること。
8. ヘッダー内要素は下記を必ず記述すること
   文書型宣言
   言語コード（lang属性：通常は"ja"）
   タイトル
   MIMEタイプと文字コードセット
   説明文（Discription）とキーワード（keywords）
   
   ※その他、必要に応じて記述すること。
9. スタイルシート、JavaScriptは必ず外部ファイルで作成すること。
10. HTML・CSSコードを見やすいようにTab等でインデントを付け、適宜コメントタグを挿入すること。

フォント・テキスト

1. 数字、及びアルファベットは基本的に半角英数字を使用する。
2. 機種依存文字、半角カタカナは使用しないこと。原稿で使用されている場合は、別の表現に置き換える。
   （株）、ローマ数字I II III IV…、数字を○で囲んでいるもの。
3. 文字サイズはできるだけユーザー側で変更（可変）できるように設定すること。
4. 文字の色と背景色のコントラストを十分に取ること。
5. フォントサイズ、行間、表示位置等は読みやすく設定すること。
6. 文章の改行、段落など読みやすいようにレイアウトすること、また句読点の使い方、位置等もチェックを心がけること。
   （文章の見栄えのみを考えて強制改行＜ｂｒ＞をすると、テキスト可変時にレイアウトが崩れ、かえって読みにくくなるので注意！画像の場合はその限りでない。）
7. 原稿にあきらかな誤字・脱字がある場合は修正する。

CSSのfont-family設定

• ディレクターからの指示が特にない場合は、下記の設定でお願いします。
  
  【日本語版】
  font-family: "Lucida Grande", Tahoma, Verdana, Arial, 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
  
  【英語版】
  font-family:'lucida grande', verdana, helvetica, arial, sans-serif;
• 「Helvetica」「helvetica neue」はIE9で不具合の原因になるため使用しない。

データテーブル

1. テーブルは複雑な表や大きな表は極力避け、単純にすること。
2. 適度なマーク付けにより、その構造を明確にすること（thタグ（見出しのセル）内にはscopeやabbr属性を設定する等）。
3. 複雑なテーブルにはheaderやid属性を指定し、音声読み上げに対応すること。
4. デザイン要素はCSSで設定すること。
5. データテーブルにおける＜caption＞は必要不可欠なので、表示を意識してデザインする。又は、htmlでは明記するが、CSSで非表示の制御をかける等対策をとること。

リンク

1. リンクであることが視覚で分かるようにすること。
2. リンク（画像・テキスト）はリンク先の内容が明確に分かるように記述すること。（こちらやクリックはNG)
3. リンクのある画像には、リンク先の内容を的確に示すalt属性を入れること。
4. リンクはクリックが容易にできるように十分な面積を確保すること
5. 文字や説明のない画像だけのリンクは極力使用しないこと
6. ポップアップは必要最低限で使用すること、使用する場合はウィンドウサイズ等に注意すること。

画像

1. 画像には適切な代替テキスト（altまたはtitle属性）を入れること。不可視画像(spacer.gif)・意味の無い飾り画像（アイコンやイメージ写真等）は「alt="　"」とすること。
2. 画像にはwidth・height属性を必ず入れる。
3. 画像サイズはコード上で数値を調整せずに、適切なサイズの物をあらかじめ用意すること。ただしCMSに関してはこの限りではない。
4. 複数ページで共通の画像は１つの物を共用すること。(common_imegesフォルダに格納する）
5. 画像形式は(jpg.gif)は適切に使い分けること。
6. イメージマップにはaltを入れ、出来れば文字リンクを併記すること。

フォーム

1. 入力情報は必要最低限にすること
2. 入力必須情報は*（アスタリスク）などを利用して明確にすること。
3. 分かりにくい項目には、入力例や初期値を入れておくこと。
4. ラジオボタン・チェックリスト項目のラベリングは、「テキスト→フォーム」の順で表記するのが望ましい。
5. フォームはラベル（名称）と機能の関係を明確にすること。
6. 入力した内容は、送信前にユーザーが確認・修正できるようにすること。（確認画面の設置）
7. フォームが正常に動いているか、メールの送信テスト等必ず検証を行うこと。

動画・音声・プラグイン

1. 動画・音声は自動で再生せず、ユーザー側で制御できるようにすること(音量の調節やOn/Offなど）。指示で自動再生する際も、On・Off等が制御できるようにすること。
2. JavaScript・Flash・PDF等を使用する際は、コンテンツの内容が分かる代替手段として提供することが望ましい。
3. Flash・PDF等を使用する際は、必要なプラグインのリンクを設定すること。

その他

1. 各ページのフッターには「著作権表記（コピーライト）」をつけること（を利用）
2. 基本表記は
   
3. 「copyright(c)または©（©と文字参照で入力）＋{西暦}＋{社名}＋All right reserved.【掲載の記事・写真・イラストなどの無断複写・転載を禁じます。】とし、西暦・日本語表記部分は省略可能。
4. 著作権に関連するような写真・イラスト・テキスト等は使用しないこと。
5. 個人情報を収集する際は、「取り扱い指針（「プライバシーポリシー」）などを明記すること。
6. ショッピング機能のあるサイトは、「特定商取引法に関する表記」のページも用意する。

CSSの利用について

デザイン、レイアウトなどの視覚表現の部分をCSSでコントロールすることがW3Cで標準化されていますが、サイエンスウェブにおていは、制作・修正に携わる担当者毎のウェブ知識、スキルの問題から現状はレイアウト全てをCSSで表現することは強制しません。（案件による）ただし、下記に記載されている内容については厳守してください。

1. スタイルシートは外部ファイル参照で適用する。
2. スタイルを対象とするコンテンツごとにコメントで区切る、重要なスタイルにはコメントをつけるなどして、修正・更新担当者が把握しやすいよう作成すること。
3. 特定のBox設定など同ページ内で1度しか出てこないセレクタにはid、文章やテキストを制御するような何度も使いまわすセレクタにはclassを使用する。
4. idセレクタ・classセレクタは内容に関連のあるような、なるべく分かりやすい名前にすること。
5. テキスト可変を有効にするために、フォントサイズ指定・調整は「em」または「%」で行う。
6. メインになるフォントファミリー・フォントカラー・背景色は＜body＞に直接設定せず、CSSで指定する。
7. 背景画像・背景色（テーブル内も）はCSSで設定。
8. パディング・マージンは必ずCSSで指定すること。セルの高さ＜height＞や＜br＞改行の利用は極力避ける。
9. font-family設定について、ディレクターからの指示が特にない場合は、下記の設定でお願いします。
   
   【日本語版】
   font-family: "Lucida Grande", Tahoma, Verdana, Arial, 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
   
   【英語版】
   font-family:'lucida grande', verdana, helvetica, arial, sans-serif;
   ※「Helvetica」「helvetica neue」はIE9で不具合の原因になるため使用しない。

ページレイアウト

1. フレームは使用しないこと。
2. インラインフレームは極力使用しないこと（CSSで対処可能）。
3. 更新性のあるレイアウト組みをすること。
   特にテーブルレイアウトを使用する場合は、colspanやrowspanを極力使用しない、単純なテーブルを利用し、音声読み上げ順を意識すること。テーブルの入れ子は３つぐらい（bodyテーブル＋コンテンツテーブル＋詳細レイアウトテーブル）で収めるように処理をする。（項目を追加・削除した場合にレイアウトが崩れないように注意！）
4. 書体、フォントサイズ、色、表示位置、行間、背景色などデザイン要素はCSSで表現すること。
   悪い例：＜td valibn="top" height="50" ＞＜font color="#FFF"＞新着情報＜/font＞＜/td＞
5. スライスを多用して、必要の無い画像などを使用しない。
6. 不必要に文字を画像化しない。
7. 縦長のページを制作する場合は、ページ内リンクなどで対策をとる。ただし文書型宣言Strictではページ内リンクは使用できないので注意。

CSSレイアウト

1. divの配置はコーディングの内容により、図のとおりでなくてもかまいませんが、id名は変えないでください。
   「id="header"」の中に「id="globalnavi"」が配置された場合などもid名はそのまま利用してください。
2. 「id="wrapper"」は全体を囲む最大Boxとし、左寄せ、中央などの配置設定を行います。
3. 「id="wrapper"」の中に、基本となる「id="header"」・「id="globalnavi」・「id="content"」・「id="footer"」を設定します。
   配置順は読み込まれたときに効率よく情報が提供される順番に配置することが望ましい。例えば、XHTMLでは「header」→「contents」→「globalnavi」→「menu」→「menu」→「footer」の順に記述し、CSSで配置を調整するなどして、読む側がストレスを感じないように工夫してください。
4. メニューが１ページの中に複数存在する場合、idの優先順は「id="globalnavi"」→「menu」→「menu_id名」（「menu_buttom」・「menu_side」等）とします。例えば、上図のようにメニューが２箇所(header下と左サイド等）存在し、header下のメニューがグローバルメニューに当たる場合heder下menyuを「id="globalnavi"」、左メニューを「id="menu"」とします。
5. 「id="content"」内が２カラム以上になる場合は、上図のように「id="primary"」→「id="secondary"」→「id="thirdly"」・・・とします。逆にカラム分けがない場合は、第２階層（id="content")直下に上図で示すところの第４階層（class="section"等）が入ります。
   

参考までに…上記のコーディングルールは、SWC過去の制作ルールページを元に作成しました。
http://www.lab-www.com/coding_rule/

[ このページの先頭に戻る ]

データ取り込み

• ＜center＞は使用しない。
• ＜font＞は使用せずCSSで設定する。
• ＜ｂ＞＜i＞は使用せず、＜strong＞＜em＞を利用する。
• ＜td＞の高さを指定（height）や行揃え（align・valign）は極力使用せず、CSSで設定する。
• ＜br /＞を利用した高さ調整はしない。
• ＜td＞（全角スペース）＜/td＞は極力使用しない。spacer.gifまたは、場合によって＜td＞ ＜/td＞を使用する。
• 中身の無い＜p＞＜/p＞や＜div＞＜div＞など理由無く残さない。
• タグの順序には注意すること。
  悪い例＜ａ　ｈｒｅｆ＝"ｎｅｗ．ｈｔｍｌ"＞＜ｈ2＞新着情報＜/ｈ2＞＜/ａ＞
• 数字、及びアルファベットは基本的に半角英数字を使用する。
• 機種依存文字、半角カタカナは使用しないこと。原稿で使用されている場合は、別の表現に置き換える。
  （株）、ローマ数字は、アルファベットで代用I II III IV…、数字を○で囲んでいるものは（1）にするなど工夫してください。

画像を配置する際の注意

1. 画像には適切な代替テキスト（altまたはtitle属性）を入れること。不可視画像(spacer.gif)・意味の無い飾り画像（アイコンやイメージ写真等）は「alt="　"」とすること。
2. 画像にはwidth・height属性を必ず入れる。
3. 画像サイズはコード上で数値を調整せずに、適切なサイズの物をあらかじめ用意すること。ただしCMSに関してはこの限りではない。
4. 複数ページで共通の画像は１つの物を共用すること。(common_imegesフォルダに格納する）
5. 画像形式は(jpg.gif)は適切に使い分けること。
6. イメージマップにはaltを入れ、出来れば文字リンクを併記すること。

ベータ版の総合点検

• WebdeveloperのHTMLとCSSのチェックツールをかける。
• 登録フォームの際は、チェックシートを２名以上で確認する。

[ このページの先頭に戻る ]

GoogleAnalytics

• </body>タグの直前に設置する。
• ただし、PDFカウンタを実装する場合には、処理前に設置（参考：http://doruby.kbmj.com/katsuo_on_rails/20090412/Google_analytics_PDF_1）。

[ このページの先頭に戻る ]

WEBシステム・プログラム共通

• 個人情報のフォーム関連は、SSLを実装する（ユーザ側、管理側）。
• 顧客提供の管理画面において、クレジット情報は記載しない。
  →QMC、SWCのみ管理画面を閲覧する場合には、問題なし。
• 管理画面のアクセスは、ベーシック認証とログイン画面で、２重にアクセス制限する（CMSの管理画面も同様）。

登録フォーム

• 入力画面、確認画面、完了画面の流れ。
• 確認画面でのクレジットカード番号は、下４桁のみ。その他はアスタリスク。****-****-****-1234。
• 完了画面の表示前に、自動送信メール（ユーザ、管理者）処理、データベース登録処理を実施。
• プロトコルはHTTPS、SSLを利用する。
• 管理画面は、IDとPASSWORDを設定。CSVダウンロードと一覧表示を実装。
• 登録時にIPアドレスをデータベースに登録する。テーブル最終フィールドに、IPアドレスを登録してください。

不具合対策

アブストラクト収集フォーム

• 入力画面、確認画面、完了画面の流れ。
• テキスト入力形式と、ファイルアップロード形式のタイプあり。
• プロトコルはHTTPS、SSLを利用する。
• 管理画面は、IDとPASSWORDを設定。CSVダウンロードと一覧表示を実装。
• 登録時にIPアドレスをデータベースに登録する。テーブル最終フィールドに、IPアドレスを登録してください。

[ このページの先頭に戻る ]

サーバ

• 社内外サーバに関係なく、構築時と納品時のPHPINFO（サーバ情報）を必ずとっておく（メール、Redmineなどに保存）。
• SSHなどは作業ログをとる（とくに大学、研究所などの社外サーバ）。
• 操作するファイルは、バックアップをとる。

データベース

• 公開前のデータベースをクリアするときには、構造とデータをバックアップする。
• Drop削除しない。
• phpMyAdminなどのWebツールを構築する際には、ベーシック認証を設定する。

[ このページの先頭に戻る ]