2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。 これに関してWebデザイン勉強中の方などが「これからFigmaとAdobe XDのどちらを勉強するべき？」と困っているツイートを拝見したのでそれに対する私なりの回答と、 Webデザイナー・UIデザイナーたちの反応や温度感 Web業界の方が意外と見落としている事 脱Adobeしたい方のためのガイド などについてまとめてお話ししたいと思います。 なおこの記事に関しては事実だけでなく、私の予想や、私の周囲のWeb制作者の方の反応や予想なども含まれることをあらかじめご了承ください。 追記: Adobeの製品一覧からXDが消滅し、Adobe XD公式ページは消滅 「Adobeのすべての製品一覧」から #AdobeXD が消えました。「XD」で検索しても出てきません。 Dreamweaverで
先日ローンチされたAdobe XD Trailから、Adobe XDの使い方がよく分かるワイヤーフレーム・プロトタイプを制作するチュートリアルファイルを紹介します。 Adobe XDの基本操作をはじめ、ワイヤーフレームの作成、スタイルの適用、プロトタイプの作成、コラボレーションなど、実践的な使い方がこれでよく分かります。
笑顔でこんなポーズ、泣き顔でこんな仕草、希望通りのイラスト素材が完全無料で商用利用できるOpen Peepsを紹介します。 普通のイラスト素材はそのまま使用するしかないですが、人物の表情や髪型、ポーズ、動作などさまざまなパーツを組み合わせて、584,688通りのキャラクターを作成することができます。 Open Peeps Open Peepsの特徴 Open Peepsのダウンロード Open Peepsのイラストライブラリ Open Peepsの特徴 Open Peepsは商用でも個人でも完全無料で利用できるイラストのライブラリで、ライセンスはCC0です。 イラストはすべて手描きのベクターで、さまざまなパーツを組み合わせることで584,688通りのキャラクターを作成することができます。アプリは、Adobe XD、Sketch、Figma、Studioをサポートしています。
アドビが、同社のプロトタイピングツール「Adobe XD」の単体販売を終了したことが1月24日までに分かった。すでに、同社プロダクト一覧ページからAdobe XDの項目が消えている。ただし、「Creative Cloud」コンプリートプランには引き続き提供されており、契約すれば新規でのインストールも可能だ。 同ツールについてアドビに確認したところ「Adobe XDについてはメンテナンスモードとすることを決定いたしました」との回答があった一方で、「現在Adobe XDをご利用のお客様のサポートは今まで通り継続してまいります」と説明。既存ユーザーは引き続きAdobe XDを利用できるようだ。 なお、アドビは2022年9月にAdobe XDと競合するデザインツール「Figma」を200億ドルで買収している。FigmaとAdobe XDの棲み分けについて同社は「何も決まっていない」と回答するにとど
ニューモーフィズムとは、要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。最近注目されているUIデザインのトレンド「ニューモーフィズム」を簡単な手順でデザイン・実装する方法を紹介します。使用するソフトウェアは、FigmaでもIllustratorでもAdobe XDでもSkecthなど、なんでもOKです。 ニューモーフィズムのデザイン方法、使用するカラーの選び方、UIデザインに適用するCSSの実装コードなど、すぐに実践できます。 Neumorphism (Soft UI) in User interface design - Tutorial by Kanhaiya Sharma 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 新しいトレンド「ニューモーフィズム」 ニューモーフィズム
エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し
UIデザイナーの仕事は試行錯誤の繰り返しで、ちょっとしたことで印象が大きく改善されます。デザインを改善するために役立つ実践的なテクニックを紹介します。 今手がけているUIデザインを改善するだけでなく、次のプロジェクトを開始する際の指針としても簡単で実践しやすいテクニックです。 9 tips to quickly improve your UI designs by Marc Andrew (mrcndrw.com) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 要素をより明確に表示する 2. デザインに使用する書体は1つで十分 3. 長いコンテンツは文字のサイズに気をつける 4. ユーザーのオンボーディングエクスペリエンスを改善する 5. シャドウを使う時は光源を意識する 6. テキストと画像のコントラストを改
こんにちは、デザイナーのしーちゃんです！ 以前初心者でも作れる！Adobe XDを使って簡単なアニメーショを作る方法の記事を書きましたが、皆さんご覧になりましたでしょうか？ 色々調べた結果、まだまだXDでできるアニメショーンがありましたので、今回もサイトのメインビジュアルにつけるアニメショーンを紹介したいと思います！ このアニメーションの特徴 イラストに動きをつけることで、おしゃれ・先進的といったイメージや、ストーリー性をサイトに持たせることができます。 サンプルのデザインから作ります。 こちらのアニメショーン作るときのポイントは、イラストをそれぞれのパーツに分けることです。分ける理由は、自動アニメショーンを付けるときに一個ずつのパーツを順番に動かすためです。 各パーツのデザインが完了したら、アートボードを選択し、コピー＆ペーストして複製。複製したアートボードを選択し、タイトルとテキストを
デザイナーの高島です。 ベイジには2019年4月に入社しました。webサイトや業務システムのUIデザインを主に担当しています。『knowledge / baigie』でも、デザイン関連の情報を発信していきたいと思います。 デザインツールで制作したデザインデータをコーディングする時、「デザイン通りになっていない」「ルールに一貫性がなくてコーディングに余計な手間がかかった」といったトラブルが起こりがちです。 しかしこれらの大半は、デザイナー側の配慮である程度防げるとも思っています。そこで今回は、私がコーディングを依頼する際にデザイナーとして気を付けていることをまとめてみました。 なお、ベイジが使用しているメインのデザインツールはAdobe XDなため、この記事もXDの使用を前提としています。ただし、ツールに関わらない話も多いはずなので、皆様が使っているツールに置き換えながら、お読みいただけると
WebページやスマホアプリのUIデザインで、一貫したコンポーネント・テーマ・カラー・タイポグラフィ・アイコンなどを作成・管理できるAdobe XDの無料プラグイン「Spectrum」を設計したAdobeのデザインシステム・デザインマネージャーの解説記事を紹介します。 Spectrum for Adobe XD: Adobe’s design language in its experience design tool by Jacob Frank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Spectrumの機能と開発した経緯 Spectrumを使用した結果 Spectrumのインストール方法 Spectrumの今後の機能 ご意見をお聞かせください はじめに アドビのデザインシステムであるSpectrumは、5年前
Adobe XDステート機能を使いこなそう！ ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 AdobeXD2019年11月の大型アップデートで「ステート機能」が登場し、リッチなインタラクションを作成しやすくなりました。従来はアートボードを複数枚組み合わせて表現するしかなかったのですが、ステート機能の登場によって簡単にできるようになっています。 今回はホバーボタン、スライダー、ハンバーガーメニューなど実例を交えながら、ステート機能の基本と一歩進んだ使い方を紹介します。AdobeXDは使っているけどステート機能は触ったことがない、ステート機能をイマイチ使いこなせてないという方はぜひご覧ください。 ステート機能の基本 簡単にステート機能について振り返っていきます。 ボタンなどの要素は、ユーザー操作によって状態が変わることがあります。たとえば、一般的な「いいねボタン」であれば最低でも「
2021.3.1 アウトプットの精度が上がる！「Adobe XDをプロトタイピングに活かす方法」 研修レポート ツールデザインナレッジ研修 皆さん、こんにちは。 メンバーズキャリアカンパニー所属ディレクターの森山です。 この度、2021年1月26日にオンラインにて開催された「Adobe XDをプロトタイピングに活かす方法」研修を受講しました。 講師は株式会社まぼろし取締役CMOであり、メンバーズキャリアカンパニーの技術顧問も務めてくださっている益子貴寛さんです。 今回の講義は、Adobe XDの機能の中でも、それぞれのワイヤーフレームやデザインをリンクで有機的につなげて、ブラウザで動く画面を作ることができる「プロトタイピング」という機能にフォーカスした内容でした。 ディレクターやマーケター、プランナーなどのノンデザイナー及びノンエンジニア向けの講座ではありましたが、プロトタイピング自体はU
近年、UI/UXデザインで活躍するデザインツールとしてAdobe XD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「Adobe XD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。 UI/UXデザインツールには、大きく分けてデザイン機能とプロトタイプを作成し共有する機能の2種類の機能があります。今回の記事では、デザイン機能に重点を置いて紹介します。 Adobe XDを使っているけどFigmaも気になっている方や、その逆という方のデザインツール選定のヒントになればと思います。 Adobe XDとは？ Adobe XDとは、2017年に正式リリースされたUI/UXデザインツールです。IllustratorやPhotoshopと操作感が似ておりAdobeユーザーであれば
XDからFigmaへ移行したい人のためにFigmaの機能を紹介 この記事では、XDからFigmaに移行しようとしている方、Figmaを使ったことのない方に向けて、Figmaの機能の中からよく使用するものを紹介しています。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 マスクとして使用 Figmaでもマスクを使うと図形などからはみ出した部分を表示しないようにできます。 画像と図形を用意します。図形はその形からはみ出て部分を表示しなくなるので、その図形でくり抜かれたような表示になります。 マスクの作成方法 マスクとして使用したい図形の前面に画像を配置します。 図形と画像の両方を選択した状態にし、上部ツールバーにある［マスクとして使用］アイコ
こんにちは！ 常に美しいデータ管理を模索中のありさんです。 突然ですが、XDでデザインしているとき、データってカオスになりがちですよね……？ メインコンポーネントがどこだかわからなくなる XDがフリースタイルすぎて、とっ散らかる 自分しか理解できない置き場所になってしまう 自分だけで作っているときは良いですが、いざフロントエンドやバックエンドのエンジニアさんにお渡ししたときに「これどうなってるの……？」って困らせてしまうケース……私はめっちゃあります！！！！！ そんな、プロジェクトの平和のために、ワイヤーフレーム作成、デザイン作成時の管理方法を作ってみました。 今回紹介する管理方法を実際のプロジェクトでも使ってみたところ、プロジェクトメンバーとの意思疎通もスムーズでデザインスピードも1.5倍（体感）くらいになったので、紹介します。 XDデータをつくるうえでの要件 プロジェクトメンバー全員が
こんにちは、LIGでWebディレクターをしているなべちゃんです。 Webサイトを制作する際に、クライアントや外部のライターさんにサイトに入れるテキストを依頼をする、というシーンは多いのではないでしょうか？ LIGでもまだテキストが確定していないときは「テキストテキスト……」「ダミーダミー……」と、領域を確保してクライアントやライターさんに依頼をしています。 今回はAdobeXDでワイヤーフレームやデザイン制作をしたあと、Googleスプレッドシートと連携し、Googleスプレッドシート上で書いたテキストがXDに流し込まれるという画期的なプラグインを紹介していきたいと思います！ 実はこのプラグインは、ちゃんれみさんが週に1回開催されているディレクターミーティングで紹介して、「神」「画期的だ」「もっと早くに知りたかった」と歓喜の声が上がっていました👏 私もこのプラグインを知ってからはかなりお
昨日から開催されているAdobe MAX（10/23まで）と同時に、Adobe XDの最新アップデートがリリースされました！ 今までになかったまったく新しい新機能をはじめ、さまざまな機能の強化、共同編集機能の正式版、中でもCCライブラリ強化とVS Code連携は、ワークフローがさらに改善されると思います。 Adobe XDの新機能 まずは、Visual Studio Code連携。 VS Codeのプラグインとして無料で利用でき、デベロッパーはデザイントークンを数秒で作成し、Web、iOS、Android、Flutterなど複数のプラットフォームに向けてアプリをコンパイルすることができます。コーディング中は、関連するドキュメントやコードスニペットに素早くアクセスすることができます。 プラグインのインストールは、下記ページから。 ※2020年10月20日リリースのAdobe XD34でご利用
先週リリースされたばかり、iPhoneやiPadに採用されているiOS 14のデザイン用のテンプレートやUI要素が揃ったAdobe XD用の素材を紹介します。 素材はAdobe XD用だけでなく、Photoshop用やSketch用も揃っており、9月に新しくなったSF Symbols 2もダウンロードできます。 Apple Design Resources UIデザイン素材は、ページのちょい下からダウンロードできます。 iOS 14のAdobe XD用の素材は先週リリースされたばかりで、Photoshop用とSketch用、そしてiOS 13もダウンロードできます。
Adobe XDを使用してワイヤーフレーム、プロトタイプ、デザインカンプなど、WebページのUIを設計するワークフローに沿って学べる解説書を紹介します。 ワイヤーフレームを作るにあたっての準備から、実際の作り方、コンポーネント管理、画面遷移設計、プロトタイプ共有、デザインスペック共有など、Adobe XDの実践的な使い方を基礎からしっかり学べます。 Adobe XDの解説書を探していた人には、間違いのない決定版の一冊です！ 本書はWeb制作に携わるすべての人、ディレクター、デザイナー、コーダーにお勧めの本です。Adobe XDをまだ使用したことがない、すでに使用しているけどもっと使いこなしたい、そんな人にぴったりの一冊です。 発売されて間もないのに、Amazonで☆5レビューが早くもかなりついています。
Adobe XDでWebサイトを制作したい、ワイヤーフレームの作り方を具体的に知りたい、コミュニケーションやプレゼンテーションツールとして活用したい、基本操作から実務レベルの使い方まで詳しくていねいに解説した一冊を紹介します。 Adobe XDは、Webサイトやアプリの制作で欠かせないツールの1つとして多くのユーザーに支持されています。Adobeユーザー（登録無料）なら無料で利用でき、Webサイトやアプリの制作だけでなく、コラボレーションツールやコミュニケーションツールとしても活躍します。 本書は現役のデザイナー・ディレクター陣が執筆した、Adobe XDの解説書です。基本的な操作から、WebサイトやスマホアプリのさまざまなUIデザインやワイヤーフレームの作成方法、オンラインディスカッションやプレゼンテーションなどの活用方法まで、実務で役立つテクニックが詳しく解説されています。 学べるだけ
動画で学ぶAdobe XDの総合学習プログラム ほぼ毎月の機能アップデートで進化するAdobe XDを使う時、どんどん便利になっていくなと思う一方で、最初はどこから勉強したらいいのか、使ったことのない機能や、もっと効率的に作業する方法があるんじゃないかとモヤモヤすることがあるかもしれません。 Adobe XD Trailには、様々な用途やレベルから学べるコンテンツがあり、XDがカバーする5つの機能カテゴリーを可視化したラベルが付けられているため、全体を把握しながらXDをマスターしていけます。 各コンテンツに付けられた5つの機能カテゴリーラベルと難易度表記 Adobe XD Trailを見る 用途に応じたコンテンツを使い分けよう XD Trailには学びたい用途に応じた様々なコンテンツがあります。機能について個別にしっかり学んだり、作り方を知りたいものを学んだり、より実践的な制作体験をしたり
Adobe XDはこれまで、有料のプランだけでなく無料のスタータープランがありました。 無料のスタータープランは書き出しや共有に制限があるもののXDのファイルを編集できました。 無料のスタータープランは、デザイナーではない方（営業担当者や経営者、ディレクターなど）がデザインカンプを見たい時や編集をしたい時、自分の考えをデザイナーに伝えたい時などに重宝されていました。 ところが、Adobe XDがバージョン50になってから「無料のスタータープランが使えなくなった」というツイートを多く見かけるようになりました。 その一方で「まだスタータープランは使えるらしい」と言っている方もいます。 どちらかはっきりしないままなのはモヤモヤして気持ち悪いので、Adobe製品をインストールしていないWindows 10にAdobe XDを新規インストールして、スタータープランが利用可能かどうか検証しました。 先
2022年4月27日 Webデザイン, XD プロトタイプやデザインの制作時にAdobe XDを使っている人も多いでしょう。Adobe XDは新しい機能がちょこちょこ追加されているので、定期的にチェックするといいですね。今回はひとつのページを作成しながら、覚えておくと便利な機能を紹介します。 ↑私が10年以上利用している会計ソフト！ 1. 「スクロールグループ」で横スクロールを表現 「スクロールグループ」では表示範囲外のコンテンツをスクロール操作によって表示できる機能です。横にスクロールするカルーセルや、多方向に動かせるGoogleマップの埋め込みなどに使えますね。今回は横にスクロールできるイメージギャラリーを設置します。 まずはリピートグリッドで画像を表示させるボックスを用意しましょう。別途用意していた画像たちをボックスにドロップすれば画像が表示されます。 このままだと画面の外にある画像
2021.1.12 知れば知るほど、レベルアップ！「企画と設計をしっかりとつなぐ！レベルの高い成果物を生み出すためのAdobe XD活用術」研修レポート ウェビナーオンラインイベントナレッジ 皆さん、こんにちは！メンバーズキャリアカンパニー所属の鷲澤（わしざわ）です。2020年4月1日に入社いたしました。 この度、2020年11月19日（木）オンライン開催された「企画と設計をしっかりとつなぐ！レベルの高い成果物を生み出すためのAdobe XD活用術」研修を受講しました。 講師はメンバーズキャリアカンパニーの技術顧問、株式会社まぼろし取締役CMO 益子 貴寛先生です！ 高いレベルで成果物を制作する為に必要不可欠なAdobe XD。 益子先生に、使いこなし術をトータルで分かりやすく解説していただきました。 Adobe XDとは？ Adobe XDとは、Adobeが提供しているオールインワンのU
テレワークで困るのが、複数人でのミーティングやアイデア出しなどの意見を交わす場を持てないことです。Adobe XDの便利なプラグインが登場しました！ Whiteboardの名の通りホワイトボードをはじめ、ブレインストーミング、カードソーティング、ワイヤーフレーム、フローチャート、マインドマップなど、Webサイトやスマホアプリのミーティングで使用するさまざまなツールが簡単に利用できます。 複数人での使用はもちろん、個人で使用するのにも便利です。 Adobe XDのビジュアル協業プラグイン「Whiteboard」 Adobe XDのプラグイン「Whiteboard」とは Adobe XDのプラグイン「Whiteboard」のダウンロード Adobe XDのプラグイン「Whiteboard」の使い方 Adobe XDのプラグイン「Whiteboard」とは Adobe XDはAdobeユーザーは
Adobe XD 待望の新機能！自由自在な動的レイアウトを実現するスタックとスクロールグループの使い方 Adobe XDの2020年6月の大型アップデートでは、目玉機能として「スクロールグループ」と「スタック」が搭載されました。 「スクロールグループ」はアートボードとは別のスクロール領域を定義できる機能、「スタック」はオブジェクトの並び順と間隔を管理できる機能です。 とくに「スタック」は使いこなせるかどうかで、デザイン制作のスピードがかなり変わってくるのでしっかりと覚えておきましょう！ スクロールグループの使い方 スクロール領域を定義できる「スクロールグループ」が登場しました。「水平方向にスクロール」「垂直方向にスクロール」「水平方向と垂直方向にスクロール」という3種類の方向を設定できます。 「水平方向にスクロール」はカルーセルのような、画面幅以上の要素を横スクロールさせるのに便利です。
前回の記事では、Adobe XDを使ってデザインガイドを作成し、登録したカラーやコンポーネントには「デザイントークン」として名前を付けました。今回は、デザイントークンを使って、デザインガイドとBootstrapを連携させる方法を紹介します。 連携方法はシンプルです。ただ、Bootstrapの構成を理解をしていないことには始まりません。最初に、連携方法を理解するのに必要なBootstrapの基本を説明しておきます。 Bootstrapの基本構成 Bootstrapは、CSSメタ言語であるSCSSを用いて管理されています（2020年1月時点）。SCSSは、少ない修正で多くの箇所の変更ができるシステムを構築できます。BootstrapもCSSの記述量は膨大ですが、SCSSを修正すれば簡単に様々な箇所の変更が行えるようになっています。この記事も、紹介する実例はSCSSの修正によるBootstrap
この記事はAdobe XD アドベントカレンダー 2020 の2日目の記事です。 ときどき相談をうけるのですが、Adobe XDでWebサイトやサービスをデザインするときにどのフォントを使っていますか？ 最近では商用利用できる日本語フォントの種類はかなり増えました。一方Adobe XDは、Adobe FontからインストールできるフォントであればCreative Cloudとしての性質で自動的にインストールしてくれますし、USBで繋いでないデバイスプレビューでも自動的にダウンロードして表示してくれます。 今回は定番かつ安定的に使用できる二つのフォントと利用するときに注意が必要なフォントを二つ解説しました。 [おすすめ/名前注意]源ノ角ゴシック次の二つの条件のうち片方が揃ったらこれを選ぶのがおすすめ。 ・MacとWindowsの人が混ざっている ・スタータープランの人が参加している源ノ角ゴシ
Adobe XDの理解度を自己診断してみよう！定期的にチェックしながら、スキルアップを目指せます。
Adobe XDはWebやアプリなどデジタル体験デザインのためにアドビが提供している最新のデザインツールです。「考える速度でデザインする」をテーマに開発されただけあって、軽くて操作しやすいのが特徴で、無料で使えるプランもあるので、これまでPhotoshopなど他のデザインツールを使っていたけれどXDも気になっているという方は多いのではないでしょうか。また、これからWebデザインを学ぶためにXDを覚えたいという方もいらっしゃると思います。 そこで、この連載では、Adobe XDを使ってレスポンシブデザインのページをデザインする手順を全6回に分けてご紹介します。ワイヤーフレームから始めて、完成したデザインを開発者に共有するまでに最低限必要なXDの機能を学べる構成になっています。 第1回は、XDを初めて触るデザイナーの皆さまために、XDを使ってデザインを始める際に知っておきたい基礎知識をご紹介し
Adobe XDの2020年8月のアップデートでは、「マルチフロー」が搭載されました。 「マルチフロー」とは、複数のプロトタイプのフローを設定できる機能です。プロトタイプを理由に、デスクトップとスマートフォンのデザインを別々のファイルで管理する必要がなくなる他、ユーザーの流入経路による表示切り替えなどもプロトタイプしやすくなります。 プロトタイプがさらに簡単で管理しやすい機能になりますので、デザイナー・ディレクターにはとても嬉しい機能です！それでは、「マルチフロー」の使い方と注意点を紹介します。 マルチフローとは 前述の通り、マルチフローとは1つのファイル内で複数のプロトタイプのフローを設定できる機能です。 今までのXDでは1ファイルの中で管理できるプロトタイプのフローは1つでした。そのため、デスクトップとタブレット、スマートフォンのデザインを同じファイルで作っていると共有リンクの作成や更
5/19の昨日から、Adobe XD 検定が始まりました！ 当ブログの↑のバナーが昨日から掲載されているので、すでに受けた人もいると思いますが、Adobe XDやUIデザインに関する初級・中級の検定が公開されています。
2024.01.06 2024.07.16 Webデザイン 【最新版】XDおすすめプラグイン22選！【これだけ入れておけばOKです】 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 そんなお悩みをお持ちのデザイン初学者さん必見です。 迷ってしまう気持ちはよくわかりますが、実は最低限入れておくべきプラグインは限られています。 この記事では厳選した22個のプラグインを使い方とともにご紹介！ デザインだけでなくコーディングに役に立つプラグインもあるので、コーダーを目指す方にもぜひ読んでいただきたいです。 すべてを入れる必要はないで
ボタンのマウスオーバー、ナビゲーションの開閉、パララックス、スライダー、モーダル等、フォトショップやイラストレーターではできなかった動的なデザインの作成方法を見ていきます。 ホバーデザイン 一番最近追加されたホバー時のデザイン作成方法です。 動画の以下のボタン部分の動きです。 まずは、普通にボタンのデザインをつくります。 次に、ボタンを選択した状態で、以下パネルの「コンポーネント」を追加していきます。 コンポーネント右の（＋）ボタンをクリック 初期設定のステートの右の（＋）ボタンをクリック ホバーステートを選択して追加 追加された「ホバーステート」を選択した状態で、ボタンのデザインを変更します。 「初期設定のステート」を選択すると、デフォルトのデザインが残ってることが確認できると思います。 アニメーションの設定は「プロトタイプ」のパネルで行えます。 プロトタイプへ移動して、初期設定のステー
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） コーディングで仕事をするには、デザインツールで作成されたデザインカンプからのコーディング能力が必要です。 その中でも特にXDは操作性が高く人気なので、XDからコーディングできる力は必須といっていいでしょう。 この記事では、XDからコーディングするために必要なテクニックを解説しています。 僕がコーディング代行などの実務を通して感じた重要ポイントもふまえてまとめているので、記事を読み終えると実践を想定した知識が身に付きますよ！ AdobeX
高品質なサンプルを 作りながら学べる Web制作のワークフロー に沿って学べる コーディングに適した プロトタイプが作れる 本書はAdobe XDを使ったWebデザインとUIのプロトタイピングを、高品質なサイトを作りながら、現場のワークフローに沿って学んでいく本です。 ワイヤーフレームの作り方から、ビジュアルカンプ制作、デザイン要素の効率的な制作と管理、インタラクティブなプロトタイプ制作、 画面遷移やコーディングに必要なデザインスペックの共有、さらに動きのあるUI設計やプラグイン活用まで、現場レベルで求められるスキルを、より実践的な学び方で習得できます。 初学者から、現場経験が浅い新人デザイナー、さらにグラフィックデザインからWebへキャリアを広げたい方まで、しっかりWebデザインを学びたい、あらゆる方のための一冊です。
Adobe XDはWebやアプリなどデジタル体験デザインのためにアドビが提供している最新のデザインツールです。「考える速度でデザインする」をテーマに開発されただけあって、軽くて操作しやすいのが特徴で、無料で使えるプランもあるので、これまでPhotoshopなど他のデザインツールを使っていたけれどXDも気になっているという方は多いのではないでしょうか。また、これからWebデザインを学ぶためにXDを覚えたいという方もいらっしゃると思います。 そこで、この連載では、Adobe XDを使ってレスポンシブデザインのページをデザインする手順を全6回に分けてご紹介します。ワイヤーフレームから始めて、完成したデザインを開発者に共有するまでに最低限必要なXDの機能を学べる構成になっています。 第1回は、XDを初めて触るデザイナーの皆さまために、XDを使ってデザインを始める際に知っておきたい基礎知識をご紹介し
本連載の第1回では、Adobe XDを使い始める前に知っておきたい基礎知識をご説明しました。第2回からは、実際にWebサイトのデザインに取り掛かります。制作するのは【架空のミュージシャンのWebサイト】です。 この記事では、デザインの最初のステップとして、XDの［長方形ツール］と［テキストツール］を使い、ワイヤーフレームを作成する手順を解説します。XDを使うと、ワイヤーフレームを直感的にサクサクつくることができます。特に［リピートグリッド］は、コンテンツをいくつも並べては直すことの多いワイヤーフレーム作成の本当に強力な味方です。 なお今回は、ワイヤーフレームのラフスケッチが存在する状態からの作業を想定しています。このように、アイデアレベルのデザインを、実際にデバイスの画面で確認しながら形にするにはXDは最適のツールです。もちろん、ゼロからXDを使ってワイヤーフレームを試行錯誤するのもオスス
こんにちは！ 7月に入社したデザイナーの赤沼です！ 皆さんは「Adobe XD」使いこなしていますか？ ニジボックスでは社内に専門のSlackチャンネルもあるほど、Adobe XDは活用されています。 その中でよく話題に出るのが「プラグイン」についてです。 「このプラグインが良かった！」 「この問題を解決できるプラグインはありませんか？」などなど。 そこで今回、 「プラグインが多すぎてどれから入れたらいいのかわからない‼︎」という方に向けて、 おすすめ無料プラグインをカテゴリーごとに紹介します！ Adobe XDプラグインのインストール方法 Adobe XDのプラグインをインストールする方法は２つあります。 Adobe XD内のプラグインパネルから直接インストール Web上からダウンロードしたものをインストール 1. Adobe XD内のプラグインパネルから直接インストール Adobe X
こんにちは！ちづみ(＠098ra0209)です。私は小学校教員から現在はフリーのwebデザイナーとして活動しています。 今回はwebデザインの独学方法として、サイト模写の具体的な方法を記していきます。 なぜ模写がいいのか 「綺麗だな」「見やすいな」と感じるデザインにはデザインの基礎がしっかり導入されているからです。 プロの方の作ったサイトを模写することで、デザイナーにとって大切な「観察力」を上げ、デザインの観察を通して多サイトの共通部分を見出し、より具体的な数値や特徴に落としこむことでそれをそのまま実務に生かすことができます。 まねして作ってその特徴をとらえていくことによって早く確実にwebデザインに必要な力がつきます。 まず模写するサイト ではどんなサイトを模写しようと考えた時に私はまずコーポレートサイトの模写をおすすめします。 理由は２つあって１つは私自身、お仕事で作るものはコーポレー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く