webサイト、モバイルアプリのプロトタイプ作成

UIデザインツールとは

UI（ユーザーインタフェース）デザインツールとは、webサイトやモバイルアプリケーションを作成する際のデザインやプロトタイプづくりを行うツールです。長い間Photoshopがその役割を担っていた時代もありましたが、近年ではAdobe XD、Sketch、Figma、Prott、Zeplin、InVision Studioなど、様々なツールが存在します。今回は、Adobe XDを使って実習を行います。

1. Adobe XD入門

1-1. Adobe XDとは

解説動画

1-2. Adobe XDの基本操作

ここでは、まずはAdobe XDを使ってみて、その機能の概要をつかんでみます。

解説動画

• 画面のサイズ設定、複数のアートボード
• 図形の描画 テキスト
• 画像の配置←ここからkotohajime_wireを使う
  • ポイントテキストとエリア内テキスト
  • Adobe Fontsを使ってみる
• リピートグリッド
• 画面遷移
• 共有

2. デザインカンプの作成

デザインカンプとは、webサイトやモバイルアプリのレイアウト、色、テキスト、画面遷移など、ワイヤーフレームよりもよりデザインを作り込んだ完成見本を指します。一般的に、ワイヤーフレームの後にデザインカンプを作成して、画面の見た目やインタラクション、アニメーションなどを最終確認してから、コーディングの作業に入っていきます。

解説動画

• Illustratorのロゴの配置（リンクと埋め込み）
• コンポーネントの作成
• アセットパネル
• プロトタイプの作成
• CCライブラリからオブジェクトを追加、編集
• モバイルデバイスでの確認

3. 共有、レスポンシブデザイン

• 共有
  • デザインレビュー
  • 開発
• 画像の書き出し
• クラウドもしくはパソコンへの保存
• レスポンシブデザイン
• おまけ　レイアウトグリッド