WEBXDを使ってHTMLで言うaタグリンクを表現する方法 今回はAdobe XDのコンポーネントを使ってHTMLで言うaタグリンク(テキストリンク)を作成する方法を紹介します。2020.12.232023.02.06WEB
WEBXDでサイトマップを作成するのが便利で分かり易い 最近、私はAdobe XDでWEBサイトのサイトマップを作成する事が多いです。今までExcelやテキストエディタでテキストベースでサクッと作っていました、XDを活用する事でより繋がりが視覚的に分かり易くなり、導線のイメージが沸き易く良いなと感じています。2020.10.302023.02.06WEB
WEB【超簡単】XDでアンカーリンクを作成する方法 今回はAdobe XDでページ内のアンカーポイントを行き来するアンカーリンクを作成する方法を紹介します。 アンカーリンクは、WEBサイトでは結構多用する要素なのでXDで方法を覚えておけばワイヤー作成時に分かりやすくなり、作業者との認識違いも減り作業効率が上がります。2020.09.222023.02.06WEB
WEBXDでスライド式メインビジュアルを表現 この記事ではAdobe XDでWEBサイトで良くあるスライダー式のメインビジュアルを表現する方法を紹介します。XDを使用すれば約5分と超簡単にスライダーを表現する事が出来ます。 ディレクション時や先方や外注先にスライダーの動きを伝えたい時などに便利なので是非覚えてみて下さい。2020.09.202023.02.06WEB
WEBXDで良くあるグロナビを表現(無料サンプル) この記事ではAdobe XDでWEBサイトで良く使われているグローバルナビゲーションのUIデザインの作成の仕方を紹介します。 またより理解しやすくするために、今回紹介するサンプルのXDデータも配布しています。 実際のデータを確認して実際にいじってみるのが一番理解できるかと思います。2020.09.192023.02.06WEB
WEB【春夏秋冬の色】イメージカラーサンプル(XDファイル無料公開) この記事では春夏秋冬の各々のイメージを連想させる色をまるっと紹介します。カラーコードの詳細情報も載っけていますがXDファイルを無料で配っていますので、そっちで確認する方がお勧めです。2020.09.132023.02.06WEB
WEBXDで3Dの地球オブジェクトと都市名をリンクさせてピン立て 今回は、Adobe XDで3D調の地球オブジェクトと「Paris」や「New York」などの都市名をリンクさせて、地球がリアルタイムで回転し該当部分にピン立てしてくれるアニメーションを作りました。2020.08.232023.02.06WEB
WEB【超簡単】XDのコンポーネントでタブ切り替えを表現 今回はAdobeXDでWEBサイトに良くあるあるタブで切り替える要素を表現する方法を分かりやすく紹介します。 WEBサイトでは結構ある要素なので、XDで表現できると便利な場面もあるので基本的な部分は頭に入れておきましょう。2020.08.192023.02.06WEB
WEBXDで超簡単に3Dギャラリーを作成(ミュージックアプリ風) 今回はAdobe XDで音楽サイト風の3Dギャラリーを作成してみました。 最近流行っているUI/UXなので基本となる考え方とデザイン表現の見本になって頂ければ幸いです。2020.08.162023.02.06WEB
WEB【XDの基礎】プロトタイプの使い方:サイトのページ遷移の作成 今回はAdobe XDのプロトタイプの基本的な使い方を紹介します。 インターネット上にある「プロトタイプの使い方」といった記事は基本的にアニメーションが追加されていたり、デザインが凝っていたりで正直分かりづらいなと感じたので、当サイトでは超シンプルなサンプルを使って、最も基本となるページ遷移のつなぎ方を紹介します。2020.08.012023.02.06WEB
WEBXDのオーバレイでライトボックス(ポップアップ)を表現する 今回はAdobe XDを使って、WEBでよく使用されるライトボックス(ポップアップ)の表現の仕方を紹介します。 ライトボックスはCSSのz-indexとpositionプロパティでコーディングされ、画面を覆う様(オーバーレイ)に表示されるのが一般的な方法です。 今回はなるべくWEBの挙動に近いオーバーレイをXDで使って表現します。2020.07.292023.02.06WEB
WEB【超簡単】XDでドロップダウンリスト作成する方法 今回は、Adobe XDを使ってスクロール可能な多項目あるドロップダウンリスト(プルダウンメニュー)を作成する方法を紹介します。2020.07.272023.02.06WEB