Explorerでは表示が崩れる場合がございますので、下記推奨ブラウザにてご確認ください。XDを使いこなそう(ワイヤーフレーム編)デザイン制作の際に皆さんおなじみの”Photoshop”や”illustrator”。XD“のメリットと簡単な”ワイヤーフレーム”のつくり方をご紹介します。XD(以下XDという)“は、Webサイト・アプリケーション・音声デバイスなどのUI/UXを制作するためのデザインツールです。ワイヤーフレーム・プロトタイプなどを作成することができ、クライアントや制作チームへのヴィジュアルの共有を、ひとつのアプリで実現!また、デザイナーだけでなく、「デザインちょっとかじってる!」というようなディレクターさんやプランナーさんなどでも、比較的簡単に思い描いたアイデアをヴィジュアルに落としこむことの出来る夢のツールです。これまで“Photoshop“や“illustrator“が主流でしたが、昨今、特にWeb関連のデザインにおいては“XD“を使用しているデザイナーが圧倒的に増えています。XDのメリット“XD“のメリット、それはズバリ「使いやすさ」ですシンプルで直感的な操作性で、デザイン系ツール初心者でも使いこなせるように設計されています。操作が簡単だから、覚える過程にさほど時間をかけることなく、効率よく制作作業を進めることが出来ます。今はなんでもかんでもWebが主となる時代です。そこで、Webサイトを制作する上で最初に取り掛かるかつとても重要な『ワイヤーフレームのつくり方』について紹介していきます!ワイヤーフレームとは簡単に言うと”サイトの設計図面”です。上の図のように、ワイヤー(線)とフレーム(骨組み)を組み合わせた家の間取り図みたいなものです。デザインの下描きとして、クライアントや制作に関わる人たちに共通認識を持ってもらうように、WEBサイトやランディングページを制作する際にはワイヤーフレームを制作します。それでは実際に、”XD”を使ってちょっとしたランディングページのワイヤーフレームをつくっていきましょう。Page)...検索結果や広告などを経由して訪問者が最初にアクセスするページのこと。[Step1]ワークスペース内の各機能を知ろうまず、XDのワークスペース内の各機能を確認していきましょう。以下がワークスペースの構成になっております。アートボードを作成しようそれでは”XD”を立ち上げましょう。新しいアートボードを作成します。アートボードのサイズで迷ったときは、Web画面に適している「Web1920」がおすすめです。(※サイズは後からでも変更可能です。)クリックすると、ワークスペース画面に移ります。追加のアートボードを作成するには、ワークスペース画面左のツールバーから「アートボードツール」を選択しアートボード以外の灰色の部分をクリック。新しいアートボードが現れます。※ショートカットキーでも追加は可能です。あるアートボードを選択したまま、Ctrl+『C』→Ctrl+『V』(Macの場合は⌘+『C』→⌘+『V』で)[Step3]図やテキストを入れようここからはアートボードに「オブジェクト」を入れていきます。以下がオブジェクトの種類になります。リピートグリッド)プロトタイプ“XD”には、作成したデザインを実際のWebサイト・アプリの様に動作させることが出来る機能があります。”XD”内でつくったボタンとボタンをクリックした先のページを用意し、プロトタイプでボタンとページを線でつなぐだけでワイヤーの段階でも導線の確認をすることが可能です。“XD”内で制作したサイトデザインを実際のブラウザ画面のようにプレビューすることが出来る機能です。ワークスペース画面右上の「デスクトッププレビュー」アイコンをクリックすると、現在選択されているオブジェクトを含むアートボードがプレビューウィンドウに表示されます。プロトタイプを設定しておくことで、より実際のサイトのようにボタンの動きを含めて見ることができデザインの確認・共有がしやすくなります。XD”の機能と、簡単なワイヤーフレームのつくり方を紹介させていただきました。XD”なら、普段デザインツールを使わない人でも、ちょっとの努力(やはり多少の努力は必要ですが)で、Webサイトのデザイン・フライヤーのレイアウトなども比較的簡単に行うことができます。日々の業務に役立つ資料をご用意しております。10:00~18:00(土日・祝日除く)お問い合わせフォームお申込みixMarkを新規でご利用されるお客様は、こちらのフォームからお申込みください。