コーディング代行について

質問

勤めている会社の通販サイトのリニューアルをすることになり、
デザインだけこちらでやって、コーディングを、
そのECサイトのシステムを提供している会社に依頼しました。

それで、出来てきたものを見たら、
なんだか納得のいかないものだったので、ご相談したくここに質問する次第です。

私は会社のネット通販の担当ではありますが、
お客様の対応などもしつつ、
商品の追加や、ちょっとした更新などを見よう見まねでやっているかんじで、
WEBデザインやコーディングのことはあまりよくわかっていない素人なので、
詳しいかたのご意見をお聞きできたらありがたいです。

ちなみに、デザインは、Fireworksで作成していたのですが、
PSDじゃないとダメだと言われたので、
Fireworksで作ったものをそのままpsdで別名保存して、それを送り、
一応、jpgのものも見てもらえるようにしました。

デザインをするにあたり、
例えば、ヘッダーのロゴといろいろなボタンは上辺を揃え、それぞれの間隔は何pxにするとか、
この文章とこの文章との間隔はどのくらい空けるとか、
私なりによく考えて作ったつもりなのですが、
そういう細かい指定は、多くの箇所で無視されてしまいました。

いろいろな画像やテキストの配置は、
こちらが提出したデザインとだいたい同じようにしてもらえるものと思っていたのですが、
コーディングというのはそういうものではないのでしょうか。

あるいは、こちらの作ったデザインデータに何か問題があったのでしょうか。

回答No.3

tkmojo · ベストアンサー

ちゃんとWEBの事をわかった上でデザインしたものでしたら、普通はそういう事はありません。

WEBデザインの事を理解していない方が作成したデザインは、そのままのレイアウトに出来ない事が多いです。
特に「テキストは環境によってサイズや文字間が変わる」事を理解していないと、思う通りには仕上がらないのは当然です。

狭い所に無理やりつめたテキストが改行されていたり、
バナーの上にテキストを置いてしまったがゆえにはみ出したり…
まぁはみ出すのはコーダーとしてもNGですから背景を広げる様な処理は行いますが。

きちんとデザインされたデータなら、普通はデザインに1ピクセル単位まで合わせて当然です。
それをしないのは、単純にコーディングの技術が無いんでしょう。
システム開発会社にコーディングを依頼したのが間違いというか。

Fireworksのpngを受け付けないというのも、ちょっと怪しい感じがします。
aiを受け付けないならまだわかりますが、WEBに特化したソフトのFireworksを受け付けないのはよくわかりませんね。

まぁしかし実際にデザインと仕上がりのサイトを見てみないと
どっちに原因があるかはわかりませんね。

htmlの文法チェックサイトなんかを通してみて、
明らかにエラーだらけの場合は先方が怪しいとみていいかもしれません。

それと、これからコーディングを依頼する際には「どこまでしっかりやるか」を確認したほうがいいと思います。
対応ブラウザや記述するhtml・xhtmlのバージョン、デザインの再現性などをしっかり事前に決めておかないと、
勝手に適当なものを作って「出来ました」と言われれば返す言葉もありません。
未だに「コーディングやります」といってテーブルレイアウトをしてる会社もあるくらいですからね。

お礼

ご回答ありがとうございます。

私が感じていたことは、tkmojo様が書いてくれたこと、まさにそのようなことでしたので、
ちょっと安心いたしました。

ただ、私のWEBの知識があいまいで、
「ちゃんとWEBの事をわかった上で」という大前提を満たしているか、はっきりと自信が持てないので、
それでこの教えてgooの場でご相談させていただいた次第でしたが、
おっしゃる通り、実際のところは、デザインと仕上がりのサイトを見ていただかないと、
何とも言えないですよね。

文法チェックをやってみます！

「システム開発会社にコーディングを依頼したのが間違いというか。」
とのこと、そうなのですね。そういうこともわからなかったです。
そこのショッピングカード独特の機能やシステムがあるので、
そこの会社の中の専門の部署にお願いすれば間違いないだろうと思っていました。

（あと、今見たら、そこの会社のHPには、Fireworksのデータも対応していると書いてありました。
実際の担当のかたと話す段になって、PSDじゃないと、と言われたのでした。）

それから、コーディングを依頼する際には「どこまでしっかりやるか」を確認したほうがいいとのこと、
このことも頭にありませんでした。

いろいろ甘かったと思います。

自分がどこまでWEBのことを理解しているか、ということ自体がわかっていない状態で、
このような仕事を担当してしまったことも、よくなかったと思います。
もうちょっと勉強します。

どうもありがとうございました！！

回答No.8

ORUKA1951

＞「４つのボタンを等間隔で横に並べる。」という内容は、どのように伝えるべきでしょうか？
　というより、全体のイメージを３～４つの形で伝えると同時に、それぞれに書きべき内容(テキスト)、画像、ロゴ、フォントなども伝えます。
・サイトのトップ(ホーム)のデザイン
・各カテゴリーのトップデザイン（上と同じでよいかも）
・メインコンテンツのデザイン
・会社情報(理念・歴史・社長挨拶・紹介・問合せなど)
　それによって、HTMLのマークアップをしてもらいます。この時点では具体的なデザインはありません。そのようにデザインできる文書構造を決めます。

　その間に、平行して具体的なデザイン案を検討します。それぞれの文字数や内容によって実用的なデザインは決まっていくでしょう。
・配色　企業カラー
・フォント　ロゴ
・メインコンテンツで使用する画像の用意

　基本的には、上の例で行くと３～４パターンの内容とそれぞれについて、数パターンデザインが固まっていくでしょう。一度のやり取りで終了することはありません。

　ユーザーが混乱しないように、可能な限りイメージやデザインや配色は統一します。ユーザーインターフェース(リンクの色とかは、個人のサイトならともかく企業サイトではデフォルトから弄ることはありません)
　徹底的にこの３(４)パターンを練り上げていきます。以後、それがテンプレートになります。

　デザインは、最終的にひとつに絞られることが多いですが、公共機関や幅広い利用者を想定してくる会社では、代替スタイルシートや、スマホやテレビ用にまったく異なるデザインを求められる場合もあります。また印刷が想定されるページについては印刷用スタイルシートを求められる場合もあります。
　そのため、純粋にHTMLだけ最初につくると反って非効率になります。いくつかのデザインも決めながらHTMLも書いていきます。

＞・データに書き込む、
＞・別途打ち合わせをするなどして口頭で伝える、
＞・メールか何か文章で伝える、
　実際に、仮のサイトを作ってそれを見ながら、メールや電話でやり取りすることが多いです。
　最終的にはプレゼンテーションの機会を設けます。
　その後は、ひたすらテンプレートにデータを流し込むことになります。(大きなサイトでは動的に作成しますから、データベースなりXMLにデータを入れるだけですから、バイトの子でもできます)

　言い換えれば、資料(テキストと画像)とデザインを渡して、「ハイ、出来上がりました。」と言うことはないです。お互いに不満が残りますからね。

　想像できますように、ちゃんとした制作会社でしたら、そこまでの手をかけますから費用も高くなりますし、それに対処するノウハウも持ってます。
　そうでない場合は、安価ですが互いに不満が残るものになるでしょう。

