WEBデザインで活用できるAdobe XDの便利な小技集|名古屋のホームページ制作・WEB集客会社 株式会社オンカ
Adobe XDはWEBデザインに最適化されたデザイン制作ツールの一つです。XDは同じAdobe社が提供するデザイン制作ソフトのPhotoshop、Illustratorと親和性があり、基本的な操作は各ソフトとそこまで変わりませんが、当然他の2ソフトではできたのにXDではできないこと、違う機能で代用できることもあります。そこで今回は、PhotoshopやIlustratorからXDに乗り換えたユーザーに役立つ、WEBデザインで活用することができるAdobe XDの小技をご紹介します。 【目次】 1.Adobe XDとは 2.Adobe XDの小技集 a.オープンパスを作成する方法 b.文字のアウトライン化の方法 c.文字にグラデーションを使用する方法 d.オブジェクトを自由変形する方法 eテキストを縦書きで入力する方法 3.今回のまとめ AdobeXDとは Adobe XDとは、2016年
Adobe XDで簡単なアニメーションを作る方法を超丁寧に解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのしーちゃんです！ 以前初心者でも作れる！Adobe XDを使って簡単なアニメーショを作る方法の記事を書きましたが、皆さんご覧になりましたでしょうか？ 色々調べた結果、まだまだXDでできるアニメショーンがありましたので、今回もサイトのメインビジュアルにつけるアニメショーンを紹介したいと思います！ このアニメーションの特徴 イラストに動きをつけることで、おしゃれ・先進的といったイメージや、ストーリー性をサイトに持たせることができます。 サンプルのデザインから作ります。 こちらのアニメショーン作るときのポイントは、イラストをそれぞれのパーツに分けることです。分ける理由は、自動アニメショーンを付けるときに一個ずつのパーツを順番に動かすためです。 各パーツのデザインが完了したら、アートボードを選択し、コピー＆ペーストして複製。複製したアートボードを選択し、タイトルとテキストを
AdobeXDで画面設計資料を作るときに気をつけること・おすすめの作り方（前編） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し
Adobe XDの基本的な使い方を解説！専門知識不要でUI・UXデザインが簡単に！
Adobe XDは、Adobeが提供しているデザインオールインワンツールです。UI/UXデザイナーは特に活用したいツールとなっており、日本語にも対応しています。デザイナー以外もデザインを構築する機会も多く「デザインの知識がなくても本当につかえるの？」といった心配もあるかと思います。 そこで今回は、Adobe XDの使い方について解説します。 Adobe XDとは Adobe XDとは、Webサイトはもちろん、モバイルアプリなどのデザインに適しており、正確で高い品質の作業をバックアップしてくれるツールです。コーティング知識がなくとも利用できる、スピード感と直感的な操作を実現しています。 その秘密はテンプレートにあります。好みのものを組み合わせればオリジナリティのあるプロトタイプの作成も可能です。 作成したデザインはチームメンバーへの共有も可能。Windows・Mac・iOS・Androidと
Adobe XDでモバイルファーストのWebデザイン入門 第2回: ワイヤーフレームをサクサクつくろう！ | Adobe Blog
本連載の第1回では、Adobe XDを使い始める前に知っておきたい基礎知識をご説明しました。第2回からは、実際にWebサイトのデザインに取り掛かります。制作するのは【架空のミュージシャンのWebサイト】です。 この記事では、デザインの最初のステップとして、XDの［長方形ツール］と［テキストツール］を使い、ワイヤーフレームを作成する手順を解説します。XDを使うと、ワイヤーフレームを直感的にサクサクつくることができます。特に［リピートグリッド］は、コンテンツをいくつも並べては直すことの多いワイヤーフレーム作成の本当に強力な味方です。 なお今回は、ワイヤーフレームのラフスケッチが存在する状態からの作業を想定しています。このように、アイデアレベルのデザインを、実際にデバイスの画面で確認しながら形にするにはXDは最適のツールです。もちろん、ゼロからXDを使ってワイヤーフレームを試行錯誤するのもオスス
AdobeXDのリピートグリッドを使ってコンテンツを一括で流し込む方法 | ビジネスとIT活用に役立つ情報（株式会社アーティス）
リピートグリッドを利用することでコンポーネントを繰り返すようなデザインを効果的に作成することができるようになりましたが、今回は作成されたコンポーネントに対してコンテンツを一括で登録する方法を紹介します。 前回同様、スマートフォンを想定した下記のリストレイアウトをサンプルとして利用します。 画像コンテンツの流し込み 画像コンテンツの流し込みは非常に簡単で、対象となる画像を選択してコンポーネントにドラッグ&ドロップするだけで完了します。流し込みたい画像をあらかじめ用意して、デスクトップ等のフォルダにまとめておくとスムーズに作業が行えます。 操作方法 登録したい画像をまとめて選択して、コンポーネント上にある任意のオブジェクトにドラッグ&ドロップします。 ドラッグ&ドロップした画像がリピートグリッドで作成された各コンポーネントのオブジェクトに順番に反映されました。 画像はオブジェクトのサイズに合わ
Adobe XDでモバイルファーストのWebデザイン入門 第1回: デザインする前に知っておきたいワークスペースの使い方とファイル管理 - Adobe Blog
Adobe XDはWebやアプリなどデジタル体験デザインのためにアドビが提供している最新のデザインツールです。「考える速度でデザインする」をテーマに開発されただけあって、軽くて操作しやすいのが特徴で、無料で使えるプランもあるので、これまでPhotoshopなど他のデザインツールを使っていたけれどXDも気になっているという方は多いのではないでしょうか。また、これからWebデザインを学ぶためにXDを覚えたいという方もいらっしゃると思います。 そこで、この連載では、Adobe XDを使ってレスポンシブデザインのページをデザインする手順を全6回に分けてご紹介します。ワイヤーフレームから始めて、完成したデザインを開発者に共有するまでに最低限必要なXDの機能を学べる構成になっています。 第1回は、XDを初めて触るデザイナーの皆さまために、XDを使ってデザインを始める際に知っておきたい基礎知識をご紹介し
デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20 - NxWorld
デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。 そこで、今回は便利なプラグインが数多く公開されている中でも個人的に特におすすめなプラグインを紹介します。 エントリー内では基本的にMacで使用した場合の見栄え・メニュー・ショートカットで紹介していますが、Winでもそこまで大きな違いはないので適宜置き換えてください。 プラグイン紹介時のキャプチャや挙動については、このエントリー公開時点のものになります。 プラグインのインストール・アンインストール・実行について インストール プラグインのインストールは、公式のものであればアプリから簡単にインストールができます。 イメージ内①のようにサイドにあるプラグインアイコンをクリック後に表示されるメニューの右上にあるプラスア
Adobe XD利用パターンがよくわかる！高性能Webデザインアプリのチュートリアル10選
speckyboy Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web. Adobe XDの人気は、ウェブやモバイル端末でますます高まってきています。Sketchほどの爆発的人気はないものの、ワイヤーフレーム、プロトタイプ、UI/UXデザインに優れた一番最近のAdobe製品と言えます。 今回は、そんなAdobe XDを利用するためにおすすめチュートリアルをご紹介します。 もし無料キットをお探しでしたら、こちらを参考にしてください。 Quick Start for Adobe XD この14分
Adobe XDのリピートグリッドを活用する8つのレシピ
Adobe XDのリピートグリッドを活用する8つのレシピ こんにちは。ネットパイロティング株式会社でUIデザイナーをしている湯口です。2016年3月にAdobe Experience Design CC(以下Adobe XD)を使いはじめて以来、Adobe XDを使ってワイヤーフレームを書いたりデザインを行っています。 本記事は、2017/2/7(火)に行った勉強会「Adobe XD Meeting #03」で発表した「リピートグリッドであそぼう」の内容をCreative Station向けに再構成したものです。https://blog.adobe.com/media_db5531d0497a06ca85273563ad992e8fd9ab7854.gif以前から「三分で作るカレンダー」など、レイアウトだけでなくUI自体にリピートグリッドを使う方法を模索していましたが、今回は、いままで蓄積
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Convertify Sketch/Adobe/Google | Figma
アプリまたはwebサイトのレイアウトとデザイン |
Adobe XDで行間をCSSライクに設定できるプラグインを公開しました
したたか企画 on Twitter: "名前／種類／コンポーネントのインスタンス／座標など属性が共通するオブジェクトを選択するAdobe XD用プラグインSelectMenuを公開中です。使い方の記事はまた後ほど。 #XDplugin インストール：… https://t.co/275fD5mqvS"
Adobe XDをもっと使いこなすヒント！ 第36回 アートボードにガイドを配置