
レスポンシブデザインにも対応!Adobe XDの4つの新機能
Webディレクター、デザイナーがワイヤーフレームやプロトタイプを作る作業に非常に便利なツールであるAdobe XD。
Adobeではユーザーの声を受け、より使いやすく便利になるよう日々アップデートを続けています。9月に新たにアップデート版がリリースされました。
今回のアップデートではどのような機能が追加されたのでしょうか。内容を詳しく紹介していきます。
レスポンシブ・リサイズ
今回のアップデートの目玉と言えるのがレスポンシブ・リサイズ機能です。これによりデバイスごとのデザイン、レイアウトを簡単に作ることができます。レスポンシブデザイン、モバイル最適化が推進される昨今、非常に重要な機能と言えるでしょう。
参考:
Adobe XD September Update: Responsive Resize | Adobe Creative Cloud
Adobe XDにて複数のデバイスに跨いでデザインを作成するには、スマホ版、タブレット版、デスクトップ版などそれぞれのサイズに合わせたアートボードを用意します。その際、複製したコンテンツを手動で配置しなおす必要があります。
レスポンシブ・リサイズ機能は、配置されているコンテンツのグループを拡大縮小するだけで、相対関係が自動的に調整され、維持された状態でのリサイズが可能です。これにより、デバイスを跨いだデザインの制作効率が上がります。
また、より細かなコントロールをしたい場合には、手動モードに切り替えることで配置の条件を細かく設定できます。
タイマートランジション
プロトタイプ機能の中で新たに追加された便利な設定がタイマートランジション機能です。
プロトタイプで画面遷移をシミュレーションするトランジェント機能の中に、トリガーとして新たに「時間」が選択できるようになりました。
参考: [Adobe XD September Update: Timed Transitions | Adobe Creative Cloud](https://www.youtube.com/watch?v=Hsa_f-xdzHM):blank画面遷移にはオブジェクトのタップのみがトリガーとして選択可能でしたが、時間経過での画面遷移もプロトタイピングできるようになりました。これにより、チュートリアルなどのアニメーションを表現できるようになります。
トランジションの開始までのディレイ時間を設定し、画面の切り替わりのスピードを調節します。一連のアニメーションを作る上で最初に設定したディレイ時間がデフォルトとなるので、スムーズな設定が可能です。
スペルチェック
テキスト入力時にアシストをしてくれるスペルチェック機能が実装されました。文字入力時にリアルタイムでのスペルチェックが行われます。スペルミスと判断された箇所にアラートが表示され、同時に修正候補のリストが表示されます。これによりタイプミスなどのリスクを最小限に抑えることが可能です。また、文法チェックの機能も備わっています。
参考: [Adobe XD September Update: Spell Check | Adobe Creative Cloud](https://www.youtube.com/watch?v=ZDsLJbg7mZ0):blankAdobe XDで作ったワイヤーフレームやラフデザインなどを、制作チームのメンバーに共有し次の工程に移そうとすると、ほとんどの場合はテキストをコピーして使用されます。ワイヤーフレームから本番デザインに移行する場合、デザインからHTMLコーディングに移る場合も、テキストは原則コピーアンドペーストです。ワイヤーフレームの段階で文法や誤字脱字を防いでおくと、その後の制作に影響が出ず、手戻りのリスクを減らすことができます。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- タブレット
- タブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- www
- wwwとは、World Wide Webの略称であり、世界中のホームページをインターネットを通じて閲覧することができる仕組みのことです。一般的に Web(ウェブ)とも呼ばれています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- www
- wwwとは、World Wide Webの略称であり、世界中のホームページをインターネットを通じて閲覧することができる仕組みのことです。一般的に Web(ウェブ)とも呼ばれています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング