TechAcademy（テックアカデミー） Webデザインコース Webデザイン Photoshop Photoshopで矢印を描画する方法を現役エンジニアが解説【初心者向け】
icon
icon
Photoshop

Photoshopで矢印を描画する方法を現役エンジニアが解説【初心者向け】

初心者向けにPhotoshopで矢印を描画する方法について解説しています。ラインツールを使うことで矢印の描画を行うことができます。基本の矢印の作成方法と、作成後に矢印の種類を変更する方法を見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Photoshopで矢印を描画する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。

なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。

 

田島悠介

今回は、Photoshopに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

矢印を描画する方法について詳しく説明していくね！

大石ゆかり

お願いします！

目次

1時間でできる無料体験！

 

矢印を描画する方法

  1. ツールバーのラインツールアイコンを選択します

  2. オプションバー の歯車アイコンをクリックしパスオプションパネルを開きます
  3. パスオプションパネルの「矢印」にある「開始点」または、「終了点」にチェックをいれ矢尻の位置を指定します

  4. カンバス上の矢印を表示したい位置をドラッグし矢印を描画します

 

[PR] Webデザインで副業する学習方法を動画で公開中

矢印の種類を変更する方法

  1. オプションバー の歯車アイコンをクリックしパスオプションパネルを開きます
  2. 「へこみ具合」の値を調整し、矢尻角度を変更します

  3. カンバス上の矢印を表示したい位置をドラッグし矢印を描画します

 

矢印を変形する方法

  1. パス選択ツールをクリックします
  2. パス選択ツールで、矢印をクリックしアンカーポイントを表示します

  3. アンカーポイントを移動したり、削除することで矢印を変形します
  4. アンカーポイントに変更を加えると「ライブシェイプがパスに変わります。」というメッセージが表示されます
  5. 「はい」をクリックし、変形を確定します

また、「編集」ー「自由変形」または「変形」を使い拡大縮小などの変形をすることもできます

 

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困ったときに、質問や相談できる相手がいるため挫折しなかった
  • ・プロとして必要なスキルのみを深く学べたので無駄がなかった
  • ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

まとめ

素早く簡単に矢印を描画したい場合、ラインツールを使った矢印の作成はとても便利です。

 

監修してくれたメンター

メンターOM

Webデザインの勉強のためロサンゼルスに留学。
その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。

現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、
アメリカだけでなく日本からのWeb制作も請け負う。
また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。

現役デザイナーに毎日チャットで質問することができます。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

Photoshopでトーンカーブを使って色調補正する方法【初心者向け】現役デザイナーが解説

Photoshopでトーンカーブを使って色調補正する方法を初心者向けに解説した記事です。 トーンカーブを使用すると、画像の色や明るさを細かく調整できます。...
Photoshop

Photoshopで自由変形を使う方法【初心者向け】現役Webデザイナーが解説

Photoshopを使っていて、画像の大きさや角度を簡単に編集できればいいのにと思ったことはないでしょうか？ 今回はそんな時に便利な、Photoshopの...
Photoshop

Photoshopでサイズを指定して画像を切り抜く方法を現役エンジニアが解説【初心者向け】

Photoshopでサイズを指定して画像を切り抜く方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 なお本記事は...
Photoshop

初心者でもすぐにできる！Photoshopで円を描く方法

初心者の方でもPhotoshopの使い方がわかる記事です。 今回のテーマは「円を描く方法」です。 Photoshopの線で丸を書くこともできますが、...
Photoshop

Photoshopでカスタムシェイプを作成する方法【はじめてでもできる！】

Photoshopでは、「カスタムシェイプの定義」を行うことで、独自に作成した図形をいつでも呼び出して使えるようになります。 本記事では、初心者向けにその...
Photoshop

Photoshopで写真をミニチュア風に加工する方法【初心者向け】

Photoshopでは元の写真を加工して他の写真のようにすることができます。今回ご紹介するのはミニチュア風の加工です。 ミニチュア風にするために、「色調補...
Photoshop

あわせてよく読まれている記事

画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説

