【ゼロから月30万】Webデザイン独学ロードマップ ▶︎

【最新版】Adobe XD『スクロール』を完全制覇 | 縦横・スライダー

本記事では現役Webデザイナーの筆者が『Adobe XDでスクロールを作成する方法』を、XDを初めて使う人でもわかりやすく解説していきます。

縦横はもちろん、マップなどで使える縦横を組み合わせたスクロール、画像のスクロールなどにも応用できます。

 

この記事の信頼性(筆者はこんな人)

  • 現役Webデザイナーが執筆
  • 継続して月収80万円超のフリーランス
  • 完全未経験から独学でWeb制作スキルを習得
  • TwitterにてWeb制作のメンター経験多数(→@twinzvlog_yk
  • 認定ランサー(ランサーズ最高ランク)

 

こんな悩みや疑問を解消できる記事内容になっています。

ふたご

  • Adobe XDのグリッドってどうやればいいのかな・・
  • できれば最短で使い方を身につけたいな・・

このような疑問は全て払拭できます

 

Adobe XDを無料で本格的に学習したい方は、筆者が3ヶ月かけて作った独学ロードマップで一緒に転職・独立を勝ち取りましょう!

【ゼロからのAdobe XD】最短で習得する無料学習ロードマップ

 

【失敗しない】『スクロール』を完全攻略 | 水平・垂直・スライダー

Adobe XDで実現できるスクロールには3種類あり、『水平方向のスクロール』『垂直方向のスクロール』『水平・垂直を組み合わせたスクロール』をスクロールグループ機能で誰でも簡単に作成できます。

 

実際のWebサイトに設置されている画像スライダーや利用規約などと同じ挙動のスクロールをデザインカンプの段階で再現できる画期的な機能なのです。

 

おまけとして、アンカーリンクを使ってグローバルメニュー(ヘッダーメニュー)のボタンクリックでページ内スクロールを再現する方法も載せておきますのでお楽しみに!

本章は動画とテキストの両方で『スクロール作成』手順を学習できるように構成されているので、動画とテキストのどちらかお好きな方で学習してみてください。

ご紹介する動画はAdobe公式チュートリアル動画なので痒い所に手が届く内容となっています。(日本語音声)

テキストでサクッと空き時間に学習したい方は動画紹介の直後に手順を記載しているのでご覧ください。

 

まだAdobe XDのインストールが済んでいない方は学習前に下の記事からインストールしておきましょう!(今なら14日間の全額返金保証付き)

【失敗しない】Adobeコンプリートプランのインストール手順|Creative Cloud

 

【動画学習】スクロールグループの作成手順

【Adobe XD Trail】スクロールグループの作成

値段
(5.0)
学習しやすさ
(5.0)
わかりやすさ
(4.5)
熟練度
(4.5)
初心者向け
(5.0)
オススメ度
(5.0)
総合評価
(5.0)
この講座のポイント

レッスン
全2講座

 

値段
無料

 

言語
日本語音声

 

この講座の特徴

この講座では、XDの『スクロール』の作成方法を学習できます。スクロールグループ機能を使って水平・垂直、それらを組み合わせスクロールを自由自在に再現していきます。

スクロールグループ機能はまだまだ新しい機能で、現役のWebデザイナーでも使いこなせない人が多いので爆速で身につけて追い越しちゃいましょう!

 

公式ドキュメントも参考にしてみてください。

> Adobe XD 『スクロールグループ』の作成方法

 

注意

この講座はAdobe XDを使って学習していくので、講座を受講する前にAdobe公式ページからXDをインストールしておきましょう。

 

スクロールグループの作成方法

 

アンカーリンクの作成方法

 

 

【テキスト学習】スクロール作成手順 | 画像で解説

チュートリアル動画ではなくテキストでサクッと学びたい方は下の手順に沿って進めてみてください。

水平(横)スクロール

①オブジェクトを選択

 

②プロパティインスペクター(画面右のパネル)の赤枠で囲われたアイコンをクリック
ショートカットキー:⬆︎⌘H(macOS)または Shift+Ctrl+H(Windows)

 

垂直(縦)スクロール

①オブジェクトを選択

 

②プロパティインスペクター(画面右のパネル)の赤枠で囲われたアイコンをクリック
ショートカットキー:⬆︎⌘V (macOS)または Shift+Ctrl+V(Windows)

水平・垂直(縦横)組み合わせたスクロール

①オブジェクトを選択

 

②プロパティインスペクター(画面右のパネル)の赤枠で囲われたアイコンをクリック
ショートカットキー:⬆︎⌘D (macOS)または Shift+Ctrl+D(Windows)

 

スクロール作成が簡単にできましたね!

学んだことはXDで実際に手を動かして確実に定着させていきましょう!

【失敗しない】Adobeコンプリートプランのインストール手順|Creative Cloud

 

【完全無料】Adobe XD公式チュートリアルで『使い方』を完全マスター

超優秀なプロのWebデザイナーが未経験者向けにわかりやすく解説してくれるので筆者自身もかなり助けられました。あのAdobeの公式チュートリアルで、完全無料とは思えないほどのクオリティ。

有料級なのに完全無料』かつ『XD専用チュートリアルサイト』なので、初見の方は『え、これが無料..!?』と少し引くくらい有益です。

他のAdobeチュートリアルとは全くの別物です。とにかくまずは見てください。

 

【Adobe XD】公式チュートリアル 

 

『教材には極力お金をかけたくない』

『まずは無料で学んでみたい』

『超初心者向けの教材で学び始めたい』

 

こんな人のための無料教材です。完全初心者の方が「Webデザイン」の基礎を身につけるには十分すぎる内容なので、Adobe XDをインストールしたらまずは下記の『公式チュートリアル動画(Adobe XD Trail)』から学習を開始しましょう!

 

【Adobe XD】公式チュートリアル動画(Adobe XD Trail)

【Adobe XD】公式チュートリアル動画(Adobe XD Trail)

値段
(5.0)
学習しやすさ
(5.0)
わかりやすさ
(5.0)
熟練度
(5.0)
初心者向け
(5.0)
オススメ度
(5.0)
総合評価
(5.0)
この講座のポイント

レッスン時間
全111講座

 

値段
無料

 

言語
日本語音声

 

この講座の特徴

有料商材2万円相当の内容。正直この講座で学習するデメリットも挙げたかったのですが、特にありません。無料でここまでXDを使いこなせるようになる教材は他では見たことがないです。ちなみに日本語音声で学べます。
Adobe XD Trailは、XD内のツールの使い方からプロジェクトの作成までの一連の流れを全て網羅しているため他の教材にお金をかける必要はありません。
また、Adobe XDを一度も触ったことのない方が何も前提知識なしでスキルを習得できる内容となっています。
まず失敗はしません。

 

筆者のレビュー

筆者自身もこの公式チュートリアル動画を視聴してXDの基礎を習得しました。
今ではWebデザイナーとして月収80万円以上を稼いでいますが、XDの基礎はこのチュートリアルのみで学習し、全く問題なく案件をこなせています。
確かにチュートリアル動画を学習しただけで現役Webデザイナーと同等のスキルを習得するのは難しいですが、基礎はなるはやで身につけて実践でスキルを磨いていけば高度なスキルは後から必ずついてきます。
大丈夫です。このチュートリアルを最後までやり抜けば確実にXDの基礎は習得できます。

 

MEMO

筆者はチュートリアル動画に加えて公式ドキュメント教材も併せて学習しました。Adobe XDチュートリアル動画で学習しながら読むとより理解が深まりますよ。

 

 

注意

この講座はAdobe XDを使って学習していくので、講座を受講する前にAdobe公式ページからXDをインストールしておきましょう。

 

【Adobe XD】公式チュートリアル 

 

まだAdobe XDのインストールが完了していない方は早速『Adobe XD (1,180 円/月)』で自分の思うがままにデザインを作っていきましょう!

 

Adobe XD を学習する

 

まだAdobe XDのプラン選びでどれにしようか悩んでいる方もいるかと思います。

そんな方は下の記事で得する『プラン選び〜インストール』までを徹底解説しているので是非参考にしてみてください。

【失敗しない】Adobe XD『プラン選び』と『インストール方法』

 

まとめ

最後まで読んでいただきありがとうございます。

 

この記事のまとめ

 

1. 【失敗しない】『スクロール』を完全攻略 | 水平・垂直・スライダー

【動画学習】スクロールグループの作成手順

【テキスト学習】スクロール作成手順 | 画像で解説

 

2. 【完全無料】Adobe XD公式チュートリアルで『使い方』を完全マスター

【Adobe XD】公式チュートリアル動画(Adobe XD Trail)

 

いかがでしたでしょうか?

初心者の方が絶対に失敗することなく、Adobe XD『スクロール作成』をマスターできるよう書かせていただきました。

少しでもお役に立てたのなら本望です。。

もし何かご不明点や『ひとりだと挫折してしまうから、メンターとしてサポートしてほしい』という方がいましたら、TwitterからDMをいただければご相談に乗ります。

 

【完全無料】Adobe XD公式チュートリアルを使って本格的に学習を始めたい方は、下の記事で詳しく紹介しているので参考にしてみてください。(筆者は初見で『これが無料…!?』と仰天しました)

【絶対に損しない】Adobe XD公式チュートリアルで無料学習|Adobe XD Trail

 

Webデザイナーに必須のAdobeツールは『Adobe XD』の他にも 『Illustrator / Photoshop / Dreamweaver』があります。現役Webデザイナーの筆者も当然使っています。

(コンプリートプランならこれら全部が使い放題です)

しかも、その全てが無料で学習できます。
これ実はあまり知られていない情報なのであなたはかなりラッキーだと思います。。!

 

上で紹介したチュートリアルで学習を開始するために、まずはプラン料金を慎重に比較していきましょう。

【知らないと損する】Adobe製品の『料金プラン』を徹底比較 | Webデザイン

 

Web制作学習で挫折した経験はありませんか?

 

『Webサイトをゼロから作って稼いでいきたい』

『3ヶ月くらいで最低でも月10万円は稼ぎたい』

『営業とかやったことないけどWeb制作だけで稼いでいきたい』

 

 

こんな方のためにWeb制作で月80万超稼ぐ筆者が自身の経験を踏まえて【失敗しない】Webデザイナー(Web制作)独学ロードマップを執筆しました。

 

 

少額の投資で3ヶ月後には月10〜30万稼げるよう設計してあります。
(学習教材やAdobeなど最低限のコストはかかります)

 


ロードマップの構成

  • Web制作に特化した『確実に身に付く』学習方法
  • Web制作会社が喰いつく理想的なポートフォリオの作成手順
  • 返信率10%以上!Web制作会社へのメール営業

 

有料公開も考えましたが「Webデザイナー(Web制作)はまだまだ稼げることを証明したい!」という思いが強く、期間限定で無料公開をすることにしました。

 

 

2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ!

 

以下Twitterでの評判

 

 

 

この記事を読んでいる時点であなたは相当な熱意と行動力をお持ちなので、確実にスキルを習得できると断言します。独学だろうが未経験だろうが関係ありません。あとはやるだけです。

 

【3ヶ月で10万稼ぐ】本物のWebデザイナー独学ロードマップ