連載

Adobe XDでモバイルファーストのWebデザイン入門

佐藤実可子

Adobe XDでモバイルファーストのWebデザイン入門 第6回: XDからの画像書き出しと、リモートの相手とデザインを共有する方法

前回は、作成した静的なデザインに、ページ遷移やホバーをはじめとする動的な表現を追加する手順を紹介しました。今回は、できあがったデザインをXDの共有機能を使ってチームのメンバーやクライアント、そして開発者に共有する方法と、...

佐藤実可子

Adobe XDでモバイルファーストのWebデザイン入門 第5回: 画面間の遷移や操作方法をプロトタイプを使って表現する

前回は、モバイル向けデザインからPC向けのデザインを作成するのに役立つAdobe XDのレイアウト機能の使い方を紹介しました。今回は、デザインモードからプロトタイプモードに切り替えて、ページ遷移やホバーなどの動きをつけて...

佐藤実可子

Adobe XDでモバイルファーストのWebデザイン入門 第4回: レイアウト機能を使いこなしてレスポンシブデザインを効率的に作成!

前回は、アセットパネルでスタイルを管理して効率よく見た目を仕上げる方法と、複数箇所で使用する要素をコンポーネントとして扱うメリットを紹介しました。今回は、レスポンシブデザインには欠かせない、サイズの異なる画面へのデザイン...

佐藤実可子

Adobe XDでモバイルファーストのWebデザイン入門 第3回: アセットパネルを活用してスタイルガイドをつくる!

前回は、Adobe XDを使ってワイヤーフレームを作成しました。今回は、画像やスタイルを適用して、ページの見た目を仕上げていきます。さらにサイトのスタイル(カラー、フォント)と、繰り返し使われる要素を「アセットパネル」に...

佐藤実可子

Adobe XDでモバイルファーストのWebデザイン入門 第2回: ワイヤーフレームをサクサクつくろう!

本連載の第1回では、Adobe XDを使い始める前に知っておきたい基礎知識をご説明しました。第2回からは、実際にWebサイトのデザインに取り掛かります。制作するのは【架空のミュージシャンのWebサイト】です。 この記事で...

佐藤実可子

Adobe XDでモバイルファーストのWebデザイン入門 第1回: デザインする前に知っておきたいワークスペースの使い方とファイル管理

Adobe XDはWebやアプリなどデジタル体験デザインのためにアドビが提供している最新のデザインツールです。「考える速度でデザインする」をテーマに開発されただけあって、軽くて操作しやすいのが特徴で、無料で使えるプランも...