サイエンスウェブ株式会社

制作マニュアル

更新日:2021年12月16日

全員共通の重要事項

件名 内容
データのバックアップ どの作業の際にも、不具合や顧客希望で作業前の状態へ戻さなくてはならなくなった場合、すぐに戻せるようバックアップを必ずとっておいてください。プログラム作成に限らず、業務上で利用する電子ファイル群に関しても、バックアップを取ってから実施してください。
レンタルサーバにおいては、1日に1回差分でバックアップ、1週間に1回全体バックアップしておりますが、特に他サーバにおいては、サーバ側でのバックアップが無いケースがありますので、ご注意ください。
(特に納品前などには、修正が多いですが、毎回実施するように)
バックアップの保存先は、特に指示がなければファイルサーバに保存するなどしてください。ファイルサーバには、各作業のドメイン、個人用のフォルダがあります。

※バックアップ例
  • test.html → test.html_bk20110930
  • test.css → test.css_bk20110930
  • test.xls → test.xls_bk20110930
  • データベースは、エクスポートしておく。
  • CMSにおいては、記事・固定ページを複製して、非公開にしておく。
※ファイル群
------------------------------------------------------------
HTML、CSS、画像、サーバ設定ファイル、デザインデータ、データベース、エクセルファイル、ワードなど。
------------------------------------------------------------
エンティティ化 SPAM収集の対策として、メールアドレスの記載に関しては、HTMLソース(mailto:)を含めて、暗号化(エンティティ化)してください。
CMSなどでは、エンティティ化を無効にするケースもありますので、その際には画像化などで対応してください。
ただし、参加登録フォームなどPHP内部記載や設定ファイルにおいては、エンティティ化の必要はありません。

参考までに…エンティティ化のフリースソフト http://ab.jpn.ph/soft/html_rand.html

コーディング作業者向け

総合点検コーディングGoogleAnalytics

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

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

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

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

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

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

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

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

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

サーバデータベース

デザイン作業者向け

デザイン

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


総合点検

項目 件名 点検内容
No.1 OS・ブラウザチェック Windows、Maciontshの各OSでブラウザ表示のチェック
・IE 7,8,9。
・GoogleChrome 最新版
・FireFox 最新版
・Safari 最新版
・Opera 最新版
No.2 Validation 下記のサイトから、ソースコードのチェック。
Markup Validation Service
CSS Validation Service
No.3 キーワード、ディスクリプション METAに、キーワード、ディスクリプションを設定。
キーワードは半角カンマ区切りで10~15個程度、ディスクリプションは、全角文字で100文字程度
No.4 CMSの管理者IDとPW admin / admin などは設定しない。特定されるのもNG
ユーザアカウントは admin とcms_admin, cms_swc, cms_editorを作成。
パスワードは半角英数字大文字小文字ランダムで、8桁以上。
No.5 Google Analytics Google Analytics(GA Code)の設定を行うこと。

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


デザイン

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

  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構築

基本仕様

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

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

管理者・ユーザ権限

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

種別 メールアドレス 権限
管理者用 cms_admin@takezono2.tv 投稿/公開/管理
編集者用 cms_editor@takezono2.tv 投稿/公開
投稿者用 cms_user@takezono2.tv 投稿
SW管理者 cms_swc@takezono2.tv 投稿/公開/管理

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

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

CMS:全般CMS:WordPressCMS:MODx

CMS:全般

件名 不具合内容・対策
<table>タグ ■不具合内容
最新情報などの記事で、投稿ページ内容の1行目を自動表示設定にすると、<table>タグがあった場合にサイトデザインが崩れる。
■対策
投稿内容の1行目には、<table>タグを使用しないよう注意する。
パーマリンク ■不具合内容
URLが意味不明な英数字になっている(例:www.science-web.co.jp/b1/bc1)。
■対策
バーマリンクの設定が正しくされていないのが原因(空欄・全角文字使用など)。
一意の英単語を利用して、半角英数字できちんと設定する。

CMS:WordPress

