著者:村上
Webサイトやアプリのモックアップ作成には「Adobe XD CC」が便利
タイトルにある通り、今回は無料で使用できるようになったAdobeのサービス「Adobe XD CC」のご紹介です。
最近利用し始めましたが、アプリなどのモックアップ作成にとにかく便利！
公式サイトはこちらから。
Adobe XD CCの購入｜UI/UXデザイン、プロトタイプ、共同作業ツール
https://www.adobe.com/jp/products/xd.html
インストールもこのページからできます。
起動すると、まずこのウィンドウが立ち上がります。
iPhoneやiPad、Webなど、ベースとなるサイズはここから選ぶことができます。
チュートリアルもあるので、初心者さんはここから始めましょう。
チュートリアルはこんな感じ。
基本操作の仕方から、画像の配置方法などが説明されています。
また、左上のタブを「デザイン」から「プロトタイプ」に変更すると、画面遷移の指定ができます。
上記では、左のページの「ブログ」をクリックすると、右のページに遷移する、という動きを指定しています。
さらに、右上の三角をクリックすると、プレビューが表示され、実際の画面に近いデザインで動作を確認できます。
特にこの機能が便利ですね！
実際に動かすことで、ページの不足等が分かりやすいです。
が、こちらの機能ですが…何が悪いのか、ページ遷移のアニメーションが変更できない時が何度かありました。
例えば、iOSらしく、左にスワイプするアニメーションを指定したいのに、何故か変更できなかったり…。
原因は分からないので、現在調査中です。
まあ、画面遷移自体は問題なく行えるので、些事ではありますね。
以上、Adobe XD CCについてでした。
操作が直感的で分かりやすいし、チュートリアルもあるので、初心者にも安心してお使いいただけるかと思います。
なにより無料ですし、気になった方は是非使ってみてはいかがでしょうか。
著者:takahashi
SlackやFacebookの読み込み時に白抜きのサイトレイアウトが表示されるアレの名前
スケルトンスクリーンっていうらしいです。
Facebookアプリの記事ローディングに似たUIの実装 – Qiita
実際の画面に近いレイアウトが表示されるので、読み込み時のストレスを軽減する効果があるらしいです。
UXを向上させる５種類のアニメーションの使い方 – UX MILK
確かにロード時間が短く感じるかも…
最近はWebサービスのリッチ化に伴って、ロード時間もかなり長くなってきています。
今後Webサービスを作るときは是非真似したいですね。