　全体を拝見するところ、技術があれば、あなたがデザインされたと寸分たがわぬデザインも出来ますが、それは、小さなウィンドウで見ると横スクロールが必要だったり、フォントサイズが変わると崩れたりと、必ずしも望ましいデザインではないでしょう。
　利用されているのがＥＣサイトとのことですが、デザインが完璧にあわせられない要因は、技術もありますが、使用しているシステム(CMS-- http://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%9E%E3%83%8D%E3%83%BC%E3%82%B8%E3%83%A1%E3%83%B3%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0 )の制約もあるのではないかと思います。
　同じECサイトの他社のデザインを比較すると、どこまでが可能でどこまでが不可能化の目安は立ったと思います。

　いずれにしても、先方との意思疎通が足りないのではないかと思います。

お礼

たびたびのご回答、本当にどうもありがとうございました。

コーディングを依頼するという仕事は初めてで、
どうように進めたらいいか実際のことをわかっておらず、
そのせいでスムーズにいかなかった点も大いにあるなあ、とあらためて思いました。

「いずれにしても、先方との意思疎通が足りないのではないか」とのこと、
皆さんからいただいたご回答も踏まえて考えるに、
まさに、それに尽きると思います。

先方の都合で、最初の打ち合わせの時間なども十分に取れず、不安だったのですが、
大丈夫、わかりました、という感じだったので、大丈夫なのかなと思ってしまいました。

それも、どこまで何をしっかり伝えないといけないという基準がこちらにあれば、
回避できたことでした。

それから、納期の面で無理があったのかもしれませんし、
料金の面でも、相手にとっては「その程度」の仕事だったのかもしれません。
そのような見極めがつかないのもこちらの経験不足のせいですね。

ともあれ、今回のことは本当にいろいろな面で勉強になりました。
この場でいろいろなご回答を頂けたことで、いろいろな視点で考えることができ、
反省点も見えてきて、質問してみてよかったです。

ORUKA1951様、ご回答くださったみなさま、
どうもありがとうございました！！

回答No.7

ORUKA1951

No.1です。
　ウェブのコーディングは、カタログとは違うことは理解されているとして
　皆さんへの補足やお礼を見てです。
＞同じ大きさの　ボタンA　ボタンB　ボタンC　が横に並んでいるとして、それぞれの間隔は10pxぐらいずつ開けて、上下位置を整列させるようにしたいなー、

　そこまでのサイズは決めないほうが良いでしょう。「４つのボタンを等間隔で横に並べる。」程度でよいです。
　よく参考にさせてもらうのですが・・
[例]⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　でブラウザはIE(8以降)かfirefoxで、[表示]メニューからスタイル(シート)に進み、{ページ最上部へ}を選択するとボタンが並んだ形になります。
　その状態で、ウィンドウサイズを変えたり、フォントサイズを変えてみくください。
・firefoxの場合、Default FullZoom Level( https://addons.mozilla.jp/firefox/details/6965 )を使うと良いでしょう。
　　その場合は[表示]メニューで「ズーム」→「文字サイズだけ変更」にチェックするとCtrl+＋でフォントサイズだけ変わります。
　様々なウィンドウ幅やユーザーがフォントのサイズを変えたときのデザインがチェックできます。

　サイズがピクセル単位で指定していないため、ウィンドウ幅やフォントサイズに関わらず、同じデザインでボタンが配置されます。
　他のスタイルを選択してみたり、印刷プレビューで見たりすると、ウェブでのデザインの意味が分かると思います。Lynxというgoogleお勧めのテキストブラウザ( https://support.google.com/webmasters/answer/35769?hl=ja#2 )で見た画面が添付です。

　ソースを見ると極めてシンプルで、誰が見てもどこに何が書かれているかが分かりますね。(もちろん検索エンジンも)
　記事の訂正や修正も誰でも出来るでしょう。
ウェブのデザインで大事なことは
★どんな環境からもWebの情報を利用できるようにすべきだ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )
　ということですから、あまり細かい指定はせずに、「背景はこの画像」「ボタンはこの位置に横に並べて」「(WAIを考慮して)配色はこの様にして」「使用する画像はこれとこれを使って」「３カラムで」・・といった形で、イメージとして渡していただくと幸せです。

お礼

たびたびのご回答、どうもありがとうございます。

そこまでのサイズは決めないほうが良いでしょう。
「４つのボタンを等間隔で横に並べる。」程度でよいです。
とのこと、やはり私がいけなかった点がありましたね。反省します。

ところで、いろいろ質問してしまい申し訳ありませんが、
「４つのボタンを等間隔で横に並べる。」
という内容は、どのように伝えるべきでしょうか？

・データに書き込む、
・別途打ち合わせをするなどして口頭で伝える、
・メールか何か文章で伝える、
などでしょうか。

回答No.6

b0a0a

場合によりますが細かい指定に忠実に作ることは
環境依存もありますし大変難しいです

表面のデザインさえよければ、ユーザビリティが悪く
セマンティクスがぐちゃぐちゃでコード量も多くていいというわけでもないと思います

とはいっても、それに近づける努力はすべきだとは思います

おそらく上に挙げたような様々な理由であまりに無茶なデザインだったか、
意図が伝わってなかったか、報酬相当の出来栄えだったのではないでしょうか

お礼

ご回答ありがとうございます。

そんなに無茶なデザインというわけではなかったと思うのですが、
・・・それは私が思うだけで、実際にはわからないことですよね。。

意図が伝わってなかったか、報酬相当の出来栄えだったとのこと、
私が、意図の「伝え方」をわかっていなかったことは大いにあると思います。反省します。

報酬相当の出来栄え、というのも、その通りかもしれません。
この料金ならこのクオリティでも仕方ないという判断基準がこちらにないということも、私の問題ですよね。

いろいろ勉強になりました。

どうもありがとうございました。

補足

たびたびすみません。

b0a0a様のご回答に対する補足というわけではないのですが、
私の質問内容に補足をさせていただきたく、書くところがわからなかったので、
すみませんが、ここに書かせていただきます。

そもそもの、デザインの指定のしかたについてご相談したいのですが、
たとえば、

同じ大きさの　ボタンA　ボタンB　ボタンC　が横に並んでいるとして、
それぞれの間隔は10pxぐらいずつ開けて、上下位置を整列させるようにしたいなー、
と思った場合、

●それをどのように伝えたらいいのでしょうか？
「そのように配置したPSDデータを渡す」だけではだめでしょうか。

●あるいは、
ボタン同士の間隔を「10pxずつ空ける」とか、そんなことを言うのは細かすぎるのでしょうか。

回答No.5

metametamu

技術的な部分だけでデザイン通りに組むことが可能か不可能かで言われると99%くらいはデザイン通りに組めます。
できない場合は技術不足・条件付のコーディング・コーディングへの考え方の差等が考えられます。
こういうのには料金や納期も関わってくるので一概には言えませんが。

本来webサイトのデザインってコーディングの知識なしにできるものじゃないと思うので、有る程度コーダー側で補正する作業が必要なサービスであることは間違いありません。
なので残りの1%はデザイン側の責任でしょう。

お礼

ご回答ありがとうございます。

99%くらいはデザイン通りに組めます、とのこと、ちょっと安心いたしました。

料金や納期も関わってくる、とのこと、そうですよね。
そのあたりの事情で、あまり丁寧にやってもらえてないのかな、という印象はあります。

私の側に理解がないせいで、今回の納期と料金がどのくらい厳しいものなのかがよくわからないのもいけないのですが、
まあ、お互いの相談のうえで決めたことではあります。

先方はとても忙しいらしく、こちらの依頼したものは最低料金の仕事なので、
ほかにもっと大事な（利益になる）仕事もあるだろうことも想像がつきます。

残りの1%はデザイン側の責任、とのこと、反省します。
知識が不十分なために、困らせた点があったかもしれません。
こんなのできないよ、という点があるならば、デザインを見せた時にそれを言ってほしいと思いますが、
そんな話も出ませんでした。

でも、こちらの知識がないために、うまく話がすすめられなかった点はあったと思います。

いろいろ勉強になりました。

どうもありがとうございました！！

回答No.4

duke_kimura

ご自身の会社の方に、あなたの送ったデザインデータと、できあがったWebサイトを見てもらうのがいいと思います。
この時デザインに関して絶対に口頭で説明せず、設計書(デザイン)と比べて貰うようにしてください。

あなたと同じ様な指摘がその方から出てくればコーダーが悪い、
出てこなければデザイン(の指定の仕方)が悪いと思います。

他の方も書かれていますが、唯一、画像に含まれていない「テキスト」だけは、環境にかなり左右されますので再現が難しいです。ここは妥協点を見つけてください。

お礼

ご回答ありがとうございます。

社内に私よりWEBに詳しい人が一人いて、その人にも少し相談していたのですが、
でも口頭で説明しちゃってました。

ほかの人にも見てもらうようにします！

「テキスト」が環境に左右されることは、私も理解できていると思います。

どうもありがとうございました！

回答No.2

play_with_you

残念なことに質問者さんの態度は「デザイナー様」のそれですね。

同一のHTMLやCSSが記述されたものを開いてもブラウザによって所々表示のされ方が違うとか、
Javascriptでブラウザによって使えない機能があるとか、
だからできるだけその差異を目立たせないように組むとか、
コーディングする側からすれば当然の前提があるんですよ。
おそらく、「細かい指定」に完全に従うと予定通りの表示にならない環境があるとかそういう事情なんじゃないですか？
「作ったデザインデータに何か問題があった」可能性はあります。

例えば、画像やボタンの配置ならともかく
＞この文章とこの文章との間隔はどのくらい空けるとか
なんてことされると、閲覧者が自分の見やすいように変更できず迷惑なわけです。
アクセシビリティの低いサイトの代名詞とも言えます。
まあ、依頼者に説明も確認もせず勝手に変えたのは褒められたものじゃないですけどね。

というか、不満なら本人に問い合わせればいいのでは？
素人の意見を100%採用することは無いとはいえ、指定と違う表示になるように書いたのにはちゃんと理由があるでしょうから。

なお、以上はすべてコーディングした人がまともであるという前提です。
クソ業者だった場合は分かりません（笑）

お礼

ご回答ありがとうございます。

デザイナー様というつもりはなかったのですが、
こっちはお客さんだ、という気持ちはありました。反省します。

細かい指定というのは、もうちょっと単純なことで、
うまく説明できないのですが、
例えば、上下にならぶ画像の右端をそろえるとか、
上から段落A　段落B　段落Cがあって、それぞれの間隔を同じくらい空けたいとか、
そんなようなことなのですが、難しいでしょうか？
どんなサイトでも普通にそうなっているような範囲でのことだと思うのですが。

コーディングをやってくれた本人にも聞きました。
ここが指定と違うということを伝えると、説明もなくただ「修正します」というのですが、
修正されたものを見ると、少し変わったようだけれど、いまいち指定通りになっていない、
そんなことの繰り返しで、
何度も言っているのにどうして指定通りにやってくれないのかと言ったら、
最後には、このようなASPサイトでピクセル単位での設定はできない、と言われました。

それと、テスト環境での作成が完了しましたと言って見せてくれた時に、
ページタイトルに全然関係のない別の会社名が入っていて、
（前にその人が制作した、別の会社の名前です）
ちょっとびっくりしたのですが、よくあることでしょうか。

今回のケース、コーディングしてくれた人はまともでしょうか？
それともクソ業者（笑）でしょうか？
見極めポイントがありましたら、また教えていただけたりしますと嬉しいです。

このたびはどうもありがとうございました！

回答No.1

ORUKA1951

HTMLのコーディングとは、カタログを作成するのとは全く異なります。
　これは理解されていますよね？？？
　ウェブは、様々なユーザーエージェントや検索エンジンが利用します。視覚系のブラウザでは、人が目で見るのですから、どこがロゴでどこがメニューでどこが本文かは判りますが、他のユーザーエージェントや検索エンジンでは、それらの情報は分かりません。
　そのためにHTMLでサイトを作るのですが、それは
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　が、ウェブサイトを公開する目的と合致しているからです。

　一度、ウィンドウ幅を小さくしたり、広くしたり、スタイルシートや画像を読み込まない設定にしてサイトを見てみるのが良いです。googleは『Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。( https://support.google.com/webmasters/answer/35769?hl=ja#2 )』と言っています。

★HTMLのコーディングは三つに分けて考えます。
・きちんと、文書構造がマークアップされているか---これがHTMLコーディングです。
・プレゼンテーションが色々な端末で分かりやすく利用できるか---スタイルシートのコーディング
・WAI( http://www.doraneko.org/wai/contents10/19980918/Overview.html )を含めて!!
　(色覚異常や目が悪い人などの)視覚弱者や、マウスが使えない人にも利用できるか？？
　　HTML/CSSの両方に絡みます。

　良く例にあげさせていただくのですが・・
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　ブラウザの表示メニューから[スタイル]へ進み、様々なスタイルを選択してウィンドウ幅を変えてみたり、(検索エンジンがどう見ているかは)スタイルシートを無効にしたり、印刷プレビューしてみたりすると良いでしょう。
　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
　でチェックするのもよいかも

『例えば、ヘッダーのロゴといろいろなボタンは上辺を揃え、それぞれの間隔は何pxにするとか、この文章とこの文章との間隔はどのくらい空けるとか、』
　もし、それが内容以上に重要なのでしたら、PDFのように製作者と同じように見せたり印刷する別の仕様がありますから、それでサイトを作ればよいです。
　しかし、それではウェブにHTMLを使って公開する意味がないです。

　もう一度、上記の『★HTMLのコーディングは三つに分けて考えます。』の視点に変えて、様々なブラウザや幅で見てみたりすると良いでしょう。
　firefoxでしたら、「FireMobileSimulator( https://addons.mozilla.jp/firefox/details/8519 )」のようなアドオンがありますので、スマホや携帯電話でどのように見えるかもチェックできるでしょう。

お礼

ご回答ありがとうございました。

コーディングがカタログを作成するのとは異なる、ということ、
なんとなくはわかっているつもりでしたが、
やはり、具体的・実務的な知識が全く不足しており、
そのせいで、うまくいかなかった点もあるかと思います。

こちらに知識がなければ、頂いたコーディング内容を見て、
きちんとやってくれているのか、そうではないのかの見極めもできないですよね。

教えていただいたこと、やってみます。
どうもありがとうございました！