Webデザイン49件
-
【Adobe XD】ハイパーリンクを使って外部リンクを設定する方法を解説
みなさんこんにちは。しゅん（@shun_webdesign）です。 今回はAdobe XDでハイパーリンクの設定方法について紹介します。 ハイパーリンクを設定することでエンジニア、コーダーにリンクの指定箇所がわかるように …
-
【Adobe XD】たったコレだけ！ページ内にリンクを設定してスクロールさせる
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 今回はAdobe XDでできるアンカーリンクの設定方法を紹介します。 アンカーリンク（ページ内リンク）を設定することで任意の位置までス …
-
【Adobe XD】ステート機能を使ってハンバーガーメニューを作ってみよう
みなさんこんにちは。しゅん（@shun_webdesign）です。 今回はAdobe XDでハンバーガーメニューを作りながら、「ステート」について解説します。 ステートとは？ ステートとはWeb上のパーツにおける「状態」 …
-
【Adobe XD】普通とはすこし違う！全画面スクロールのチュートリアル
みなさんこんにちは。しゅん（@shun_webdesign）です。 Adobe XDではコードを書かずとも、プロトタイプ機能を使ってリッチな表現を手軽に作ることができます。 今回は以前、SNSに投稿したXDのみで作成した …
-
【Adobe XD】簡単！ぼかし効果を使う二つの方法
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 近年Webデザインでトレンドとされたグラスモーフィズムは聞いたことありますか？ 背景をすりガラスのようなぼかしが効いているのが特徴です …
-
【Adobe XD】知ってた？3D変形をつかって立体的な表現を取り入れるコツ
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 近年は動きを取り入れたWebデザインが多く存在し、動きをデザインするという考えが進みつつあります。 そこで今回はAdobe XDの「3 …
-
【Adobe XD】保存版これだけ見とけば大丈夫！今から使えるTipsまとめ
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 今回はこれまで紹介してきたXDの記事をまとめました。 この記事は新着記事が増え次第随時更新していきますので、ゆっくり見たいという方はブ …
-
【Adobe XD】意外と簡単にできるシンプルなパスを使った活用術5つ
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 今回はXDを使ったパスの使い方について紹介します。 パスを自由自在に扱う パスの使い方を知ることでXDで表現できる幅が広がります。 ツ …
-
【Adobe XD】スワイプ操作でキャラクターアニメーションを作る方法を解説
みなさんこんにちは。しゅん（@shun_webdesign）です。 先日、XDのみを使ったキャラクターアニメーションを作ってみました。 本日はこちらのアニメーションをどのようにして作ったのか紹介します。 こ …
-
【Adobe XD】簡単3分で作れる！ローディングアニメーション
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 先日公開したこちらのXDアニメーションの記事について大変多くの方から反響がありました。 しかし、、 と思った方は少なくなかったと思いま …