なぜMacBookを使うの？

＜iPadの連携性＞

• 標準搭載された有能ツール

• Sidecar：iPadをMacのサブディスプレイ化できる機能が標準装備されている。

• AirDrop：画像･動画･ウェブサイトなどのデータをApple製品間で無線転送可能である。

＜どのOSでも扱えるようマルチタイプ者の育成＞

• Windowsが主流だが、MacOSを導入する企業も増加している。

＜デザインコースに向けて＞

• デザイン系分野ではMacOSが主流。将来のデザイナーを目標にMacOS使いになって欲しい。

Adobe XDを使いWebページを作ります

MacBookを使って、スマートフォンサイズのホームページを作成します。使用するソフトウェアは「Adobe XD」です。Webデザイナーに向けて勉強する方にお勧めのツールです。

1. リピートグリッド：繰り返しのデザインを簡単に複製

2. コンポーネント：再利用したい要素を使って編集

3. アセットパネル：カラーなどの情報を残し、1つの修正で関係する全ての部分を変更できる

4. プレビュー：スマートフォンでも確認できる

5. プロトタイプ：実際のWEBブラウザ上での動きが再現できる（XDアプリ最大の魅力）

1．「中部第一実習体験」をダブルクリック

予め用意されたアートボード3種類を確認します。実習時間で時間に余裕がある人向けにもう1種類用意されています。

• 1ページ目：学校紹介

• 2ページ目：体験会

• 3ページ目：将来の夢

• 追加ページ：時間に余裕のある人用

2．「学校見学会」フォルダを開く

各ページに写真を貼り付けます。ファイル名とアートボード内の色が一致する所をドラッグアンドドロップで挿入します。

＜画面の操作＞

• 「command」とマウスホイール：拡大縮小

• ホイールのみ：上下移動

• 「shift」とホイール」左右移動

3．タイトルを入力する

ページの最上部「ヘッダ部」のタイトルにChubu-Firstと入力する。1ページ目に入力すると、自動的に2ページ目と3ページ目にも同じ文字が設定される。

4．デザインモードからプロトタイプモードに変更する

各ページのレイアウト（写真や文字）を編集するデザインモードから、プロトタイプモードに変更し、各ページとの関係性を設定する。

タップ機能：各ページのボタンを押すと、対応するページに移動させる機能。設定したいボタンで左クリックすると矢印が出てくるので、クリックしたまま移動したいページまで矢印を伸ばし、クリックを離す。

5．自動アニメーションで矢印を繋いでいく

作成したタップ機能の矢印の種類「トランジション」を自動アニメーションに設定する。各ページのボタンと移動させたいページの関連をタップ機能で繫げていきます。

各ページのメイン写真の両サイドに作成してある「黒矢印」ボタンでも同様にページが移動するようにする。

6．AirDorpで写真データを取り込む

他のデバイス（例えば、iPad）で撮影した写真を作成中のページに貼り付ける。AirDrop機能を利用して作業中のMacBookに送信し、作業中のMacBookで写真を「受け入れ」「保存」する。

7．写真データを貼り付ける

「ダウンロード」フォルダーに保存された写真を2ページ目の水色部分にドラッグアンドドロップで挿入します。

8．最終仕上げ

プロトタイプモードからデザインモードに再度切り替え、ページの未記入部分を入力します。

• ヘッダフッダ部分の色塗り

• 各文字色の変更

• 体験会の感想や将来の夢についてのコメント入力

9．プレビューで動作確認する

右上にあるプレビューボタン▶をクリックすると、動作確認することができる。

10．共有モードで自分の作品を公開する

共有モードに変更し、デザインレビューを「ユーザーテスト」に変更します。「リンク作成」ボタンをクリックすると、アドレス（URL）を作成します。完了まで少し待ってください。

11．ブラウザChromeで作品を見てみよう

出来上がったリンクアドレスをクリックすると、Chromeが起動し、作成したWebを見ることができます。

12．QRコードを作ってみんなに教えよう

Chromeの上部のアドレスバー（アドレスが表示されてる）をクリックし、右側にあるQRコードマークをクリックすると、QRコードは表示されます。このQRコードを自分のスマートフォンなどで読み取ると作成したWebページが見られます。

13．保存します

今日作成したWebページのXdデータを保存します。

14．ページの追加

時間の余裕がある人は、1ページ追加してみましょう。

3ページ目「将来の夢」内の中央右にある「3人の画像」をタップしたらズームされ、具体的な計画が書かれたボードに移動するようにします。また、×ボタンをタップしたら、「将来の夢」のアートボードに戻るようにします。

デザインモードに変更します。

「学校見学会」フォルダーにある画像を追加ページに貼り付けます。

15．追加ページの設定

プロトタイプモードに変更します。3ページ目の「3人の画像」から追加ページに矢印で繫げる。なお、タップ機能の種類を自動アニメーションからトランジションに変更します。

追加ページから3ページ目に戻るために追加ページ「3人の画像」の×ボタンから3ページ目に矢印で繋ぎます。

16．追加ページの仕上げ

将来の夢など簡単でいいので書いてみよう。強調したい文字など色や文字サイズを自由に変更してみてください。レイアウトは自由です。

完成したら、右上にあるプレビューボタン▶をクリックして、動作確認してください。

17．公開ページの更新

共有モードに変更します。表示設定が「ユーザーテスト」であることを確認し、「リンクを更新」をクリックします。これで、3ページ構成で作成したWebページが1ページ追加されたページに更新されます。

Chromeで閲覧していた最初のページを再読込すると、追加ページも閲覧できるようになります。

18．保存します

追加ページも含めて保存します。

お疲れ様でした。