【 実証解説 】 独学でWEB制作フリーランスになるまでの学習⑥XD 投資家のFIREへの旅路 ♯418

WEB制作フリーランスになるまでの学習の第六回です。

前回はこちら

【 学習の流れ 】

学習の流れを紹介し、その具体的な学習方法を紹介します。

1. HTML・CSS
2. jQuery
3. JavaScript
4. SCSS
5. Photoshop・Illustrator
6. WordPress・PHP
7.XD
8. サーバー関連

このような流れで学習を進めました。

これは、1が終わったら、2というわけではありません。
1をやりながら、2を追加。
1、2をやりながら、3を追加。
1、2、3、をやりながら、4を追加・・・・。
という形になります。

今回は、
6. WordPress・PHP
を解説します。

7. XD

---

XDはAdobeのデザインソフトです。

WEBサイトデザインに特化しているので、非常に効率的に使えます。

・ U-demy

おすすめはK.Nakamura (storeG)さんの
WEBデザイン講座《デザインカンプ制作入門》コース

XDの使い方を学ぶというよりも、XDで既存のサイトデザインや、参考デザインをトレースする方法を学びます。

その工程で、XDでのWEBサイトデザインに必要なスキルが得られます。

XDはIllustratorなどのソフト違い、非常に簡単に使うことができます。

正直、深く掘る必要はないと思います。

・ 実践での使い方

ワイヤーフレームの作成
プロトタイプの作成
デザインの共有
コーディングでの使い方
イラストレーターデータの読み込み

▶︎ ワイヤーフレームの作成

デザインから担当する場合は、ヒアリングをもとにサイトの設計図となるワイヤーフレームを作成します。
直感的に組み上げることが可能です。
これは、もう使えばわかる！と言い切れます。

▶︎ プロトタイプの作成

サイトデザインが完成したら、これを実際にWEBサイト同様に、操作をできるように設定可能です。
コーディングの前に、操作感や、リンク先の確認ができます。

▶︎ デザインの共有

＜ 制作サイド ＞
作成したデザインは、他のデザイナーやディレクターと共有して、同時に共同で編集ができます。

誰がどこにマウスカーソルを置いているのかも可視化されているので、
「ここもうちょい右にして」など、その場で一緒に作業している感覚で作業ができます。

＜ クライアントサイド ＞
デザインのデータをクライアントに見てもらう際に、共有を機能を使って、URLを作成します。
そのURLをクライアントに伝えれば、XDがインストールされていな環境でも、デザインを見てもらうことができます。

▶︎ コーディングでの使い方

コーディングのみを担当する場合には、デザイナーさんからXDでデザインデータをもらうこともあるでしょう。

その際には、必要な主な作業がこちらです。

画像の書き出し
フォントの確認
フォントサイズの確認
文字間の確認
行間の確認
カラーコードの取得
オブジェクトのサイズ
オブジェクト間の余白

これらの情報を瞬時に取得できます。

デザイン通りにコーディングするには、これらの情報が必須ですから、
XDでデザインを確認できることは非常に効率的です。

▶︎ イラストレーターデータの読み込み

デザインデータが、XDではないこともあります。

例えば、illustratorで作成せれたデータの場合は、イラストレーターのファイルをそのままXDで開くことができます。

アウトライン化したものを読み込めば、環境にないフォントも問題なく表示されます。

これで、XDのデザインカンプと同じ状態になりますから、
必要な数値を取得できます。

【 まとめ 】

今回は、XDについて解説しました。

コーディングの学習と比べれば、XDの学習は非常に簡単です。

簡単で便利で実践的ですから、使えるようになっておきましょう。

次回は、8. サーバー関連からスタートします！！