この度は、オフショアコーディング（以下、当サービス）にご興味をお持ちいただき誠にありがとうございます。
当サービスは、Adobeイラストレーターで制作したデータをご入稿いただき、htmlファイル（その他付随するcssファイル、画像ファイル含む）を作成し納品するコーディング代行サービスです。
これまで、弊社では、東証１部上場企業様をはじめ、さまざまな業種のLPを制作、コーディングして参りました。その中で、求められたのは、大半の場合、コストとスピード、そして、デザインカンプの通りに仕上がっているかどうかでした。
この部分は手間がかかるが「こういう風にコーディングしておけば、更新が入っても楽だろう。」と、余計な気をきかしても、大抵の場合、ゴロ替え（その部分がごそっと無くなったり、全く別のものに変更）になって、結局その部分の更新作業も入ってこない。なんてことも無数に経験してきました。
極端な話、コードをどれだけ綺麗に丁寧に書いても、工夫を凝らしても、時間をかけても、褒められることもなければ、受注単価が上がるわけではありません。対エンドクライアント様だけで見ると、そんなことは評価すらされません。そのLPからどれくらい申し込みがあったのか？大切なのはそこだけなのです。
評価されないことを一生懸命やる価値があるのか？評価される部分にだけに注力した方が、全員がハッピーになれるのではないか？そう思う気持ちが日に日に強くなってきました。
そこで、私たちは、コストとスピード、そして、入稿データの通りに仕上げることだけに注力したサービスを立ち上げることにしました。
「余計な気は効かしません！」いただいたデータをマニュアル通りにコーディングするだけのサービスです。
当サービスは、入稿規定とコーディングマニュアルを定めることで、日本語のわからないスタッフでも「正確な日本語ページ」をコーディングできるようにしています。どのスタッフが対応しても、同じ納品データをお届けする。ということに比重を置いたサービスとなります。
同時に、ご入稿いただいたままの見た目を維持してコーディングするということも徹底しています。画面幅が変われば、ここの部分がこうなったほうが見やすい。といった、感覚やセンス、感じる力というのを排除し、コーディングします。どの画面幅や端末で見ても、いただいたままの見た目で表現するようにしています。
コストとスピード、そして、デザインカンプの通りの仕上げを求める企業様には、これ以上ないサービスです。
そして、当サービスは、日本一、格安で短納期なコーディング代行サービスを目指しています。SNSを通じてご案内させていただいております通り、期間限定で110円でLP/1ページのコーディングをご依頼してくださるモニターを募集しています。17時までのご入稿で翌日に納品させていただきます。（土日祝日のご入稿は、翌営業日の入稿扱いとなります。）
なぜ、このような金額なのかと申しますと、弊社の入稿規定が、デザイナーさん（データを作成する方）にとってわかりにくいかもしれない。という疑問が残っているからです。
デザイナーさんからの直接のご依頼というのが増えてくるであろうと想定しており、その場合、ディレクションをする人間がいないので、デザイナーさんにディレクションを兼任していただく必要が出てきます。このページにご注意いただきたい事項をまとめていますが、正確にお伝えすることができるのかを確認するため、今回は、実際にモニター様に、入稿用データの作成〜弊社とのやりとり〜成果物（納品データ）をご確認いただきたいと考えています。
お客様が意図した通りの仕上がりでコーディングするために、弊社の説明に不足はないのか？いただいたデータを元に実際にコーディングを進め、お客様にも仕上がりをご確認いただき、もし、意図した通りに仕上がっていない場合は、どういった説明を事前に付け加えれば良いのか。というところまでを、やりとりを通じヒアリングさせていただきたいと考えております。
上記の点をご承知いただい上で、110円にてコーディングをさせていただければと思っています。金額設定自体は、0円でも良かったのですが、決済システム（システム上0円の決済ができない）を使った流れも含めて使用感をお試しいただく必要があったため、ご負担にならない程度の金額をということで、110円とさせていただいております。
もちろん、入稿規定がわかりやすければ、意図した通りに仕上がっていたはずなのに、そうでなかった場合は、無償にて再作業させていただきます。この場合も、再入稿の翌日納品となりますことをご理解くださいませ。また、弊社側では入稿いただいたデータの編集は行えませんので、編集が必要な場合は、お客様にて行なっていただきますことを予めご了承願います。
また、そもそも、そんなことできません。というような内容につきましては、追加の作業はできません。その時点までの成果物を納品物とさせていただきます。どういったコーディングができるのかは、以下に記していますが、ご不安な場合は事前にご確認ください。
当サービスにて対応できないコーディング
まず、案件ごとに、柔軟な対応というのができません。全て入稿規定に沿ってコーディングいたします。こちらが当サービスの最大のデメリットでございます。そして、以下のような、現在マニュアル化できていない作業には対応できません。
- jsを用いたコーディング
- cssアニメーション全般
- 規定のフォント以外の指定
- ホバーなどで画像を切り替える（js,cssともに不可）
- 弊社コーディングルール以外でのコーディング
- PCページ、スマホページの切り替え
- 画面幅に応じた等倍以外の見た目の調整
- サーバーへのアップロード作業
例外として、ページ内のスムーススクロールのみjs（ヴァニラ）で対応しています。スクロールスピードの調整も現在はできません。
今後、対応できる範囲を広げていきたいと考えていますので、そちらについてもご意見を頂戴できると嬉しいです。
原則として、最小画面幅でデータをご入稿いただき、ご指定サイズまで、等倍で拡大していくコーディングとなります。どの端末で見ても、入稿されたデータに極力近づけた描写を目指すコーディングとなります。
弊社入稿規定とコーディングルール（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__****」の****の部分は任意の文字列（英数字のみ）にしてください。リンク先（遷移先）が同じ場合は、同じ文字列を用いることができますが、その他の場合は、重複不可となります。こちらに関しては、後述します「入稿シート」をご確認ください。
上記は、一つのレイヤー内に、同じリンク先が2つあるはずがない。という前提がございます。デザインによってはそういうケースがあるかもしれませんので、万一、同じレイヤー内に同じ遷移先のボタンがある場合は、それぞれの****部分（「btn__ここを変える」）を変えてください。
どこからどこがクリック（タップ）範囲なのかを明確にするために、テキストのみのボタンでも必ず、透明なパスなどでクリック範囲を囲い、グループ化してください。
上図のようなデータでは、どこからどこがクリック範囲なのか、人によって解釈が分かれます。
そういったことを防ぐために、クリック範囲を明確にした透明なパス（長方形）と一緒にグループ化してください。
そして、それぞれのグループにbtn__から始まる任意の名前をつけてください。btn__01,btn__02といった連番でも問題ございませんが、管理しやすい名前をつけていただくようお願いいたします。なお、リンク先の指示は、後述する入稿シートにてお願いします。リンク先の指示ミスは、無償でやり直しの対象外となります。
同一ページ内のある地点へスクロールさせる場合は、「btn__#レイヤー名」と名付けてください。上図では「btn__#top」としています。このボタンをクリックすると、topというレイヤーにスクロールするという意味になります。
ご入稿時アウトラインが不要なフォント
- メイリオ
- ヒラギノ角ゴ Pro
- 小塚ゴシック Pro
- 小塚ゴシック Pr6N
- 游明朝体 Regular
- ヒラギノ明朝 Pro
- 小塚明朝 Pro
- 小塚明朝 Pr6N
- ヒラギノ丸ゴ Pro W4
- ヒラギノ丸ゴ ProN W4
上記のフォント以外のフォントは、必ずアウトラインをしてご入稿ください。
文字列で書き出す
画像で書き出すと、Googleなどのクローラー（WEB上のページ内容を解読する仕組み）には、内容が伝わりません。そのため、なるべく文字列で書き出しできる部分は、画像ではなく文字列で書き出す。というのがコーディングの基本となります。SEOや広告ランクに影響するとも言われます。
しかしながら、WEBのデザインの経験があまりない方にとっては、どれを文字列で書き出すかの判断は非常に難しいものです。そもそも文字列として書き出しできない文字（装飾）もたくさん存在します。そのため通常は、ディレクターなどWEBに精通している方が判断するかと思います。
それでも、当サービスでは、デザイナーさんが作ったデータを元にコーディングしますので、多少ご理解いただき、それを入稿データに反映していただく必要があります。
このページで今後「文字列」と表現するものは、1つの要素としての文字列と認識してください。「文字列 = 1つのポイントテキスト」または、「文字列 = 1つのエリアテキスト」とします。
大前提として、親レイヤーの直接の子要素にある、アウトラインしていない文字列で、入稿可能なフォントを利用されている文字列は、文字列として書き出しを試みます。（グループ化してあるものなど、直接の子要素でない文字列は画像として書き出しします）
ただし、弊社のコーディングで文字列として書き出しできるのは、以下の基準を満たしている場合に限ります。基準を満たしていない場合は、原則として画像として書き出しをしますが、場合によっては、文字列として書き出しし見た目が意図しない結果となる場合がございます。そのため、あらかじめ文字列で書き出しできない文字列は、アウトラインしていただけますようお願いします。
- 文字列のフォントの種類を途中で変えない
- 文字列の太さを途中で変えない
- 文字列の文字サイズを途中で変えない
- 文字列の行間を途中で変えない
- 文字列の水平、垂直比率は100%のみ
- 文字列のカーニングは0のみ
- 文字列のトラッキングを途中で変えない
- その他は利用不可
- 線幅、線色、傾斜、回転、打ち消し線、など一切の効果利用不可
- 効果使用不可
- 横書きかつ、回転やシアーなどを利用していない
- ご入稿時アウトラインが不要なフォントに限る
上図の赤枠で囲ってある項目は、初期値のままご利用ください。該当の項目が変更されている場合は、画像で書き出す、もしくは、項目を無視して文字列で書き出しします。
選択したときに、表示されない項目のある文字列（途中で項目が変更されている文字列）は、正確に文字列としてコーディングできません。
いかなる効果も文字列として正確に書き出しできません。効果が使われていても、効果の適用されていない状態で書き出しします。効果を使う場合は、必ずアウトラインしてください。
文字列の改行は、データ上で改行してある箇所で改行しますが、エリアテキストは、横幅を指定するため、閲覧するブラウザや字間の差異により多少のずれが生じる場合があります。そのため、エリアテキストの「文中」に改行を入れることはお勧めしません。（文の区切り「。」での改行は、見た目上、特に問題になることございません）
逆に、「必ずここで改行させたい。」「途中で改行されては困る。」文字（例えば見出しなど）は、ポイントテキストを用いてください。ポイントテキストは横幅を指定しないため、意図した位置で改行できます。
長方形以外のエリアテキスト、全てのパステキストは文字列として書き出しできませんので、アウトラインをお願いします。
アウトラインせず入稿可能なフォント
ゴシック系は、
- メイリオ Regular,Bold
- ヒラギノ角ゴ Pro W3,W6
- 小塚ゴシック Pro EL,L,R,M,B,H
- 小塚ゴシック Pr6N EL,L,R,M,B,H
上記のフォントが入稿可能です。WEB上でどのように表示されるかは、上図をご参照ください。小塚ゴシック Pro、小塚ゴシック Pr6Nは、細かくフォントの太さを指定できますが、EL,L,R,Mは、標準の太さ。B,Hは太字として書き出しします。
明朝系は上図のフォントがご入稿可能です。注意点はゴシック系と同様です。
丸文字は上図のフォントがご入稿可能です。注意点はゴシック系と同様ですが、アンドロイド系、ios系では丸文字は表示されませんので、ご注意ください。