勉強目的でAdobe XDを使ってみたのでメモ

スポンサーリンク

 

一般人(あまりWebサイト作成が得意じゃない人)が予備知識なしで「Adobe XD=ホームページやブログの雛形を作成する時に使うソフト」を試しに使ってみることにしました。

チュートリアル動画を見ての作業になりましたが、使ってみた感想としては「Webサイト作成に特化したPhotoshop」ですね(ようは見た目だけを作成するソフト)

勉強目的で、このブログを簡易的に作り作業内容をメモってみたので暇な方は読んでみて下さい。

以下、作業内容です。

まずはXDを起動してアートボードを選択します(サイズ指定)

トップ画面、本文の画面とか必要に応じて何枚か作成します(Ctrl+C)。

長方形ツールでヘッダー部分を作成、長方形ツールの色を塗りつぶします。基本は、この長方形ツールと楕円系ツールの作業になります。

ヘッダーに文字を入力してフォントサイズと色を指定。

ヘッダー部分は固定なので作成したレイヤーを全部選択して1つにまとめます(シンボルの作成)。

コピーしてフォントなどの位置を調整する。

長方形ツールで作成した枠に画像を挿入、アイコンも同様。テキストも入力する。 

作成した部分を選択してから「リピートグリッド」をクリック。スライドで丸ごとコーピーする(超楽)

本文になるページを作成します。

アートボードをクリックしてPC用も作成します(ブログで記事を書くために作ったので、かなり適当)

途中ですが終わりにして「プロトタイプ」のタブをクリック。青い矢印が表示されるのでドラッグしてリンクとして結合させたい部分を繋げます。

上部にある再生ボタンをクリックして実機での動きをシュミレートして確認します。(上でうまくリンクを作れていればまともに動きます)

おしまい。

ということで今回は「このブログ」を適当に作りましたが、お洒落なデザイン?のWebサイト作成も簡単に作成できると思います。実際に上の画像は約1時間で作成しています(素人なので遅いかも・・・w)

また実際にサーバーにアップしてブログとして使用するには、XDで作成した画像をもとにHTML・CSSなどでコードを書いて作成する必要があります。

こういうサイトを作成したいな・・・という段階ならPhotoshopより早く作成できるので役に立つと感じました。

いまなら無料で入手できるはずなので自分で試されるのが一番かも・・・

初心者でも簡単ですね。

以上です。