今回はCSSで矢印を作る方法を説明します。 今まで画像を使って矢印をつけていたという方も、自分で書けるようになっておくと見た目の調整がしやすいでしょう。 様々な形の矢印の作り方を紹介しているので、ぜひ参考にしてみてください。 目次 CSSで作る矢印アイコンの書き方 三角の矢印の作り方 「く」の字型矢印の作り方 上向き矢印の作り方 オーソドックスな大きな矢印の作り方 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   CSSで作る矢印アイコンの書き方 CSSで作る矢印アイコンについて説明します。 画像は使わずにCSSだけを使って矢印を作成することができるので参考にしてみてください。 また、CSSのスキルアップにも使えるので、CSSのスキルアップを目指している方は、ぜひオリジナルの矢印を作ってみましょう。   まずは、簡単に矢印の書き方を紹介する上で、左上から右下へのL字矢印を作ってみようと思います。 直角に曲がる矢印になります。 HTML <!DOCTYPE html> <html> 　　<head> <meta charset="utf-8"> 　　　　<title>CSS arrow</title> 　　　　<link rel="stylesheet" type="text/css" href="sample.css"> 　　<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> 　　</head> 　　<body> 　　<div class="arrow"></div> 　　</body> </html>   CSS .arrow{ position: relative; width: 200px; height: 50px; border-top: 8px solid #5bc0de; border-right: 8px solid #5bc0de; box-sizing: border-box; } .arrow::after{ content: ""; position: absolute; bottom: -14px; right: -17px; border-top: 14px solid #5bc0de;
CSS

Photoshopで自由変形を使う方法【初心者向け】現役Webデザイナーが解説

Photoshopを使っていて、画像の大きさや角度を簡単に編集できればいいのにと思ったことはないでしょうか？ 今回はそんな時に便利な、Photoshopの自由変形を使う方法を初心者向けに解説します。   目次 自由変形の使い方 自由変形の応用方法 ※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。   大石ゆかり 田島メンター！！画像の形を変えるとき、拡大縮小だけじゃなくてもっといろいろな変形をしてみたいんですが…… 田島悠介 そういうときは「自由変形」を使ってみよう。 大石ゆかり 自由変形っていうのはどういう機能ですか～？ 田島悠介 その名の通り、選択した対象に関するあらゆる変形を適用させることができる機能だよ。実際に触ってみよう。   自由変形の使い方 Photoshopの自由変形を使うことで、全体の仕上がりを見ながら画像の大きさや角度などを編集することができます。 まずは基本的な使い方を覚えておきましょう。     今回はこの画像を使用します。   青で塗りつぶしたレイヤー1の上に、切手の画像の入ったレイヤー2を作成します。   このレイヤー2は、切手の部分以外が透過の状態（キャンバスに何も描画されていない状態）になっています。 このレイヤー2を使って自由変形をしてみたいと思います。   上のメニューから「編集」→「自由変形」をクリックします。   すると、このようにポイントの付いた枠が表示されます。   左右のこのポイントを移動させると、水平方向に拡大・縮小します。   同じ要領で上下のこのポイントを移動させると、垂直方向に拡大・縮小します。   さらに角のこのポイントを移動させると、全体を拡大・縮小します。   また、このときCtrlキーを押すとカーソルの形が変化します。 この状態（Ctrlキーを押したままの状態）で右上の角のポイントを移動させてみます。   すると、他の3点はそのままで、動かしたポイントだけに沿って画像が変形しました。   この方法を使うと、平面の画像でも立体感・奥行きのあるような画像に編集することが可能です。   また、画像は回転することもできます。 ポイント以外の場所にカーソルを持っていくと図のような状態（両端に矢印のついた形）になります。 この状態でマウスを押したままにし、動かしてみましょう。   カーソルの動いた方向に向かって画像が回りました。 360°好きな方向に回転することができます。 自由変形の基本的な使い方は以上です。   田島悠介 自由変形からは、拡大縮小・回転というような普段よく使う機能もまとめて行えるよ。 大石ゆかり 画像変形に関する、ひととおりの動作が入ってるんですね。 田島悠介 特定のキーを押しながら操作したり、カーソルの形と機能が場所によって変わったりと少し操作が独特だけど、使いこなせればこれひとつで全部できるから便利だね。 大石ゆかり ちょっと練習してみたいです！ 田島悠介 それでは実際にどういうときに使えるか見てみよう。例えば画像同士や画像と文字を自然に合成したいとき、この自由変形が役に立つんだ。   [PR] Webデザインで副業する学習方法を動画で公開中自由変形の応用方法 この自由変形はどんな時に使えるのかを応用として最後に紹介します。   自由変形は、画像に文字を加工するときにも役に立ちます。 例えば、この画像の封筒の部分に文字を入れたいとします。 このままでは角度が合わなかったりはみ出したりします。   そこで、画像を見ながら文字列を自由変形します。   自由変形を使って加工した写真です。 このような編集は文字だけでなく、画像と画像を合成する際にももちろん有効です。   執筆してくれたメンター メンターOM Webデザインの勉強のためロサンゼルスに留学。 その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。 現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、 アメリカだけでなく日本からのWeb制作も請け負う。 また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。   田島悠介 文字を背景の要素に合わせて自由変形するんだ。拡大や縮小だけだとうまくいかないようなところでは必須になるね。 大石ゆかり 自然に文字が下の画像の中に入りましたね！ 田島悠介 画像を変形する前はできればレイヤーをコピーしておくなどして、失敗したときのために残しておこう。 大石ゆかり なるほど、気をつけます。ありがとうございました！   さらにPhotoshopで画像を加工したい場合は、Photoshopで画像を合成する方法も合わせてご覧ください。 [お知らせ]テックアカデミーでは初心者でもフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
Photoshop

JavaScriptでブロック崩しを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでブロック崩しを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ブロック崩しを作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Canvasとは Canvasとは、グラフィックやアニメーションを描画するHTML要素です。 JavaScriptで図形を描画して動かすことで、ゲームを作成することも可能です。 また、今回はCanvasを使ったブロック崩しの作成方法を紹介していくため、その使い方を学習していきましょう。   JavaScriptでブロック崩しを作成する方法 JavaScriptにはCanvasのAPI（canvasを操作する部品）が用意あります。 CanvasのAPIを使って四角や丸を書いて、動きの処理を作成すればブロック崩しが作成できるでしょう。 CanvasのAPIは下記の3つの手順で使えるようになります。 HTMLでcanvasタグを記述する JavaScriptでcanvasタグを取得する 取得したcanvasタグ（HTMLCanvasElement）のgetContextメソッドを呼び出す 今回作成するブロック崩しは3D（立体）ではなく2D（平面）であるたる、getContextメソッドの引数には2dを指定してください。 getContextの戻り値であるCanvasRenderingContext2Dから、図形を書くためのいろいろなメソッドを呼び出すことが可能です。   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう（サンプルコード） サンプルコードで下記の画像のようなブロック崩しを作成します。 HTMLでcanvasタグを記述 <canvas id="canvas" width="480" height="400"></canvas> JavaScriptで取得するためにidにcanvasという名前を設定しています。 CSSでcanvasタグの領域を黒くする canvas { background: black; } 実際には、この記述はなくても動作に影響はありません。 canvasタグの領域をわかりやすくするために黒くしています。   メインのJavaScriptのソースコードをみていみていきましょう。 let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); /******************** ボールの設定 ********************/ const BALL_COLOR = 'skyblue'; //ボールの色 const BALL_RADIUS = 10; //ボールの大きさ（半径） let ballX = canvas.width / 2; //ゲーム開始時のX軸（←→）の位置 let ballY = canvas.height - 30; //ゲーム開始時のY軸（↑↓）の位置 let xMove = 2; //X方向への移動量 let yMove = 2; //Y方向への移動量 /******************** 操作する板の設定 ********************/ const BAR_COLOR = 'blue'; //板の色 const BAR_HEIGHT =
JavaScript

