【簡単】Adobe XD『点線（破線）・波線・実線』作り方｜枠線・太さ

※当サイトには一部宣伝が含まれます。

ゆうけん

現役フリーランスWebデザイナー
Web制作の最高月収100万超
Twitterフォロワー2,000人超
毎月10万円超のブログ収益

Adobe XDの点線（破線）、波線の設定方法ってどうすればいいの・・
できれば最短で操作方法を身につけたいな・・

こんな悩みや不安を抱えている方に向けて記事を書きました。

また、XDを初めて使う人でもわかりやすく解説していきます。Adobe製品を使うのが初めての方も難しい操作は一切ないので安心してください。

ちなみに、Adobe XDを使ったお仕事として代表的なWebデザイナーのお仕事は下のように明記されています。

具体的な仕事内容をまだ知らない方は目を通しておきましょう。

【引用】

企業、学校、官公庁などがインターネット上に設けたWeb（ウェブ）サイトの企画・デザイン・制作を行う。Webクリエイターとも呼ばれる。小さなサイトの場合は一人ですべてをこなすこともあるが、企業などが作成する数百ページにも及ぶサイトの場合などは、ページのデザイン、画像の作成、サイト制作の進行管理など、分業して制作を行う。

出典：厚生労働省>職業情報提供サイト>Webデザイナー

この記事をご覧になっているということは、Webデザイナーとして就職または独立したいと考えているかと思います。

そんな方のために現役Webデザイナーの筆者が事前に知っておくべき知識を記事にまとめたので、後で「知っておけばよかった…」となる前に読んでおきましょう！

【末路】「Webデザイナーはきついし病む」１５の真実

無理？「実務未経験でWebデザイナー就職は厳しい」３つの理由

Webデザイナー執筆。Webデザインスクールは無駄？３つの理由と解決策

現実。「Web制作の副業はもう稼げない」8つの真実｜現役Webデザイナーが解説

30人を調査！Webデザイナーになれなかった・諦めた人の共通点3つ【解決策あり】

【超簡単】Adobe XD『点線（破線）・波線・実線』作り方｜塗り・太さ・長さ・間隔

XDで点線（破線）・波線を設定できるようになれば、ボタンやテキストボックスなどあらゆるオブジェクトに凝ったデザインを付けることが可能になります。

実際に操作方法を見てみるとわかりますが、XD画面にあるパネルのボタンを数回のクリックするだけで完了です。

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

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

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

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

Adobe「コンプリートプラン」できること・値段・インストール手順｜学生必見

【動画学習】オブジェクトの線（点線・実線・波線）の設定

【Adobe XD Trail】オブジェクトの線（点線・実線・波線）の設定

値段

(5.0)

学習しやすさ

(4.5)

わかりやすさ

(4.5)

熟練度

(4.0)

初心者向け

(5.0)

オススメ度

(5.0)

総合評価

(4.5)

この講座のポイント

レッスン
全１講座

値段
無料

言語
日本語音声

この講座の特徴

この講座では、XDの『線（点線・実線）』の設定方法を学習できます。基本的な操作方法はもちろん、実際に手を動かして『点線（破線）』や『実線（シンプルな線）』をオブジェクトに描いていく実践的な内容も含まれています。

線を自在に作れるようになれば、ほんの数秒の簡単操作であらゆる線を使った凝ったデザインが作れてしまいます。

実際にこの講座を見てみるとわかりますが、基本的には『クリック』だけで完了です。

波線の作成手順については下記ドキュメント記事で習得してみてください！

参考波線（曲線）の作成手順｜描画ツールとテキストツールの操作アドビヘルプセンター

注意

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

線(点線・実線)の設定手順

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

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

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

【テキスト学習】オブジェクトの点線（破線）の設定手順 | 画像で解説

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

①オブジェクトを選択

②プロパティインスペクタから「線」を有効化

③線の設定項目を変更

サイズ：線の太さを指定
線分：点線の長さを指定
間隔：点線の間隔を指定
a：カラーを指定
b：線の位置を指定
c：線の端の形状を指定
d：パスの結合部分の形状を指定

④枠が点線のボタンが完成

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

Adobe「コンプリートプラン」できること・値段・インストール手順｜学生必見

【学習の次は案件獲得】現職おすすめの求人サイトご紹介

実務は未経験だけど、まず仕事をしてみたい！という方には下で紹介している求人サイトがおすすめ◎

副業・フリーランス案件を多く扱っているサイトなので、わざわざ営業をかけなくても仕事に困りません。

クラウドテック

求人数

(4.0)

求人の質

(5.0)

サポート

(4.0)

信頼性

(5.0)

実績

(5.0)

おすすめ度

(5.0)

総合評価

(5.0)

クラウドテックのポイント

対象
Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター

公式サイト
クラウドテック公式ページ

特徴

クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
実務未経験者OK
登録社数14万社
フリーランスや副業案件がケタ違いに多い
報酬額や勤務地・職種など希望が通りやすい
Web制作・コーディングの高単価案件が多い
リモートワーク案件数は業界トップクラス
最短3日で案件獲得できる

現役Webエンジニアの筆者がイチオシの求人サイト！副業・フリーランス向けWeb制作案件なら確実に業界トップクラス！営業をかけずに案件獲得できる近道と言えます。しかも、完全無料です。

（求人サイトの後ろ盾があることで、損害賠償◯万円などのリスクも軽減できるので初心者には安心）

\ 実務未経験OK・リモート案件数トップクラスの求人サイト /
クラウドテックに無料登録 >>

もっと詳しく知りたい方は

>> クラウドテックの評判は？未経験OK？口コミ・メリット公開をご覧ください。

まとめ

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

この記事のまとめ

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

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

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

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

上で紹介したUdemy講座で本格的に学習を開始する前に、プラン料金を慎重に比較していきましょう。

【Webデザイナー必須】Adobeおすすめ料金プランを徹底比較。｜比較表あり

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

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

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

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

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

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

【ロードマップの構成】

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

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

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

以下Twitterでの評判

web制作で稼ぎたい”未経験者”は全員見てほしい。

あとは実行するだけ。こんなに詳細に教えてくれるゆうけんさんに感謝です😭

本当に稼げるのか、未経験の僕が今日から発信していきます！
まずAdobeCCの契約・Udemy教材購入は完了した！ https://t.co/d4Kx5bZdLs

— マル│デザイン×マーケ (@tytmtytm) April 27, 2021