デザインデータからHTMLのコーディング方法とは?

このQ&Aのポイント
  • デザインデータからHTMLのコーディング方法について、様々な選択肢があります。
  • 一からHTML、CSSを作りこむ、テキトーなテンプレートを使用する、PSD変換ツールを利用するなど、使いやすさや効率性を考慮しながら選ぶことが重要です。
  • 一方、PSD ExporterやdreamweaverのExtract機能を使用した場合には、いくつかの問題が発生する可能性があります。
回答を見る
  • ベストアンサー

デザインデータからHTMLのコーディング

って、みなさんどうされているのでしょうか。 デザインデータがあると言われてたので、てっきりHTMLデザインがあるのかとおもっていたら フォトショップのデザインデータを頂き、ヨロシクって言われました。 最近だとレスポンシブにしておくのは一般的かと思いますが 1.一からHTML、CSSを作りこむ 2.テキトーなテンプレート見つけて、画像とかさしかえる 3.PSD HTML変換ツール(PSD Exporter)などを使う 4.その他(良い方法あれば教えて欲しいです) ちなみにPSD Exporter使ったら、変換後のindex.htmlは真っ白でした。 また、dreamweaverのExtractという機能でpsdをアップロードしてみましたが、 アセットを抽出ボタンを押しても画像しか落ちないし、CSSコピーを押しても 1920px 1080pxとしか表示されません・・・。

  • CSS
  • 回答数3
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • dezimac
  • ベストアンサー率56% (2365/4208)
回答No.2

1か2ですね。 運良く少しだけ手直して使えそうなテンプレートが短時間で見つかればいいけど、そうでないなら一からHTML、CSSを作った方が早いので、大抵は1ですね。 3はPhotoshopのデータには無効でしょうね。 もともとが1枚の画像ですから、変換しても1枚の画像のまま。 Wordとかのデータなら、曲がりなりにもHTMLにはできるけど、それだってまともに使えるものではないですけどね。 素人の作ったページ。見れればいいレベル。 Photoshopのデータならまだいいですよ。 世の中にはExcelで作って、ここまでやってあるから楽だろう、それがそのままものになると思っている人が多々いますからね。 やる側としては手書きの原稿と必要な写真データをもらった方が数段楽なのだけど。

その他の回答 (2)

  • Gletscher
  • ベストアンサー率23% (1525/6504)
回答No.3

プロでしょ? 1以外あり得ない。

回答No.1

普通にやるなら(1)でしょ 今の状況を拝見するに無理っぽいですな。

