Webデザイン

【全て無料】バナーやサムネが簡単に作れるおすすめサービスと作り方

この記事では『非デザイナーでも無料で気軽にデザインを作成できるソフト・サービス』を3つに分けてご紹介します。

 

こんなソフト・サービスをご紹介
  • Canva(キャンバ):グラフィックデザインが作れるサービス
  • Photopea(フォトピー)やPixirエディター:Photoshopのクローンソフト
  • PowerPoint(パワポ)やkeynote(キーノート):資料作成ソフト

 

もっともオススメするのは、「Canva(キャンバ」というテンプレを利用して簡単にデザインが作れるサービスです。

▼こちらの詳細は記事にまとめているので、ぜひご覧ください。

【PC編】高品質&無料ソフトCanvaを使ったYoutubeサムネイルの作り方
【PC編】高品質&無料ソフトCanvaを使ったYoutubeサムネイルの作り方

この記事では『デザイン作成サービスCanvaを使ったサムネイル画像の作り方』を解説します。 Canvaとは、非デザイナーでも簡単におしゃれなデザインが作れるグラフィックデザイン作成サービスのことです。 ...

続きを見る

 

3つ目のパワポやキーノートは資料作成用のソフトですが、実は簡単なバナーやサムネイル画像ならサクッと作れてしまいます。

Windowsのパソコンで使えるPowerPoint(パワポ)は、インストールされていれば無料で使えます。Keynote(キーノート)は、Macのパソコンなら始めからインストールされています。

▼Macをお使いの方はぜひ参考にしてください。

【サムネ50枚無料プレゼント】MacソフトkeynoteでWeb画像を作る方法
【サムネ50枚無料プレゼント】MacソフトkeynoteでWeb画像を作る方法

この記事では『Macの資料作成ソフトKeynote(キーノート)を使いWeb画像を作る方法』を解説します。 通常はプレゼン資料を制作するためのソフトですが、簡単なバナーやサムネイル画像を作ることもでき ...

続きを見る

 

そして2つ目のPhotopea(フォトピー)やPixirエディターは、画像編集ソフトPhotoshopに酷似した「クローンソフト」といえるものです。

本記事ではこの2つのソフトについて、少し詳しく解説していきたいと思います。

 

 

 

Photopea(フォトピー)やPixirエディターとは?

この2つは画像編集ソフトPhotoshop(フォトショップ)の代替として使える有名なソフトになります。

Photoshopは月額980円で使う有料ソフトですので、無料でデザインを作りたい方にとっては契約をためらう場合もあるかと思います。

そんな方にピッタリのありがたいソフトといえますね。

 

その操作方法や画面の配置、機能までPhotoshopそっくり。切り抜きや色調補正など、Photoshopの代表的な機能といえるものも揃っています。

 

▼私が以前各ソフトを使って制作したバナーです。

※フォトピーにて制作

※Pixirエディターにて制作

これくらいのレベルの画像がサクッと作れればいいという方は、ぜひ使用方法をマスターしてみてください。

 

ただしこれらのソフトも万能といえず、やはりPhotoshopと比べると機能面・サポート面で劣る部分があります。ですので、あくまで自分で使う画像を作る時に使う範囲にとどめておいたほうが良いでしょう(仕事としてデザインするなら、Photoshopを推奨します。)

 

Photopea(フォトピー)の特徴と使い方

ソフトの会員登録・インストール はいらず、下記にアクセスするだけで画像が作れます。

Photopea(フォトピー)はこちら

 

「新規プロジェクト」にて、作りたい画像のサイズに「幅」「高さ」の値を入力し「作成」をクリックして開始します。

テンプレートも用意されているため、使いたいものがあればそちらをクリックすると利用できます。

 

画面の見方やツールの種類などは、Photoshopの使用経験があれば問題なく理解して使いこなせるはずです。

▼基本のツールとレイヤーについて

 

もし全くの初心者であれば、一通りPhotoshopの使い方を学んでから使用することをオススメします。

▼動画解説をぜひご覧ください(あくまでPhotoshopの解説ですが、参考にできます)

【初心者向け徹底解説】画像編集ソフトPhotoshop(フォトショップ)の使い方

こちらは『画像編集ソフトPhotoshop(フォトショップ)の使い方』のまとめページです。 Photoshop初心者が1から体系的にPhotoshopを習得していく方法を解説しています。 この記事でP ...

続きを見る

 

Photopeaのデメリットと対策法

デメリットは主に3つあるかと思います。

  • 日本語のフォントが用意されてない
  • 広告が出てくる
  • 文字詰めがうまくできない

 

外国産の無料サービスのため、初期の状態では日本語フォントがほぼ入っていません。

何かのデータを開いたや編集時に文字化けするため、フォントを読み込んでおく必要があります。

読み込み方法は下記で解説しているので、ぜひご確認ください。

 

Photopeaに日本語フォントを読み込む

こちらの流れで解説していきます。

  1. フォントの検索とダウンロード
  2. フォトピーにて読み込む
  3. フォントを検索して適用

 

ステップ1:フォントの検索とダウンロード

まずは使いたいフォントをダウンロードしましょう。

使いたいフォントが決まっている場合は、直接検索してダウンロードしてください。もしくは私もよく利用する「フォントフリー」で気に入ったフォントを見つけることもできます。

 

今回は例として「うつくし明朝体」という有名フォントを利用することにします。

配布サイトに飛ぶと「無料ダウンロード」のリンクがあるので、「利用規約」を確認した上でダウンロードしましょう。

 

圧縮されたファイルがダウンロードされるので、ダブルクリックで解凍します。

 

ステップ2:フォトピーにて読み込む

Photopea(フォトピー)にてダウンロードしたフォントを読み込みます。

 

フォトピー画面の右側「文」のマークをクリックしてください。

「文」が見当たらない場合は、画面上「ウィンドウ」から「文字」にチェックを入れることで表示されます。

 

フォントが選択できる逆三角マーク→「フォントを読み込み」をクリックします。

 

先ほど解凍したファイルの中から「〜.otf」ファイルを選択して「開く」をクリック。

これでフォトピーに「うつくし明朝体」がインストールされました。

 

ステップ3:フォントを検索して適応

フォントを使いたいときは、フォント検索画面にて検索します。

日本語で打つと出てこないため、「utsukushi〜」とローマ字打ちしましょう。

私のパソコンでは英語打ちで出てきますが、使用しているパソコンによって異なるかもしれません。

検索で出てこない場合は「フォント▼」の箇所から探してみてください。

 

フォントを探せたら、そちらをクリックするとフォントが適用されます。

 

Pixirエディター(ピクセラエディター)の特徴と使い方

前述したフォトピーと同様にソフトの会員登録・インストールはいらず、下記にアクセスするだけで画像が作れます。

Pixerエディターはこちらから

 

Pixirエディターは「初心者向けお手軽デザイン」と「上級者向けエディター」の2種類があります。

 

初心者向けではより画面の構造や使える機能がシンプルに設計されており、ソフトに慣れていない方でも画面の日本語サポートを頼りに作っていける様になっています。

一方で上級者向けはPhotoshopに似た作りになっているため、ある程度ソフトが使いこなせる方が対象になります。

 

限りなくPhotoshopの使い方に近いソフトですが、私が使っている中で一部「少しPhotoshopとは違って戸惑った」ポイントがあったので、そちらを追記しておこうと思います。

  1. 文字のグラデーション
  2. 境界線やシャドウ
  3. 色調補正

 

1:文字のグラデーション

一つ目が「文字のグラデーション」です。

Photoshopでは、レイヤーをダブルクリックして出てくる「レイヤースタイル」にて文字のグラデーション加工をおこなうことが多いですね。

 

一方で、Pixlrエディターでは以下の操作手順になります。

  • ツールバーから文字ツールをクリックし、文字を入力
  • 文字ツールを選択した状態で、画面上の「塗りつぶし」をクリック
  • その中から「グラデーション」を選択し、色を設定する

 

 

2:境界線やシャドウ

文字や図形などに「境界線やシャドウ」をつけるやり方です。

例えば、長方形の図形を描いてボタン風に仕上げたい時など。

  • ツールバーから「図形ツール」を選択
  • 図形を描く
  • 図形ツールを選択した状態で、画面上「スタイル」をクリック
  • スタイルの中にある項目にて加工をおこなう

 

 

3:色調補正

最後が「色調補正」です。

例えば写真をもっと鮮やかにしたい、画像の色味を変えたいといった時に使います。

 

対象の文字や画像をクリックした状態で、画面上「調整」をクリックします。

この中に色調補正できる項目があるので、そちらで操作をおこないましょう。

 

 

日本語フォントのインストール方法

こちらはフォトピーと同様ですが、日本語フォントが既存の状態では充実していません。以下の操作手順でインストールができます。

 

画面左の「文字ツール」をクリック(①)したら、画面上のフォント選択枠をクリック(②)します。

選択肢の一番下に出てくる緑の「ADD LOCALN FONT」をクリックし(③)、別でダウンロードしたフォントデータを読み込んでください。

 

© 2022 デザインノウハウ倉庫 Powered by AFFINGER5