件名 不具合内容・対策
アーカイブ(カテゴリ)ページ ■不具合内容
過去の一覧ページなどで、10件しか表示されない不具合が発生。
■原因・対策
アーカイブ(カテゴリ)ページのテンプレートを利用の際に、管理画面の「設定→表示設定」が10件にデフォルト設定のため発生。
こちらの数値を10→9999などしてください。

WordPress管理画面(ダッシュボード/Dashboard)
------------------------------------------------------------
[日本語版] 設定 → 表示設定「1ページに表示する最大投稿数」
------------------------------------------------------------
[英語版]  Setting → Reading「Blog pages show at most」
------------------------------------------------------------

CMS:MODx

件名 不具合内容・対策
エンティティ化 ■不具合内容
MODXの場合、リッチテキストが有効状態でエンティティ化した文字を流し込むと、エンティティ化が「無効」なる。
■対策 その1
一度、チャンクでエンティティ化したメールアドレス(mailto含む)の内容を作成し、そのチャンクをページへ配置するなどで対応してください。
■対策 その2
mailto設定の必要がなければ、画像化して対応。
アンカー設置 ■不具合内容
ページアンカーの付け方ですが通常のHTMLのように「a href="#アンカー名"」の設定では上手く作動しません。トップページに飛ぶなどの不具合が発生します。
■対策1
「a href="#アンカー名"」または「a href="web_rule.html#アンカー名"」(web_rule.htmlにすると、どのページでも有効になります)とし、設定後には動作を確認してください。
dittoなどのプログラム設定 顧客が触れる部分(リソース)にditto設定などのブログラム記述しないこと。テンプレートに組み込み、ロール管理などでエレメント管理を操作できないようにすること。

CMSマニュアルの作成

コーディング

マークアップ言語関連

  1. HTML+CSSが基本。
  2. HTML・XHTMLタグは見出し<h>、段落<p>やリスト<li>など、要素の意味付けをふまえ正確に用いること。
  3. タグは全て小文字で記述すること。
  4. タグの属性地は引用符(" ")で囲むこと。
  5. 不要なタグは理由がない限り残さないこと(中身の無いや
    タグ等)。
  6. タグの順序には注意すること。
    悪い例<a href="new.html"><h2>新着情報</h2></a>
  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. 文章の改行、段落など読みやすいようにレイアウトすること、また句読点の使い方、位置等もチェックを心がけること。
    (文章の見栄えのみを考えて強制改行<br>をすると、テキスト可変時にレイアウトが崩れ、かえって読みにくくなるので注意!画像の場合はその限りでない。)
  7. 原稿にあきらかな誤字・脱字がある場合は修正する。

CSSのfont-family設定

データテーブル

  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. 複数ページで共通の画像は1つの物を共用すること。(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を極力使用しない、単純なテーブルを利用し、音声読み上げ順を意識すること。テーブルの入れ子は3つぐらい(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. メニューが1ページの中に複数存在する場合、idの優先順は「id="globalnavi"」→「menu」→「menu_id名」(「menu_buttom」・「menu_side」等)とします。例えば、上図のようにメニューが2箇所(header下と左サイド等)存在し、header下のメニューがグローバルメニューに当たる場合heder下menyuを「id="globalnavi"」、左メニューを「id="menu"」とします。
  5. 「id="content"」内が2カラム以上になる場合は、上図のように「id="primary"」→「id="secondary"」→「id="thirdly"」・・・とします。逆にカラム分けがない場合は、第2階層(id="content")直下に上図で示すところの第4階層(class="section"等)が入ります。

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

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


データ取り込み

画像を配置する際の注意

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

ベータ版の総合点検

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


GoogleAnalytics

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


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


登録フォーム

不具合対策

件名 不具合内容・対策
空メール送信 登録後、thanks画面でリロードすると、DB登録されたり空メールが送信されるてしまうので
必ずDB登録・メール送信処理前に対応策を行うこと。

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

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

サーバ


データベース

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

採用情報 ホームページ.com WEBシステム開発 広報制作.com
#angleTop