【入門講座】Webデザインの作り方 part.1【0から作るWebデザイン入門】
🎨 実践的なスキルを身につけるオンラインスクール 『HIROCODE Academy(ヒロコードアカデミー)』🎨 現場で即戦力として通用するデザインとコーディングの技術を、ヒロ本人が直接指導します。 詳細・受講のお申し込みはこちら👉👉👉 https://hirocodeweb.com ------------------------------------------------------------------------------------------ 今回は、0からWEBデザインを作っていく流れを説明します😊♪ 手順を追いながら細かく説明していこうと思うので、いくつかの動画に分けて説明して行きます❗️ ---- この動画の構成 ---- 0:00 オープニング 0:50 ワイヤーフレームを作る(ページ構成を考える) 2:10 2種類のワイヤーフレーム 4:37 ワイヤー作成作業開始 6:39 XDでワイヤーを元に構成を組んでいく 9:07 ロゴについて 【次の動画】 • 【入門講座】Webデザインの作り方 part.2【ゼロから作るWebデザイン入門】 質問事項などございましたら、コメント欄でお待ちしています😆❗️ ✅ご視聴いただきありがとうございます🙇♂️ この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️ ◆ チャンネル登録 http://www.youtube.com/hirocode?sub_c... ◆ Twitter. ツイッター / hirocodeweb ◆ Instagram. インスタグラム / hirocodeweb ◆ ROOM. 楽天ルーム https://room.rakuten.co.jp/hirocode/ 🔋 僕が使っている、おすすめのデバイス 🔋(アフィリエイト広告を使ってます!) ---- マウス ---- 【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】 https://amzn.to/34Zn5LH " ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 " ---- キーボード ---- 【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】 https://amzn.to/38S1B4i " 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 " ---- パソコン ---- 【 Apple Macbook Pro 16inch 】 https://amzn.to/2WXKtEN " 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 " ---- 周辺機器 ---- 【 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: • Happy Children Background Music / Joyful U... ----------------------------------------------------------
![[Introductory Course] How to Create Web Design Part 2 [Introduction to Web Design from Scratch]](https://i.ytimg.com/vi/0xk97TXfdH4/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAAAAGAElAADIQj0AgKJDeAG4AvMY&rs=AOn4CLBzsy_l2gFqSun0S1lJK8TRHsan-g&usqp=CCY)
[Introductory Course] How to Create Web Design Part 2 [Introduction to Web Design from Scratch]

【Figma実践】WEBデザインで、ポートフォリオサイトを作る!ノーカット制作の流れ。#figma #フィグマ

【2026年最新版】Figma完全初心者のための入門講座|画面の見方・基本操作(前編)

【保存版】Webデザイン独学勉強法を徹底解説

勝てるポートフォリオ作り方徹底解説。サンプル配布あり(未経験〜3年目対象)
![[Web Design Fully Revealed] A professional web designer will show you the real design process usi...](https://i.ytimg.com/vi/GdVMucWpxNc/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAAAAGAElAADIQj0AgKJDeAG4AvMY&rs=AOn4CLB734DfjkU2t5G8D9WKVJUurKnvpw&usqp=CCY)
[Web Design Fully Revealed] A professional web designer will show you the real design process usi...

はじめに教わるデザインの基本。気をつけるべき28のポイント
![[For Web Design Beginners] How do you code from a design comp? A thorough explanation of the actu...](https://i.ytimg.com/vi/quqkSys8qWE/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAAAAGAElAADIQj0AgKJDeAG4AvMY&rs=AOn4CLB32I5y67R6s17oKVKuSRioB9e18g&usqp=CCY)
[For Web Design Beginners] How do you code from a design comp? A thorough explanation of the actu...
![PINK & ORANGE GRADIENT IN HD [3 HOURS]](https://i.ytimg.com/vi/6ih8zppfQSQ/hqdefault.jpg?sqp=-oaymwFBCNACELwBSFryq4qpAzMIARUAAAAAGAElAADIQj0AgKJDeAHwAQH4Af4JgALQBYoCDAgAEAEYfyAsKBMwD7gC8xg=&rs=AOn4CLDmHNeGQqwLAaQhwmCq7xGzBep4hQ&usqp=CCY)
PINK & ORANGE GRADIENT IN HD [3 HOURS]

【2025最新】初心者向け講座ワイヤーフレームの作り方(前半)「WEBデザインツール」

【永久保存版】初心者向けWEBデザインの始め方「ゼロから完全解説」

HTMLとCSSでホームページを作る方法を完全解説【Web制作初心者向け】

【Figmaで完結】単価30万円を叶えたHP制作〜公開までの全手順をすべて見せます👩💻【Webデザイン】

【スキルアップ】Figmaを極めろ!実践的なFigmaの使い方

Aesthetic Aura Background 3 hours

【Webデザイン】Figmaでバナーが出来るまでをノーカットで全部見せます【初心者向け】
![[2024 Latest] 30-Minute Master Course: Figma Basics and Useful Tips! | Web Design Tool](https://i.ytimg.com/vi/xZMR-ZNY08c/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAAAAGAElAADIQj0AgKJDeAG4AvMY&rs=AOn4CLC1cPaW6RKoa6jS0yzPWGp2ns7YZw&usqp=CCY)
[2024 Latest] 30-Minute Master Course: Figma Basics and Useful Tips! | Web Design Tool

世界一わかりやすいHTML講座! #初心者向け #HTML入門 #プログラミング

【全部教えます!】WEBデザインの作り方紹介!できるまでの流れ-adobe Illustrator-

