同じデザインを複数作成するでしょうか？

[wadachan]

Adobe xdでwebデザイン作成を検討しています。
作成したデザインはPCとスマホどちらでも表示をしたいと思ってます。

そこで質問なんですが、デザインをする際にPC用とスマホ用を分けて作成する必要はあるんですしょうか？

ご教示の程、宜しくお願い致します。

[r360studio Kazue Mori · Accepted solution]

涼太5E24さん、こんばんは。

PC（パソコン）では、ディスプレイに映る画面が広いに対して、スマートフォンでは狭くなります。

画面の広いパソコンに合わせた固定サイズでウェブサイトをレイアウトしてしまうと、スマートフォンで見たときに横幅が収まりきらずにはみ出し、閲覧時に横方向にスワイプ（スクロール）して表示する必要があります。

それを防ぐために、イマドキのウェブサイトの画面レイアウトでは、表示する機器の画面に応じて、横幅が収まるようにレイアウトをつど変更します。

つまり、ウェブサイトのデザインをするときは、スマートフォン、タブレット、パソコンと代表的な画面サイズのデザインを考える必要があります。

というわけで、「デザインをする際にPC用とスマホ用を分けて作成する必要はあるんですしょうか？」へのご質問の回答ですが、分けて作成するのが一般的だと思います。

Adobe XD Trail という、公式のXDが学べるサイトがありますので、よかったら、次のURLの動画を参照してみてください。

スマートフォン（モバイル）用に幅の細い画面と、パソコン用の画面を作っている様子が見られます。

▼レスポンシブデザインを手軽につくる - レスポンシブデザインを手軽につくる - Adobe XD Trail
https://xdtrail.com/lesson/resoponsive-design-quick-guiide/resoponsive-design-quick-guiide-01/

こういったデザイン手法は、「レスポンシブウェブデザイン」というキーワードで調べていただくと、いろいろなことがわかると思います。

以上、ご参考になれば幸いです。
(^_^)

[wadachan]

教えていただきありがとうございました！