入稿規定とコーディングルール

当サービスにて対応できないコーディング

まず、案件ごとに、柔軟な対応というのができません。全て入稿規定に沿ってマニュアル通りコーディングいたします。こちらが当サービスの最大のデメリットでございます。そして、以下のような、現在マニュアル化できていない作業には対応できません。

jsを用いたコーディング
cssアニメーション全般
規定のフォント以外の指定
ホバーなどで画像を切り替える（js,cssともに不可）
弊社コーディングルール以外でのコーディング
PCページ、スマホページの切り替え
画面幅に応じた等倍以外の見た目の調整
サーバーへのアップロード作業

例外として、ページ内のスムーススクロールのみjs（ヴァニラ）で対応しています。スクロールスピードの調整も現在はできません。

今後、対応できる範囲を広げていきたいと考えていますので、ご意見を頂戴できると嬉しいです。

原則として、最小画面幅でデータをご入稿いただき、ご指定サイズまで、等倍で拡大していくコーディングとなります。どの端末で見ても、入稿されたデータに極力近づけた描写を目指すコーディングとなります。

画面幅の拡大や縮小に伴い、コーダー自身が、気を効かしてレイアウトの組み替えを行うサービスではありません。PCとスマートフォンで見た目を変更する場合は、PC用はPC用LPとして、スマートフォン用はスマートフォン用LPとしてそれぞれご入稿ください。

入稿規定とコーディングルール（2023年10月17日現在）

弊社の入稿規定とコーディングルールを以下にまとめていますので、ご確認の上、ご発注・ご入稿お願いします。

イラストレーターデータのレイヤー順（上から順番）にコーディングします。適度にコンテンツをレイヤー分けして、データを作成してください。

上のレイヤー構造であれば、

<div class="header" id="header">
     ここにheaderレイヤーの要素 
</div> 
<div class="fv" id="fv">
     ここにfvレイヤーの要素 
</div> 
<div class="aboutus" id="aboutus">
     ここにaboutusレイヤーの要素 
</div> 
・
・
・

という流れで、トップレベルのレイヤーごとに区切ってコーディングします。レイヤーの並び順（上から順番）にコーディングしていきます。スタイルは、全てクラスに当てます。IDはページ内スクロール用に付与しています。

レイヤー名は半角英字で

レイヤー名をそのままクラス名にするため、レイヤー名は必ず半角英字にしてください。（半角数字も使えますが、頭文字は必ず半角英字）

各レイヤーは、直接の子要素を順に書き出していきます。文字列（※文字列で書き出すをご確認ください）以外の要素は、全て画像で書き出します。 ひとまとまりのパーツ等はグループ化しておいてください。また、レイアウトの配置は全てcssファイルで、各レイヤーごとに相対位置での配置となります。

<div class="header" id="header">
    <p class="header__text__1">オフショアコーディング</p>
    <img class="header__img__2" src="グループの画像相対パス">
    <img class="header__img__3" src="長方形の画像相対パス">
 </div>

レイヤー内の一番下の要素が、単色のパス（長方形）の時（上図ではbg）は、パスの色をそのレイヤーの背景色とします。単色のパス以外の時は画像を配置します。

全てのレイヤーの横幅は統一する

全てのレイヤーの横幅（それぞれのレイヤー内の全ての要素を選択した時の横幅）は同じ横幅にしてください。また、全てのレイヤーは、縦幅、横幅ともに小数点以下のない整数にしてください。（整数でなくてもコーディングを進めますが、滲みや見栄えにずれが生じてもコーディングやり直しの対象外となります）

上図ですと、header,fv,aboutus,pointそれぞれの横幅を375pxにしてください。小さい場合は、透明のパスで囲う。大きい場合は、クリッピングマスクをかける。といった対応をお願いします。

ボタン

当サービスでは、「クリックしたら○○する」という何らかの機能を持ったものを「ボタン」と呼びます。クリックしたら、別のページを開いたり、同じページ内の特定の箇所にスクロールするものも全てボタンと表現します。

範囲を明確にしたパスと一緒にグループ化し、レイヤーの直接の子要素に配置
グループ名を「btn__****」とする。****の部分は任意の文字列（英数字のみ）

範囲を明確にしたパスと一緒にグループ化し、レイヤーの直接の子要素に配置

ボタンは、必ず範囲を明確にしたパスと一緒にグループ化し、レイヤーの直接の子要素に配置してください。

グループ名を「btn__」とする。の部分は任意の文字列（英数字のみ）

また、グループ名を「btn__****」としてください。ボタンは画像で書き出しします。

「btn__****」の****の部分は任意の文字列（英数字のみ）にしてください。リンク先（遷移先）が同じ場合は、同じ文字列を用いることができますが、その他の場合は、重複不可となります。こちらに関しては、後述します「入稿シート」をご確認ください。

