【実践】Webデザインはこんな感じで作る！ノーカット製作の流れ。
視聴回数 557,955 回
0
0
今回は、ウェブデザインの制作の流れを紹介しています。
AdobeXDを使用したデザインの手順や、デザインをする上で、何を考えているかなどを知っていただけたらと思います☺️
🔽 続きの動画はこちら：HTMLコーディング 🔽
https://youtu.be/jxIpYOOh-TU
🔽 第2弾はこちら：【ノーカット】FigmaでWebデザイン 🔽
https://youtu.be/BKxH5wK8VJQ
🎥 この動画の構成 🎥
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 完成！
📂 今回作成したデザインファイル 📂
https://www.craft.do/s/R5pbWq4PobjFit
⭐️ 自分でWebサイト作ってみませんか？ ⭐️
誰でも、できる！Webサイト公開の流れ！
https://youtu.be/vHmMklqr0oA
✅ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ チャンネル登録
http://www.youtube.com/hirocode?sub_confirmation=1
◆ Twitter. ツイッター
https://twitter.com/hirocodeweb
◆ Instagram. インスタグラム
https://www.instagram.com/hirocodeweb/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
----- マウス -----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
https://amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
----- キーボード -----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
https://amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
----- パソコン -----
【 Apple 13インチMacBook Pro 2022 】
https://amzn.to/3bDPYmU
"最新M2チップ搭載！初期投資で良いパソコンの使用をオススメします。 "
----- 周辺機器 -----
【 Apple AirPods Pro 】
https://amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
【 Apple iPad Pro 11インチ 】
https://amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
----- デザイン 基礎編 -----
【 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 】
https://amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
【 なるほどデザイン 】
https://amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
----- デザイン 思考編 -----
【 誰のためのデザイン？ 】
https://amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
【 IAシンキング Web制作者・担当者のためのIA思考術 】
https://amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
----- 書籍デバイス -----
【 キンドルペーパーホワイト Kindle Paperwhite 】
https://amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: https://youtu.be/lv1YPeP1O8k
----------------------------------------------------------
AdobeXDを使用したデザインの手順や、デザインをする上で、何を考えているかなどを知っていただけたらと思います☺️
🔽 続きの動画はこちら：HTMLコーディング 🔽
https://youtu.be/jxIpYOOh-TU
🔽 第2弾はこちら：【ノーカット】FigmaでWebデザイン 🔽
https://youtu.be/BKxH5wK8VJQ
🎥 この動画の構成 🎥
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 完成！
📂 今回作成したデザインファイル 📂
https://www.craft.do/s/R5pbWq4PobjFit
⭐️ 自分でWebサイト作ってみませんか？ ⭐️
誰でも、できる！Webサイト公開の流れ！
https://youtu.be/vHmMklqr0oA
✅ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ チャンネル登録
http://www.youtube.com/hirocode?sub_confirmation=1
◆ Twitter. ツイッター
https://twitter.com/hirocodeweb
◆ Instagram. インスタグラム
https://www.instagram.com/hirocodeweb/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
----- マウス -----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
https://amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
----- キーボード -----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
https://amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
----- パソコン -----
【 Apple 13インチMacBook Pro 2022 】
https://amzn.to/3bDPYmU
"最新M2チップ搭載！初期投資で良いパソコンの使用をオススメします。 "
----- 周辺機器 -----
【 Apple AirPods Pro 】
https://amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
【 Apple iPad Pro 11インチ 】
https://amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
----- デザイン 基礎編 -----
【 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 】
https://amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
【 なるほどデザイン 】
https://amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
----- デザイン 思考編 -----
【 誰のためのデザイン？ 】
https://amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
【 IAシンキング Web制作者・担当者のためのIA思考術 】
https://amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
----- 書籍デバイス -----
【 キンドルペーパーホワイト Kindle Paperwhite 】
https://amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: https://youtu.be/lv1YPeP1O8k
----------------------------------------------------------