Photoshopのワープで写真を変形させる方法を現役エンジニアが解説【初心者向け】

Photoshopのワープで写真を変形させる方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。   田島悠介 今回は、Photoshopに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ワープで写真を変形させる方法について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 ワープとは ワープで写真を変形させる方法 その他変形のためのPhotoshopの機能 まとめ   ワープとは Photoshopのオブジェクトを変形させる機能の１つです。ワープを適用すると自動的にパスとアンカーポイントが設定され、アンカーポイントの方向線を操作することで、オブジェクトを変形することができます。   [PR] Webデザインで副業する学習方法を動画で公開中ワープで写真を変形させる方法 画像を開きます。 ワープを適用するために画像レイヤーを複製します。複製する場合は、キーボードのCtrl＋jまたは、Command＋jを押します。 複製した画像レイヤーを選択した状態で、メニュー「編集」ー「変形」ー「ワープ」をクリックし、画像にワープを適用します。 ワープが適用されると画像の四隅にアンカーポイントが表示されます。 アンカーポイントを操作することで、画像を変形します。 キーボードのEnterまたはReturnキーを押すと変形が確定します。 オブジェクトを細かく変形する場合 メニュー「編集」ー「変形」ー「ワープ」を実行すると、上部のオプションバーに「分割」、「グリッド」、「ワープ」のオプションが表示されます。これらのオプションを使用することで、オプジェクトを細かく変形することができます。 分割 ー 垂直、水平、斜め方向にグリッドを自分で追加することができ、グリッドが交差する点にアンカーポイントが追加されます。 グリッド ー プレイセットを選ぶことで、縦横のグリッドを追加することができます。 ワープ ー プレイセットのスタイルを選択すると、自動的に変形が適用されます。 例えば、グリッド「5X5」を選択すると、碁盤目状にグリッドが表示され、グリッドの交差点にアンカーポイントが付きます。アンカーポイントが増えることで、より細かくオブジェクトを変形することができるようになります。   その他変形のためのPhotoshopの機能 メニュー「編集」ー「変形」では、ワープの他にも以下の変形機能が用意されています。 拡大・縮小 ー バウンディングボックスのハンドルの上にポインターを置くと、ポインターが両方向の矢印に変わります。その状態で、ドラッグするとオブジェクトを拡大縮小することができます。 回転 ー バウンディングボックスのハンドルの少し外側にポインターを置くと、ポインターが両方向に矢印がついたカーブに変わります。その状態で、ドラッグするとオブジェクトを回転させることができます。 ゆがみ ー バウンディングボックスのハンドルの上にポインターを置くと、ポインターが両方向の矢印に変わります。その状態で、垂直または水平方向に傾けることができます。 自由な形に ー バウンディングボックスのコーナーハンドルをドラッグすることで、自由な形に伸縮することができます。 遠近法 ー バウンディングボックスのコーナーハンドルをドラッグすることで、遠近法が適用されオブジェクトが３次元に存在するような外観にすることができます。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
Photoshop

