用語について
UI
UIは、User Interface（ユーザインターフェース）の略称で、一般的にはユーザーとプロダクトを繋ぐ接点を指す。ユーザーとコンピュータの関係で言えば、情報をやり取りをする時の、デバイスやソフトウェアの操作画面などを指す。デバイスだとキーボード、マウスなどに当たり、ソフトウェアだと画面上のメニュー、アイコンなどの操作方法を指す。
UX
UXは、User eXperience（ユーザーエクスペリエンス）の略称で、プロダクトやサービスに触れて得られるユーザーの体験全体を指す。UXは、メニューやナビゲーションなどのUIを包括する概念で、すべての顧客の体験を指している。 UXにとって最も重要なのは、いかにして製品やサービスを通じて顧客に「楽しく・心地よく」体験してもらうかというという観点である。
プロトタイピングツール
プロトタイピングツールとは、Webサイトやアプリにおけるワイヤーフレーム、デザインカンプ、インタラクションなどを作成しテストすることができるツールを指す。UI/UXデザインのブラッシュアップのために使われる。代表的なツールは、Adobe XD、Sketch、Figmaなど。
Adobe XD
「Adobe XD（Adobe Experience Design）」は、アメリカのアドビ システムズ社によって提供されている、UI/UXデザインのプロトタイピングを行うツール。 リピートグリッドなどの便利な機能を備えており、簡単にデザインカンプの作成も可能。他者との共有も簡単にできることから、プロトタイプのフィードバックも簡単に受けられる。 Mac、Windows、iOS、Androidなどの主要なOSに対応しており、マルチプラットフォームであることも大きな強み。
プロトタイプ作成のプロセス
今回の実習では、プロトタイプ作成および共有まで行う。実装は行わない。
Adobe XDの基本操作
- 画面のサイズ設定、複数のアートボード
- 図形の描画
- オブジェクトの整列
- テキスト
- ポイントテキストとエリア内テキスト
- Adobe Fontsを使ってみる
- ライブラリ、レイヤー、プラグイン
- 画像の配置（テンプレートkotohajime_wire）
- マスク、マスクの位置調整
- リピートグリッド
- 画面遷移
- サイトマップ用の矢印（プラグイン）
課題：サイトのアイデアおよびサイトマップの作成
チュートリアル・レッスン集
- Adobe XD Trail
https://xdtrail.com/ - Adobe XD Trail Tutorial
https://helpx.adobe.com/jp/xd/tutorials.html
2週目
- レイアウトグリッド
- パターン1（カラム数12、段間隔20px、列の幅85px、マージン340px）
- パターン2（カラム数12、段間隔20px、列の幅120px、マージン130px）
- 参考：Webデザインのレスポンシブ対応グリッド、基本の使い方徹底ガイド
https://photoshopvip.net/122332
- Illustratorのロゴの配置（CCライブラリ）
- 変更する場合は、Illusttratorのデータを変更する
- コンポーネントの作成
- メインコンポーネント、インスタンス
- コンポーネントは緑枠
- アセットパネルからスタイルを一括変換
- プロトタイプの作成
- ぼかし、シャドウ、ドロップシャドウ
- トリガー、アクション、モーダルウィンドウ
- CCライブラリからオブジェクトを追加、編集
リンク、埋め込み
3週目
レスポンシブデザイン
Step1 モバイルのデザイン
- レスポンシブデザインとは
- Lesson-Complete.xdで仕上がりを確認
- Sample.xdでレスポンシブデザインを確認
Step2 タブレットのデザイン
- 記事ブロックの部分を写真とテキスト関係に分けておく
- アートボードの高さを変更（5710px）
- 4個のグループと8個のグループの記事をリピートグリッドで複製（写真、記事、ライター）
- もっと見るボタンの位置を変更
Step3 デスクトップのデザイン
- アートボードのサイズを変更（1366px × 3846px）
- 上の記事を4行、下の記事を4行3列に変更
- ヘッダはレスポンシブを解除
- フッタはモバイルメニューからコピー
- ハンバーガーアイコンを消し、ソーシャルアイコンをコピー
- ラインを引く
- グローバルメニューを作る
- スタックを使う
- ボタンエリア
- ビューポート
- モバイルデバイスでの確認
- 共有
デザインレビュー
開発