デイトラ

今回のテーマはデイトラWeb制作コースの学習記録。

初級(1st)DAY15、DAY16のデザインツールの使い方編で学んだ内容とレッスンの感想を残しておく。

まだ学習中なので、要点をさくっと短めに。

「デザインツールの使い方編」で学習した内容

Adobe XDの基本操作

XDでよく使う基本操作は5つ。

つかむ → V
四角形 → R
テキスト → T
アードボード → A
戻る → ⌘+Z 

XDでは、パズルのようにアートボードに要素を並べてWebカンプをつくっていく。

Webカンプの作り方(PC/スマホ)

PC用とスマホ用のWebカンプを見ながら模写していく。

ほかの要素との距離を測るには、対象の要素を選択して、optionを押しながらほかの要素に触れると、その要素までの幅が表示される。

Webカンプが完成したら、誰が見てもわかりやすいように、要素をグループ化してレイヤーを整える。

プラグインの導入方法

XDは、プラグイン(拡張機能)を導入することでより便利になる。

たとえば、

Resize Artboard to Fit Content

というプラグインを入れると、アードボードの余った余白を自動的にカットしてくれる。

書き出しの方法

もしデザイナーさんから画像などの元素材をもらえるのであれば、もらうのがベスト。

ただ素材をもらえない場合も多いので、そのときはXDから直接書き出す。

とくにRetinaディスプレイへの対応が必要な場合など、画質が荒くなると困る場合は、画像を引き伸ばしてから書き出してCSSで調整する。

書き出し時のjpgとpngの使い分け

jpg

画像

png

色味が少ないもの(イラストなど)
四角形でないもの ※jpgはすべて四角形で書き出される
統計な部分があるもの(ロゴなど)

ワイヤーフレームの作り方

ワイヤーフレームは、白黒のままでデザイン要素がない、Webカンプの骨組みのようなもの。

ワイヤーフレームをつくることができれば、エンドクライアントとも仕事ができるようになる。

Wires.jpなどのワイヤーフレームの専用キットを使うと効率よくつくることができる。

共有の方法

XDでつくったWebカンプは、共有タブからURL(リンク)を生成して共有できる。

開発者同士で共有するための開発モードや、クライアントと共有できるデザインレビューモードなどあるので、用途によって使い分ける。

「デザインツールの使い方編」の感想

Webサイトのコーディングをするときには、Webデザインのカンプ(Comprehensive layout)と呼ばれるレイアウトの見本をもとに作業をする。

その見本をつくるためのツールが本レッスンで学んだAdobe XDだ。

WebカンプはPhotoshopやIllustratorでつくられることも多いが、近年は無料で使えて操作も簡単なAdobe XDの利用が増えてきている。

WebカンプをつくるのはWebデザイナーの仕事だが、WebカンプをもとにコーディングをするWeb製作者も、XDの基本的な操作は学んでおく必要がある。

XDに触れたのははじめてだったし、PhotoshopやIllustratorもほとんど使ったことがないので、XDを立ち上げた瞬間はかなり使いづらそうな印象だった。

食わず嫌い的な。

だけど動画のレッスンを見ながら実際に触ってみると、そこまで難しくはなかった。

少なくとも、コーディングの際に数値や素材を取得することはできそう。

実際に現場で使っている細かなテクニックも教わった。

デザインツールの使い方編はつい先日追加されたばかりだ。

デイトラのコンテンツは期限なくずっと見ることができるのに、どんどん新しいコンテンツが追加されてアップデートされていく。

1年間の期限つきではあるものの、わからない部分はSlackで質問することができる。

Web制作を学びたい人には心強い教材だと思う。