Photoshopで三角形を描画する方法を現役エンジニアが解説【初心者向け】

Photoshopで三角形を描画する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。   田島悠介 今回は、Photoshopに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 三角形を描画する方法について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 多角形ツールとは 三角形を描画する方法 その他様々な図形の作り方 まとめ   多角形ツールとは Photoshopのカンバス上に、三角形や五角形などの図形を描画するためのツールです。星型の図形を描くこともできるので、多角形ツールを使うことで写真に簡単なデコレーションができます。 多角形ツールの使いかた ツールバーから「多角形ツール」を選択する カンバスをクリックすると「多角形を作成」ダイアログボックスが表示される 必要な値をダイアログから指定してOKボタンをクリック シェイプと呼ばれる多角形図形がカンバスに表示される   [PR] Webデザインで副業する学習方法を動画で公開中三角形を描画する方法 Photoshopで三角形を描画するには、多角形ツールで角数3の多角形を描画すればOKです。多角形を作成ダイアログボックスで「星」の項目にチェックを入れずにOKボタンをクリックします。 三角形描画時に「コーナーを滑らかに」にチェックを入れることで、おにぎり型の図形を描くこともできます。また、カンバスをクリックしたままドラッグすることで、予め大きさや図形の回転度合いを調整しながら多角形のシェイプを描画することもできます。   その他様々な図形の作り方 星型図形を作る 多角形ツールを使うことで、星型の図形を描画することもできます。こちらの写真は、角数5で「星」にチェックを入れた多角形を写真に付与した例です。 変形した多角形の図形を作る パス選択ツールを使うことで、描画済みのシェイプを変形させることが可能です。 「パス選択ツール」を選択 描画済みシェイプをクリックして選択すると、多角形の頂点が白丸で表示される 変形させたい頂点をクリックしてドラッグすると、引っ張ったように図形が変形する また、「パスコンポーネント選択ツール」を使うと、図形を選択して移動させることが可能です。選択状態でメニューの「編集＞パスを変形＞回転」により回転も可能ですので、描画したシェイプはベストポジションに調整していきましょう。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
Photoshop

