【誰でも出来る!】Webデザインのはじめ方。未経験者・入門者・初心者向け。Adobe XD

Поділитися
Вставка
  • Опубліковано 22 лис 2024

КОМЕНТАРІ • 42

  • @mm2693
    @mm2693 3 роки тому +1

    めちゃくちゃ有益!
    投稿有難う御座います🙇‍♀️

    • @hirocode
      @hirocode  3 роки тому

      とっても嬉しいコメントありがとうございます😭‼️

  • @aoochann
    @aoochann 3 роки тому +2

    好きです

    • @hirocode
      @hirocode  3 роки тому

      ありがとうございます😊♪

  • @おたすけまん-c4q
    @おたすけまん-c4q 3 роки тому +2

    有益な動画をいつもありがとうございます😊
    只今、自作でポートフォリオサイトを制作しようと思っておるのですが、一連の流れを解説していただけると私も含め、皆さん喜ばれると思います!XDは主にフレームワークを作る為のソフトという解釈でよろしいでしょうか。
    デザイン、フレームワーク制作(Adobe XD等)

    好みのエディターをダウンロード

    コーディング

    サーバをレンタル

    アップロード
    この流れなのかなと認識しております。
    前半の方はHIROさんの動画を参考に制作できそうです。このコメントに対しての返信は不要です。今後投稿される動画のリクエストとして受け取っていただけると幸いです。
    今後ともよろしくお願いします❗️

    • @hirocode
      @hirocode  3 роки тому +2

      こちらこそ有益なコメントいただきありがとうございます🙇‍♂️‼️
      おっしゃる通りの状態で、いま直近でサイト公開の流れの動画を作成しているので、デザイン、コーディングの次の流れが理解できるように作れればと思っています。
      アップしたら見ていただけたら嬉しいです😊♪

  • @reku-reku-reku
    @reku-reku-reku 3 роки тому +1

    すごいです!!

    • @hirocode
      @hirocode  3 роки тому

      そういっていただけて嬉しいです😆❗️ありがとうございます🙇‍♂️❗️

  • @藤本夢叶-m9i
    @藤本夢叶-m9i 3 роки тому +1

    ありがとうございました。

    • @hirocode
      @hirocode  3 роки тому

      こちらこそご視聴いただきありがとうございます🙇‍♂️❗️

  • @田畑繁樹
    @田畑繁樹 Рік тому +1

    如何せん、WindowsでCADしかして来なかったので、Appleはほとんど出来ません。

    • @hirocode
      @hirocode  Рік тому

      僕も最初WindowsユーザーだったのでMac慣れるまで少し時間かかった記憶あります😅

  • @sho3229
    @sho3229 3 роки тому +2

    いつも動画楽しく見させていただいています!
    一つ質問なのですが、ウェブサイトのトレース動画はありますでしょうか?
    トレースをしたく探しているのですが中々見つけられなくて‥😅
    よければ参考にしていたサイトでも大丈夫ですので教えていただきたいです

    • @hirocode
      @hirocode  3 роки тому +2

      嬉しいコメントいただきありがとうございます😊♪
      トレースの動画は作れていないので、今後出していこうと思います❗️
      すみません、特にこれがおすすめといったサイトは出てこないんですが、自分がカッコイイとか好きだと思うウェブサイトをトレースしてみるのが良いのでは無いでしょうか😆❗️

    • @sho3229
      @sho3229 3 роки тому

      @@hirocode
      返信ありがとうございます!

  • @Spe0w0
    @Spe0w0 3 роки тому +1

    Adobeのソフトたくさんあるけど結局何が一番いいの?

    • @hirocode
      @hirocode  3 роки тому

      コメントありがとうございます😊♪
      それぞれ用途が異るので、写真加工ならフォトショップ、グラフィックやロゴ・アイコンのデザインならイラストレーター、ウェブデザインならXDといったイメージです。
      Webサイトにはロゴやバナー、画像などが必要になるので、XDメインでその他のソフトも使う必要が出てくる感じです‼️

    • @Spe0w0
      @Spe0w0 3 роки тому +1

      ​@@hirocode なるほど!返信ありがとうございます!とりまXD買います!

  • @zion8032
    @zion8032 2 роки тому +1

    いつも拝見させて頂いています!
    XDでアイコンを白に変更してるかと思いますが、私の場合、白く塗りつぶされてしまいます。
    原因が分かりますでしょうか?
    これからも参考にさせていただきます🙇‍♀️

    • @hirocode
      @hirocode  2 роки тому

      コメントいただきありがとうございます😊♪
      アイコンのデータはベクターデータ(svgなど)でしょうか❓もしpngやjpgの場合はフォトショップなどで加工する必要があります‼️

  • @ryunosuke7884
    @ryunosuke7884 3 роки тому +1

    質問がございます。
    ヒロコードさんはどうやってwebデザインを勉強されましたか?
    書籍などで独学されたのでしょうか?

    • @hirocode
      @hirocode  3 роки тому

      コメントいただきありがとうございます🙇‍♂️
      最初は他のサイトを参考に見様見真似で作るところからスタートしました。Web上の記事を読んだり、ツールの使い方等は調べたり触りつつ試行錯誤しながら経験積んだ感じです!
      書籍も20冊くらいは読みました❗️独学ですね😆❗️
      独学の注意点としては、制作物の良し悪しの判断が自分では難しいので、誰かに見てもらってフィードバック貰った方が良いことと、Webデザインはユーザービリティを考慮する必要があるのでそういったものは書籍等で知識をつける必要があるかと思います❗️

  • @home-p1z
    @home-p1z 2 роки тому +2

    こんにちは、動画ありがとうございます!36歳コーディング初心者ですが、WEBデザイナーで稼ごうと動画を拝見しています。!ひろさんの動画を見て勇気をもらえています。ありがとうございます✨
    質問なのですが、現在グラフィックデザイナーをしています。Adobe cc に入っているので、
    Dreamweaverも使用できるのですが、プロの方から見てコーディングにDreamweaverを使用すること、どう思われますか?

    • @hirocode
      @hirocode  2 роки тому +1

      こちらこそ嬉しいコメントいただけて動画出してる甲斐があります😭
      Dreamweaverは他のエディタと比べてサポート機能?が多い分、逆に使用しない機能が邪魔になると思われます。またソフト自体が少し重い点と、他により良いエディタが出てきた際に移行しにくい点がデメリットかと思います(Dreamweaverの仕様に慣れてしまうと)。あえて使う必要はないかなという感じです😅それと僕の周りでもDreamweaverを使ってるって人は見たことがないです💦
      オススメしているのは無料でシェア率も高い「Visual Studio Code」です❗️
      シェア率が高いソフトだと説明サイトやQ&Aサイトなども多いので使い方わからない時にもメリットが大きいです。シンプルで使いすく、プラグインがあるので必要に応じて便利な機能をつけることができるので使い易くてオススメです😆❗️

    • @home-p1z
      @home-p1z 2 роки тому +2

      @@hirocode さん
      ご説明ありがとうございます!
      そうなんですね、Dreamweaverは重たかったり、メジャーではないんですね^^;
      「Visual Studio Code」を使用するようにします😊
      UA-camにコメントするのが初めてだったのですが、動画の作成者本人から返信が貰えて感動です!✨ありがとうございます!
      これからも動画制作頑張ってください😊とってもわかりやすいです✨

    • @hirocode
      @hirocode  2 роки тому +1

      コメントしていただき僕もめちゃめちゃ嬉しいです😭ありがとうございます🙇‍♂️❗️
      これからもっと参考にしていただけるような動画出せるように頑張ります😆❗️

  • @ぴあにこ
    @ぴあにこ 3 роки тому +1

    XDからならこんなカッコいいデザインが早くできるんですね。
    ぜひ使ってみたいのですが、ここから、コーディングやWordpressなどに
    どうやって連携していくのがスムーズなのかがイメージできていません。
    XDで作った一枚絵を切り出すのでしょうか。

    • @hirocode
      @hirocode  3 роки тому +1

      嬉しいコメントいただきありがとうございます😊♪
      XDで画像を書き出す機能があるので、書き出した画像類をコード上で指定するイメージです!
      ↓こちらの動画が参考になるかと思います🙇‍♂️
      ua-cam.com/video/jxIpYOOh-TU/v-deo.html

  • @にゃまま-h1t
    @にゃまま-h1t 3 роки тому +1

    とても為になる動画でした!ありがとうございます!
    ウェブデザイナーに興味を持ち、色々な動画を見ました。
    ですが、文字や図などで説明されているものが多く、具体的にどのような作業をしていくのか、自分がイメージしているものと一致してるのかわかりませんでした。
    実際に制作しているヒロさんの動画を見てウェブデザイナーのイメージがわかりました!
    また、ウェブデザイナーの勉強をする上でPCは必須だと思います。
    OSやスペックについても調べましたが、結局どのパソコンがいいのかわかりません💦
    最近はMacでもWindowsでもどちらでも問題ないと言っている方が多いですが、ヒロさんの意見をお聞きしたいです。
    ウェブデザイナー、コーダーを勉強する上で必要なPCおすすめあれば、教えて頂きたいです。
    長文のコメント失礼しました。
    お時間ある際にご回答頂ければ幸いです。

    • @hirocode
      @hirocode  3 роки тому

      嬉しいコメントいただきありがとうございます😆❗️
      WindowsとMacどちらでも問題ないというのは全く同意です❗️
      ただ、僕はApple製品の洗練されたデザインが好きなので、Macを選んでいます♪
      ちなみに、元々はWindowsユーザーでした。
      デザインだとIllustrator,Photoshopなどの比較的重いソフトを動かすので、メモリは16GBあるのが理想です。
      M1チップ搭載のMacbookだと8GBでも十分のような意見もありますが実機で試せてないのでなんとも言えないところです。
      いずれにしても、すごくスペックが低いPCでない限りは動作するはずなので、ご予算に応じて検討してみてはいかがでしょうか😊

  • @ym1729
    @ym1729 3 роки тому +1

    質問失礼します。
    テキストをテキストツールを使ってではなく他のテキストをコピーして使うのは何故なのですか?
    あと自分がそれを試してみたところ文字を拡大しようとすると文字自体は拡大出来ずに文字を打てる範囲が拡大してしまうのですが対処法はありますか?
    グループ化しているものをコピーするとコピーしたものもグループ化されているのですがこれも対処法はありますか?
    質問ばかりすいません。有益な動画をありがとうございます。すごく助かります

    • @hirocode
      @hirocode  3 роки тому

      嬉しいコメントありがとうございます😊♪
      テキストツールは、直近使用したフォントのスタイルで作成されるので、直近どのテキストをいじったか覚えておくことが難しいです(僕の場合かも...)。
      ですので、新しく作成したいテキストに近しいテキストをコピーして調整したほうが、理想の形に近づくのが早いと思っているのでそうしています❗️特に複数フォントを使用している場合など実感できるかと思います。
      テキストの拡大について、右側サイドバーの「テキスト」の項目に文字の左揃え・中央揃え・右揃えの項目があると思います。その右隣に並んでいる3項目、これがテキストエリア指定箇所で、一番左が選択されている場合のみ文字が拡大されます。
      テキストツールで、クリックしてテキストオブジェクトを作成すると、一番左の’’幅の自動調整’が選択された形で作成できます。
      グループ化したものはグループ化された状態でコピーされるのがおそらく機能として通常かつ便利かと思います。もしコピーしたもののグループ化を外したい場合は、コピー直後にcmd+shift+gで解除することができます!
      また、グループ化されたもの一部パーツだけコピーしたい場合は、cmd+クリックで単一パーツで選択することができます😆❗️❗️

    • @ym1729
      @ym1729 3 роки тому +1

      @@hirocode
      丁寧に本当にありがとうございます😭!!
      自分まだまだwebデザイン初心者なので動画見ていてさっきのどうやってしたんだろうとか分からない点出てくると思うので、もしかしたらまた質問してまうかもしれませんが、その時はすいません。

  • @stella6874
    @stella6874 2 роки тому +1

    はじめまして!
    WEBデザインに興味を持ち、始めてみようと思って拝見いたしました!!
    早速やってみようと思ってアプリをダウンロードと思ったのですが、現在は無期限無料ではなくなっていたため、Adobe XDの他に無料でできるおすすめのものがありましたら、教えていただけると嬉しいです( ; ; )
    初めから有料なものはゼロから覚えていくのにはまだ早いと思ったため質問させていただきました!!

    • @hirocode
      @hirocode  2 роки тому

      コメントいただきありがとうございます😊♪
      おっしゃる通り最初は無料で始めるのがオススメです!
      ua-cam.com/video/MmwI_lqUb64/v-deo.html
      この動画で、無料で使えるFigmaの説明してるので、よろしければ参考にしてみてください😆❗️

    • @stella6874
      @stella6874 2 роки тому

      返信ありがとうございます!
      とても参考になります🙇‍♀️

  • @ひび割れガタポン
    @ひび割れガタポン 3 роки тому +1

    XDが使えればphotoshopとillustratorは必要ありませんか?
    XDをまず使えるようにして足りないと思ったら習得するって感じでしょうか?

    • @hirocode
      @hirocode  3 роки тому

      コメントいただきありがとうございます😊
      XDがあればウェブデザインを作ることは可能です❗️
      ただ、サイト内で使用する写真の補正をするのにphotoshopが必要になったり、ロゴやバナーなどのクオリティを上げるためにIllustratorが必要になったりします。
      なので、おっしゃる通りまずはXDを使えるようになって、必要に応じてそのほかのソフト使ってみる形で問題ないと思います😆❗️

  • @はにーびー-b7h
    @はにーびー-b7h 3 роки тому +1

    いけめん!

    • @hirocode
      @hirocode  3 роки тому

      ありがとうございます🙇‍♂️‼️