Adobe XDを使ってワイヤーフレーム制作【作業編-1】

お待たせいたしました!
Adobe XDを使ってワイヤーフレーム制作シリーズ。
前回からの続きです。
※前回はAdobe XDを使ってワイヤーフレーム制作【準備編】です。
今回のブログから作業に入っていきます。
それでは始めていきましょう!
前回は、プラグインを導入したところで終了しました。
そのまま続けていきます。
1.XDのホーム画面に戻ります。ホーム画面にある「iPhone X/XS/11 pro」を
クリックします。

最初にやることは、とにかくファイルの保存を忘れないでください。
別名で保存を必ずしてください。
左側のメニューにある三本線(ハンバーガー)→「別名で保存」をしてください。
そして、ひとつの作業が終わるたびに上書き保存!これとっても大事なことです。
保存が終わったら作業に入りましょう!
2.白い画面(アートボード)が出てきたらアートボードの上にある「iPhone X/XS/11 pro-1」をダブルクリックします。

3.アートボード名の変更をします。「Top-SP」に変更します。

4.最初に右側のメニューにある「レイアウト」にチェックを入れます。
作業がしやすいようにグリッドレイアウトの設定をしていきます。
※グリッドレイアウトとは、コンテンツを格子状に並べることにより、美しく整えられた印象のWebサイトを作るためのデザイン手法です。
有名なところだとTwitter社が開発した「Bootstrap」がグリッドレイアウトでウェブサイトを制作することができます。
チェックが入ると下にある「縦列」~「初期設定にする」までが表示されます。
縦列4、段間隔24、リンクされたときのマージン23に設定します。
※オレンジ枠のところだけ触れば大丈夫です。
カラーは作業しやすい色で大丈夫です。不透明度は10%以下にすると作業がしやすいです。
入力が終わったら必ず「初期設定にする」のボタンを押してください。
※「レイアウト」が表示されないときは一度、アートボード名をクリックしてください。
アートボードが青い枠で囲まれた状態でないと表示されません。

5.次に左側のメニューにある一番下のアイコン「プラグイン」をクリックすると、
導入したプラグインが一覧で表示されます。
前回、導入したプラグイン「Quick Mockup」をクリックします。

6.「Elements」の一覧から「image」をクリックします。

7.アートボードに「image」が出てくるのでサイズを整えます。
下記、画像のように画面いっぱいに画像を配置します。

8.次に、テキストを挿入します。「Logo」と入力し、配置していきます。

9.フォント「源ノ角ゴシックJP」 サイズ24 太さレギュラーにします。
お好きな位置へ「Logo」を配置してください。私はX23、Y15へ配置してみました。
アートボードの左右にある白い余白にかぶらないように配置してください。

10.左側のメニューから図形のアイコンをクリックして「ハンバーガー」を作っていきます。
幅24、高さ2の図形を作ってください。
最初に適当な大きさで図形を作って右側で幅と高さの数値を入力して図形を作ることもできます。
塗りを#909090に指定、線はチェックを外してください。

11.図形をクリックしている状態で右側メニューの上にある「リピートグリッド」をクリックします。
緑色の枠に変わったら下にドラッグして合計3本になるまでリピートします。
線の間もあるピンクが余白になります。余白は7になるよう調整します。

12.作成した「ハンバーガー」も配置していきましょう。
私はX327、Y24で配置しました。

13.それでは今作った「ハンバーガー」のレイヤーの名前を変更していきます。
左側のメニュー下の方にある3つ並びの真ん中にあるアイコン。「レイヤー」と言います。
先ほど作ったのが「リピートグリッド1」になります。これをダブルクリックして名前を「ハンバーガー」へ変更します。

14.「ハンバーガー」と「Logo」をクリックした状態でCtrl + G で一つのグループにします。
フォルダが出来たらフォルダの名前もダブルクリックして「ヘッダー」へ変更します。

15.最初に配置したImageも「メインビジュアル」へ変更します。

16.「ヘッダー」と「メインビジュアル」を一つのグループにします。
フォルダ名も「ヘッダーパーツ」へ変更します。

17.次によく使うパーツを登録して作業が効率進めるようにしましょう。
まずは、左側のメニュー下の方にある3つ並びの一番上のアイコン。「アセット」と言います。
「アセット」のアイコンをクリックすると、アセットの画面に変わります。
「コンポーネント」にある+をクリックします。

18.先ほどグループにまとめた「ヘッダーパーツ」が登録されました。

19.これで、新しいアートボードを作成した時に「アセット」→「ヘッダーパーツ」をドラッグ&ドロップで配置することができます。
※固定で動かない所は、アートボード全体をコピペ→アートボードを追加→要らない所は消去。という方法でも可能です。

今回は、ブログが長くなりすぎてしまいましたので
残りの部分はまた次回に持ち越しです!
次回からは、似たような作業方法は省略して進めていこうと思います。
ちなみに、次回でフッターまで作っていきます。
自分で色んなパーツを作ってみたり、自分で作ったパーツは「コンポーネント」に登録してしまえば今後も使えますし、
プラグインのQuick Mockupを使ってパーツを組み合わせてデザインしてみるのもおススメですよ!
それでは次回お会いしましょう!

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

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

関連記事

カテゴリー

最近の記事

  1. 【Agoda】「どうしてこんなに割引されているの?」に対するお答え!

  2. 販促のすゝめ!Photoshopを用いた画像編集のご紹介

  3. 日本の観光産業を追うおすすめ必読サイト

  4. 楽天トラベル新機能「ニュース&トピックス」活用出来ていますか?

  5. 宿泊業界で活かすChatGPTの運用例をご紹介

お問い合わせINQUIRY

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

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

お問い合わせはこちら

採用情報RECRUITMENT INFO.

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

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

採用情報はこちら

TOP