画像に矢印を入れる方法をライバルに差のつく視認性の高さで解説

書き方と注意点

画像に矢印を入れる方法

いつもブログを読んでいるときに『どうやって画像に矢印を入れているんだろう』と悩んでいませんか?

実は、この記事で紹介する『画像に矢印を入れる簡単な方法』を実践すると、誰でも簡単に画像に案内のついた矢印を入れることができます。

一ツ柳天之介
一ツ柳天之介

なぜなら、私も実際に実践して、たった10分で画像にわかりやすい矢印を入れることができたからです。

この記事では、『画像に矢印やコメントを入れる方法』をご紹介して、さらにその一歩先の『視認性の良い矢印』の作り方も画像付きでご紹介します。

記事を読み終えると、今後矢印やコメントの画像挿入で悩むことは一切なく、読者を本文に引き込む魅力的な画像ができます。

画像加工ソフトを使う

まずは画像加工用のソフトをインストールして使います。

今回は無料でインストールできて、手軽に使えるソフトということで『Skitch』をピックアップしてあります。

全体の流れとしましてはたった3つです。

  1. Skitchのインストール
  2. 画像の加工
  3. 加工した画像のアップロード

では早速やっていきましょう。

画像選びや画像入手に関しては『写真ギャラリー最重要の配置を設定方法!2020年版!』

Skitch

画像に矢印やコメントを入れるフリーソフトとして、最も簡略化されてて使いやすいソフトの1つとしてEvernote社が提供している『Skitch』があります。

blog shot

Skitchは画像加工用のソフトにありがちな、多機能であるために複雑な操作を必要とするという難点を見事にクリアし、そもそもの機能用途を最大限に削って、使いやすくしているソフトです。

※Skitchは現在はMac版のみなので、Windowsをお使いの方は『Monosnap』へ(これはMacでもWindowsでも使えます)

※今回はskitchの使用説明になりますので、ご了承ください。Monosnapの記事もできれば追記していく予定です

さっそくダウンロードしていきましょう。

Skitchのダウンロード

まずはEvernoteのサイトからSkitchをダウンロードします。

『Skitch/Evernote 公式ホームページ』

  • 画面中央の『MAC版をダウンロード』をクリックしてデスクトップへダウンロード

アプリケーションフォルダーにSkitchを入れて起動させます。

blog shot

  • ダウンロードしたSkitchのアイコンをダブルクリックして、ソフトを開きます。
Skitch編集画面の中央のエリアに画像を挿入して、左側のメニューで編集していきます。

blog shot

 

画像の挿入

まずは加工したい画像を挿入します。

  • 画像を挿入するには、画像をそのままSkitchの編集画面にドラッグ&ドロップします。
他にも画面中央上の『画面キャプチャ』→『画像またはPDFを開く』をクリックし、画像を選択して挿入できます。

blog shot

画像を挿入し終わったら、次は編集画面左のメニューから使いたい機能を選択して、画像を編集していきます。

画像の編集

画像に文字や矢印を追加するには、編集画面の左側に並んでいるアイコンをそれぞれクリックして、追加します。

それぞれの線の「色」や「太さ」は、左の編集アイコン一番下の2つのマークをクリックして編集します。

blog shot

では1つずつやっていきましょう

矢印を挿入する

  • 編集画面左の『矢印マーク』をクリック

blog shot

  • 画面上でカーソルをクリックして矢印を向けたい方向と場所でマウスを離します

blog shot

矢印の太さを画面左下の線アイコンをクリックして編集できます。

blog shot

矢印の太さは5種類から選べます。

blog shot

矢印の色を画面左下の色アイコンをクリックして編集します。

blog shot

色アイコンをクリックして表示される一番下のマーク(レインボーカラー)をクリックするとウィンドウが開き、さらに細かい色設定ができます。

blog shot

 

コメントを挿入する

  • コメントを挿入するには、編集画面左の『aマーク』をクリック

blog shot

画面上をクリックして、そのままコメント(テキスト)をタイピングして挿入できます。

blog shot

