【入門講座】Webデザインの作り方 part.1【0から作るWebデザイン入門】
今回は、0からWEBデザインを作っていく流れを説明します😊♪
手順を追いながら細かく説明していこうと思うので、いくつかの動画に分けて説明して行きます❗️
---- この動画の構成 ----
0:00 オープニング
0:50 ワイヤーフレームを作る（ページ構成を考える）
2:10 2種類のワイヤーフレーム
4:37 ワイヤー作成作業開始
6:39 XDでワイヤーを元に構成を組んでいく
9:07 ロゴについて
【次の動画】 • 【入門講座】Webデザインの作り方 part...
質問事項などございましたら、コメント欄でお待ちしています😆❗️
✅ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ チャンネル登録
kzread.info?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
---- キーボード ----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
---- パソコン ----
【 Apple Macbook Pro 16inch 】
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
---- 周辺機器 ----
【 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...
----------------------------------------------------------
Пікірлер: 67
こんないい動画を無料で見せてくれる主さん優しすぎるわw
@hirocode
2 жыл бұрын
嬉しいコメントいただきありがとうございます😭❗️❗️
画的にも話のトーンや速度とかも、内容がすっと頭に入るボリューム感でとても助かります。 次回も楽しみにしてます！
@hirocode
3 жыл бұрын
嬉しいです😭ありがとうございます🙇♂️❗️
こういう動画が見たかったっていう動画のメジロ推しです。ありがとうございます😊😊
@hirocode
3 жыл бұрын
嬉しいです😭ありがとうございます🙇♂️❗️
本当にどの動画も分かりやすくて、毎回楽しみな素晴らしいチャンネルです！ 講師業、めちゃくちゃ向いてると思います。 余談ですが手が美しい。
@hirocode
3 жыл бұрын
そう言っていただけて嬉しいです😭 もっと更新頻度上げれるように頑張ります🙇♂️❗️ 手が綺麗って初めて言われました😊ありがとうございます♪
どの動画も本当に勉強なります😆
@hirocode
3 жыл бұрын
嬉しいです😭❗️ありがとうございます🙇♂️❗️
毎回楽しみにしてまーす！
@hirocode
3 жыл бұрын
嬉しいです😆❗️もう少し投稿頻度上げられるように頑張ります🙇♂️❗️
ありがとうございます😊
@hirocode
Жыл бұрын
こちらこそありがとうございます😊♪
はじめまして。1つ拝見して、あまりにもわかりやすく、しかも個人で作ってる人間にとってほんとにツボをグイグイついてくれる内容ばかりで、ただいま夢中になって拝見してます。 正直、某動画講座販売の有名サイトのwebデザイン関係のをいくつか購入してみましたが、それらよりもヒロさんの講座の方が圧倒的に実作業にそくしてて、そして喋りのリズム、トーン、声も大変聞きやすくてすんなり入って来ます。 無料でこのような素晴らしいものを提供して頂いてひたすら感謝します。これからも楽しみにしています。ありがとうございます！
@hirocode
3 жыл бұрын
コメントありがとうございます🙇♂️❗️ こちらこそそのように言っていただけて感謝です😭 より良い動画作れるように頑張ります❗️❗️
一緒に操作出来るような説明だともっと嬉しいです😢
@hirocode
Жыл бұрын
貴重なご意見いただきありがとうございます！ おっしゃる通りざっくりとした説明な箇所多いので、一緒に同じもの作れる形で今後動画作っていきたいと思います🙇♂️❕
@tommy_23
Жыл бұрын
@@hirocode ありがとうございます！楽しみにしています！
いつも拝見してます。わかりやすい上に見やすくて大変助かってます。リクエストですが、居酒屋系のHPを見てみたいです。
@hirocode
Жыл бұрын
嬉しいコメントとリクエストいただきありがとうございます😆❗️
いつもためになる動画ありがとうございます！繰り返し見て勉強しています。 ECサイト(スニーカーやスポーツ用品などのサイト作りを今後予定してます)のデザインなども見てみたいです…！！
@hirocode
2 жыл бұрын
ご要望いただきありがとうございます😊❗️ ECのデザイン興味あるか不安だったのですが、そういったご意見いただけて嬉しいです❗️ すぐ作れるか分かりませんが、ECのデザイン動画検討させていただきます🙇♂️
@familyfukumimi3995
2 жыл бұрын
@@hirocode ありがとうございます！気が向きましたら是非・・・！これからも楽しみにしています(*'▽')
最近WEB制作の勉強を始めて、参考にさせてもらってます！ 今回も分かりやすい動画ありがとうございます！ 動画の要望なんですが、もしよければヒロコードさんのレスポンシブ工程が見てみたいです🙇 次回も楽しみにしています！
@hirocode
3 жыл бұрын
こちらこそありがとうございます😊❗️ レスポンシブの動画あげられていないので、必ず上げます❗️ 今後ともよろしくお願いします🙇♂️
@user-xn8cs9or1m
3 жыл бұрын
@@hirocode お忙しい中返信ありがとうございます！よろしくお願いします🙇
前にもお願いしましたが、どこでお願いしたのか？わからなくなりました。 MacBook Pro にAdobe XD をどの様にしてインストールするのか教えて下さい。 App Storeには出て来ません。
なるほど٩( 'ω' )و
@hirocode
3 ай бұрын
ありがとうございます😆❗️
論理的…！！
@hirocode
3 жыл бұрын
センスが重要と思われがちですが、webデザインは結構そういう点が多いイメージです😆❗️
説明がとてもわかりやすい上に、参考書には載ってないちょっとした（でもすごく役立つ）テクニックまで教えて下さって嬉しいです。 また、声も話し方も落ち着いていて、内容に集中しやすいです。 次回の動画も楽しみしています。
@hirocode
3 жыл бұрын
すごく嬉しいコメントいただきありがとうございます😭より良い動画投稿できるように頑張ります🙇♂️❗️❗️
オンラインで講座受けたのですが全然分からず、Progateとかで勉強してからコーディングした方がいいですか？
@hirocode
2 жыл бұрын
講座にもよると思いますが、事前に、よく使うタグやレイアウトの組み方など、基礎的なコーディングの知識に関しては学習しておく必要があるかもしれませんね😃❗️ Progateだと基本的なこと学べるので良いですね😆‼︎
デザインカンプって、スマホサイズは新たに作るのでしょうか？ またここからスマホサイズにするときってどうするんでしょうか？
@hirocode
3 жыл бұрын
レイアウトが複雑でないものはコード上でレスポンシブ対応することが多いです😃 スマホデザイン提出求められる場合や、UIなどをこだわりたい箇所に関してはスマホサイズのデザインを作る場合も全然あります❗️ 僕の場合は、隣にスマホサイズのアートボードを用意して、PC版のパーツを流用しながら作っていきます😆❗️ 経験少ないうちは、コードでレスポンシブ対応するとバランスなどの調整が難しいので、軽くでもスマホデザイン作るのがオススメです♪
@user-cq2vy6qu8b
3 жыл бұрын
@@hirocode そうなんですね！！ずっとモヤモヤのがとれました！！丁寧な解説ありがとうございます！！！！！☺️これからも応援してます☺️
もし可能であれば、ちょっとマニアックですがゲーム関連のサイト（公式ページだったりランディングページだったり）のデザインを参考にしたいです、お手数ですがお教えいただけませんか？
@hirocode
2 жыл бұрын
動画のリクエストいただきありがとうございます🙇♂️❗️
初めまして。 ご使用のパソコンや、スペックなど教えて頂けませんか？
@hirocode
3 жыл бұрын
コメントいただきありがとうございます😊♪ MacBookPro 15inch プロセッサ 2.6 GHz 6コアIntel Core i7 メモリ16GB 上記使用しています❗️
はじめまして。 すごく参考になりました。 一つ質問です。 ワイヤーフレームを手書きからのXDで作成されてましたが、デザインカンプはまた別で作り込むんでしょうか？
@hirocode
3 жыл бұрын
コメントありがとうございます😊❗️上記認識通りです❗️ 手書き→XDワイヤー→モックアップ→デザインカンプ 僕がフルフルでやる場合は上記のような流れで作成しています。 サービスの規模や複雑さなどによって上記工程が減る場合があるって形です🙇♂️❗️
@user-kw4ds2ws7v
Жыл бұрын
デザイナーカンプとモックアップの違いはなんでしょうか？
ADOBEのXDは、iPadの場合、何をインストールするのですか？
@hirocode
Жыл бұрын
コメントありがとうございます😊 XDをiPadで使いたいということでしょうか？iPad用のアプリはありますが、プロトタイプの閲覧機能しかありません💦 なのでデザインをするにはパソコンが必要です‼️
化粧品会社の新商品のサイトのワークフレーム宜しければお願いします。
こんにちは、 ウエブデザイン(デジタル)を0から学ぶとしたら時間はどのぐらいかかりそうですか?僕30代なんですが、不満になること何かありますか? 教えてください。よろしくお願いします!
@hirocode
Жыл бұрын
こんにちは😊♪ 仕事+αで取り組むのか、終日取り組めるのかで全然変わってきそうです。 また、独学かスクールなど学習方法によっても大きく変わってきます。 例えば、受験勉強と同等量かつ自己学習で取り組んだとしたら、3ヶ月くらいあれば基礎は一通り把握できると思います（ただ、デザイン業に向き不向き・得意不得意もあると思うので一概には言えませんが...）。 あとは目指すところがWEBデザイナーを本業とするフリーランスなのか、副業なのか就職するのかによっても結構違ってきます❕❕ 今だとWEBデザインだけでなくフロントエンド領域も学習しなければ、なかなか仕事としては難しい印象です💦 なので、目標とするポジションを明確化した上で学習するのがオススメです😆❗️
こんにちは 卒業制作として猫カフェホームページを挑戦したいと思います。注意点とかありますか。よろしくお願いします。これからの動画も楽しみにしてます♪
@hirocode
Жыл бұрын
コメントいただきありがとうございます🙇♂️❗️ 卒業制作ってことは美大でしょうか🤗 自主制作では自分でこだわりポイント作ることがオススメです😆！ 例えば、写真をただ置くだけではなくて猫の表情が伝わりやすいようにこだわってみるとか、この部分の動きが可愛くなるようにこだわってみるとかです！ 上手くいくように応援してます😆❗️
@user-vb3fw6so5o
9 ай бұрын
ありがとございます。😊
はじめまして。素人なんですが社内のwebデザインの仕事が舞い込んできました。wordpressを使う話になっています。おすすめな本などありますか？
@hirocode
3 жыл бұрын
はじめまして😊🎵 僕が初めてワードプレスを学んだサイトで、webデザインレシピというとても分かりやすいサイトがあったのですが、今は閉鎖されているようでした😭 ただ、他にもwordpress入門や使い方みたいなサイトたくさんありそうなので、試しに1サイト選んでやってみると良さそうです‼️ うまくいかない点あれば再度検索するといった形で進めるのが良いかと思います😆‼️
@TOTO-hl6dm
3 жыл бұрын
@@hirocode ご返信ありがとうございます！！ ヒロコードさんの動画も参考にしたいので更新楽しみにしています😊❤️
good^^
@hirocode
3 жыл бұрын
Thanks😆❗️
この動画で使用されているXDというアプリは無料ですか？？
@hirocode
Жыл бұрын
コメントいただきありがとうございます😊♪ 下記URLのスターターキットというところから無料で使えます😆❗️ www.adobe.com/jp/products/xd.html
いつも参考にさせてもらっています。 この続きってどうなりましたか？ お忙しいところ誠におそれいりますが、 お待ちしております。
@hirocode
3 жыл бұрын
コメントありがとうございます❗️ ごめんなさい、なるべく早く続きあげられるように頑張ります🙇♂️❗️
はじめまして。 全くの未経験でWebデザイナーを目指したいのですが、家にWindows10のデスクトップ型パソコンしかありません。 やはりMacBookや最新のWindowsのノートパソコンを買わないとダメですか？ すみません💦
@hirocode
3 жыл бұрын
初めまして😊 最新のでなければダメってことはないですが、デザインツールで主流のAdobe系のソフトはある程度PCのスペックがないと動作がカクカクするなど快適に動かない場合があります。 体験版などで試してみて、スムーズに動作するようであれば問題ないはずです😆❗️