[目次] 1. ワイヤーフレームに画像を配置する 2. アセットパネルにスタイルを登録する 3. コンポーネントを作成する 4. レイヤーパネルを使う 1. ワイヤーフレームに画像を配置する 前回作成したトップページのワイヤーフレームに画像を配置します。配置する箇所は、メインビジュアルとバナーの2か所です。 メインビジュアルとバナーの2か所に画像を配置する シェイプに画像を配置する まず、メインビジュアルの位置に画像を配置します。XDでは、シェイプに画像ファイルをドラッグ&ドロップすることで、シェイプ内に画像を配置できます。そこで、メインビジュアルとして配置されているシェイプ(長方形)の上に適当な画像を移動してみましょう。すると、長方形が半透明の青色でハイライトされた状態に変化し、画像をドロップできることを知らせてくれます。そのまま画像をドロップしましょう。 画像をシェイプにドラッグして配
十年以上にわたり、デザイナーたちはウェブサイトへのトラフィックを増やし維持する技術に磨きをかけてきました。最良の戦略のひとつは、読んで共有する価値のあるコンテンツをつくることです。そうすれば、サイトへの参照によるトラフィックを増やし、興味と関心を持つ読者を呼び込むことができます。しかし、そうやって惹きつけた読者をしばらく滞在させるにはどのようにしたら良いのでしょうか? ここで重要になるのが流し読みの容易さです。最も重要で関心の高い情報を簡単に見つけられるようにすることで、より優れた体験が提供できます。顧客をより幸せにできる企業が市場シェア獲得しがちな今の世界では、優れたユーザー体験が企業の評判や、おそらくビジネスにも影響を与えることでしょう。 そこで、コンテンツをいくつかの流し読み可能なセクションに分けることを提案します。この記事では、いくつかの一般的な流し読みのパターンと、コンテンツを流
スクロールグループを使用すると、プロトタイプを実際のWebサイトやアプリのように動作させることができます。画面の一部の領域がスクロールするような、フィード、リスト、カルーセル、ギャラリーなどをデザインできるようになりました。これは、Adobe XDのUserVoiceフォーラム(英語)に寄せられたなかでも最も要望が多かった機能の一つ(英語)です。 デザイン上の任意の領域をスクロールグループとして指定し、縦、横、または両方向にスクロールするように設定できます。カンバス上では、スクロールグループを作成した領域に青いハンドルが表示されます。デスクトップでプロトタイプをプレビュー、あるいはプロトタイプのリンクとして共有すると、指定した領域を実際にスクロールすることができます。 Let’s XDでスタック(英語)とスクロールグループ(英語)の使い方を学ぶことができます。さらに、ベイエリアのUI/UX
Adobe XDはWebやアプリなどデジタル体験デザインのためにアドビが提供している最新のデザインツールです。「考える速度でデザインする」をテーマに開発されただけあって、軽くて操作しやすいのが特徴で、無料で使えるプランもあるので、これまでPhotoshopなど他のデザインツールを使っていたけれどXDも気になっているという方は多いのではないでしょうか。また、これからWebデザインを学ぶためにXDを覚えたいという方もいらっしゃると思います。 そこで、この連載では、Adobe XDを使ってレスポンシブデザインのページをデザインする手順を全6回に分けてご紹介します。ワイヤーフレームから始めて、完成したデザインを開発者に共有するまでに最低限必要なXDの機能を学べる構成になっています。 第1回は、XDを初めて触るデザイナーの皆さまために、XDを使ってデザインを始める際に知っておきたい基礎知識をご紹介し
今月のAdobe XDアップデートには、ワークフローを確実に高速化する、エキサイティングな新しいキーボードショートカットの追加とUI強化、そして要望が多く寄せられていたブレンドモード(描画モード)の導入が含まれています。ブレンドモードを使えば、PhotoshopやIllustratorと同じ「比較(明)」「乗算」といった設定を画像に適用して他のレイヤーとブレンドできます。これにより、興味深くユニークな効果が生まれ、より魅力的な画像やグラフィックスをXDで作成できるようになりました。 今回のアップデートにはまた、Windows版およびMac版のXDアプリケーションのデザインスペックとデザインカンバスの両方で、完全に覆われたレイヤーや一部覆われたレイヤー、または非表示のレイヤーを扱いやすくするための新機能も含まれています。加えて、オブジェクトを簡単にナッジ(少しずつ移動)する、サイズ変更するた
2019年もAdobe XDは進化し続けます。数々の新機能の追加や機能強化を予定していますが、まず本年最初のアップデートでは、2018年にリリースしたいくつかの機能に対する、小さいながらも重要な強化に注力しました。昨年発表した新機能のなかで最もインパクトが大きかったもののひとつ、自動アニメーションをブラウザー上でもサポートします。また、新しいコラボレーション手法を追加したほか、複数のアクセントと方言を含め、日本語をはじめとするXDが対応するすべての言語での、音声コマンドと音声再生のサポートも追加しました。 この記事では、今月のリリースに含まれる新機能と機能強化についてお伝えします。この強力なアプリケーションを私たちがどのように創りあげてきたか、XDのプロダクトマネージャーであるエレイン チャオが2018年のXDの足跡(英語)を振り返っていますのでそちらの記事もぜひご覧ください。 新機能:ブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く