「a」マークをクリックすると文字に縁取りが入ります。

blog shot

囲み線を挿入する

囲み線を挿入するには、編集画面左の『囲みマーク』をクリック

blog shot

囲み線の形を選びます。

blog shot

キーボードの『shift』キーを押しながらカーソルを動かすと、正方形や正円を描けます。

フリーラインを引く

フリーラインを引くには、編集画面左の『ペンマーク』をクリック

blog shot

画面上で自由な線が引けます。

blog shot

線の太さや色も、画面左下の線や色のアイコンより変更できます

注意マークを挿入する

注意マークを挿入するには、編集画面左の『注意マーク』をクリック

blog shot

マークを挿入したい箇所をクリックすると、各種選択した注意マークが表示されます。

blog shot

 

モザイクを挿入する

モザイクを挿入するには、編集画面左の『モザイクマーク』をクリック

blog shot

モザイクを入れたい箇所をカーソルで囲みます。

blog shot

画像を切り取る

画面左側の『切り取りマーク』をクリックすると、画像を切り取ることもできます。

  • 画像四隅のトンボマークをドラッグして、切り取るラインを変更したら、画面右上の『適用』をクリック

blog shot

 

編集した画像を保存する

編集し終わったら、編集画面中央の一番下にあるタブ(デフォルトはJPG)をそのままデスクトップ上にドラッグ&ドロップすれば保存されます。

blog shot

保存形式を変更したい場合は画面左下のjpgマークをクリックすると変更できます。

blog shot

  • 保存する画像のクオリテイー(画質)を変更するには画面左上のメニュー『ファイル』→『エクスポート』をクリック

blog shot

画面中央に各種の詳細変更ができるウィンドウが開くので画質を変更します。

blog shot

保存場所を選び『保存』をクリックすれば、画質を変更した画像を作成できます。

視認性の高い画像にするための色を選ぶ改善指南

矢印や文字の色を選ぶ際には、下地の画像を考慮して、より見やすい色を選択します。

視認性が高い状態を保つには、明度の差をつけることが有効であると言われています。

つまり下地が暗い色なら明るい色の矢印やテキストを挿入するということです。またはその逆。

一ツ柳天之介
一ツ柳天之介

様々なサイトを見る限りでは、暗い色を使用しているサイトは少ないと感じることが多いので、その場合はもう1つ方法があります。

高い視認性を保つもう1つの方法は『補色』を使用することです。

補色とは色相環で反対の位置にある色同士のことです。

下地が「赤色なら緑色」が補色になります。下地が「黄色なら青色」が補色になります。

幸いなことにSkitchは色選択の際に、色相環から選ぶことができます。

色アイコンで色を選択するときに一番下の詳細設定(レインボー)を選び、色相環図から下地の色の反対側にあるエリアの色を選ぶと、誰でも簡単に補色を選ぶことができます。

blog shot

補色を使用する際には、矢印やコメントのように、ワンポイントで使用の際に使うのが適しています。

画面の大きな面積を2つの色が専有しているような状況で補色にすると、刺激が強すぎて、落ち着かない画像になります。

その場合は彩度を下げるか、やや中間色(原色からは遠ざける)にして使用することをおすすめします。

あとがき

以上になります。いかがでしたでしょうか。

この記事『画像に矢印を入れる簡単な方法と視認性指南!』によって、お使いのブログ画像に適切な矢印やテキストコメントを挿入することができるようになったと思います。

ブログを制作していくには、プラグインをただ導入すればいいのではなく、適切な使い方があります。

一ツ柳天之介
一ツ柳天之介

今後も元グラフィックデザイナーしか知りえない様々な簡単ポイントを記事に付け加えてアップデートし続けていきますので、ちょくちょくチェックしていただければと思います。

以下の記事も知っているだけでブログ制作が楽になり、簡単にケアできる使用方法を記載しています。

お時間ありましたらご確認ください。

それではまたお会いしましょう。

一ツ柳天之介でした!!

blog shot

 

blog shot

 

blog shot

タイトルとURLをコピーしました