デジタルデザイン基礎演習 第2ターム 4. 情報デザイン入門
目次
スライド
準備
Chrome
よく利用されているブラウザです。
インストール
Visual Studio Code
現在最もポピュラーなテキストエディタです。
インストール
拡張機能
次の拡張機能を入れておきましょう。(左の上から5つ目のアイコンから)
- Japanese Language Pack(Japaneseで検索)
- Live Server(Liveで検索)
- zenkaku(zenkakuで検索)
それぞれ
- 日本語化
- Webサーバを利用可能に
- 全角スペースをわかりやすく表示
するためのものです。
XD
インストール
Adobe Creative CloudからXDをインストールしておきましょう。
XDを使ってみよう
注意！！！(2022/12/15調べ)
AdobeがスターターキットやUIキットの配布をやめてしまった模様です。(ページの作りが別物になっている…) 過去のものをなるべく、元の状態にしたものをここに置いておきます。 スターターキット
現在、っぽいものは、 UI/UX 無料アセット にありますが、全く同じものは置いてありません。
UIキットに関しては、
- Wires jp 2.0 等にはまだある模様です。
以下の「XDの紹介」「スターターキット」のリンクは切れていますので、注意してください。
XDの紹介
スターターキット
-
ここから「スターターキットをダウンロード」を押してダウンロードしよう。(画面の下1/3くらいにあります)
-
解凍してadobe-xd-starter-kit-basic-mac.xdを開いてやってみましょう。興味持った人はadobe-xd-starter-kit-intermediate-mac.xdもトライしていいです。
動画のプレビューウィンドウは右上の再生ボタンを押すと出ます。
課題
次の挙動のクイズアプリを作ってください。
- 最初の画面：クイズアプリの説明＋「スタート」ボタン
- 質問画面：質問＋4択のボタン
- 解答画面：あっていた場合、間違っていた場合の2画面＋「もう一度トライ」のボタン
注意事項
- 操作に慣れるのが目的のため著作権は今日は無視して良いです。
- 余裕のある人は質問を複数にしてもいいです。
- 提出は、共有されたURLにしてください。
XDの注意事項
- 「保存」とすると、CreativeCloud(ネット上)に保存する画面が出てきます。XDはチームで共有することが前提のアプリのため、こういう挙動になっているようです。「ローカルドキュメントとして保存」とすれば、通常通り、コンピュータに保存されます。
- 共有されたURLは、ブラウザに表示後、URL部分の左のアイコンをデスクトップにドラッグ&ドロップすると「.weblock」というファイルができます。これを提出しましょう。
-
提出
- nas1-mc.thu.ac.jpに接続して、
- StudentVolume - 2022演習 - デジタルデザイン基礎演習IIの中の該当するフォルダ内に学生番号_名前のフォルダを作成し、
- 今日のクイズアプリへのURLを提出してください。