Webデザイン・マーケティング課 授業25日目

1-3時間目
プロトタイプwebデザイン

使用テキスト

Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル

P148〜P186

■リンクの設定

プロトタイプモードにして、ひたすらリンクを貼っていく。

さほど詳細を話す様な内容もなし。

オーバーレイを使うときだけ、なぜかオーバーレイに設定したアートボードの背景が無効になってしまうので、デザインビューに戻して、該当のアートボードの背景を有効にする必要がある。

■デザインの共有

共有パネルから、右側の共有ボタンをクリックで、URLが発行される。

そのURLをメールなどで送ることで、遠方の相手にデザインを共有することができる。

また、ピンを使うことでコメントを入れることもできる。

■デザインスペックの共有

コーディングに必要な色のカラーコードや、文字の大きさや、要素間の余白などを共有できる。

共有から、右側の表示設定で開発を選んでリンクを作成します。

■PCデザインの作成

まず、スマホ版のデザインを、横幅が1280pxのサイズのアートボードにカットアンドペーストする。

その後、PC用のヘッダーを全アートボードにペーストする。

その後不必要なコンポーネントの削除や、使いまわせるパーツのサイズをPCに合わせる。

レスポンシブサイズ変更の設定項目が少しややこしいので注意。

■まとめ

いよいよPCのデザインカンプ作成。日程的にもXDは半分切ったので、しっかり教科書を進めていく。この教科書は優秀。こちらで補足しなくちゃならないことがほとんどない。