【Webデザイン初心者向け】デザインカンプからどうやってコーディングするの？実際の作業の流れを徹底解説！
HTML-код
- Опубликовано: 4 авг 2024
- デザインカンプからコーディングをする時の作業の流れについて、デザインデータの取り扱いからコーディング時の活用方法まで、初心者向けに徹底解説しました！
今回は「Adobe Illustrator」で作成されたデザインデータの場合を例に解説しております。
★★★「Webの神様」メンタープランのご案内★★★
ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です！
【お知らせ動画】
「Webの神様」があなたのメンターになります
• 【お知らせ】「Webの神様」があなたのメンタ...
【プランの詳細・お申し込み（MENTA）】
menta.work/plan/5148
未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます！
是非ともご検討いただければ幸いです。
★★★★★★★★★★★★★★★★★★★★★★★
〈目次〉
・オープニング 0:00
・前置き：この動画で解説する範囲について 1:11
・手順① デザインカンプを確認する 2:13
・補足：デザインデータの形式について 3:15
・デザインカンプの取り扱いルール 5:20
・「アウトライン化」されたデータについて 7:16
・補足：「Google Fonts」のダウンロード 12:17
・手順② コーディング計画を立てる 13:11
・手順③ HTMLマークアップを行う 19:19
・補足；HTMLマークアップ後の例 23:43
・手順④ 画像素材を書き出す 24:13
・手順⑤ CSSを書いてレイアウトを整える 27:27
・補足；リセットCSSの読み込み 29:21
・手順⑤ CSSを書いてレイアウトを整える 31:05
・最後のまとめ 35:17
-- Webの神様 --
未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです！
【タグ】
#Webデザイン #コーディング
【SNS】
-- Twitter --
/ webgodweb
-- Facebook --
/ webgodweb
【運営会社】
株式会社カラフルクローバー
www.colorful-clover.co.jp/ 
Хобби
デザインカンプからコーディングをする時の作業の流れについて、デザインデータの取り扱いからコーディング時の活用方法まで、初心者向けに徹底解説しました！
今回は「Adobe Illustrator」で作成されたデザインデータの場合を例に解説しております。
非常に分かりやすい解説をありがとうございます。すごく勉強になります。そして、なにを解説しているのか理解できている自分を褒めたい。今後もコツコツ積み上げます。
ご返信が大変遅くなり申し訳ありません！！
こちらこそいつもご視聴ありがとうございます。はい、素晴らしいことだと思います！！今後もお役に立てるように頑張ります🙆♀️
カンプからのコーディングの流れが大変わかりやすく解説されており、感動しました。
今まで無計画にコーディングしていたので、次回からは動画で紹介されていたコーディング計画をしっかり立ててやってみようと思います。
コメントありがとうございます！！計画にしっかり時間を掛けておくと、その後のコーディングで迷いがなくなりますのでおすすめです🙆♀️
説明がとても分かりやすいです。活用させていただきます。
ご視聴ありがとうございます！🙇♀️
コーディングが大変なので最初から記載してくれるデザイナーさんだと助かりますよね。
アセット書き出しのやり方を忘れてしまっていたので助かりました。
なつこさん、いつも動画みて勉強させてもらってます！ありがとうございます！
今度、ホームページに動画の埋め込みする方法とか解説お願いしたいです！
いつもありがとうございます！☺️
かしこまりました！今後何かの形で取り上げられるように検討いたします！！🙇♀️
めっちゃわかりやすかった…!!
PSとXDのコーディングも見てみたいです！
コメントありがとうございます！！
今後、別の機会で他の形式のデザインデータからのコーディングも紹介できるように検討させていただきます！🙇♀️
すごい！わかりやすい！タメになる！
よかったです！コメントありがとうございます🙇♀️
いつも有益な動画ありがとうございます！
まさに私は初めてのお仕事でイラストレーターのデザインカンプを頂いて泡食った者で、なんとか納品できましたが、デザインカンプからのコーディングの力不足を実感した次第です。そのうえで今回の動画を拝見させて頂いて大変感銘を受けました。
質問なのですが、私も動画内のように長方形ツールを使用して幅を測ってましたが、実際にコーディングしてみるとイメージよりも幅が広かったり狭かったりなどしている時がありました。それはイラレの設定上の問題なのでしょうか？
また、前回のクライアント様は1つ1つのテキストに細かくline-heightやletter-spacingの計算方法を用いて算出するようにと言われましたが実際の現場ではやはり1つ1つのテキストに細かい設定され、忠実に再現されているのでしょうか？
すごくわかりやすく見させていただきまさした✨ありがとうございます😊
ホームページを制作する際にお客さんがサーバー契約している時、ドメインまで取っている時、こちらで全部代理でやる時など、案件獲得したあとのサーバー・ドメイン関係の進め方が知りたいです。
何を聞かないとやれないのかなど！
ちょうど学習したい内容だったので、とてもありがたいです！✨
勉強になりました🙇♀️！
WordPressのオリジナルテーマ作成の動画もあったら今後勉強しようと思っているので、是非見たいです！
コメントありがとうございます！はい、WordPressもゆくゆく取り上げられればと思っておりましたので、その際にはこのデザインを活用して解説したいと考えております！更新をお待ちいただければ幸いです🙇♀️
わかりやすいです！
アウトライン化データは表示する際に、文字データとして扱っておらず、フォントを必要としていないため、PCの環境に左右されず完璧なレイアウトで表示されるってことですね～😊
コメントありがとうございます！
まさに、おっしゃる通りです！！🙆♀️🙆♀️
分かりやすい動画ありがとうございます！
レスポンシブでコーディングすると考えると、画像やmargin、そのほかも%で指定することが多くなると思います。ですが、カンプ内の要素はpxで指定されています。そういった場合は、コーディングする際どのようにしたらいいのでしょうか？機会があれば動画にしていただけると嬉しいです！！！！宜しくお願いいたします！
コメントありがとうございます！仰るような場合には、状況に応じて、px指定ではなく%指定等の相対的な数値に直して指定することが多いです！デザインカンプ上で、1000pxに対して500pxで配置されている要素なら「width: 50%;」と指定する…といったイメージでしょうか。（もちろんケースバイケースなので、vwやem、remなど別の相対的な単位を使ったり、あえてpx指定をした方がいいケースも中にはあると思います。）
今後の動画でもっと詳しく取り上げられるように検討させていただきます🙇♀️
ご返信・アドバイス頂きありがとう
ございます！そうですよね…！なかなか単位の使い分けも難しいです……！
ありがとうございます🙇🏻♀️՞宜しくお願いいたします。
学んだことを自分では点でしか理解していないことを、なつこさんは点と点を線にして教えてくれるので、より具体的なイメージが湧きました！
なつこさんがデザインを作る時、参考にしているデザインのサイトなどありますか？例えばPinterestとか、これを見てアイデアを取り入れているというのがあったら教えていただきたいです😆✨
コメントありがとうございます！！お役に立てたようで嬉しい限りです🙇♀️🙇♀️
Webのデザインを作ろう、という時に参考にするのは、サイトデザインやLPデザインのアーカイブサイトです！
sankoudesign.com
rdlp.jp/lp-archive/
これから作ろうとしているテイストに似たものや、同じ商材・ジャンルの作品はかなり参考になります。
あとは、日頃からInstagramや Twitterに流れてくる広告画像などには結構注目していて、よくまとまっているなあ、あしらいが素敵だなあ、というものがあればスクショして保存しています！Pinterestも時々観ます！
@@webgodweb ご丁寧なお返事ありがとうございます！
サイトも教えていただきすごく嬉しいです🙇🏻♀️
日頃からのアンテナが大切ですね😌
すごく参考になりました！私も負けずにがんばります！
デザインする側からの質問なのですが、レイヤー分けでコーディングし易いやり方などある感じですか？
こんにちは！テキストの縦書きの動画出して欲しいです。めちゃくちゃレイアウトが崩れます。泣
素晴らしい動画ありがとうございます！デザインデータと一緒に画像も送られた場合、デザインカンプから画像を書き出す必要はありますか？
ご返信が遅くなりすみません🙇♀️ 画像ファイルをデザインデータと別途で渡されている場合も、Webサイト上での実装に合わせて、大きさやトリミングなど調整しないといけないケースが多いです。
（必要以上にサイズが大きい解像度の高い画像を埋め込むのは、パフォーマンス上NGなのです。）
中にはそのまま使用できる画像素材もあると思いますが、基本的には、画像素材を書き出し直す必要があることが多いとお考えいただければと思います！
@@webgodweb ご返信ありがとうございます！
XDでは書き出す際に2倍にすると聞いたことがあるのですが、aiではしないのですか？動画内ではしてなかったので気になった次第です。
仕事の流れがイマイチ理解できてなくてコーディングの他にイラレとフォトショが必要ってなんとなくで学習してきました。
もっと早くこの動画を見つけられたらと思いました。
コメントありがとうございます！！お役に立てて嬉しい限りです🙇♀️🙇♀️
かわいいです！
コメントありがとうございます🙇♀️🙇♀️
イラレでのWebデザインカンプは少ないので助かります。イラレでの環境設定や、納品時のWebカンプのサイズなど、例_タブレットサイズとスマートフォンサイズPCサイズの３種の大きさを準備されているのでしょうか？おそらくメンターでの対応のみになると、思いますが、もし有料動画などでの案内などありましたら、教えていただきたいのですが。イラレでできるような環境ができて助かっています。ありがとうございます。
ご返信が大変遅くなり申し訳ありません🙇♀️
納品時のサイズは要件や発注内容によりけりですが、予算の関係上、タブレットサイズのデザインは作らずに進むことも多いです。
PC/SPの2種で準備することが最も多いと思いますが、中にはどちらか一方だけ制作して、あとはよしなにコーディング…なんて進め方も実際あります。
より詳しい実践的な内容等について、有料動画などの方法で発信する形も検討させていただきます、ご意見ありがとうございます！🙆♀️
コーディングの案件によっては、サイトに反映する画像はデザインカンプから書き出したものか、もしくは最初から素材として別にある、このどちらかを使うというイメージですか？
コメントありがとうございます！そうですね、場合によっては素材で渡されることもありますが、デザインデータの状態で受け渡しされて、こちら側で書き出しをするケースの方が多いかと思います！
@@webgodweb
了解しました！
初案件に向けて、とても自信がつく動画になりました。ありがとうございますm(__)m
自分で作ったデザインカンプを使ってコーディングをしていると、ムズムズとデザインを修正したくなってきませんか？
コメントありがとうございます！
おっしゃる通りです😂クライアントがいる場合は進め方に注意＆要相談ですが、自分のサイトを自分がデザインして作る場合、コーディングしながらデザイン調整してしまうのはあるあるです！！
とても参考になる動画ありがとうございます。1点確認したいのですが、11分23秒あたりで「フォントがない場合、デザインデータからフォント名を確認して検索＆可能であればインストールする」とありますが、そもそもアウトライン化されていないデータは代替えフォントに置換され表示されているので検索するのは不可能では...。
コメントありがとうございます！いえ、自分のPCにないフォントでも、「元々何のフォントが指定されているのか」が確認できる状態になっているかと思います。
（フォント名は表示されるが、注意マークなどがついていて存在しない、表示できない状態になっているのが標準です）
helpx.adobe.com/jp/illustrator/using/find-missing-fonts.htm
返信ありがとうございます。
そうなんですね、わかりました。
これからも動画投稿頑張ってください。
vscodeって初めからemmet有効になってましたっけ？
ここ数年のバージョンでは標準で組み込まれていて、設定変更や拡張機能のインストール無しにすぐに利用できます！
code.visualstudio.com/docs/editor/emmet
@@webgodweb
ありがとうございます。
今すごいんですねー。私Jetbrainsなんですけど手間さえかければ同じくらいになりそう。Sublimeはもう価値なくなっちゃいましたね。
私はmacですが、レティナディスプレイの解像度とは別に開いてるpcのウインドウのサイズによって、カンプの大きさは変わってくるものでしょうか？
同じサイズのデザインカンプをクライアントさんから、もらったとしてaさんのpcで開いたカンプとbさんのpcで開いたカンプのサイズが違うことはありますでしょうか？
そういった場合、自身のpcで開いてるカンプのサイズでコーディングしていいんでしょうか？
コメントありがとうございます！デザインデータ自体は、そのデータの「キャンバスサイズ」が設定されていて、それを元に大きさも決まっているので、開いているPCの解像度は関係しないケースがほとんどかと思います。
なので、ご質問いただいた下記のようなケースは起こり得ないかと思います。
>>同じサイズのデザインカンプをクライアントさんから、もらったとしてaさんのpcで開いたカンプとbさんのpcで開いたカンプのサイズが違うことはありますでしょうか？
例えば、デザインカンプが「横幅750px」で作成されていれば、aさんのPCでもbさんのPCでもサイズは変わらないし、このデザインデータから静止画を書き出したとしても、この時にデータを開いているPCの解像度は関係してきません。
大きさに関係するとすれば、書き出す時の倍率なので、
1倍で書き出した静止画データなら「横幅750px」になっているし、2倍で書き出した静止画データなら「横幅1500px」になっているかと思います。
回答になっておりますでしょうか？参考になれば幸いです！🙇♀️
返信ありがとうございます。
頂いたカンプが作成者が作ったサイズで届くはずということですね。
例えば自分でデザインカンプを作成する際、サイズなどはどのように決められてますでしょうか？一般的なサイズを調べられたりするかもですが、参考サイトなどをスクリーンキャプチャでとったサイトのサイズで作るのって、どうなんでしょうか？
その場合は、実際のカンプではなくスクリーンキャプチャでとったサイズやパソコンの画面の大きさなども影響してしまうのかな？と。
てまできれば参考サイトと同じサイズで作りたいという場合、どのようにすればいいでしょうか？
分かりづらくて、すみません。よろしくお願いします。
初心者です
デザインカンプってなんですか？
デザインデータのことです！
イラストや写真などの静止画データとは違って、データの中にどんなテキストや画像が埋め込まれているのか、どんな色や大きさなのか…などを細かく確認できる、特別な形式のデータになります！
@@webgodweb
他の動画を拝聴した際に（カニとひよこ）セキュリティーに関するトーク内容に少しビビり気味ですｗｗ
コードが書けてデザインもできれば仕事も得られやすいと思うけど、クライアントに多大な損害を与えるリスクを考えるとやはり敷居が高いのかなって思ってしまいます。
いろいろとご視聴いただきありがとうございます✨
確かに、対応範囲が急に広がるので、きちんとリスク管理や免責をしておかないと大ごとになるかもしれませんね…。。
信頼できるパートナーを見つけて、がっつり手を組んで分業してやっていくのも一つの手であり戦い方かなとは思います🫡
デザインカンプむずかしいですがわかりやすく説明いただいてありがとうございます。
今年もいろいろと参考にさせていただきます(^-^)
コメントありがとうございます！解説が少しややこしいのですが、学習に活用していただければ何よりです🙇♀️💦
今年もよろしくお願いいたします！！
@@webgodweb
今後ですがshipifyとかも取り上げることが可能ならでいいんですが、取り上げてもらえるとありがたいです。
別のスクールでshopifyコース的なものを２月から学習する予定ですので参考にできればと思います。