グラフ描画ライブラリ！matplotlibの使い方【初心者向け】

今回は、Pythonのグラフ描画ライブラリであるmatplotlibについて解説します。 matplotlibを使うと、様々な種類のグラフを描画したり、イメージを表示したりすることができるようになります。 Pythonでグラフを描画するには、標準的なライブラリですので、この記事を参考に、matplotlibの使い方を覚えていきましょう。   なお本記事は、TechAcademyのAIオンライン講座の内容をもとに作成しています。   目次 matplotlibとは matplotlibを利用するには matplotlibの使い方   大石ゆかり 田島メンター！matplotlibというのは何でしょうか？ 田島悠介 Pythonのグラフ描画ライブラリだよ。Pythonでグラフ描画を行う、標準的なライブラリなんだ。 大石ゆかり どのような機能があるのですか？ 田島悠介 例を見ながら説明していくね！   matplotlibとは matplotlibは、Pythonでグラフを描画したり、イメージを表示させたりする際に使用するライブラリです。matplotlibはオープンソースで公開されており、個人／商用問わず、誰でも無料で利用することができます。 matplotlibを使うと、様々な種類のグラフを描画することができます。主に2次元のグラフですが、3次元のグラフも描画することができます。数値計算ライブラリであるNumPyと組み合わせて利用する場合が多く、またJupyter Notebookを用いて、データ分析結果をソースコードと共にグラフィカルに表現することで、説明力の高いレポートを作成することができます。 matplotlibはNumPyと並び、Pythonでデータ分析を行うには、必須のライブラリと言えるでしょう。   [PR] Webデザインで副業する学習方法を動画で公開中matplotlibを利用するには matplotlibを利用するには、Anacondaなどの開発環境のパッケージを使うのが簡単です。 Anaconda Anacondaは、データ分析やグラフ描画など、Pythonでよく利用されるライブラリを含んだ開発環境です。 Anacondaをインストールすると、matplotlibもインストールされています。もしインストールされていない場合は、メニュー画面のEnvironmentsから、Not Installedを選択し、検索BOXに「matplotlib」と入力します。一覧にmatplotlibが表示されますので、チェックボックスで選択し、画面右下のApplyボタンを押すことでインストールすることができます。 以降は、Jupyter Notebookをもとに、matplotlibの使い方を説明していきます。 Jupyter Notebookの使い方についても合わせてご覧ください。   matplotlibの使い方 matplotlibを使う際は、初めにmatplotlibライブラリをインポートします。先頭の「% matplotlib inline」は、Jupyter Notebookで、ノートブック上にグラフを描画する際に指定する記述です。 % matplotlib inline import matplotlib.pyplot as plt 実行結果は特にありません。エラーがでなければ、正しくインポートされています。   折れ線グラフ 折れ線グラフを描画するには、plot命令を使用します。この例では、併せてグラフのタイトル、ラベルも設定しています。 % matplotlib inline import matplotlib.pyplot as plt price = [100, 250, 380, 500, 700] number = [1, 2, 3, 4, 5] # グラフを書く plt.plot(price, number) # グラフのタイトル plt.title("price / number") # x軸のラベル plt.xlabel("price") # y軸のラベル plt.ylabel("number") # 表示する plt.show() 実行結果は以下のようになります。 グラフにマーカーを表示するには markerオプションを使用します。グリッドを表示するにはgridオプションにTrueを指定します。 % matplotlib inline import matplotlib.pyplot as plt price = [100, 250, 380, 500, 700] number = [1, 2, 3,
機械学習

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン Photoshop Photoshopで矢印を描画する方法を現役エンジニアが解説【初心者向け】