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

Поделиться
HTML-код
  • Опубликовано: 4 авг 2024
  • モンスター・アカデミアの神子校長が自らIllustrator(イラストレーター)を使って、
    WEBサイトのデザインをどうやって作っていくのか、ノーカットでお届けします。
    デザイン初心者の方も、そうでない人も1から10までお見せしているので、是非参考にしてください!
    <目次>
    0:00 導入
    1:30 ガイドライン
    2:18 ラフ書き
    4:27 デザインの参考探し
    6:30 制作開始
    17:20 デザインの大枠完了
    18:30 ブラッシュアップ1回目
    20:49 ブラッシュアップ2回目
    23:45 ブラッシュアップ3回目
    25:32 デザイン完成
    〈The noun Project〉
    thenounproject.com/
    ---------------------------------------------------
    モンスター・アカデミアのオンラインデザイン授業は、潜在的な問題を言語化して、課題を解決するために必要なデザインの力とコミュニケーション力を身につけ、国や場所を超えて、自分の力で働くための土台をつくっていただく場所です。
    是非、下記のアカウントのフォローや、無料説明会にお越しくださいませ!
    【モンスター・アカデミア公式HP】
    monstar-academia.com/
    【公式LINE】
    • 【もう迷わない】配色の基本を徹底解説【デザイ...
    【Twitter】
    / monstaracademia
    【Instagram】
    monstar_aca...
    【Notes】
    note.com/monstar_academia
    #WEBデザイン #イラレ #Illustrator #WEBデザイナー
  • РазвлеченияРазвлечения

Комментарии • 26

  • @yohei_koyama
    @yohei_koyama 3 года назад +9

    神子先生ナイスです〜!作業の流れ見れるの勉強になります🙌

  • @maji4229
    @maji4229 8 месяцев назад +2

    私の会社はデザイン専門の人がいないのでものすごく参考になりました!
    ちゃんとした作成過程の動画って本当出てこないので貴重な動画をありがとうございます✨

  • @kodayuki3922
    @kodayuki3922 3 года назад +10

    こういうの有難いです❤️✨✨

  • @ycono.8316
    @ycono.8316 2 года назад +12

    初めてホームページを作った時はその日や次の日に見て違和感があってもどこをどう直したら良いのか分からず、一週間くらい経ってから見ると、どう直したら良いのか分かるようになりました!
    寝かして修正を繰り返すと良くなるので楽しいです☺️

    • @monstaracademia8691
      @monstaracademia8691  2 года назад +2

      ぜひ楽しみながらデザインを勉強してください😊

  • @ontondayo
    @ontondayo Год назад +1

    グリッドに分割便利ですね ♪ 使います!

  • @Baldwin-jb5pm
    @Baldwin-jb5pm Год назад +3

    素晴らしい内容でとても参考になりました。この続きの工程(実際にWebサイトが公開されるまで)の動画はありますか?
    または、イラレで構成したデータをそのままインポート?自動コーディング?してくれるツール(又はおすすめ)はありますか?

  • @user-xs4fi8xf8u
    @user-xs4fi8xf8u 2 года назад +1

    うますぎ

    • @monstaracademia8691
      @monstaracademia8691  2 года назад +1

      コメントありがとうございます😊上手いですよね!
      未経験の方でもモンスター・アカデミアで勉強すると3ヶ月くらいで綺麗なデザイン作れるようになります☺️

  • @eeeg
    @eeeg Год назад

    すげえな

  • @w.7200
    @w.7200 Год назад

    先生はコンセプトをざっくりイラレで書くときに、とっても簡単に文字を書いていますが、何を使っていますか。
    Macのパレッドでは先生のようにスラスラ手書きのように書くことが難しいです。

  • @user-sd5mu1jr9r
    @user-sd5mu1jr9r 2 года назад +1

    すごく勉強になります! ワイヤーフレームを書いてからデザインカンプを作ると思ったのですが、
    先生のようにざっくりしたラフからデザインカンプを作っても良いのでしょうか・・?

    • @monstaracademia8691
      @monstaracademia8691  2 года назад +1

      デザインカンプを作りながらチームで共通理解を揃えて、具体的なデザインを進行する場合もあります!ですが最近は、ワイヤーフレーム→そのままデザインという流れがスピーディに進行できるのでこの方法が多いですね!

    • @user-sd5mu1jr9r
      @user-sd5mu1jr9r 2 года назад

      @@monstaracademia8691 ありがとうございます!^^

  • @shokoy4330
    @shokoy4330 2 года назад +1

    真似してなんぼの世界なのですね!

  • @user-uz8xl5ng9w
    @user-uz8xl5ng9w Месяц назад

    まだ始めたことがない初歩の初歩だとどのボタンで何の機能付いてるか分からないから、まだこの動画見てできる段階ではないんだなと思いました。

  • @cbfhesxjebakdh
    @cbfhesxjebakdh 2 года назад +1

    デザインをそのままコード化してくれるものってあるのでしょうか?
    コーディングが苦手な場合、そういう機能があったらいいなと思い聞いてみました。

    • @monstaracademia8691
      @monstaracademia8691  Год назад +2

      こんにちは!デザインデータを元にコーディングを自動的に行なってくれるツール最近出てきていますが完璧では無いのである程度の知識は必要かと思います。ただ自動化ツールと併用することでコーディングのハードルは下がると思います😃

    • @cbfhesxjebakdh
      @cbfhesxjebakdh Год назад

      @@monstaracademia8691 返信ありがとうございます!コーディングをこれから学ぼうと思っているのですがどこまでできるか不安だったので、そういうのツールが実際にあると分かってちょっと安心しました。😃

  • @玲48
    @玲48 8 месяцев назад

    昔はイラレのベクターデータはPhotoshopに貼るものでこんなメインで使ったら『素人か』と殴られましたが今はズレたりしないんですか?

  • @okgou
    @okgou 2 года назад +1

    Illustratorからブラウザで確認ってどう言う事ですか?

    • @monstaracademia8691
      @monstaracademia8691  2 года назад +7

      返信が遅くなり申し訳ありません。イラストレーターで制作したデザインを一回書き出してブラウザに反映させて実寸サイズで確認する事です!(JPEG等で書き出してGoogleのタブの箇所に持ってくとブラウザで見れます😊)

    • @okgou
      @okgou 2 года назад

      @@monstaracademia8691 勉強になりました。ありがとうございました

  • @happycatfactory
    @happycatfactory 11 месяцев назад

    イラレでリンクとか晴れるのかと思ってました・・・無明

  • @redred162
    @redred162 Год назад +14

    誰かに習うと、結局みんな同じようなデザインになるんですね。