Adobe XD学習、基本の操作について学習します。
第3回はプロトタイプの作成を学びます。
https://www.youtube.com/watch?v=HtGR0aIsjes
「プロトタイプ(試作版の意味)」は実際のWebサイトと同じようにリンククリックなどでページ遷移させたりできる機能です。
実際にHTML等で作り込む前に画面上で動的カンプ(クリックすると該当のページに移動するなど)のように見せることができます。
動画を見終わりましたら、感想や不明点、質問などコメントをご記入ください。
Adobe XD学習、基本の操作について学習します。
第3回はプロトタイプの作成を学びます。
https://www.youtube.com/watch?v=HtGR0aIsjes
「プロトタイプ(試作版の意味)」は実際のWebサイトと同じようにリンククリックなどでページ遷移させたりできる機能です。
実際にHTML等で作り込む前に画面上で動的カンプ(クリックすると該当のページに移動するなど)のように見せることができます。
動画を見終わりましたら、感想や不明点、質問などコメントをご記入ください。
コメント一覧
プロトタイプの意味が理解できました。とても優れた機能が搭載されていて便利なのですが、webサイトとしてのページの展開の仕方やアクセシビリティを理解していないと発想もできないことも解りました。
それと、モードがシンプルに2つに絞られているのはとても解り易いと思いました(デザインとプロトタイプ)
動画確認しました。下層ページやアンカーリンクなど、画面上で紐づけするだけで設定できるのは分かりやすかったです。また別画面でリンクや、修正しながら別画面をリアルタイムに確認できることは驚きでした。今回のプロトタイプの動画は初歩的なことのようですが、まずは基本的な操作を把握し理解を深めていきます。
プレビューを見ながら作業できること、視覚的に紐付けなどができることはとても分かりやすいです。
事前にやりたいことを決めておくことがそれを活かすためには大事なのかなと感じました。うまく実現できるように理解を深めて行きます。
動画確認しました。
ハンドルを引っ張るだけでリンクできるのは直感的でとてもわかりやすいです。
表現の仕方も簡単に変えられるのも初心者にはありがたいです。
「プロトタイプ」という用語を知らなかったので冒頭から身構えてしまいましたがなんとか理解できました。
XDのツールやメニュー、固有の機能など初歩的な操作で理解ができていない部分があるので所々で作業とその結果が結び付かず何度か見直しました。
普段から様々なサイトの閲覧でもこういった効果は目にしていますがそれほど気にしたことがなった部分でもあり、こういった見せ方もどいういうシーンで必要なのか、またHP制作でどういった見せ方のセオリーがあるのかを知っていく必要があると感じました。
今までは同様の作業をデザインを作って、さらにDreamweaverで各ページを簡易的に作っていたものが同一ソフト上で出来てしまうという点だいぶ魅力的に感じました。
画面遷移を見えるかすることによってクライアントとの打ち合わせなどがより具体的になってくると感じます。
映像にもありましたがプロトタイプを凝ってしまうという矛盾に陥らないようにしたいと思いました。