質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • Photoshop

    99questions

    Photoshopとは、アドビシステムズ(株)が開発した画像編集のソフトウェアです。 イラストレーターや印刷業界などで幅広く使われている他、初心者や一般向けの写真編集用に開発されたソフトもあります。 専用に開発されたフィルターやプラグインを追加すると、機能を拡張することができます。

フォトショップで作ったカンプをhtmlに変換する方法がいくつかあるようですが、 WEB業界ではどのようなやり方が主流でしょうか?

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 3,755
退会済みユーザー

退会済みユーザー

フォトショップで作ったカンプをhtmlに変換する方法がいくつかあるようですが、
WEB業界ではどのようなやり方が主流でしょうか?

ドリームウイーバーでしょうか?
その場合、
png化したファイルをドリームウィーバーでHTMLに変換できるそうですが、cs6でも可能なのでしょうか?

CSS化はやはりCSS3PSでしょうか?
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

0

ご返答ありがとうございます。
ソフトについては、先の回答にも記載した通り、使い方は知りません。
ただネット等でお調べいただける内容かと存じます。
是非この機会に調べていただければ幸いかと存じます。

それとHTMLコーダーについては需要はなくならないかと存じます。
ただ、現在HTMLコーダーの単価は安価になっており、
HTMLコーダーやJavascript、JQuery等のスキルだけでは食べていくことは非常に難しいと感じております。

ご質問内容は、HTMLコーディングについての事ですので、蛇足部分についてはご容赦いただければ幸いです。


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/11 23:52

    ツールでの制度があがってもコーダーはなくならないと思われるのですね。

    ただJSの需要があがってきているのに、JSができるフロントエンジニアでは一生食えないというのは少し驚きました。海外ではそんな事はないと聞きますが、日本は管理職がえらいという国なので、現場では一生食えないという事でしょうか?

    それともNodeをやってサーバサイドもできないと一生は無理という事でしょうか?

    キャンセル

  • 2015/06/12 08:31

    はい。私は現場の実体験からそう思います。
    「制作ができるだけ」というスキルの持ち主は既に飽和しているという感じでしょうか。
    それ故、コーダー単価が下がり、Javascriptは出来て当たり前でJavascriptが出来なければコーダーの依頼すらされない。

    そんな印象を現在感じております。

    それと恐れ入りますが、webpage様のコメントは、webpage様自身の質問内容と主旨が異なっております。

    コーダーの需要についての議題をされるのであれば、別のスレッドを立ててくださいます様お願い申し上げます。

    キャンセル

0

主流なのかどうかわかりませんが、イラレやフォトショップで作成した場合は一枚絵で張り付ける超簡易のやり方で済ませることもありますね。
(楽天なんかのショップページをイメージしてくださいw)

ただ私が思う普通はスライスで分割して(リンクを貼りたい部分などで区切る)それぞれの部分で画像をバラバラに書き出して、HTMLやCSSで一枚絵に貼り戻してリンクをかけたりする感じがメインのイメージです。

ドリームウィーバーにそんな機能があったか定かではないですが、もしかしたら一枚絵を張り付けて、クリッカブルマップでリンクだけさせる事を言ってるのかな?とも思います。

的外れでしたらごめんなさいね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/08 17:36

    ありがとうございます。

    一枚のPNGなどの画像を貼り付けただけのサイトということですか?

    それですとクローラーには認識できないのではないでしょうか?
    実務もそんな感じなんですかね?

    キャンセル

  • 2015/06/08 17:42

    ですのでそういうサイトの場合はテキストだけをdisplay:none等でクローラーに認識させるためだけにテキストを別に入れてたりします。
    個人的には嫌いな作りですが、デザイン的にフォントを固定させて表示させたい場合などは仕方なくそういうやり方をすることもあります。
    (どうしても紙ベースからHPを作ったりするとリュウミンじゃないといやだとかは結構あるので・・・)

    ちなみにちゃんと画像の説明としてのテキストでしたらペナルティーを食らったりはしません。
    関係ない文字を隠しておいて検索ワードとしてヒットさせようとするとペナルティーとなります。

    キャンセル

  • 2015/06/08 19:47

    そういうやり方もあるのだと感心しましたが、
    お聞きしたかった事は、フォトショップで作ったカンプをhtmlに変換する方法でしたので、
    引き続きその回答をお待ちしたいと思います。

    キャンセル

  • 2015/06/08 21:38

    いや、ですから「スライス」で区切って最後に「WEB用に保存」ってやればHTMLと画像で書き出せますって最初に書いたつもりなんですが。

    キャンセル

  • 2015/06/09 00:23

    「スライス」で区切って最後に「WEB用に保存」はやっていますが、
    完了を押すと、画像がイメージフォルダに入るだけですが、
    どこにHTMLのソースが出てくるのですか?

    キャンセル

  • 2015/06/09 00:54

    ・・・全部説明しないといけませんか?w
    たぶん最後の「WEB用に保存」の時に「フォーマット」の部分が「画像のみ」になってるのではないでしょうか?

    キャンセル

  • 2015/06/09 13:02

    https://helpx.adobe.com/jp/photoshop/using/html-options-slices.html

    こちらのことでしょうか?
    出力設定のダイアログでXHTMLの出力というチェックボックスがあったのでチェックして、スライスを保存したのですが、やはりHTMLファイルらしきものは出てきませんでした。
    ここをチェックして、OKを押して完了を押せばimagesフォルダにHTMLファイルが出てくるはずなのでしょうか?
    ただHTML5はCS6では作れないのかもしれませんね。

    HTML5はCCを出ないとできないのでしょうか?

    キャンセル

  • 2015/06/09 15:47

    カンプですよね?
    私のイメージではカンプはある程度の出来栄えを見せる為の物だと思ってます。
    ですから出力がHTML5だろうがそれ以外だろうが構わないと思います。

    少なくともDreamWeaverでもPSDやAIのファイルをHTML5で書き出すことはできないと思います。
    もちろんPSDやAIをそれぞれでスライスを作成してHTMLに出力した後、DreamWeaverでHTML5に修正する事は可能ですね。

    正直カンプでどこまでやるつもりなのか?HTML5で出力する意図は何なのか?
    背景が見えないのでどこまで議論するのかな?って今思ってます。

    キャンセル

0

おそらく以下の事ではないでしょうか。
(申し訳ありませんが、使い方については知りません)

■Photoshopカンプからコードを抽出
http://www.adobe.com/jp/creativecloud/extract.html


ただ、私の場合はphotoshopカンプを、一つ一つ手作業でスライスし、ドリームウェバーソースコード画面でコーディングを行っています。

自動コーディング機能は一見便利ですが、意図しないコードが入ったりする為、後々表示崩れなどの対応も考えると、手間が掛かっても手作業でコーディングした方が品質が良くなるので手作業コーディングをしています。

web制作業界では、速さを優先するケースと、品質を優先するケースがあるかと思いますので、どちらが主流とは言えないかと思います。

web創世記は、手コーディングしか方法が無かったためその当時の主流は、「手作業コーディング」であったと言えます。

しかしながら、様々な便利ソフトが出現しているため、主流の度合いがちょっとずつ変化しているのかもしれません。

回答になっていなかったら、ご容赦下さい。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/11 17:48

    ありがとうございます。

    DWのCCと添付先にありますね。CCですとできるということですかね?

    ただいずれにしろ、まだまだツールで行うとHTMLのほうはセマンティクでなく、汚いので現場では手打ちで行っているところが多いのですね。

    5年後くらいにはほとんど、HTMLコーダーの需要はなくなっているのかもしれませんが。

    コーダーはJSをガリガリかけるようにならないと、仕事がなくなりそうですね。

    キャンセル

0

Photoshopで作成したPSDファイルをDreamweaverのExtractという機能を使い、画像を簡単にスライスし書き出したり、色情報、フォント情報、CSS、オブジェクト間の値などを抽出して利用することが可能です。

しかしあくまでも、HTMLへ変換してくれるという機能はありませんので、DreamweaverのExtractでカンプからサイト内で使用する細かな部品を取り出した後に、それらをHTMLを使って組み立てていくというコーディング知識は必要です。

もっとDTPの要領でサイトを作成したいということでしたら、Adobe Museもおすすめです。
コードの知識がほとんど求められずにある程度のサイトが作れますよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/08 09:42

    Adobe Museというのがあるのですね。
    ただ結局、人間がコーディングしないといけない現状は変わらないということですね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Photoshop

    99questions

    Photoshopとは、アドビシステムズ(株)が開発した画像編集のソフトウェアです。 イラストレーターや印刷業界などで幅広く使われている他、初心者や一般向けの写真編集用に開発されたソフトもあります。 専用に開発されたフィルターやプラグインを追加すると、機能を拡張することができます。

  • トップ
  • Photoshopに関する質問
  • フォトショップで作ったカンプをhtmlに変換する方法がいくつかあるようですが、 WEB業界ではどのようなやり方が主流でしょうか?