Adobe XDを使ってワイヤーフレーム制作【おまけ編】

これでついに最後の投稿になります。Adobe XDを使ってワイヤーフレーム制作【おまけ編】
Adobe XDで出来る機能を紹介していこうと思います。
今までの振り返りは下記のリンクからどうぞ!
第一弾 Adobe XDを使ってワイヤーフレーム制作【準備編】
第二弾 Adobe XDを使ってワイヤーフレーム制作【作業編-1】
第三弾 Adobe XDを使ってワイヤーフレーム制作【作業編-2】
まずは、リンクの設定をしてみます。
1.「アートボード名」をクリックします。
上部メニューにある「プロトタイプ」をクリックしたあと、お家のアイコンをクリックします。

2.青色に変わります。このアートボードがトップページになりました。

3.次に、「ハンバーガー」を「ドロワーメニュー」のアートボードまでドラッグ。
「ドロワーメニュー」のアートボードにある×をクリックして、「トリガー」を「タップ」、「アクション」の「種類」を「ひとつ前のアートボード」に設定します。

4.リンクが設定されました。
上部の右側メニューの▶をクリックするとプレビューすることができます。

そして、ふと思ったことを作ってみたり・・・。
他にも、スライドショーに利用している方がいるとかいないとか・・・。

さてさて、次は一括配置をしていきます。
1.まずは、画像の配置からしていきます。画像ファイルに配置する順番に1から数字を振っていきます。
今回用意したファイル名は「news_01.jpg」~「news_04.jpg」までです。
下記のように配置していきます。

※配置する際には、最初に配置する「news_01.jpg」をドラッグ&ドロップするようにしてください。
2.次にテキストの配置からやっていきます。
オレンジ枠の部分をテキストで入力します。

メモ帳などを使って配置したい分のテキストを用意します。

※テキストを保存するときは文字コードを必ずUTF-8にしてください。文字化けが起こるそうです。

3.次は、日付の下のテキストです。

※メモ帳は別に用意しておきます。
4.テキストを配置していきます。

テキストの一括配置は個人的に嬉しい機能です。
自分以外の方にテキストを用意してもらう時に貰ったデータをそのままXDにドラッグ&ドロップして
作業を進められますからね。
XDについてもっと触ってみたいと思った方には
Adobe XDチュートリアルも色んな操作方法を紹介しています。
練習用のサンプルも用意されていますので手軽に始められますよ。
日々、XDもアップデートを重ねているソフトなので
これからも今まで以上に使いやすくなっていくソフトになると思います。
今後も定期的にXDについて紹介してきたいと思います!

ファイブスターコーポレーションでは、ホテル・宿泊施設の集客や運営に
お困りの事業主様・オーナー様をサポートする様々なサービスを提供しています。
まずはお気軽にご相談ください。

ファイブスターコーポレーションの紹介動画はこちら⇓

関連記事

カテゴリー

最近の記事

  1. 沖縄県で宿泊税導入へ!宿泊施設が行うべき事とは?

  2. インターネット社会の消費者心理!AIDMA・AISASモデル

  3. 【予約番編】自社サイトでリピート予約を促す活用法

  4. MEO対策してますか?~MEOの基本と重要性~

  5. 【宿泊予約サイト解説】特別なプランやお試しのプランに!~販売室数の上限設定について~

月間ランキング Monthly Ranking

お問い合わせINQUIRY

お気軽にご相談をください。

宿泊施設の運営にお困りの事業主様、これから宿泊施設を運営したいとお考えの方
ご質問・ご相談などお気軽にご相談ください。

お問い合わせはこちら

採用情報RECRUITMENT INFO.

私たちと一緒に働きませんか

明るく、人と接することが好きな人で向上心がある人をお待ちしております。
(ホテル業・観光業・旅行業・営業職の経験者を優遇)

採用情報はこちら

TOP