Adobe XDのことをまだよく知らないという方は、まずはこの動画からご覧ください。XDでの基本的な作業の流れを理解し、初めてXDを起動する際の新規ドキュメントの作り方や、デザインワークスペース(作業画面)について学習します。, Webサイトやアプリのページとなる、アートボードを追加していきます。アートボードは何枚でも作成することができます。ここでは、アートボードツールを使って、任意のサイズのアートボードを簡単に追加し、サイズを調整する方法について説明します。, ここでは、基本的な図形の描画方法を解説します。IllustratorやPhotoshopと同様のツールを使って長方形や楕円形を描き、パスを編集してシェイプ(形状)を変更します。さらに、作成した図形に対して塗りや線の設定をおこないます。, 基本的な図形が描けたら、パスを編集したり、図形同士を組み合わせたりして、アイコンなどのオブジェクトを作成してみましょう。ここでは、角丸長方形、オブジェクトの整列、結合といったIllustratorでもおなじみの機能を使って電話のアイコンを作成します。, ここでは、テキストの入力方法を解説します。テキストツールで文字を入力し、フォントの種類や大きさなどを設定します。Creative CloudのフォントサービスであるTypekitから、好みのフォントを選んで使用する方法もご紹介します。, 作業に入る前に、練習用のサンプルファイル「kotohajime_wire.xd」をこちらからダウンロードしておきましょう。見本のファイルを参考にし、ある程度仕上がったワイヤーフレームに、画像を配置していきます。また、マスクによる画像の切り抜きについても解説します。, ここでは、XDの代表的な機能の1つである、リピートグリッドの使い方について解説します。この機能を使用すると、メニューや記事のリストといった規則性のあるレイアウトに、複数の画像やテキストを一気に配置することができます。, ここからは、プロトタイプの作成に入ります。画面をプロトタイプモードに切り替えて、ページ間を移動するための画面遷移を設定します。さらに、プレビュー機能を使って作成したプロトタイプがどのように表示され、動作するのかをデスクトップ上で検証します。, ワイヤーフレームが仕上がったら、クライアントやチームのメンバーと共有し、フィードバックをもらいましょう。ここでは、プロトタイプをオンラインで公開し、メンバーからのフィードバックをすばやく取得、反映させる方法について解説します。, いかがでしたか。Step1では、IllustratorやPhotoshopと同様の描画ツールや、XD独自のリピートグリッドを使ってすばやくワイヤーフレームを作成し、プレビュー、共有するまでの工程を解説しました。Step2では、このワイヤーフレームをブラッシュアップし、デザインカンプを仕上げていきます。, このトピックの他のチュートリアル Adobe XDことはじめStep3:快適&軽快!PhotoshopとXDの最強連携 ›, 使い方についての質問やCreator同士の情報交換ができます。気軽に質問してみましょう。, WebサイトやモバイルアプリなどのUI/UXデザイン、プロトタイプ作成、共有までを1つのアプリで実現する、Adobe XD。このチュートリアルシリーズでは、XDの基本的な使い方をご紹介しながら、デザインとプロトタイプを完成させるまでの手順を動画でわかりやすく解説していきます。まずはワイヤーフレームの作成から始めましょう。, Adobe XDことはじめStep2:これは便利!デザインカンプがサクサク作れる ›, Adobe XDことはじめStep3:快適&軽快!PhotoshopとXDの最強連携 ›, Southeast Asia (Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam) - English, الشرق الأوسط وشمال أفريقيا - اللغة العربية, 全画面表示:Command +0キー(Mac)またはControl + 0キー(Windows), 四角形:長方形ツールでそのままドラッグ。正方形は「shift 」キー + ドラッグ, 三角形:長方形ツールで四角形を描き、選択範囲ツールで四角形をダブルクリック。任意の角(アンカーポイント)を1つ選択し、「 Delete」キーを押します, 円:楕円形ツールでそのままドラッグするか、「shift 」キー + ドラッグで正円を描きます, 前面オブジェクトで型抜き:背面のオブジェクトから前面のオブジェクトのエリアを型抜きします, 交差:オブジェクトの重なり合った部分だけを残し、1つのオブジェクトとして作成します, 中マド:オブジェクトの重なり合った部分を切り取って、それ以外の部分を1つのオブジェクトとして作成します, ポイントテキスト:クリックした位置が始点となり、文字を入力した分だけ文字列が伸長します, エリア内テキスト:ドラッグして長方形のエリアを指定し、そのエリア内にテキストを入力します, 四角形や円などのオブジェクトを作成し、その中に配置したい画像をドラッグ&ドロップで流し込みます, 画像を直接ドラッグ&ドロップで配置し、その上にオブジェクトを配置。両方選択された状態で、「オブジェクト」→「シェイプでマスク」を選ぶと画像がオブジェクトの形で切り抜かれます, 画像とテキストのグループをまとめて選択し、リピートグリッドボタンをクリック。ショートカットキーは、Command + Rキー(Mac)またはCtrl + Rキー(Windows), 改行して入力したテキストファイルを、テキストエリアのいずれか1つにドラッグ&ドロップ, プロトタイプモードでオブジェクトをダブルクリックし、青い矢印のハンドルをクリック&ドラッグしてワイヤーを引き出し、ダーゲット(リンク先)のアートボードの上でマウスを放します, 青い矢印のハンドルをクリックした際に表示されるパネルで、ターゲットのアートボードを選択することも可能です. ⑴ Adobe XD ⑵ Sketch ⑶ InVision Studio ⑷ Figma ⑸ STUDIO ⑹ Wix. Adobe XDことはじめStep2:これは便利!デザインカンプがサクサク作れる › All rights reserved. Adobe XDのことをまだよく知らないという方は、まずはこの動画からご覧ください。XDでの基本的な作業の流れを理解し、初めてXDを起動する際の新規ドキュメントの作り方や、デザインワークスペース(作業画面)について学習します。 もはやAdobe XDなしでは仕事ができないというLIGのデザイナー・ずんこが、その魅力を徹底解説!オフライン作業ができて動作が軽く、ショートカットがPhotoshopと同じだから操作を覚えるのも簡単。こまめなアップデートで機能が充実し続けているから使わないともったいない! Adobe XDでデザインしたキャンバス同士を繋ぐことでプレビューした時に実際のスマホやWEBサイトと同じような動きをします。 同じデザインの上にメニューを加えた2つの画面を作成すれば、スライドメニューなどの使用感の確認もできるすぐれものです。 立ち上げの際に完璧な情報設計と導線を作っていれば必要がないかもしれませんが、ブログを始めとする情報蓄積型のコンテンツでそれをやるのは難しいと思います。, このブログも適当な設計で立ち上げてしまったので情報をまとめる必要が出てきました。 WEBデザインではUI/UX設計の仕事が多いので、AdobeがリリースしたUI/UX専用ツールであるAdobe XDを使用してレスポンシブのWEBサイト設計をしてみました。, 結論から言うとPhotoshopとIllustratorが業務レベルで使用でき、ワイヤーフレームやUX設計などのデザイン上流工程に関わる人にとっては便利なツールです。, WordPressを使い自分でテーマを作っているブロガーには最高のツールではないでしょうか。, ユーザー体験(UX)を重視したサイトやアプリ設計をするために開発されたデザインツールです。, PhotoshopやIllustratorのようにデザインを作り込むものではありませんが、デザインの枠(ワイヤーフレーム)などを直感的に作ることができます。, 公式URLに【experience-design】が使われていることからAdobeの本気を感じます。, http://www.adobe.com/jp/products/experience-design.html, UI・UXという考えがWEBデザインで浸透してWEBデザイナーの仕事の仕方も変わりつつあります。, 特にWEBサービスやアプリ開発のデザインで如実なのがPCや紙でのデザインを見ても実機で動作確認するまで良いデザインかわからないということです。 そのためWEBデザイナーがHTMLだけで骨組みだけ組んで使い勝手を確認したり、スマホにデザインカンプ(Photoshop上で作ったデザイン)を読み込ませてタップで次の画面に遷移させたりと、四苦八苦したデザイン現場も多いと思います。, ボトルネックになっていたプロトタイピングを高速に行えるツールがAdobe XDには豊富に揃っていました。実際のデザインの組み立てと一緒に機能をご紹介します。, スマホ・タブレット・PCの主要サイズが網羅されているため、めんどうな初期設定でサイズを指定する必要がありません。, PhotoshopのWEBサイト専用のキャンバスやIllustratorなどもAdobeCCになってから複数キャンバスを使用できるようになりましたが、Adobe XDはデザインを作り込む作業ができない代わりに軽快に動作します。, WEBサイトの複数案とレスポンシブデザインなど10ページほどデザイン案をAdobe XDで制作しましたが最初から最後まで動作が重くなることはありませんでした。, Adobe XDの売りの1つでもあるリピーグリッド。複数連続するデザインを1つのまとまりにして自動でリピートできる機能です。, デザインした要素を複数選んでグループ化することで、この要素を連続で表示させることができます。要素のマージンの指定も細かくできます。, この機能の面白いところはFinderから画像をドラッグアンドドロップするとリピートグリッドの中にある画像要素が自動で置き換わるところです。, 5枚の写真をリピートグリッド中に入れると、画像5パターンのデザインがリピートされます。「ダミー画像だとイメージが湧かない…」という問題を素早く解決できます。, UX設計で一番便利だと思ったのが画面の遷移を実際のデバイスサイズで行なうことができるプロトタイプ機能。, 今までスマホに画像を落とし込んで確認したり、HTMLで骨組みを組むストレスから開放されます。, Adobe XDでデザインしたキャンバス同士を繋ぐことでプレビューした時に実際のスマホやWEBサイトと同じような動きをします。, 同じデザインの上にメニューを加えた2つの画面を作成すれば、スライドメニューなどの使用感の確認もできるすぐれものです。, プロトタイプ画面で指定したリンクをクリックすると遷移します。情報設計やファーストビューに違和感がないか、使い心地がいいか、目的の情報に最短でたどり着くことができるか。そういったUXの基本構造を確認するには便利です。, Adobe XDの便利だと思った点がプレビューを録画してmov型式で保存できることです。, UX施策のために第三者を呼んで観測をする前にデザイナーやディレクターなどを集めて、それぞれにAdobe XDを使用してもらいウェブサイトやアプリをどのように使用するのかの確認を取るという使い方もできます。, WEBサービスを作る際のレビューで使用すると開発がスムーズに進むかもしれないと思いました。, ドキュメントを殆ど読み込むことなくスムーズにデザイン作業をすることができました。ラーニングの動画をさらっと見た程度です。, https://helpx.adobe.com/jp/experience-design.html?promoid=3SH1B97W&mv=other, ワイヤーフレームを書くWEBディレクターやUIUXスペシャリストだけではなく、Adobe製品を使用しているほぼすべての人がストレスを感じることなく作業をすることができそうです。PhotoshopのみでWEBデザインをしているデザイナーはこれを期にIllustratorの勉強をしてみる価値はあると思います。, PhotoshopやIllustratorだと、できることが多すぎてデザインの細部がきになったりもしますがAdobe XDは画像の配置と簡単なオブジェクトしか作れないため無駄なものが削ぎ落ちミニマルなものができあがります。, 「余計なことができない」ということから自然と情報整理(インフォメーションアーキテクチャ)やサイトの導線設計に費やす時間が増えます。 加えて作ったページ同士をつなげてプレビューすることで使用感の確認をすることができます。 WEBデザインは本来ならばコンテンツ内容はプロデューサーやディレクター、情報設計はIA・UIやUXも専門家が入り、WEBデザイナーは彼らと話し合いながらサイトを作っていきます。, しかしフリーランスのWEB屋やブロガーはこれらをすべて1人で行わう必要があるので、目に見える技術でないUIやUXを考えることが難しいと感じます。 そういう意味もありブロガーがよりユーザーに対して最短距離で情報を伝え、使いやすいサイトを作るためには有効なツールだと感じました。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, 山岳写真専門のネイチャーフォトグラファー。現在は日本の北アルプスを拠点にしている。元WEBディレクター&フロントエンドエンジニア。アウトドアメーカーやメディアと仕事したり写真を提供しています。, LOWAのTAHOE PRO GT WXLは幅広の足の人に最適。歩行距離が長い登山におすすめ, ノートパソコン対応の充電器の決定版HYPER JUICE。100W PD給電対応USB-Cモバイルバッテリー, 伝統工芸と熟練の職人手作りによる美しいカメラストラップ。アルティザン&アーティスト ACAM-316G, 【長期使用レビュー】何でもありの4KモニターBenQ PD3220Uは趣味と実務の両方で使っても最高の満足度だった, BenQ PD3220Uレビュー!MacBook Pro用のモニタにも最適なThunderbolt給電対応の31.5インチ4Kモニター, 作業を全部解説!Wixを使って1日で写真家のフォトポートフォリオサイトを作ってみた, 身体を分析してダイエットを効率よく行える体組織計 TANITA InnerScan DUAL RD-800, WEBデザイナーの必需品になるかも。 Adobe XDでWEBサイトリニューアルをしてみた, Illustrator しっかり入門 CC/CS6/CS5 (しっかり入門シリーズ), Adobe Creative Cloud コンプリート 2017年版 |オンラインコード版|12か月版|Win/Mac対応. Adobe XDでは、基本となるパーツと描画機能を用いて、Webサイトやモバイルアプリの外観(UI)を作成できます。 さらに、静的なデザインに動きやインタラクションを加えて、ユーザー体験(UX)を設計することが可能です。 この記事はAdobe XD Advent Calendar 2016の14日目の記事です。 2016年11月上旬にベータ版がリリースされたAdobe Experience Design(以下、Adobe XD)。 Adobe XDでデザインできるのはUIだけでなく、画面遷移が可能な動くモックアップを制作できるのが最大の特徴とも言えます。 6つともメリット・デメリットがありますので、しっかり考えたうえで自分に合ったツールを選びましょう! 目次. 昨年末までに全国6都市で活動するまでになったAdobe XD ユーザーグループ(XDUG)ですが、今年に入ってさらに3都市(京都、広島、秋田)が参加し、ますます盛り上がりをみせています。, 現在、XDUGやそれ以外のコミュニティでも、日本のどこかで毎月Adobe XDの勉強会やXDのセッションがある状態となっています。このようなXDの勉強会やセミナー開催情報は、FacebookやTwitter、Connpass、IT勉強会カレンダーなどで探すことができますが、やはりバラバラになっている情報なので忙しい皆さんにはちょっと大変でした。, そこで主にXDUGの勉強会やXDのセッションがあるセミナーなどの情報、各地域のXDUGの活動内容がわかる公式サイトXDUG.jpが立ち上がりました。, すでに開催されたイベントのレポートもリストされています。地域や回によっては、イベントの様子を確認できる写真だけでなく、セッションスライドや動画も掲載されています。, 近くでXDUGの活動がないけど、自分でやってみたいな、という方も立ち上げの相談に乗ってくれるとのことなので、ぜひ問い合わせてみてください。XDUG以外のイベントでもXDのセッションやワークショップがある場合は、有料無料のイベント問わず掲載してくれるそうなので、こちらも問い合わせてみください。, XDUGが主催する初のAdobe XD ユーザーフェス(XDUF)が、5月25日の東京を皮切りに全国各地をリレー形式で開催されます。5月の終わりから7月の終わりを目処に、毎週または隔週のペースで、札幌、秋田、仙台、名古屋、京都、大阪、松山、広島、福岡、そして沖縄までの各地域を、一つのイベントとして、一つのテーマで巡る旅になります。, すでにXDを使っている方も、これからXDを学んでみたいという方もぜひご参加ください。. おすすめの最新webデザインツール6選 ⑴ 革命児【Adobe XD】 とにかくスゴイ、Adobe XDの特徴 昨年末までに全国6都市で活動するまでになったAdobe XD ユーザーグループ(XDUG)ですが、今年に入ってさらに3都市(京都、広島、秋田)が参加し、ますます盛り上がりをみせています。 現在、XDUGやそれ以外のコミュニティでも、日本のどこかで毎月Adobe Copyright © 2020 Adobe.