【初心者向け・実践】Adobe XD・Webデザインの作り方。 アニメーションを使用したモックアップの作り方の基本。

Web制作の提案時に使える、XDを使用したスライドショー。モックアップの作り方。

今回は、AdobeXDを使ったWebデザインの基本的な作り方を解説していきたいと思うんですが、

TOPページのデザインをする時に、よくあるケースとして、

ファーストビューのメインビジュアルにスライドショーを入れるということが比較的よくあると思いますので、コーディング前に、デザイン提出の段階で、スライドショーの完成イメージをモックアップとして作成する簡単な方法を解説していきたいと思います。

 

この方法を覚えると、デザインをクライアントに見せる時に、動きのイメージが共有できますので、エクセルやパワーポイントなどで、パンパンと画像を貼って提出するよりも、より完成イメージが伝わりやすくなると思いますので、皆さんもよかったら、実際の案件で、ぜひ試してみてください。

今回は、フェードインアウトと、左右にスライドする2つのパターンの作成方法を紹介させていただきます。

この記事を書いた人
KEiSoN★
スカイゴールド株式会社 代表取締役 / クリエイティブディレクター/webデザイナー

2009年1月よりフリーランスのディレクター/Webデザイナーとして活動しながら、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
現在は主に東京を中心にしながら、 タイ・バンコクを年間4,5回ほど往復しながら活動中。
中小企業向けのWebブランディング・デザイン、Wordpressのオリジナルテーマ開発・オウンドメディア構築が得意。
最近は、Shopify構築にも携わっている。
国内外の様々な価値観・デザインに接触することで、幅広いクリエイティブや臨機応変にアイデアを提供する。

アーカイブ