7ステップで完了する初心者向けチュートリアルに従って操作してみた。
Xdには基本操作が学べるチュートリアルが付いているんですね。
さっそくやってみます。
Xdを立ち上げると、こんなパネルが出てきます。
パネル左下にある「チュートリアルを開始」を押します。
開始をクリックすると、こんなファイルが開きました。
すでに素材が用意されている状態。
「ズームインして開始」とあります。
さっそく感じた事があります。
この画面の文章には「mpvibe’s のモバイルアプリのプロトタイプを完成させるのを手伝ってください」と書かれています。
この文章好きだな。
もし「完成させて下さい」「完成させましょう」「プロトタイプを作りましょう」と書かれていたら、なんだか強制されている感じがするし、はじめてXdを触る人にとってはハードルが高い。「使い方が分からないのに完成させましょうと言われても…。」と感じるはずです。
でも「プロトタイプを完成させるのを手伝ってください」と言われると、「OK!私にできるかな?もちろん手伝うよ!」って感じで、気負いなく触れる事が少なくとも私はできました。文章ひとつで印象はガラリと変わるんだな。
脱線しましたがチュートリアルを進めます。
手順1 現在のデザインをプレビューする
プレビューボタンはここにあります。
プレビューボタンを押すと、パネルが出てきた!
「あちこちクリックしてみましょう」と書いてあるので、手当たり次第クリックしてみます。
すでに遷移設定されていますね。
手順2 スプラッシュを作成する
書かれている通りにやってみます。
アートボードツールに切り替えて四角の内側をクリック。
アートボードが作成された!
ボード内をクリックするだけでアートボードが選択できるのは便利だな。(sketchはこれができない)
次に選択ツールに切り替えて、ロゴをアートボードに配置。
そして背景色を選択...こうゆうこと?
これが正解か分かりませんがひとまずこのステップは完了とします。
手順3 画像挿入
グレーの円に画像をドラッグせよと書いてるのでやってみます。
デスクトップ上にある適当な画像をドラッグすると...
グレー円の中に挿入されました!
わざわざマスクをかけなくてもいいので、これも便利な機能ですね。
同じ機能だとsketchでは塗りで設定すると、これと同じ事ができますが、Xdの方がよりダイレクトですね。
sketchではここで設定↓
手順4 リピートグリッドと複数の画像挿入
Xdのデザインツールでも花形のリピートグリッドです。さっそくやってみます。
アドベンチャーカセットを選択した状態で画面右にある「リピートグリッド」を押すと。
選択表示が、ブルーからグリーンに変わりました。
そして上下左右に伸び縮みできるハンドルが表示されています。
ハンドルを下にドラッグします。
カセットが無限コピーされました!
そしてカセット間の余白(ピンク色のエリアを掴んでドラッグする)も、1箇所調整すると全てに反映されました。
次に画像の挿入です。
デスクトップ上にある適当な画像(複数枚)をリピートグリッド内の画像エリアにドラッグします。
カセットごとに違う画像が一発で挿入されました!とても魅力的な機能です。
手順5 スクロール
スクロールの設定をします。
アートボードを選択してスクロール/垂直方向を選択。
次にアートボードの下を伸ばして、記事を収めます。
これでいいのかな?
さて、ここまでがデザインモードで、ここからプロトタイプモードに切り替えます。
手順6 遷移設定
5で作ったアートボードの「次の記事」ボタンを、6のアートボードに繋ぎます。
そして、6のアートボードから5に戻れるように、6の「戻る」ボタンを5に繋ぎます。
これで繋がった様です。アートボード、オブジェクトから遷移ができます。
遷移の際の効果も設定できますがここでは触れません。
作業はこれで終わり。
手順7 作ったものをプレビューする
さて、動くかどうか見てみましょう。
ちゃんと遷移もスクロールも効いていますね。
あれ、スプラッシュはどこ...?
あ、分かった!選択したアートボードからプレビューが始まるんですね!(頭からプレビューしたい時はスプラッシュアートボードを選択しなきゃいけませんでした)
最後にオンラインで他者に共有
リンクを作成し、そのURLをコピーしてブラウザにペーストすると、誰でもプロトタイプを操作する事ができます。見た人がコメントをつける事もできます。
以上で、チュートリアルは完了です!
作業の大まかな流れが掴めました。
まとめ
やはりXdの強みはプロトタイプをプレビューしながらデザインができるって所ですね。
細かい使い方、もっと知りたい。使って慣れようと思います。