ADGRAPHYコーディング規約

Tel:097-529-9230受付09:00~18:00 定休日:土日祝

業務連絡:内容補完のお願い。
①URL設計について、例えば温泉でもonsen、hotspring、spa、等表現によって語感が違うので、一度翻訳家に出そうと思っていたのですが、ちょっともういつまでも手が回らないので、引き継ぎたいです、もし決定したらこのページの「URL設計」の項目に追記をお願いします。

このページは見づらいので、スプレッドシートにまとめる形式に変えてもいいかもしれません。

このページについて

このページは、案件ごとにお渡しする仕様書の見方あるいは補足となります。
※ 仕様書制作者に対する業務連絡を含みます。赤字にしています。

はじめに

お願い

将来的に更新管理もご自身が担当されるものと思い、配慮してコーディングしてくださるようお願いいたします。
翻訳版コピーサイトもご自身が担当されるものと思い、テキスト流し込みに配慮した日本語サイトとしてください。
制作していただいた方に頼むのが一番わかりやすいということで、依頼をするケースが実際にあります。

仕様書内に封入されているもの

基本情報(ドメイン、メアド等々)

黄色いマニュアルの基本情報チェックシート参照
wwwの有り無し、SSL(https)かどうかもしっかり伝達。
お問い合わせフォーム送信先のメールアドレスは「複数あればすべて」。

サーバー名およびFTP情報

PCSPの振り分け方の指示(レスポンシブ/HTTP リダイレクトで振り分け/JavaScriptで振り分け)

URL設計

ディレクトリ構成は規約に準ずるとし、各ファイル名を引用してください。
なお、サイトマップのページについてはファイル名は「sitemap.html」で統一をお願いします(微弱なGoogle対策)。
拡張子はphpでも、何でも。

OGP情報

各ページのTDH(title、description、h1)

仕様書作成者はマニュアルを参考のもと、title、description、h1を用意してください。マニュアルあり
ロゴをh1にするのはもったいないのですが、どうしても無理な時は仕方ありません、その場合はaltをしっかり入れてもらうこと

区切りに縦棒を使用するときは、「半角スペース、半角縦棒、半角スペース」としてください(全角より1文字多く検索結果に出せることがあります)。

WordPressのTDH

プラグイン使用可。
現状はtitleのみユニークで、description他は全ページ静的なTOPページと同じものを使用している場合が多い。
プラグインについてはコーダーさんがそれぞれ違うものを使用しているのではいけないので将来的には統一したい。
プラグインは入れるほど重くなり、リスクも高まるため、セキュリティに誰が責任を持つか決める必要がある。

トップページ、カテゴリ、個別ページのtitleの例
(静的なTOPページのtitleと整合性が取れていればなんでもよいです)

blogのトップページ
<title>お知らせ(例) | TOPページのtitle</title>
カテゴリページ
<title>カテゴリー名 | TOPページのtitle</title>
個別ページ
<title>ページタイトル | カテゴリー名 | TOPページのtitle</title> もしくは
<title>ページタイトル | TOPページのtitle</title> など

ところでWordPressのTDHは、プラグインなどを使えば全ページ違ったものにできるのでしょうか?
MT時代は、本文の頭何文字を引用とかそういうこともしていましたが、無理くり系SEOの概念がなくなった現在ではそこまでしなくても、という感じですよね。

FacebookおよびTwitter公式アカウントのID(OGP設定用)、各SNSの公式アカウントURL

黄色いマニュアル参照

検索パネルのソース

宿泊予約システムの各種URL

ダイレクトインを使用する場合は専用のヘッダー・フッターの制作も合わせて依頼するといいと思います。
次の行も参照。

ダイレクトイン専用のヘッダー・フッターの制作の依頼もある場合は費用内対応可か、別途となるか打ち合わせされるとよいと思います。
予約システム「Direct In」(ダイレクトイン)予約画面イメージ

ダイレクトインはレスポンシブをサポートしていないので、Bootstrapなどのフレームワークを利用していると、SP用設定を外すのに大変苦労します。参考まで。

業務連絡:ここにダイレクトインの公式マニュアルのリンクを貼ってください
コーダーさんへ:↑にリンクがない場合は担当者に請求ください、結構縛りが厳しいのでマニュアルは読んでおいたほうがいいです。

リッチスニペット用プロパティ

