「Adobe XD のレスポンシブリサイズについて Adobe XD Advent Calrendar」のご紹介| Webデザイン参考記事まとめアプデ

2018年12月6日(木)

Adobe XD のレスポンシブリサイズについて Adobe XD Advent Calrendar

0

40

4

21

この記事は Adobe XD Advent Calendar 2018 の 6日目の記事です。

9月の Adobe XD アップデートで、レスポンシブリサイズが実装されました。
https://wp.yat-net.com/yatblog/wp-content/uploads/2018/11/adobexd_responsive_001.mp4
ご存知の通り、現在Webサイトを閲覧するにしても、アプリを利用するにしても、デバイスによって画面のサイズが異なります。

レスポンシブはユーザーのデバイスに関係なく同じURL、同じhtmlコードを配信しつつ、画面サイズに応じて表示を変えるというものです。

これまでのデザインフェーズでは、各デバイスやウィンドウサイズごとにデザインを行い、それぞれどう表示が切り替わるかを考える必要がありました。

一方 Adobe XD のレスポンシブリサイズはオブジェクトをグループ化し、それをリサイズすることで、レスポンス時におけるオブジェクト同士の位置やサイズの関係性を自動的に計算して維持したまま描画してくれるため、一枚のデザインデータでそれぞれのデバイス差異が確認できます。

各デバイスサイズのデザイン

YATのBlog

大阪でイベントなども開催されている企業WebデザイナーYatさまのブログ。Webデザイン・javascript・WordPressなどの技術的記事だけでなく、Web担当者としての目線で見た記事やフォント系の記事を公開されています。

大阪でイベントなども開催されている企業WebデザイナーYatさまのブログ。Webデザイン・javascript・WordPressなどの技術的記事だけでなく、Web担当者としての目線で見た記事やフォント系の記事を公開されています。YATのBlogの記事『Adobe XD のレスポンシブリサイズについて Adobe XD Advent Calrendar』についてまとめています。

この記事は特にレスポンシブ・写真・セミナー・動画・Webサービス・アプリについて書かれており、気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のYATのBlogで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとYATのBlogの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。