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

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

新規登録して質問してみよう
ただいま回答率
85.51%
Photoshop

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

Q&A

解決済

4回答

9520閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Photoshop

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

0グッド

2クリップ

投稿2015/06/08 08:20

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

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

CSS化はやはりCSS3PSでしょうか?

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

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

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

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

投稿2016/09/07 17:24

kameki

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/09/08 00:42

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

0

ベストアンサー

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

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

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

投稿2015/06/11 11:08

KenjiObata

総合スコア440

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/06/11 14:52

ツールでの制度があがってもコーダーはなくならないと思われるのですね。 ただJSの需要があがってきているのに、JSができるフロントエンジニアでは一生食えないというのは少し驚きました。海外ではそんな事はないと聞きますが、日本は管理職がえらいという国なので、現場では一生食えないという事でしょうか? それともNodeをやってサーバサイドもできないと一生は無理という事でしょうか?
KenjiObata

2015/06/11 23:31

はい。私は現場の実体験からそう思います。 「制作ができるだけ」というスキルの持ち主は既に飽和しているという感じでしょうか。 それ故、コーダー単価が下がり、Javascriptは出来て当たり前でJavascriptが出来なければコーダーの依頼すらされない。 そんな印象を現在感じております。 それと恐れ入りますが、webpage様のコメントは、webpage様自身の質問内容と主旨が異なっております。 コーダーの需要についての議題をされるのであれば、別のスレッドを立ててくださいます様お願い申し上げます。
guest

0

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

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

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

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

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

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

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

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

投稿2015/06/11 07:52

KenjiObata

総合スコア440

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/06/11 08:48

ありがとうございます。 DWのCCと添付先にありますね。CCですとできるということですかね? ただいずれにしろ、まだまだツールで行うとHTMLのほうはセマンティクでなく、汚いので現場では手打ちで行っているところが多いのですね。 5年後くらいにはほとんど、HTMLコーダーの需要はなくなっているのかもしれませんが。 コーダーはJSをガリガリかけるようにならないと、仕事がなくなりそうですね。
guest

0

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

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

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

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

投稿2015/06/08 08:32

landy77

総合スコア1614

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/06/08 08:36

ありがとうございます。 一枚のPNGなどの画像を貼り付けただけのサイトということですか? それですとクローラーには認識できないのではないでしょうか? 実務もそんな感じなんですかね?
landy77

2015/06/08 08:42

ですのでそういうサイトの場合はテキストだけをdisplay:none等でクローラーに認識させるためだけにテキストを別に入れてたりします。 個人的には嫌いな作りですが、デザイン的にフォントを固定させて表示させたい場合などは仕方なくそういうやり方をすることもあります。 (どうしても紙ベースからHPを作ったりするとリュウミンじゃないといやだとかは結構あるので・・・) ちなみにちゃんと画像の説明としてのテキストでしたらペナルティーを食らったりはしません。 関係ない文字を隠しておいて検索ワードとしてヒットさせようとするとペナルティーとなります。
退会済みユーザー

退会済みユーザー

2015/06/08 10:47

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

2015/06/08 12:38

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

退会済みユーザー

2015/06/08 15:23

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

2015/06/08 15:54

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

退会済みユーザー

2015/06/09 04:02

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

2015/06/09 06:47

カンプですよね? 私のイメージではカンプはある程度の出来栄えを見せる為の物だと思ってます。 ですから出力がHTML5だろうがそれ以外だろうが構わないと思います。 少なくともDreamWeaverでもPSDやAIのファイルをHTML5で書き出すことはできないと思います。 もちろんPSDやAIをそれぞれでスライスを作成してHTMLに出力した後、DreamWeaverでHTML5に修正する事は可能ですね。 正直カンプでどこまでやるつもりなのか?HTML5で出力する意図は何なのか? 背景が見えないのでどこまで議論するのかな?って今思ってます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問