独学でWebデザイン 7年 続けた結果... と、独学勉強法！
HTML-код
- Опубликовано: 7 фев 2025
- 今回は、Webデザインを未経験かつ独学で始めた僕が、当時の経験や失敗を踏まえて、オススメしたい独学法についてお話しさせていただきます🙇♂️
🎥 この動画の構成 🎥
00:59 自己紹介・経歴
03:00 実際に行ってきた独学法
04:36 まずやってみて欲しい「体験」
05:44 「第1の独学勉強法」
06:45 「第2の独学勉強法」
07:03 再びやってみて欲しい「体験」
07:18 デザインにセンスは必要か？
08:51 「第3の独学勉強法」
10:01 更なるステップアップのために
10:14 「1つ目、こだわりポイント」
10:57 「2つ目、細部までこだわる」
11:49 「3つ目、UIをこだわる」
✅ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ チャンネル登録
www.youtube.com...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.c...
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス 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...
----------------------------------------------------------
#WEBデザイン #独学 #勉強法
かれこれデザインを10年程やってますが、初心に返ることができました
世の中が進むにつれて新たな表現・技法、ツールの登場で「また新しいことを覚えなきゃいけないのか」と思う気持ちが徐々に大きくなっていることに気づき、デザインを始めた頃の「こんなこともある」「こんなやり方があるんだ」という発見や学びの楽しさを忘れていました
新しいことを学べることに感謝しつつ今後もスキルを上げたいと思いました
ありがとうございます
10年すごいです😵ほんとおっしゃる通りどんどん新しいもの出てきて大変ですよね💦
僕も改めて楽しさ見つけつつ頑張ります😆❗️ありがとうございます🙇
すごすぎます。普通じゃない。天才!
ありがとうございます😂‼️
自称独学駆け出しです☆ステップアップしていくための目標が今一つ停滞気味だったので、
更なるステップアップ3つのポイントは私にとって本当に的を得ていて新鮮でした！
とくに毎回新しい「こだわりポイントを設ける」はモチベを維持していく上で
とても大切なポイントだなと思い、早速メモしてチャンネル登録いたしました。
これからも配信たのしみにしています！ありがとうございました。
嬉しすぎるコメントいただきありがとうございます😭❗️
モチベ維持大事ですよね😌参考にしていただけたようでこちらとしても嬉しい限りです😊♪
チャンネル登録もありがとうございます🙇♂️❗️
もっと動画出せるように頑張ります🙆♂️
自分は2017年まではWebはノー関与で紙媒体オンリーやったけど
2017年6月で作ってたフリーペーパーは廃刊になったきっかけで
webを学んでみるかというきっかけでwebデザイン・コーディング・phpの基本的なバックエンドを
やり始めてできることが格段に増えました。
新しいことをやってみるのってマジで重要だと思っています。
推し技術はReact(Next.js)
すごいです😵！新しいチャレンジの重要性めちゃめちゃ共感です❗️
僕はReact一度やったきりで全く触れなくなってしまったので、再度チャレンジしてみようと思います🙇♂️
いつも参考にさせていただいております！！
HTMLでコーディングした内容をwordpress化させる方法を動画にしていただけたら嬉しいです！！！
手順など他の方も出しているのですがHIROCODEさんの説明が一番わかりやすいと思うのでお願いしたいです！！
めちゃめちゃ嬉しいコメントいただきありがとうございます😭
Wordpress関連の動画も出していきたいと思います❗️
既存サイトのトレースは、全く思いつかなかったので大変参考になりました。
紙媒体のデザイナー、アートディレクターを長らくしていたのですが、来年2月からコンテンツマーケティング会社のデザイナー、ディレクターとして勤める事になりました。1ヶ月の間にXDでトレースしたいと思います！
コメントいただきありがとうざいます🙇♂️
グラフィックの知識が豊富だとWebでもかなり強みになりそうですね❗️
少しでも参考にしていただけて嬉しいです☺️♪
わかりやすくてとても勉強になります！
嬉しいコメントいただきありがとうございます😭❗️
とっても勉強になります
webデザイナーとしてのyoutuberって日本人はとても少ないので有り難いです
それに、ヒロさんのよく通る声や背景の音楽などとっても好きです
これからも動画投稿まってます♬
とっても嬉しいコメントいただけて光栄です😭
これからもWebデザインについての動画どんどん上げてけるように頑張ります❗️
初コメです。
独学でフリーランス目指して勉強してます!
いつも貴重なお話ありがとうございます。
参考にさせていただいています◉‿◉
こちらこそご視聴いただけて嬉しいです☺️♪
嬉しいコメントいただきありがとうございます🙇♂️❗️
こんにちは。同業者です。
自分はマークアップが主ですが、最近デザインの方もちょくちょくやらせてもらってます。
デザインスキル向上のために何か出来ることはないかと探していたので『サイトトレース』は目から鱗でした。(今は空き時間でバナートレースをひたすらやり続けている状況です。)ありがとうございます。
ただ、性質的に・視覚的に細かいところに気が回りづらい・長い間集中しずらい等向いているとは言いづらい側面もあるので専門分野であるコーディング+αのスキルとして徐々に習得していこうと思います。
こんにちは😊♪
マークアップからWebデザインに入っていく場合、もともとデザインに触れてはいたかと思うので学習しやすそうっていう勝手なイメージがあるんですが実際どうなんでしょうか笑
トレースすると比較する際に細かいところに嫌でも目に付くと思うので良さそうですね😆❕
スキル向上の上昇志向に感心します❗️
純粋にイラストが凄い
ありがとうございます😆❗️
学部は関係なくて美大っていうだけで強い印象。Fireworks懐かしいですね。
いまだに使ってる地方の制作会社はありますよ。
コメントありがとうございます😊♪ Fireworks今も使ってるとこあるんですね😂衝撃すぎます😵❗️
動画が見やすくて本当ありがたいです。ショートではいつもお世話になってます。
私はアート系の仕事をしていましたが、何もわからない経営者にWEBデザイナーとして雇われ、デザインて何？て感じでした😂（絵かけるならできるでしょ、みたいな）
そもそもwebデザイナーの定義がイマイチわからないまま過ごしていて、、
とても昔はHTML＝WEBデザイナーの印象でしたが、今だとデザインだけだったりの方もいらっしゃる？
ヒロさんの様に一通りできてWEBデザイナーというのでしょうか？？🤔
嬉しいコメントいただきありがとうございます😊♪
アートに関わるお仕事されてたんですね😲！そこらへん結構ごっちゃにされがちですよね😂
一般的にWEBデザイナーの主な仕事としては、デザインカンプの作成、いわゆるWEBサイトやサービスの具体的なビジュアルイメージの作成だと言えます。
加えて、HTML周りのコーディングまで対応できるデザイナーが多い印象です。
デザインカンプの作成はせずにHTMLのコーディングだけを仕事とする人はコーダーと言われることが多いです！
@@hirocode そうなんですね！コーディングが中途半端な知識のままでいるのではたしてWEBデザイナーを名乗ってもいいものなのかずっと気になってました🙄困った時に動画参考にさせていただきます☺
勉強になりますなぁ
ありがとうございます🙇❗️
あ、デザインFBやって欲しいです！
所属していた学科→専攻していた学科
十中八九の人が→十中八九、みなさんそう思うでしょう
かなと思いました😣💦
ご指摘いただきありがとうございます🙇♂️❕
どのように上手くいくコツや書籍何かありますか？
コメントいただきありがとうございます😊♪
これ読めば完璧というものは今のところありませんが、概要欄にいくつか書籍紹介しているので参考にしてみてください😆❗️
ツールに関する質問です。
ヒロコードさんはAdobeXD＋（Photoshop or illustrator）を利用されていると思いますが、Figma＋（Photoshop or illustrator）でも問題はないでしょうか？
ご質問いただきありがとうございます😊♪
全然問題ないです❗️むしろ最近はXDよりもFigmaの方が使うことが多くなってきてます（figma使いやすいので）😅笑
@@hirocode 質問に答えていただきありがとうございます！
サイトのトレースは確かに、とても重要そうですね(^_^)
同時に沢山のサイトを閲覧する事にもなるし、引き出しも増えそうです☆
※関係ないですが、音楽・歌の練習においても「シャドウイング」と言う「本家のボーカル」に合わせて練習する効果的な方法があります…これに似てるかも！？笑
コメントいただきありがとうございます😊♪
歌の練習でもシャドウイングという似たものがあるんですね😲❗️確かに、英語の練習でもシャドウイングって聞いたことがあるので、何かを学習する上では効果的な練習方なのかもしれませんね😆❗️
喵
ファーストビューのモックアップのテキストが画面からはみ出ている時点で…
経歴面白いと面白いですね！！ 本文と見出しは40px... 余白の使い方いつも迷います。。
コメントありがとうございます😆❗️
余白ってかなり難しいですよね💦僕も毎回かなり時間を費やしてしまいます...