デイトラWeb制作初級編『デザインツールの使い方編Day15~16』学習記録

うにょママ
うにょママ

復習をかねたプログラミング学習の記録と備忘録です。

DAY 15~16で学んだこと「AdobeXDの使い方」

【Day15-16】Adobe XDでWebカンプを作ってみよう

Web(デザイン)カンプとは「完成イメージ」のこと

・Webカンプの役割は二つ。

  1. クライアントとの認識のずれが生じることを防ぐ
  2. HTMLやCSSのコーディング作業をスムーズに進める

Adobe XD(アドビ・エックスディー)は、WEBサイトやアプリ開発の目的に無料で利用できるデザインツール

Adobe XDの主な機能は4つ

  1. デザイン作成
  2. プロトタイプ作成
    (作成したデザインを実際のWEBサイト・アプリの様に動かすことが出来る)
  3. 共有及び共同編集
  4. コメント
    (作成した物にコメントを残せる)

・プラグイン(標準機能を拡張する仕組み)を利用すれば、XDをより自分好みの作業環境にカスタマイズできる

・データは書きだすよりデザイナーからもらった方が良い

・JPGとPNGの使い分け

JPGで保存

写真(色が多く色の境界がわかりにくい画像)

PNGで保存
  • 色数の少ないもの(イラスト)
  • 四角でないもの
  • 透明・半透明な部分があるもの

実際の流れについてよくわかる記事↓

まとめ

Adobe XDは初めて知りました。

コーディングとは全く違うので不慣れでとても疲れました。コーディングよりも集中力が必要でした。

コーディング以外にも学ぶべきことはたくさんあるようです!

後で慌てないためにも、今の段階で少し触れておけて良かったです^^

この記事を書いた人

うにょママ

元駐妻。7年半過ごした台北から2022年2月に本帰国しました。
このブログではWeb制作の勉強、台湾生活、子育てについて気ままにつづっています。