上記は、一つのレイヤー内に、同じリンク先が2つあるはずがない。という前提がございます。デザインによってはそういうケースがあるかもしれませんので、万一、同じレイヤー内に同じ遷移先のボタンがある場合は、それぞれの****部分（「btn__ここを変える」）を変えてください。

どこからどこがクリック（タップ）範囲なのかを明確にするために、テキストのみのボタンでも必ず、透明なパスなどでクリック範囲を囲い、グループ化してください。

上図のようなデータでは、どこからどこがクリック範囲なのか、人によって解釈が分かれます。

そういったことを防ぐために、クリック範囲を明確にした透明なパス（長方形）と一緒にグループ化してください。

そして、それぞれのグループにbtn__から始まる任意の名前をつけてください。btn__01,btn__02といった連番でも問題ございませんが、管理しやすい名前をつけていただくようお願いいたします。なお、リンク先の指示は、後述する入稿シートにてお願いします。リンク先の指示ミスは、無償でやり直しの対象外となります。

同一ページ内のある地点へスクロールさせる場合は、「btn__#レイヤー名」と名付けてください。上図では「btn__#top」としています。このボタンをクリックすると、topというレイヤーにスクロールするという意味になります。

ご入稿時アウトラインが不要なフォント

メイリオ
ヒラギノ角ゴ Pro
小塚ゴシック Pro
小塚ゴシック Pr6N
游明朝体
ヒラギノ明朝 Pro
小塚明朝 Pro
小塚明朝 Pr6N
ヒラギノ丸ゴ Pro W4
ヒラギノ丸ゴ ProN W4

上記のフォント以外のフォントは、必ずアウトラインをしてご入稿ください。

文字列で書き出す

画像で書き出すと、Googleなどのクローラー（WEB上のページ内容を解読する仕組み）には、内容が伝わりません。そのため、なるべく文字列で書き出しできる部分は、画像ではなく文字列で書き出す。というのがコーディングの基本となります。SEOや広告ランクに影響するとも言われます。

しかしながら、WEBのデザインの経験があまりない方にとっては、どれを文字列で書き出すかの判断は非常に難しいものです。そもそも文字列として書き出しできない文字（装飾）もたくさん存在します。そのため通常は、ディレクターなどWEBに精通している方が判断するかと思います。

それでも、当サービスでは、デザイナーさんが作ったデータを元にコーディングしますので、多少ご理解いただき、それを入稿データに反映していただく必要があります。

このページで今後「文字列」と表現するものは、1つの要素としての文字列と認識してください。「文字列 = 1つのポイントテキスト」または、「文字列 = 1つのエリアテキスト」とします。

大前提として、親レイヤーの直接の子要素にある、アウトラインしていない文字列で、入稿可能なフォントを利用されている文字列は、文字列として書き出しを試みます。（グループ化してあるものなど、直接の子要素でない文字列は画像として書き出しします）

ただし、弊社のコーディングで文字列として書き出しできるのは、以下の基準を満たしている場合に限ります。

文字列のフォントの種類を途中で変えない
文字列の太さを途中で変えない
文字列の文字サイズを途中で変えない
文字列の行間を途中で変えない
文字列の水平、垂直比率は100%のみ
文字列のカーニングは0のみ
文字列のトラッキングを途中で変えない
ここに記載のない項目は利用不可
線幅、線色、傾斜、回転、打ち消し線、など一切の効果利用不可
効果使用不可
横書きかつ、回転やシアーなどを利用していない
ご入稿時アウトラインが不要なフォントに限る

言葉では説明しづらいので、イラストレーターのウインドウにそれぞれ注釈を入れたものが以下の図となります。

赤枠で囲ってある項目は、注釈の値で文字列として書き出しします。全ての変更を無視して文字列として書き出ししますので、赤枠の値を変更した文字列は、アウトラインしてご入稿ください。

青枠は、注釈に記載の通り、条件に合致しない文字列は、画像として書き出しします。こちらはアウトラインしていなくても、文字列または画像で見た目を維持した状態でコーディング可能です。

上図のように、文字列を選択したときに、表示されない項目のある文字列（文中で項目が変更されている文字列）は、画像として書き出しします。

いかなる効果も文字列として正確に書き出しできません。効果が使われていても、効果の適用されていない状態で書き出しします。効果やその他の赤枠の項目を使った文字列は、必ずアウトラインしてください。

文字列の改行は、データ上で改行してある箇所で改行しますが、エリアテキストは、横幅を指定するため、閲覧するブラウザや字間の差異により多少のずれが生じる場合があります。そのため、エリアテキストの「文中」に改行を入れることはお勧めしません。（文の区切り「。」での改行は、見た目上、特に問題になることはございません）