関連するQ&A

  • PhotoshopやIllustratorで作ったデータをDreamweaver上でコーディングしたい

    HPを作って10年ほどになります。 元々は趣味で作っていたのですが、結婚をし、現在は知り合いのHPを時々更新したりしています。 10年ほど前は、HTMLを手書きでしていたのですが、数年前からDreamweaverを使いだすようになりました。 が、未だDreamweaverを使いこなせていません。 自分の癖というか、未だにHTMLを手書きでしており、作るページは皆、同じようなデザインで洗練されたデザインのHPが作れません。 私の作るページはいわゆる10年ほど前によく見られたページです(左にフレームで何だか古臭い)。 それを広告代理店に勤めるデザイナーに相談すると「今は手書きのHTMLで一から書いている人はあまりいない。Photoshopや Illustratorなどの画像ソフトで全体のデザインを作ってDreamweaverに組み込んだで作った方がいいよ」と言われました。 (いわゆるコーディング作業というのでしょうか) 10年近くHTMLを手書きで書いていたのですが、今後は、PhotoshopやIllustrator制作→Dreamweaverで制作(更新)で統一したいと思っています。いわゆる企業のHP、FLASH等が使われたページを作りたいと思っています。 一応、自分なりに試してみたのですが「PhotoshopやIllustratorなどの画像ソフトで全体のデザインをする」ところまではできるのですが、それを、Dreamweaver上に組み込み作り込んでいくという作業がうまくいきません。FLASHは使ったことがありません。今後はFLASHも使いたいと思っています。CSSについては、文字の大きさ、行間等に使うくらいで他にこれといって使ったことはありません。 HPの基本的な作り方やHTML、Dreamweaverの基本的な使い方は分かってはいますが、PhotoshopのデータをDreamweaverに組み込む作業、CSSを使っていい感じのページにするもうまくいきません。 私のような者の悩みが解決できる、ホームページ、本、教材、学校などがありましたら教えていただけますでしょうか。 多少お金が掛かっても構いません。 その他、解決方法等があればどうぞご教示の程よろしくお願い致します。

  • 下請けでのHPデザイン案件、PSDデータについて

    ホームページデザイン案件(トップページのみ作成)を 下請けで受注しました。 納品対象のデータは「HTML、画像、CSSファイル」ですが、 サイトデザインの元になるPSDデータ(フォトショップデータ)の 提出をもとめられています。 PSDデータには稚拙ながらもノウハウがつまっておりますし、 また元データを渡せばページ追加・修正の際はお払い箱ということになります。 お払い箱になるのはかまわないのですが、ここで質問です。  (1) この場合、PSDデータ料金として、別途いただくべきでしょうか?  (2) 料金をいただくべき場合、料金の算出例をご存知ないでしょうか? 宜しくお願いいたします。

    • 締切済み
    • CSS
  • ホームページ作成する時のCSS,HTMLデザイン作業(Indesign Fireworks Illustratorなど)

    皆様いつも回答ありがとうございます。 早速ご質問ですが(素人ながら稚拙なご質問申し訳ないです) 1.IndesignとFireworks、どちらがDreamweaverで応用が利くか(HTMLやCSSを作成する点で) 2.プロはDreamweaverのみでHP(HTMLやCSS)を全部作成しますか? Indesign(cs3)やFireworksなど?のソフトウェアを使ってデザインしたついでにHTMLやCSSもそのまま出来上がり、それをDreamweaver(cs3)に埋め込めないかと思ったのですが、可能というか実践向けなのでしょうか? 実際のWEB現場ではどのように一連の作業していますか、やはりdreamweaverだけでHTMLやCSSを最初から作っていく、みたいな感じでしょうか?またもしIndesignやFireworksなどでCSSやHTMLも可能であるならばどちらがHPを製作・デザインする上でいいでしょうか? 私としてillustratorでロゴや画像などはすべて処理しようかと考えています。つまり画像やロゴを配置したイメージがそのままHTMLやCSSが出来上がり、それをDreamweaverで使えるかどうかお聞きしたいのです。。両方とも無料体験したのですが、イマイチ使えるのかどうかって感じなのです・・。 m(__)m回答いただければ大変助かります、よろしく尾根がいたします。

  • ホームページのデザインが似てる

    ホームページを作っているとどうしても企業やホームページ会社の デザインと似てしまいますが、どの程度似ていれば権利上違法と いえるのでしょうか? CSSやHTML程度までは自作したテンプレートと似やすいですが、 画像が入るとNGのような気がします。 ボタンなどの素材はどうなのでしょう? けっこうだれもが保存して使いまわしているようですし、 それを完璧に取り締まるのは不可能です。 CSS、HTMLまではokと見なしてよいのでしょうか?

    • ベストアンサー
    • HTML
  • HTMLコーディングのわかりやすい例え。

    web制作業を営んでおるものです。 超初心者のお客様からHTMLコーディングとは何ぞやという質問を受けるのですが、何かわかりやすい例えはありますでしょうか? 当方はPHOTOSHOP・FIREWORKSでデザインされたサンプルをお客様のご要望にそってアレンジし、0からコーディングするのですが、 よくあるテンプレートサービスとの違いがわからないというお問合せを頂きます。 完全なオリジナルではなく、予めグラフィックソフトで作ったデザインを見て頂きご要望に沿ってカスタマイズしていくセミオーダー的なものです。 アレンジ事例等を掲載しても、お客様はサンプルが存在する時点でテンプレートと判断してしまうようです。 コーディングはしていない状態なので柔軟性が圧倒的に違うことを訴求したいのですが・・・・。ちなみに価格も非常に安いです。自分で言うのもなんなのですがクオリティーも結構高い方だと思います。 口頭で説明しないで図解等で表現したいのですが初心者にもわかりやすい例えが浮かびません。 【当方のテンプレートサービスの定義】 HTMLコーディング済みで画像やテキストを変えるサービス ご教授お願い申し上げます。

  • HPデザインのコーディング方法

    デザインのコーディング方法について こんばんは。いつもお世話になっております。 HPのデザインについて質問です。 画像のようなデザインのコーディング方法はどう組んでいけばよいでしょうか? 画像のようにピンク色の部分(コンテンツ)の後ろにも横の背景を配置して、全体をbackgroundの画像で配置する方法しかないでしょうか? うまく配置するのは可能でしょうか・・・? また、星や丸の部分、背景の部分は素材でPNGデータを使っているものが多いのですが、上記の全体をbackgroundの画像で配置する方法にすると、容量が重過ぎるみたいです。 ・PNGデータでなくて、JPGやPSDデータの方がいいのか? ・フォトショップでなくて、イラストレータで書き出した方がいいのか? 何かいい方法があれば、教えてください! よろしくお願いします。

    • ベストアンサー
    • CSS
  • HTMLについて

    画像の横に画像を置く方法を探しています。 高さ110pxの画像の横に、それぞれ高さ50pxの画像二枚を縦に貼りたいのですが 二枚貼ろうとすると横に一列に表示されてしまい、改行をはさんでもどうしても一枚が改行されてしまい、なかなか縦二列に並んでくれません。 編集がしやすいという理由でFC2ホームページのHTMLメーカーを使っています。 HTMLメーカーを使うぐらいですから本格的なHTMLを打ち込むことすらできないので、CSSも使いこなせません。HTMLだけでできるような方法はあるんでしょうか? それとも、そんな方法はないのでしょうか? アドバイス戴けると嬉しいです。

  • photoshopと、ホームページ作成について勉強しています。

    photoshopと、ホームページ作成について勉強しています。 たとえば、お客様からデザインをPSDなどの画像ファイルで頂いた場合です。 デザインからHTML、CSSなどを作りこむことになると思うのですが、 その場合はやはりデザインを見ながら横幅、高さなどのサイズを調べて作りこんでいくのでしょうか? それとも、photoshopの中に土台となるHTMLを作りこむ機能のようなものがあるのでしょうか? 私は、PSDファイルを見ながらガイド機能を使って部品の幅や高さを調べながら、 必要な画像部品をファイル内から抽出しつつ…といった感じでホームページを作っています。 web関係の勉強をしている皆さんのご意見をお聞かせください。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • レスポンシブWebデザイン習得へのステップ

    レスポンシブWebデザインを習得したいと考えています。 現在、実務で使っている手法は2005年ごろ「ウェブ標準」という言葉が流行していた頃の XHTML+CSSをなんとなく使っている程度(極めていない)なのですが、 ステップとしては、 1. HTML5+CSS3の基礎 2. スマートフォン向けサイト構築の基礎(モバイルファーストという観点から) 3. レスポンシブWebデザインの具体的な手法 という風に身につけていく必要があると考えています。 手順として正しいでしょうか?

    • ベストアンサー
    • CSS
  • コーディング代行について

    勤めている会社の通販サイトのリニューアルをすることになり、 デザインだけこちらでやって、コーディングを、 そのECサイトのシステムを提供している会社に依頼しました。 それで、出来てきたものを見たら、 なんだか納得のいかないものだったので、ご相談したくここに質問する次第です。 私は会社のネット通販の担当ではありますが、 お客様の対応などもしつつ、 商品の追加や、ちょっとした更新などを見よう見まねでやっているかんじで、 WEBデザインやコーディングのことはあまりよくわかっていない素人なので、 詳しいかたのご意見をお聞きできたらありがたいです。 ちなみに、デザインは、Fireworksで作成していたのですが、 PSDじゃないとダメだと言われたので、 Fireworksで作ったものをそのままpsdで別名保存して、それを送り、 一応、jpgのものも見てもらえるようにしました。 デザインをするにあたり、 例えば、ヘッダーのロゴといろいろなボタンは上辺を揃え、それぞれの間隔は何pxにするとか、 この文章とこの文章との間隔はどのくらい空けるとか、 私なりによく考えて作ったつもりなのですが、 そういう細かい指定は、多くの箇所で無視されてしまいました。 いろいろな画像やテキストの配置は、 こちらが提出したデザインとだいたい同じようにしてもらえるものと思っていたのですが、 コーディングというのはそういうものではないのでしょうか。 あるいは、こちらの作ったデザインデータに何か問題があったのでしょうか。

    • ベストアンサー
    • CSS

専門家に質問してみよう