番外編 「Adobe XD」の使い方

みなさんこんにちは。TAの岩井です。
来週の中間発表、最終発表に向けてアプリやインターフェースを制作すると思います。


そこで今回授業でソフトについて口頭で説明したため、わからない点もあったと思うので
今回XDについて説明したことを簡単ではありますが、まとめておきます。

よかったら参考にしてください。


① Adobe XDのダウンロード

② 操作を学ぶためのチュートリアル紹介

③UIを制作するために役立つ参考サイト




① Adobe XDのダウンロード

XDをダウンロードしましょう。無料でダウンロードできます。




② 基本操作(チュートリアル紹介)

基本的な操作をスクリーンで見せましたが、振り返るならここで私がここで説明するより
既存のチュートリアルがわかりやすいのでいくつか紹介します。


Adobe XDの中にあるチュートリアル

アプリを起動時に開く画面で右にある「基本を学ぶ。チュートリアルを開始」を選択する。

(画像で赤線で囲んである部分)




Adobeのサイトにあるスターターキット

Adobeの公式サイトが配布しているXDの主要機能の使い方を学べる
スターターキットなってます。




Cocoda! 「はじめてのUI入門編-UIデザインをはじめよう」

CocodaというUIについて実践的に学べるサイトにある初心者向けのコンテンツです。
ここではSNSのプロフィール画面を実際に作成しながらXDの機能を学べます。




③ UIを制作するために役立つ参考サイト

UIを設計するためのルール(寸法やレイアウト)が記載されているサイト

を紹介します。UIをデジタルでつくる前に読んでおくと良いです。

ユーザインターフェイスのデザインのヒント - Apple Developer

iOS ではユーザインターフェイスのデザインがさらに洗練されており、魅力的で独特なユーザ環境を構築できる開発環境が準備されています。コードを記述する前に以下の共通デザインコンセプトを考慮に入れることで、Appの使いやすさや魅力を高めることができます。Human Interface Guidelines(英語) には、優れたインターフェイスデザインのための提案が詳しく紹介されています。iOS デバイスの画面に合ったレイアウトで作成してください。主要なコンテンツは、ユーザがズームや横スクロールしなくても表示できるようにします。タッチジェスチャに対応した UI 要素をデザインし、Appを簡単かつ自然に操作できるようにしてください。コントロール要素は 44 x 44 ポイント以上の大きさで作成し、指でも正確にタップできるようにしてください。11 ポイント以上の大きさの文字を使用し、通常の閲覧距離でもズームすることなく快適に読めるようにしてください。フォント色と背景色とのコントラストを適切に設定し、文字が読みやすくなるようにしてください。文字が重ならないようにしてください。行や文字の間隔を十分に取って、読みやすさを向上させます。すべての画像アセットに、高解像度 (2 倍) バージョンを用意してください。2 倍の解像度のバージョンがない画像は、Retina ディスプレイでぼやけて表示されます。歪みが発生しないように、画像は必ず本来のアスペクト比で表示させてください。コントロール部品は操作するコンテンツの近くに配置し、認識しやすいレイアウトを心がけてください。テキスト、画像、ボタンを適切に配置して、 それぞれの情報の関連性を認識しやすくしてください。優れたAppを作成するためのビデオプレゼンテーションとガイドも、併せてご覧ください

developer.apple.com

noteでUIと検索するとUIを制作するコツなどが書かれているので、参考にすると良いかも。




アイデアを探したり、デザイン案を参考にするのに役立つサイト。

よかったら、登録して見てみてください。

情報デザイン演習2019

千葉工業大学 先進工学部 知能メディア工学科

0コメント

  • 1000 / 1000