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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

3回答

1531閲覧

webデザインでフォトショとかでデザインしてからコーディングするのが主流なのは何故か?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

1グッド

0クリップ

投稿2019/03/16 17:08

タイトルの通りです。
フォトショとか使いずらくないですか?
いきなりコーディングではダメなのでしょうか?

bochan2👍を押しています

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

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

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

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

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

yoshinavi

2019/03/17 00:57

>いきなりコーディングではダメなのでしょうか? → 何を基に、コーディングするつもりなのでしょうか?
退会済みユーザー

退会済みユーザー

2019/03/17 02:21

何を基にフォトショ使うのでしょうかと同じ答えです
yoshinavi

2019/03/17 02:26

簡単に言えば「スピード」ですかね。 フォトショでなくても良いですよ。キッチリレイアウトが取れるような寸法が確認出来れば。
yoshinavi

2019/03/17 02:43

最終デザインを、フォトショ等で決めていくのと、コーディング後の画面で決めていくのとの違いが、あると思いますが、ちょっとした色の変更や、大きさの変更ぐらいなら、良いのでしょうが、大幅変更になった場合に、イチからコーディングのやり直しって嫌じゃないのでしょうか?
退会済みユーザー

退会済みユーザー

2019/03/17 03:15

一からフォトショのやりなおしも嫌なんですが
yoshinavi

2019/03/17 03:38

一般的には、デザイン担当とコーディング担当が分かれる事が多いので、最終デザインが決定するまでコーディングに取り掛からない場合が多いだけなので、どちらもやる人は、自分なりの好きな方法で良いと思います。
yoshinavi

2019/03/17 03:42

仕事の場合、期限があるので、少しでも時間短縮になる方法で行えば良いので、絶対コレじゃなきゃダメってのは無いですよ。
guest

回答3

0

フォトショはあり得ないですね、イラレです。
それ自体はさておき本題。


質問者がfao氏なのでどうせ冷やかしでしょうけど、
質問文自体は理想論ではその通りです。

よく日本語でデザインをアートと混同している人が居るように見受けられますが、本来デザインは設計を指します。

ならばHTML+CSSまで含めて設計仕切ってのWebデザイナーであるべきです。
出来るものならHTML+CSSのモックを作るのが最善です。
もっと言えば軽く動かすみたいな所までやって欲しいですね。

最善を言えばユーザーの利用体験までコミットするべきでしょうから、簡単なJSで動きまでコードで指示してくれると嬉しいですね。
このように理想を求めればフロントエンドエンジニアと呼ばれる人と境界が曖昧になり混ざっていくものです。

では何故現状がそうなってないかの考察です。


それはHTML+CSSという言語の難易度が高いからです。
HTMLは元々論文の共有目的で作られた言語であり
Webデザインありきで表現したものを再現するという現代Webサイトの造りは想定外のものです。

また、teratail等のドキュメントを書くサイトではMarkdownのフォーマットが採用されているように、
HTMLのタグを開いて閉じるというのは冗長過ぎて使いづらいものがあります
(整合性の取りやすさという面では注目に値しますが)

この書きにくいという問題は本職エンジニアがWebStorm、Vim、Emacs、VScode、Atom等のモダンなIDEやエディタを駆使しても超絶面倒なのに、
そこらのWebデザイナーだとどのくらいのコストがかかるかわかったものではありません。

じゃあPugやSlimを駆使するか?
これもteratailにGulpのインストールが出来ませんという質問がうじゃうじゃしてるのが現状で、
どの道本職エンジニアにしか手が出せません。

また、Webデザイナーという生き物はプログラミングのスキルに乏しく、高度な抽象化か求められる書き方が出来ません。
なのでWebデザイナーが作ったHTMLとCSSではテーブルのような可変のケースで酷いレイアウト崩れが発生します。

このような都合から、「WebデザイナーにHTMLを触らせるな」が合言葉になっている現場もあります。
まぁ、エンジニアもそれを言える程まともなスキルがあるかといえばないというケースも多く、「お前が言うな」みたいになってますが……

投稿2019/03/17 04:00

編集2019/03/17 04:22
miyabi-sun

総合スコア21158

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

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

bochan2

2019/03/20 03:55 編集

「高度な抽象化か求められる書き方が出来ません。」 部分の抽象化の後に濁点が抜けてますよ 読み間違えでしたら申し訳ございません
guest

0

チーム制作の場合、いきなりコーディングしてしまうと、他のメンバーとの認識合わせに時間がかかったり、間違っていたときに手戻りが発生してしまいますので、あらかじめ Web ページのレイアウトは決めておいた方が良いと思います。
ワイヤーフレームの作り方はフォトショップにこだわらなくても良いとは思いますが。

個人制作の場合は、試行錯誤しながらコーディングした方が早いというのであれば、それでも良いんじゃないでしょうか。

投稿2019/03/16 23:10

nskydiving

総合スコア6500

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

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

退会済みユーザー

退会済みユーザー

2019/03/17 02:22

htmlとCSSで認識合わせすれば?
guest

0

ベストアンサー

それインブラウザデザインって言うらしいね

投稿2019/04/05 10:35

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問