schema.org(スキーマ・オルグ)の定義を使用します。参考サイトあり(中編)参考サイトあり(後編)
schema.orgがv3.1を公開、ホテルや旅館など宿泊業のサイトで使いたいプロパティを豊富に追加(2016年8月12日)
構造化データ マークアップ支援ツール

宿泊施設に必要そうなプロパティを例として引用してみました(下の表参照)。
この他にも、営業時間、平均評価、レビュー等を追加できます。
宿泊施設ならではの項目としては、次のようなプロパティも設定することができます。

  • starRating ―― 五つ星、三つ星などのホテルの格付け(利用者の評価ではない)
  • floorSize ―― フロア面積
  • amenityFeature ―― 提供されているサービス(たとえばホテルにあるサウナとかジム、ビジネスセンターなどの施設 特に温泉の存在は是非アピールしたいところ)
  • checkinTime / checkoutTime ―― チェックイン/チェックアウトの時間
  • petsAllowed ―― ペット同伴が可能か
  • numberOfRooms ―― 部屋数
  • availableLanguage ―― 対応可能言語

上で紹介したプロパティのほかにも、色々設定できます。
どんなプロパティがあるかを、それぞれのタイプのページで確認してください。
そして可能な限り多くのプロパティで構造化してください(デザインを邪魔しない程度に)。

なお、LodgingBusiness / Accommodation の下にHotel(ホテル)やHostel(ホステル)、Room(部屋)、Apartment(アパート)などのサブタイプがあります。
マークアップする際は、より詳細なタイプを利用することが推奨されますが、ここはもう設定しないこととします。

どんなプロパティというか、項目を盛り込むかは、デザイナーに任せますので、それを汲み取ってどこのどれをマークアップしたいのかを仕様書に記載してください。
必要項目がわかれば、コーダーさんが適宜設定してくれるでしょう。

itemscope itemtype="http://schema.org/LodgingBusiness"
itemscope itemtype="http://schema.org/LocalBusiness"
LodgingBusiness=宿泊施設(囲む)
タイプは業種によって変わるので調べて当てはめていただきたいが、どうしてもわからないときは「ローカルビジネス」でよい
itemprop="name"名前
img itemprop="logo" src="logo.jpg"ロゴ
img itemprop="image" src="img.jpg"画像
itemprop="telephone"電話番号
itemprop="email"メール
itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"住所(囲む)
itemprop="postalCode"郵便番号
itemprop="addressRegion"都道府県
itemprop="addressLocality"市区郡
itemprop="streetAddress"町村、番地
itemprop="url"URL

頻繁に更新したい箇所

なるべく更新が容易にできるコーディングにしておいてくださると助かります。

お客様が自分で更新できるよう、WordPress構築の指示に組み込み等もしてみたいのだが、お客様が強いて望まれる場合だけにとどめ、望まれていないなら、脆弱性のリスクもあるので「現状は」多少更新が面倒でも静的HTMLにしようと決めた。

リンクカラーの指定

a:link・a:visited・a:hover・a:activeのリンクカラーとテキストデコレーションはデフォルトでよい。

ドラッグカラーの指定

デザイナーから指示のある場合仕様書に書いておくこと。

リターンメール文面

業務連絡:メールの自動返信はお客様にどうしますかとかそういうことはしない。
ただしデフォルトのままでも困るので、汎用的に使えるフォーマットを作成する。
「早急に」はよくない。
「近日中」などに変える。
もっといい表現があるかも。

コーダーさんへ:内容が合っていればパーツの位置など完全に同じにしなくてもいいですよ!

データ関係

ファビコン

TOP階層に置き、絶対パスで呼び出してください(統一したいから)。

rel属性にshortcutの記述が必要なのは、IE8以下の対応が必要なときのみです。
shortcutは非準拠ですので使わないようにしましょう。

悪い例<link rel="shortcut icon" href="favicon.ico">
いい例は規約に記載のものを参考に

アップルタッチアイコン、OGP画像、ローディングgif

TOP階層に置き、絶対パスで呼び出してください(統一したいから)。

イラストレーターAI

テキスト部、レイヤーわけてます。

デザイナーから上がってきている指示

CSSで実装してほしい箇所、動きのある個所の指示など

レスポンシブ対応のお知らせ

このサイトはレスポンシブに対応しておりますので、移動中やベッドの中でもスマートフォンで快適にお読みいただけます。

↑ PAGE TOP