【実践】Webデザインはこんな感じで作る！ノーカット製作の流れ。
Вставка
- Опубліковано 25 лип 2024
- 今回は、ウェブデザインの制作の流れを紹介しています。
AdobeXDを使用したデザインの手順や、デザインをする上で、何を考えているかなどを知っていただけたらと思います☺️
🔽 続きの動画はこちら：HTMLコーディング 🔽
• 【実践】HTML/CSSコーディングの流れ！...
🔽 第2弾はこちら：【ノーカット】FigmaでWebデザイン 🔽
• 【Figma実践】WEBデザインで、ポートフ...
🎥 この動画の構成 🎥
00:00 WEBデザインはこんな感じで作る
00:44 AdobeXDを使用してデザインをはじめる
01:17 デザインのサイズについて
01:40 トップビュー（メインビジュアル）の作成
写真素材（O-dan / Adobe Stock）
02:22 コンテナ（.container）の横幅
02:46 ナビゲーションの注意点
03:08 ロゴについて
03:40 コーディング（HTML CSS）について
04:04 アイコン素材（flaticon）
04:50 アイコンの種類について
05:20 トップビュー（メインビジュアル）の高さ
05:37 画面スクロールについて
06:15 Macbookのモックアップを挿入
07:22 特徴（feature）のセクション
09:29 コピーライト（© / copyright）
10:16 ドロップシャドーで雰囲気を出す
10:29 光るようなシャドー
10:47 完成！
📂 今回作成したデザインファイル 📂
www.craft.do/s/R5pbWq4PobjFit
⭐️ 自分でWebサイト作ってみませんか？ ⭐️
誰でも、できる！Webサイト公開の流れ！
• 【10分でサイト公開】誰でもできる！Webサ...
✅ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ チャンネル登録
ua-cam.com/users/hirocode?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
---- キーボード ----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
---- パソコン ----
【 Apple 13インチMacBook Pro 2022 】
amzn.to/3bDPYmU
"最新M2チップ搭載！初期投資で良いパソコンの使用をオススメします。 "
---- 周辺機器 ----
【 Apple AirPods Pro 】
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
【 Apple iPad Pro 11インチ 】
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
---- デザイン 基礎編 ----
【 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 】
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
【 なるほどデザイン 】
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
---- デザイン 思考編 ----
【 誰のためのデザイン？ 】
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
【 IAシンキング Web制作者・担当者のためのIA思考術 】
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
---- 書籍デバイス ----
【 キンドルペーパーホワイト Kindle Paperwhite 】
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
まじこのひと全然イメージ掴めない初心者の救世主やろ助かるわ
そう言っていただけて光栄です😭
ありがとうございます🙇♂️❗️❗️
めっちゃ良い動画！
今、オリジナルでポートフォリオを3つほど作っているので本当に助かります。
スーパーアルティメットありがとうございます！
ポートフォリオ作ってるんですね❗️こちらこそ嬉しいコメントしていただいてスーパーアルティメットありがとうございます🙇♂️❗️
Designわかりやすいです！ありがとうございます！
こちらこそコメントありがとうございます😆❗️
今web制作学習中なのですがデザインも学習してこういうふうに作れるようになりたいです！
かなりモチベーション上がりました！
ありがとうございました！
コメントありがとうございます🙇♂️
そう言っていただけて嬉しいです😆♪こちらとしても、お役に立てるような情報を発信できるように頑張ります❗️
これ普通に教材にするレベルの動画だ
ありがたい巡り合わせです感謝
こちらこそご視聴いただけて感謝です🙇♂️ありがとうございます‼️
すげぇ。即席なのにすごく洗練されてるデザインだ。かっこいい。
嬉しいコメントありがとうございます😭‼️
徹底した細部のこだわりが、洗練されたデザインを生むのですね！すごい✨
嬉しいです😭ありがとうございます🙇♂️❗️
デザインカンプの作り方を今まで自己流でやっていて効率が悪いなと思っていたところだったので、こちらの動画すごく参考になりました！！
そういっていただけて嬉しいです😭❗️ありがとうございます🙇♂️
すごい参考になりました！ありがとうございます！😀✨
嬉しいコメントありがとうございます😆❗️❗️❗️
webデザインってこうやって作るんですね。とってもわかりやすい動画で、前からの疑問も解決しました！
少しでも参考になったようで嬉しいです😆❗️ありがとうございます🙇♂️❗️
めちゃくちゃ有益な動画をありがとうございます！
こちらこそめちゃくちゃ嬉しいコメントありがとうございます🙇♂️❗️
以前からWebデザインに興味を持って、学んでみよう！と思い本屋さんで見ましたが、文章だらけで、自分では脳内にあまり入ってこずイメージも付かず断念していましたが。。。たまたま、見つけたこの動画でこんな風にデザインが出来るんだ！こんな風に作っていくんだ！という工程が見れたので、とても良かったです😌😌アップロードしてくれた主に感謝です✨
こちらこそ嬉しいコメントありがとうございます😭❗️少しでもお役になれば幸いです🙇♂️❗️
勉強になりました！ありがとうございました。
参考にしていただけたみたいでこちらとしても嬉しいです😊ありがとうございます❗️
めっちゃわかりやすいです❗️
嬉しいです😭ありがとうございます❗️
すごい分かりやすかった！そして楽しそう！って改めて思った❤来月から勉強が始まるのでの予習のため動画全部見させてもらいます😊
楽しそうって思っていただけてめちゃめちゃ嬉しいです😊♪
勉強始められるのですね😲！応援してます😆❗️
学ばせていただきます。ありがとうございます。
ありがとうございます😊‼️少しでも参考になれば幸いです🙇♂️‼️
すごおおおい！！デザインやりてぇ…！となりました。自在で綺麗でかっこいいですね〜〜😊
ありがとうございます😆❗️❗️❗️
未経験からWebデザイン目指しています。なんとなくの工程がわかって助かります。これからどうするか分からないけど勉強させて頂きます！
結構ザックリした説明になってるので、なんとなくでも工程わかっていただけて嬉しいです😭ありがとうございます🙇♂️❕
すごい、、、、
デザイン勉強中ですが、デザインカンプでつまづいてしまい。。
この動画を見て考え方がシンプルになりました。
参考にさせてもらいます。ありがとうございました！！
参考にしていただけたようで嬉しいです😊♪
こちらこそ嬉しいコメントいただきありがとうございます🙇♂️❕
為になりました！ありがとうございます
こちらこそご視聴いただきありがとうございます☺️❗️
すげえええええ！！！
ありがとうございます😆❗️
はじめまして、デザインとコーディングの独学をしている者です！イラストのメイキング動画はよくありますが、このようなコーディングを意識したデザインのメイキング動画はなかなかないので本当に助かります…！😭貴重な動画をありがとうございます🙇♀️これからもお世話になります✨
コメントいただきありがとうございます😊♪
独学で勉強されてるんですね😆❗️こちらこそ嬉しいコメントいただきありがとうございます😭❗️
グラフィック専攻なのですが、Webも独学を行っているので
とても参考になりました
グラフィックデザイン専攻されてるんですね😆❗️Webデザインでも少なからずタイポグラフィの知識や技術も必要になってくるので、グラフィックやられているの羨ましい限りです😊❗️嬉しいコメントありがとうございます🙇♂️
見ててとても楽しかった！
XDというのを初めて知りました
楽しいと思っていただけて嬉しいです😆❗️この時はXDが主流のツールでしたが、今はFigmaってツールが主流になってきています💡
学生時代にひと通りは勉強しまたが、なんか難しかったイメージはあって
WEBデザインとコーディングを別で考えられるんだった！と思ったら気持ちが楽になりました！ありがとうございます😊
また、やり始めたいと思えるきっかけとなりました✨
デザインとコーディングを同時に考えるとなかなか難しいですよね😥💦
デザインを完成させた後に、それを見ながらコーディングするって流れをとるのがやっぱりスムーズな気がします☺️♪嬉しいコメントありがとうございます😭
登録いたしました✨
とてもまなびをいただきました🙏
ありがとうございます☺️
めちゃくちゃ嬉しいコメントありがとうございます😭‼️登録もしていただき嬉しい限りです🙇♂️
昔はテンプレート落としてきてゴリゴリコーディングしてたんですが、今の人はこうやってつくるんだなと理解できました。
コメントいただきありがとうございます☺️
以前とはwebサイトの作り方も大分変わってきているんですね😲❗️ご教示いただきありがとうございます🙇♂️❗️
余計なMCも一切なく、必要な知識を極めてシンプルかつ端的に、そして過不足なくお伝え頂いている、大変有意義な番組だと感じました。特に私のようなXD素人にはとてもありがたいです。チャンネル登録＋高評価対応済みです。
めちゃめちゃ嬉しいです😭😭😭❗️
今後も参考にしていただけるような動画出せるように頑張ります🙇♂️！
@@hirocode さん、大変お世話になります。お忙しいところご返信頂きありがとうございます。大変申し訳ございませんが、以下のCSSについて意味をご教示頂けないでしょうか：
[class*="btn_ico"]
[class*="btn_ico"][class*="mail"]
上記の二つはいずれもheader部分のナビの箇所の「btn_ico_mai」のところに関係していることまでは分かるのですが、CSSの場合、htmlで「btn_ico_mai」だったものが、「btn_ico」と「mail」に分かれているようです。当方、10年ぶりにコーディングを再開したものでして、何分知識が不足しているため、大変初歩的な質問で恐縮ですが、なぜhtmlで「btn_ico_mai」だったものが、CSSでは「btn_ico」と「mail」に分かれているのか、また、なぜ分かれる必要があるのか(「btn_ico_mai」のままではなぜまずいのか)をご教示いただけますと幸いです。何卒よろしくお願い申し上げます（「btn_ico_mai」という名称は、CSSで「btn_ico」と「mail」を分けることを前提にしたのでしょうか)。そもそも私がコーディングにおけるアンダーバーの概念に関する理解が不足しているのかもしれませんが、いかがでしょうか。
このコードは部分一致の指定になります！
html側で、
1. btn_ico_mail
2. btn_ico_youtube
この２つのボタンが存在します。
[class*="btn_ico"] の指定では、上記２つのボタンに共通のスタイルを当てることができます。
[class*="btn_ico"][class*="mail"]
[class*="btn_ico"][class*="youtube"]
では、1. 2. のボタンそれぞれ個別にスタイルを当てるための指定です。
共通のスタイルを当てる際に、
.btn_ico_mail,
.btn_ico_youtube{}
のようにカンマ区切りで指定することもできますが、サイトが拡張する上で、このボタンのパターンが増えることを考えると、このカンマ区切りの指定をパターンが増えるごとに追加していく必要があります。
[class*="btn_ico"]という形にしておけば、
.btn_ico_contact
.btn_ico_twitter
.btn_ico_tel
みたいなボタンが増えたとしても、変更不要で共通のスタイルが適用されるということです😆❗️
@@hirocode さん、大変お世話になります。お忙しいところご丁寧にご説明頂きましてありがとうございます。大変助かりました。
ずっとデザインってどうやるのだろう？
って疑問に思ってました。
この動画に巡り会えてよかったです！
そう言っていただけてすごく嬉しいです😭ありがとうございます🙇♂️❕
なるほどーーー。フロントエンドはこう作るのか（普段バックエンドやSREをやってるので勉強になりました）
ありがとうございます😊♪
初めまして！
コーディングは全然実務経験もあるんですけど、デザインはバナーぐらいしかやったことないし、XDも慣れてないのですごい為になります。
是非また動画楽しみにしてます✨
初めまして😊♪
そうなんですね😆❗️逆に僕はバナーのデザイン結構手こずったりします😅
嬉しいお言葉ありがとうございます😆❗️
とても参考になります！
アンコール希望です！！！
ありがとうございます❗️似たような動画また上げますね☺️❗️
4月からweb制作勉強はじめた僕には神すぎる動画だったので秒で高評価とチャンネル登録させていただきました！
めちゃめちゃ嬉しいです😆❗️ありがとうございます🙇♂️❗️
このくらいシンプルにまとめられて表現できるとめちゃカッコいいです！
写真と文字があっていて洗練されています。これでいい！これがいい！
ここ（コーディングというのでしょうか）がしっかり明確になるといいホームページができますよね。
うちの会社も、人を振り向かせる素敵な動画入り、ホームページを作りたいんです！
なかなか思ったホームページになりません。そのためにはどうしたら良いのでしょうか。
ありがとうございます❗️❗️
ご自身が好きなサイトや素敵だと思うサイトを見つけて、そこでどのような素材が使用されているか、色やフォント・構成や要素のサイズ感などを参考に組んでみるのが理想に近づくのではないかと思います😆❗️
flaticon私もお気に入りです!、あとはicons8もよく使います!
同じサイト使われているようでなんだか嬉しいです☺️♫
icons8拝見しましたが、こちらのサイトも良さそうですね❗️
情報いただきありがとうございます🙇♂️
どうしても色々詰め込まないといけない！と思い込んでいたのですが、シンプルってかっこいい,,,。
それめちゃめちゃ分かります‼️なかなか余白作るのって勇気入りますよね😂
シンプルでおしゃれ！AdobeXD，figmaに似ている．下書きは大事すね．
コメントありがとうございます🙇♂️❗️figmaってよく聞きますけど使ったことないです😱
XDと似ているんですね😲❗️試しに使ってみたいです😆♪
先月からWEBデザインの職業訓練に通っています。下書きはこのような感じで作るのですね。とても参考になりました。
WEBデザインやられているんですね😆♪
こちらこそ少しでも参考になって幸いです☺️
コメントいただきありがとうございます🙇♂️❗️
floatに苦戦しています・・・
floatは理解するのに苦戦しますよね💦
実際問題現在floatはほぼ使われていなくて、代わりにflexboxを使用したレイアウト組みが主流です。文字の回り込みなど特殊な組み方以外は、flexboxで作成可能です❗️僕は3年間くらいは1度もfloat使用していません😅
flexbox覚えてしまえば何かと便利だと思いますので、こちら参考にしてみてください🙇♂️❗️
ua-cam.com/video/Ei_GspQuS7A/v-deo.html
@@hirocode さん、ありがとうございます！
とてもイメージしやすかったです！！
よければこれから初心者、アマチュア層に向けたメイキング動画をいくつか出していただけないでしょうか…？
操作画面を見ることが出来れば、非常に学習理解度が上がるのではと思います…！
めちゃめちゃ貴重なご意見いただきありがとうございます🙇♂️❗️操作画面わかるような形でメイキング動画作成してみたいと思います！！
すごく有益な動画をありがとうございます！webデザインの勉強を最近始めましたが、本当にいつも参考にさせていただいております🙏 動画内でアートボードの大きさが、1080pxや1200pxで作ることが多いとおっしゃられていましたが、こちらレスポンシブデザインにする際は、これを基準にpxの値を変えていくというような形なのでしょうか？もしそうならiPhoneやiPadはどのような数値で作られる事が多いでしょうか？
おそらく初歩的な質問になるかと思いますが、もしお時間あればお応えいただければ幸いです、、。動画楽しみにしています👏
嬉しいコメントありがとうございます❗️学習の手助けになれば幸いです😆❗️
案件にもよりますが、PCサイズとスマホサイズの2つを作ることが多いです。もしくはPCのみでレスポンシブ対応していく場合もあります。
タブレットサイズに関しては、PCとスマホサイズの中間になるので、画面のバランスを見ながら調整していくことが多いです。いずれにしても、PCブラウザを縮めた際にも崩れないようにする必要があるので、タブレットサイズ含め画面幅は一通り確認するのが理想です。
スマホサイズについては画面幅375pxのシェア率多いので、375px幅で作成します。
ただ、Androidで360px幅が多いので、360で作ることもあります。
最近だと390pxの端末や414pxの端末も多いので、比較的シェア率の高い端末サイズに合わせれば問題ないと思います❗️❗️
パワーポイントでプレゼンする機会が多いのですが、体裁を整えたり、写真やグラフをいい感じにしたり（語彙力）、と勝手にウェブデザインとも似ている部分があると思っています。その度にこういう仕事をしたかったなと今更思っています。。楽しそう。
コメントありがとうございます☺️
その気持ちわかります😆❗️僕はたまにプレゼン資料作成するのですが、webデザインから得た知識とかが役に立ったりしてます🙆♂️
webデザインの仕事は大変な面も沢山ありますが、やっぱり楽しいです😆♪オススメです☺️
勉強なります。
今はデザインは基本PhotoshopでやってましたがXDも勉強しようと思いました！
PhotoshopとXDでデザインの仕上がりに違いなどはでますか？
コメントありがとうございます🙇♂️
完成物の仕上がりに関しては差は出ないと思います❗️
ただ、XDはPhotoshopやIllustatorのファイルを埋め込んで使用することができます🙆♂️
XDでは、写真の色調整やブラシ表現などの加工ができないので、Photoshopで加工したものを埋め込む形になります。Illustratorで作成したロゴやバナーも同様です。
そのため、XD上でも幅広いデザイン表現をすることが可能です❗️
加えて、Webのプロトタイプ制作に特化したUIを使えるのが魅力だと思います😆♪
今ちょうどXDの使い方の動画作っているので、公開したらみてみて下さい🙇♂️❗️
たのしそう
なかなか上手くいかない時もありますが、デザインは楽しい時の方が多いです😆❗️
え、普通にこのサイトかっこいいんだけど・・・即席で作るのすごすぎる・・・
嬉しいコメントありがとうございます🙇♂️❗️
ありがとうございます。Odanなど影の簡単な入れ方、参考になりました。自分はXDのかわりにSketchを使ってます、一回払いなので。アイコンなどはNoun Projectもおすすめですよ。
あとトップメニューのFEATURE.のEが無いのが気になっちゃいました😅
コメントありがとうございます🙇♂️
Sketch使ったことないんですが、記事とかでよく見かけるので使ってみたいです😆❗️
教えていただいたアイコンサイト基本的にクリエイティブコモンズなのでめちゃめちゃ使えますね😲❗️共有いただきありがとうございます❗️
本当ですね❗️笑 今まで気付きませんでした😅
良く参考になりました。本当に有難うございました！
私はWebデザイナーを目指していますが、Webデザイナーの仕事に務める事は苦痛だと感じることはありましたか？
コメントありがとうございます😊♪
デザインするのは楽しい反面、仕事である以上期限内に作り上げないといけないことや、提出するデザインが何度も修正になること、大規模なサイトやサービスだと100ページ以上のデザインが必要になってくることなど、結構大変な面も多いです。
それでも楽しい面も多い仕事だと僕は思います😆❗️
高校生でWebデザインの勉強始めたいなと思っています。
まずはどんなスペックのパソコンを買えばいいですか？
後オススメの本などありますか？
コメントありがとうございます☺️❗️
パソコンのスペックについてはそこまで気にしなくて大丈夫だと思います！
ただ、AdobeのPhotoshop、Illustratorなどはそこそこ重いので、これらのソフトを同時に立ち上げながら作業したい場合はある程度のスペックはあった方が作業が捗るかもしれません。
僕は以前Macbook12inchで、そこまでスペックは高くないものを2,3年使用していましたが、こまめにアプリを閉じたりしていればそこまで不便に感じたことはありませんでした。
最近主流のAdobeのXDは前述のソフトより動作が軽いのと、Webデザインに特化しているのでオススメです😆❗️まずはXDだけでも一般的なWebのデザインはできるはずです！
OSに関していえば、やはりWindowsよりMacユーザーの方が多い印象です。どちらでもソフトは使えるのでその辺は好みだと思います☺️
Webデザインを始める上でも、デザイン4原則などは早いうちに覚えておいた方が楽にデザインできるようになると思います✏️この辺はネットで出てくる情報で十分です🖥
あえて書籍を挙げるなら「デザイン入門教室」「なるほどデザイン」などは入門者の方には分かりやすそうです😆♪
ただ、Webデザインについては、いろんなサイトを見ることや、好きなサイトを見つけて、真似してみるを繰り返す方が学べることが多いと思います❗️
将来webデザイナー(コーディング込)になりたくて専門学校行ってるんですけど、すごく参考になった上にデザインが実際あってもおかしくないクオリティだったのでためになりました。質問なんですけど、普段作る際はどのようなことに注意して作っておられますか？ お金を出して頂けるようなデザインのセンスがないので参考にさせてほしいです。学校で使用しているソフトはphotoshop、Illustrator、Dreamweaverです。コーディングする場合はDreamweaverとXDのどちらが良いでしょうか？長文失礼しました。
嬉しいコメントいただきありがとうございます😆❗️
要素のサイズや余白サイズなどをピクセル単位で気にして作ることが、結構差が出るところかなと思っています。
デザインの経験が少ないうちは細かいところまで気を使うのが難しいですが、感覚で要素を作ったり配置したりしていると、デザインを確認した際にすぐにわかりますし、デザインとして美しくない印象を与えてしまいます。
適正なオブジェクトの大きさや余白などは経験を積む必要がありますが、少なくとも細部までこだわりを持って作ることがデザイナーの仕事なのかなと思います。
また、webデザインは特にコードに起こしていく前提なので、よりその点考慮して作成する必要があるのかなと思います。
ちなみにXDはデザインツールなので、どちらかといえばPhotoshopやIllustratorと同じ部類に入ります❗️
Dreamweaverについては初学者が利用しているイメージで、全然それでも問題ありませんが、実際の現場でDreamweaverの使用はあまり聞かないです。
今後見据えた上では、シェア率の高い無料のエディタでVSCodeがあるので、そちら試しに使用されてみてはいかがでしょうか😆❗️
この動画作っていただいてありがとうございます！
会社にはいって先輩の仕事を拝見させてもらっている感じでとーってもためになります。
ところで質問させていただきたいのですが、『【実践】Webデザインはこんな感じで作る！ノーカット製作の流れ』で作っているWEBサイトをグリッドレイアウトで組むことについてはいかが思われますか？CSSを勉強しているのですが、フレックスボックスが面倒で、手抜きができたらいいのにと思っています。
コメントありがとうございます😊❗️グリッドレイアウトでも全然問題ないかと思います😆❗️
ただ僕の場合、グリッドレイアウトの方が書き方が難しく感じます😅
あとはIE対応も含める場合、グリッドレイアウトだとIE専用の書き方をしなくてはいけないようで敬遠しています笑
@@hirocode ご返信ありがとうございます！そういうことなのですね。フレックスボックスはまだまだ現役みたいなので、HIROCODE.ヒロコードさんの動画も参考にさせていただいて、頑張って覚えます。本当にご返信ありがとうございます！
WordPressでwebデザインをすることはありますか？
またXDとWordPressでのWeb制作での違いや特徴など教えて頂きたいです！
コメントありがとうございます😆🎵
wordpressはサイトの管理や実装を簡単に行えるもので、デザインツールとは異なるかと思います💡
デザインツールだと、XDの他にphotoshopとillustratorが主流ですが、webデザインで使われるのはillustratorかXDが多い印象です。
使い分けとしては、XDは複数ページのデザイン、illustratirはバナー作成フォント調整が必要なもの、photoshopは写真加工に向いていると思います。
僕の場合はphotoshopとillustratorで加工した写真やバナーをXD上に配置しながらデザインを進めていくという形を取っています。
LPなどペライチのサイトはillustratorで作ることもあります。photoshopでwebデザインをすることは昔はよくありましたが今はかなり少なくなってきていると思います。
他にも不明点あればお気軽にコメントください☺️
HIROCODE.ヒロコード ありがとうございます！
プログラミング初心者です。本当にこの動画助かります。フォトショップの代用になる無料アプリとかがあればおしえていただきたいです。
コメントありがとうございます😊❗️Photoshopで無料トライアルがあるので試してみてはいかがでしょうか！また、AdobeのXDに関しては無料プランがある様なのでそちらでWebデザインはできるかと思います😆‼️
@@hirocode 返信ありがとうございます。本当に参考になりました。
モダンコーディングのsinglelayout参考にしてますか？
コメントありがとうございます😆❗️
少し調べてみたのですが、モダンコーディングという書籍でしょうか❓
こちら拝見したことはないのですが、シングルカラムのレイアウトについてはスマートフォンでの表示のし易さや、レスポンシブ対応がしやすいという構築側の利点もあるかと思います💡
LPのようなシングルページのデザインにもシングルカラムは向いているのでオススメです🙆♂️
ロゴやアイコンを自分で作成するのにオススメの無料ソフトはありますか？
イラレは少し高いので本格的に始めたいと思うまでは余りお金をかけずに勉強したいので
コメントありがとうございます☺️
イラレと似た無料ソフト少し探してみて、Inkscapeというソフト触ってみたのですが、こちらは結構オススメ出来そうです❗️
速攻でチャンネル登録～～
めちゃめちゃ嬉しいです😭ありがとうございます🙇♂️‼️
webフォントが対応していないfontを使うことはありますか？(一部MV部分のみなど)
コメントありがとうございます☺️
メインビジュアルのみや一部の箇所のみであれば、画像として書き出してしまうことが多いです❗️
フォント周りはライセンス関係などもあって色々と面倒なので、最近は無料で気にせず使えるGoogleフォントから選ぶのがオススメです😆❗️
しゅごい……
XDを持っていないクライアントにXDで作成したデザインカンプを一番見やすい方法で送るには、やっぱりPDFで送るのがいいのでしょうか？？
コメントありがとうございます🙇♂️
XDで作成したプロトタイプはURLで共有することができるので、ブラウザで確認してもらうことが可能です❗️
ページ遷移なども作れるので、複数ページあるサイトのデザインでも共有しやすいです😆❗️
また、更新も可能なので、1度URLを発行してしまえば毎回同じURLでデザインの更新を確認してもらうってこともできます🙆♂️
私、大学でWebデザインの講義受けたんですけど、その時はfigmaっていうウェブで無料で使えるやつ使いました！！
いつもはイラレとフォトショ使ってます！！
大学の課題だけじゃ足りないので、自主製作したいんですが、Adobeじゃなくても簡単に作れたり出来ますか？？
コメントありがとうございます😆❗️
Adobe XDも無料で基本機能使用できるようなので、最初のうちはそれで問題ないかと思います❗️
Adobe以外だとfigmaやSketchが有名ですが、基本作れるものに大差はないはずです❗️
コメント失礼します！
黒丸の上にロゴを入れていると思うのですが、この時のショートカットキー教えてください！
白色なったり、黒色になっているため。
コメントありがとうございます😆❗️
まずロゴを白色にする必要があるので、ロゴを選択した状態で「i」を押してスポイトツールを選択、白い背景の箇所をクリックするとロゴの色が白になります。
また、ロゴを黒い円の上に載せる際に、ロゴが円の後ろに入ってしまうことがあります。その場合は、command + shift + [ もしくは command + shift + ] でオブジェクトの前後の重なりを変更することができます。
質問の意図履き違えてたら再度コメントください🙇♂️
自分もWEBデザイナーだけど「こことあっちのサイトのアレとコレのデザインを融合してー」って感じで一から作るの苦手だわ。サクサク作りたーい！
コメントありがとうございます❗️Webデザイナーやられているんですね😆❗️
わかります！この部分はこのサイトのこれ使えそうだなーみたいな✏️
ゴテゴテにデザイン入れる系のLPなどは、僕も参考サイトめちゃめちゃ見ます❗️
作り方公開ありがとうございます!!
やってみたいなー。
こんな感じなのかな？とか思ってたら
中々に面倒そうに思いました💦
自分には無理そうやなぁと思ったので
逆にお仕事されてる方へ尊敬の眼差しが芽生えました!!
いろいろとありがたい動画、、、
こちらこそコメントありがとうございます😆❗️
無知な質問で恐縮なのですが、HTML(PHP)もWebサイトのデザイン(ページの構成？)を行うものという認識だったのですが、このようなおしゃれなデザインを作成できるソフトがあるのならどういう時にHTML等は使用するのでしょうか？
コメントいただきありがとうございます☺️♪
この動画で作っているものは設計図のようなもので、これをそのままWebサイトとして公開することはできません。
ここで作成したデザインカンプ（デザインの完成見本）をもとに、HTMLやCSSでコード化していくって流れになります😆❗️
シャドウで光っているようなアイコンを作っていましたが、シャドウを外側につけるにはどうすれば良いのでしょうか..？
コメントありがとうございます😊
XDのドロップシャドウの項目に、X, Y, Bの項目があるので、XとYは0（X軸Y軸の距離を0）、B（Blurぼかし）に例えば40とかを指定すれば周りに影が広がる形になります。あとは、シャドウのカラーを明るめの色にして不透明度を上げれば光ったようになるかと思います😆❗️
現場ではmacユーザーとwindowsユーザーの割合ってどんな感じでしょうか？
コメントありがとうございます🙇♂️
詳細な比率は分かりませんが、感覚ではmacユーザーが多い印象です‼️
あと比較的メジャーなデザインツールであるSketchはwindows非対応みたいです🙆♂️
すごく無知な質問かもしれないのですが今回この動画のようにデザインされたものをHTML、CSSで作成するということなのでしょうか？
また、今WebデザインをはじめるならPhotoshopやIllustratorよりAdobeXDの方が主流なのでしょうか？
コメントありがとうございます🙇♂️
その認識であってます❗️
PhotoshopやIllustratorも素材を編集する上では不可欠ですが、メインでWebデザインを行うツールはXDが主流です🙆♂️
Adobe以外のソフトだとFigmaやSketchというツールも有名です❗️
@@hirocode 返信ありがとうございまーす！参考にします！
なんのイメージも掴めてなかったので本当にありがたいです。
僕はウェブ系の仕事（デザイナー？）を目指しているのですが、やはりHTMLなどは出来た方がいいですかね？
こちらこそコメントいただきありがとうございます🙇♂️❗️
Webに関わる仕事だと、ガッツリ書ける必要はないかもしれませんが、HTMLの基礎知識程度はあった方が良いかと思います。
必要度合いは会社によってかなりバラつきあるかと思います❗️
WEBデザインってコード？を打ち込みながら作るものだと思っていましたが、直感的にデザインする事も出来るんですね？
コメントありがとうございます☺️♪
一般的には、まじデザインカンプと呼ばれるWebサイトの設計図のようなデザインをまず作成します。これはサイトのビジュアル面を決定する画像です。
この画像を元に、HTML CSSコードでデザインカンプをコード化していきます！
ノーコードツールを使うと、この作業が同時並行で行えます！ただし、ノーコードツールだとデザインの自由度が低いというデメリットがあります！！
このようなソフトでデザインを構成して、その後は決定した数値などをHTML/CSSで入力するだけでサイトができるってことですか？
コメントありがとうございます🙇♂️
XDでは開発用にコードの書き出しができるのですが、CSSのみなので、HTMLに関しては別途組む必要があります。
また、書き出されるCSSもなかなか汎用性の低いコードなので、そのまま全て使えるというわけには行かなそうです💦特にレイアウト関係は結局0から書く必要があります。
ただし、カラーや余白・フォント・テキスト情報など、コーディングに必要な情報をコピーして使えるので、コーディング時のサポートに関しては利便性が高いと思います😆❗️
@@hirocode ご回答ありがとうございます。よく分かりました！それでも簡単にデザイン案を考えられる点便利ですね！
Webデザインを始めたいのですが、何のアプリやツールを購入するといいのでしょうか？またヒロコードさんは何のツールを購入していますか？
コメントありがとうございます😊
僕の使用しているデザインツールはAdobeのXD,Illustrator,Photoshopです。webデザインに関しては主にXDで作成しています。
Adobe社のソフトは利用ユーザーが多く、定番なのでオススメです‼️
XDは無料版でも基本機能はすべて使えるみたいなので、まずは無料版を使ってみてはいかがでしょうか🎵
参考になりました。ありがとうございます。素人ですいません。このデザインをワードプレスのトップに持ってくるにはどのように行うのでしょうか？
嬉しいコメントありがとうございます😊❗️
WordPressだと、wp-content > themes の中に任意のフォルダを用意してその中に必要ファイルを入れ、管理画面でテーマの設定を上記に変更すればいけたかと思います❗️
最近興味があってすこし勉強してるんですけど、なんのアプリ？サイト？ですか、まだ全然わからなくてHTML CSSの勉強をしてるんですけど
コメントありがとうございます😊❗️
この動画では「簡易的なWebサイト」（機能がなく情報の表示のみ）を作成しています。
上記のように情報を表示するのみのサイトであれば、HTML/CSSのみで作成できます❗️❗️
フィルとアウトラインとは何なのか気になりました！
コメントありがとうございます🙇♂️❗️
フィル（fill）は塗りつぶされているアイコンのことで、例えばyoutubeのロゴだとfill型にあたります。
それに対してアウトライン（輪郭）は、線をベースに作られたアイコンのことです❗️
@@hirocode ありがとうございます‼️
すごくわかりやすかったです！
でもwebサイトってプログラミング言語で作るのではないんですか？
嬉しいコメントありがとうございます😊❗️
サイト自体はhtml/cssだけでも構築できますが、日付の取得やフォームなど動的な機能が入る場合はphpなどのプログラミング言語を使用する必要があります❗️
この動画は「Webデザイン」というフェーズで、サイトの完成形を見てわかるようにするものです。
このデザインに沿ってプログラミング言語を使ってサイトを実際に組み立てていく、という流れです。
XDを使った作業は簡単に言うと「設計図の作成」で、プログラミング言語を使った作業は「設計図を見て組み立てていく」みたいな感じです。
プログラミング言語を使って組み立てたものが実際インターネットで閲覧できるサイトになります。(多分)
このツールをつかっちゃうとHTMLとかCSSとか、触らなくていいんですね。
便利ですねぇ
HTML /CSSのコーディングは別でしますよ
コメントありがとうございます❗️AdobeXDはデザインを作るソフトなので、実際のサイトとしては使えないんです😭
ただ、ページを複数作ってボタンでページ遷移させたりと、擬似的にWebサイトのような動きを表現することもできるので、サイトのプロトタイプは作成可能です😆❗️
おっしゃる通りです❗️フォローありがとうございます🙇♂️
勉強になりました。２人ともありがとうございました。
アイコンのサイトはFontawesomeを使っていますが、何か問題点などありますでしょうか。
fontawesomeで全く問題ないです（以前は結構使っていました）❗️
もしfontawesome内で必要なアイコンがない場合は、アイコンを他で用意して、そこだけ画像指定する必要が出てくるので、僕の場合最近は最初から全部画像で用意することが多いです。
fontawesomeで必要なアイコンが賄えれば指定も楽でとても便利かと思います😆❗️
え？ ここで作ったやつがコードとして出来上がるって感じですか？ Webデザインってバチバチコード打ち込んでやるもんだと思ってたけど違うのかな…
コメントありがとうございます😊❗️
現状Webサイト制作の流れで多いのは、Webデザイン（デザインカンプ）を作成して、サイトのイメージを確定した上で、コードに起こすという流れが主流かと思います❗️
こちらの動画はWebデザインの作成部分で、次の動画でコードに起こす作業をしています🙇♂️❗️
これはWebサイトを作るためのデザイン、設計図であり、このデザインを元にしてコーディングしていきWebサイトが作られるという事ですよね？
コーディングする所までがWebデザイナーの仕事ですか？
おっしゃる通りです❗️
もちろんWebデザイナーはデザインだけという会社や案件もあるかと思いますが、最近だとWebデザイナーがコーディングまで対応するのが一般的で多くなってきていると感じます。
おそらくコードを書く書かないというよりかは、どういった構成でコードが組まれるか想定した上でWebデザインを作ることが求められているのかなと思います❗️
いつも動画見てます。質問があります。例えばメインビジュアル写真から下のアバウトの文字までの距離などどのようにしたらいいですか？いつも数値がわからず8の倍数にしてます。又プロフィール画像のサイズの数値などもどのように考えればいいですか？
いつもご視聴いただきありがとうございます😊♪そこらへんのバランスは正直決まりがなく感覚です💦
デザインによりけりですが80~100pxくらいで設定することが多いです🤔 似たような雰囲気のサイト参考にするのが一番手っ取り早いかもです😆❗️
WEBデザインをつくた後に、ワードプレスへデザインをインポートする方法はありますか？
コメントありがとうございます😊♪
デザインデータとWordPressを連携するプラグインは僕の知る限りないです💦
デザインをコードとしてエクスポートする機能やプラグインは少なからずありますが、コーディングの必要がなくなるような精度の高いものが今のところないので、大体がサポートとして使うレベルかなと思います。
XDだと開発用に書き出す機能があるので、それを使うとフォントやテキスト、サイズやカラーコードなどをコピペすることができるので便利です😆❗️
@@hirocode
丁寧にありがとうございます🙇🙇
僕まずパソコンが上手く使えないんですけど、半角英数字設定にしてるんですけど、反映されません。< このタグを出す時シフトキー押して表示してるんですど、その時点で全角になってるのでしょうか？
コメントいただきありがとうございます🙇♂️
コード書くときは基本的に半角英数字の設定で、中身のテキストなどを入力する時だけ全角の設定に切り替えています！
"
頭の悪い質問してほんとに申し訳ないと思うんですけど、パソコン三面くらい使ってますか…
コメントありがとうございます☺️❗️この動画では実際1画面で作業していますが、macの標準機能のMission Controlを使用しています。デスクトップを擬似的に切り替えているイメージです。
コーディングする時なんかは2画面でする方が効率的だと思います😆♪
模写したいのですが、画像データ等お借り出来ませんでしょうか？
コメントありがとうございます☺️♫
概要欄にファイルのリンク貼ったのでご自由にお使いください😆❗️
webデザイナーはhtmlとかのコードは書かなくてでもいいのですか？
コメントいただきありがとうございます😊♪
おそらく一般的なWEB制作会社やフリーランスの方であればHTML CSS程度の知識は必要である場合が多いです❗️デザインに特化しているようなデザイン会社などであればWEBデザインのみ行うWEBデザイナー職はありそうですね❗️
@@hirocode なるほど、そうなんですね！ありがとうございます！
Webデザインはスクールなどで勉強されたのですか？
コメントいただきありがとうございます🙇♂️❗️
実務で経験を積んで学習していきました！今度その辺りの動画出そうと思っています💡
デザインの専門に通ってる学生です！
まだ、webデザインの授業とかないんですけど、就職のために早くポートフォリオを作りたくて何から始めたらいいかわからないんですけどどうすれば良いですか！！🙇♂️
コメントいただきありがとうございます😊♪
デザインの専門学校通っているんですね❗️
ポートフォリオの中身は自由なので、まず学校での制作物をまとめるのがオススメです！作品の写真や制作期間やこだわりのポイントを掲載していく感じです。
それに加えて、自主制作したものがあれば掲載、またはこれから自主制作を増やしていくって感じになるかと思います😆❗️
僕の場合、趣味で描いていたイラストとかも自由に載せてました笑
WEBデザイン未経験であれば、デザインのトレースと、想定でデザイン制作をする、ってことを繰り返すのが良さそうです❗️
🔽の動画でポートフォリオについて話してたと思うのでよろしければ参考にしてみてください^^
ua-cam.com/video/Hh0rIh0vVc8/v-deo.html
@@hirocode
ご丁寧にありがとうございます！！
この人から学びたい…個別授業してくれませんか…
そう言っていただけて嬉しいです😭ありがとうございます🙇♂️❗️
こ、これが「デザインを作る」という新しい日本語を作った人か〜。
むかーしホームページビルダーというソフトを使って趣味のページを作ってましたが、webデザイナーさんはビルダーは使いますか？
昔ありましたね😆‼️
今だとWixやStudioなど、ホームページビルダーみたいなノーコードでサイトを作れるツールがあります❗️僕は使うことほとんどないですが、結構ライトなサイトだとノーコードで十分な場合もあるのでその辺使ってる方や会社も全然あると思います！
@@hirocode
丁寧にありがとうございます！🥰
デザイン＋コーディングで30分でしょうか？
コメントありがとうございます😆❗️
コーディングはプラス１時間くらいかけていたと思います🙇♂️❗️
Webデザインに興味を持ち、プログラミング用語を学ぼうとしたのですが、ある方からスクールのような内容では実用性皆無だよと言われたんですが、これってほんもなんですか？
コメントいただきありがとうございます🙇♂️❗️
僕自身スクールに通ったことがないということと、色んなスクールがあると思うので一概には言えませんが、その人の学習スタイルや今持っている知識量にもよるかと思います。
例えば、知識がほぼ０の状態、かつ自分で能動的に学習が難しい場合はスクールに通って基本的な知識やスキルを身につけるのはアリだと思います❗️
逆に、自分で能動的に学習ができる人であればネットの記事や書籍などである程度のスキルを身につけることは可能だと思います❗️
そこから実務としてプログラミングの仕事を請け負っていくハードルとしてはどちらも同じなのかな？と感じます。
Webデザインの専門学校とかは行かない方が良いですよね？
コメントありがとうございます🙇♂️❗️
専門学校だとおそらくwebデザイン経験者から直接学べると思うので、行くメリットはそれなりにあるのかなと思います❗️
ただ、僕はそういう学校には行っていないので、行かなくてもwebデザインを学ぶことは可能だと思います😊❗️
図々しいと思いながら聞きます
webデザイナーは高収入ですか？
コメントいただきありがとうございます🙇♂️
webデザイナーの平均で言ったら他と比較して低めのようですね😅
webデザインのみで高収入にするのはなかなかの技量がないと難しそうですが、フロントエンジニアとしての幅を増やしたりもできると思うので、その点とりわけ低いわけではないように思います。
僕の場合もそうですが、デザインの仕事自体は趣味の延長というか楽しんでやれているので、他の仕事に比べて天国のように思います😊❗️（⚠️クライアント対応や成果が求められる厳しい面もあるかとは思います）
@@hirocode
そうなんですね、返信ありがとうございます😊
facebookなどのSNSアイコンはいじっても問題ないのでしょうか？
コメントありがとうございます🙇♂️
今回その辺あまり考えずに作成しましたが、確かにこれをそのまま公開するとなると完全にアウトだと思います❗️
UA-camやFacebookのライン型のアイコンがそもそも存在しないことや、UA-camのアイコンに文字を並べること、Wordpressのロゴ色を変えていることも本来NGです。
その辺説明全然足りてませんでしたが、上下左右に必要な余白なども含めて各SNSの規約を確認する必要があります。ご指摘いただきありがとうございます🙇♂️❗️
@@hirocode
ご返信ありがとうございます。
なるほどです、
個人のウェブサイトだとokとか企業のコーポレートだとNGってあるものでしょうか？
ご存知だったら教えていただけますと…！
個人・法人問わず基本的にはNGだと思われます。ただ、ガイドライン違反に抵触する形での使用はかなり多くの箇所で見受けられるのも現状です💦
悪質性がないかぎり罰則などになる可能性はほぼないと思われますが、やはりガイドラインに沿って使用するのが望ましいかと思われます🙇♂️❗️
@@hirocode
なるほど、そうですよね。
どこのサイトもブログも大丈夫なのかなとは思っていたのですが、やはりガイドラインに沿ってやるべきですよね。
個人ブログとかならまだ自己責任なのでいいのかとは思いますが、金銭が発生してる請負なら気をつけないとですよね。
ありがとうございました。
中2男子です！今趣味適度にHTMLとCSSを用いてウェブを作ってるんですけど写真が上手く入らなくて変な写真に斜線の入ったアイコンが表示されます(T . T)対処法ってわからないですか？分かればで良いので教えて頂ければ幸いです
写真のパスが間違ってるのかもしれません！
index.htmlファイルと同じ階層にphoto.jpgがある場合は、で表示されるはずです😆❗️
@@hirocode なるほど！ありがとうございます！試してみます😁
@@hirocode なんかそのソフトにダウンロードした画像が他のダウンロード画像と名前が重複してたみたいでbg_header2.jpg(2)になっていました😥本来ならbg_header2.jpgが正解なのですが…どうりで表示されないわけです(T . T)しっかりrenameして改善することができました！
イケメンさん
ありがとうございます😂❗️
無料で見れるなんて
嬉しいコメントありがとうございます😊♪
へぇ〜〜〜〜〜😗
いろちょう→しきちょうですかね。。
おっしゃる通りで以前も同じ指摘いただきました🙇❗️
もうコードなんてかかないのか
コード書きます❗️デザイン作ってコードに起こすという流れが多いです❗️
これあるならプログラミングでwebサイト作る意味なくないですか？もしかしてプログラミングの勉強無駄だった？
コメントいただきありがとうございます😊♪
このソフトで作れるのはWebデザインなので、これだけではサイトになりません💦
Webデザインでサイトのイメージを作った上で、HTMLなどでコードを書いていく必要があります‼️
SNSのロゴ勝手にいじっていいんかな
コメントありがとうございます❗️
他の方に同じコメントいただいているので、そこでの返答を載せさせていただきます🙇♂️
引用ーーー
確かにこれをそのまま公開するとなると完全にアウトだと思います❗️
UA-camやFacebookのライン型のアイコンがそもそも存在しないことや、UA-camのアイコンに文字を並べること、Wordpressのロゴ色を変えていることも本来NGです。
その辺説明全然足りてませんでしたが、上下左右に必要な余白なども含めて各SNSの規約を確認する必要があります。