WEB【春夏秋冬の色】イメージカラーサンプル(XDファイル無料公開) この記事では春夏秋冬の各々のイメージを連想させる色をまるっと紹介します。カラーコードの詳細情報も載っけていますがXDファイルを無料で配っていますので、そっちで確認する方がお勧めです。2020.09.132023.02.06WEB
Tool/App自動でメインカラーと相性の良い配色パターンを抽出してくれるツール 今回はWEBデザインや印刷デザインなどで色の組み合わせで迷った時に役立つ、自動で相性の良い配色パターンを作成してくれる神ツールを紹介します。2020.09.112022.11.13Tool/App
Programming【コピペOK】お洒落な引用デザイン10選!! 今回はblockquoteを使った引用のデザインをおしゃれに表現したCSSデザインを10選紹介します。2020.09.092023.01.03Programming
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
WEBXDでくるっと回転するアニメーションを作成する方法 今回はXDを使ってオブジェクトがくるっと回転するアニメーションの作成の仕方を紹介します。 アニメーションはプロトタイプを利用すれば簡単なのだが、回転アニメーションに関しては若干癖のある作り方です。ただやり方を理解すれば超簡単に作成できます。2020.07.262023.02.06WEB
WEBXDで実際に押せるラジオボタンを作る方法 今回は、Adobe XDを使ってお問い合わせフォームなどにあるラジオボックス(実際に押せる)を作成する方法を紹介します。コンポーネントの機能を使い実際に押せるボタンを表現します。この機能を使いこなせば、一枚の絵としてのワイヤーフレームだけではなく、実際にユーザーがアクションを起こした際の見え方も表現する事ができる様になります。 一つレベルの上がった指示が出せる様になるので、WEB制作やアプリ製作者は覚えておきましょう。2020.07.232023.02.06WEB
WEBXDの使い方まとめ│初心者〜中級レベル:目指せ完全網羅!! この記事はXDの基本的な使い方〜ちょっとした応用を色々とまとめた一覧記事です。 この記事を全て読み進めていく事で、初心者の方がXDでワイヤーフレームの作成が出来る様になる様なイメージで記載していきます。そして現場でも使えるレベルを目指していきます。2020.07.152023.02.06WEB