WEB制作 ブログ運営

【簡単】短時間でサムネ、バナーを作る手順!

こんにちは、よしです。

私はこのブログのサムネはできる限りしっかり作り込もうと思っており、時間がある時にサムネ作成をしています。

例えば、

【文系もOK】レバテックルーキーの評判、口コミと使ってみた感想
【文系もOK】レバテックルーキーの評判と使ってみた感想

続きを見る

のように、サムネだけで内容がわかるように心がけています。

しかし、サムネ作成に時間をかけすぎては本末転倒になってしまいますよね。

そこで今回は簡単に短時間でサムネ作成をする手順について解説していこうと思います。

この記事のサムネを実際に作りながら解説していきます。

【バナー作成ステップ1】入れる情報を決める

まずは、サムネに入れたい情報を決めていきます。

今回は、サムネを簡単に作る手順を解説する記事なので、キーワードとしては

「サムネ」「バナー」「簡単」「短時間でできる」「作成方法」

などの情報を盛り込んでサムネ作成していくことにします。

私は以下のように入れたいキーワードを適当に配置しておきます。

スクリーンショット 2021 08 19 13.48.30

【バナー作成ステップ2】カラーを決める

次に、メインとなるカラーを選んでいきます。

サムネの内容にあったイメージカラーがあればその色をメインにします。

今回は特にイメージカラーは無いのでメインカラーは赤にしていこうと思います。

【バナー作成ステップ3】使用する写真、イラストを決める

文字だけのサムネイルとイラストや写真を使ったサムネイルがありますが、私はよくアイソメトリックのイラストを使用しています。

アイソメトリックとは、物体を斜め上から移した立体的なイラストのことを指します。

海外風なサイトやモダンなwebデザインによく使用されるおしゃれな素材が多いのでおすすめです。

数はそれほど多くありませんが、ISOMETRICというサイトで無料・商用利用可のイラストが配布されています。

SVG,PNG両方の画像が配布されるので環境に合わせてさまざまな用途で使用できます。

【バナー作成ステップ4】要素の優先順位をつけ、配置を決める

入れるキーワード、使用するイラストが決まったら、それぞれの優先順位をつけます。

サムネやバナーは、見て2秒で内容が理解できるようにする為、優先順位をつけ、情報の強弱をつけることは大切です。

今回のキーワードは、

1、サムネ、バナー作成方法

2、短時間でできる

3、簡単作成

のような優先順位をつけました。

優先順位が決まったら、それに応じたフォントサイズフォントの種類を選び、先ほど選んだイラストと配置します。

スクリーンショット 2021 08 19 14.37.09

【バナー作成ステップ5】フォントを装飾する

フォントのサイズ、位置が決まったら、フォントを目立つように装飾していきます。

アピアランスでフォントの縁取りをしたり、ドロップシャドウやあしらいをつけることで目立たせたい部分を強調していきます。

スクリーンショット 2021 08 19 14.48.11

【バナー作成ステップ6】フォントをさらに目立たせる、背景にあしらいをつける

ステップ5までで基本的なサムネ作成は完成しました。

しかし、個人的に少し物足りなさを感じてしまいます。

一番優先順位が高い「サムネ、バナー作成方法」の部分をもう少し目立つようにしていきます。

また、背景がシンプルすぎるので、フリー素材のあしらいを薄く入れておきます。

完成!!!

スクリーンショット 2021 08 19 14.55.41

まとめ サムネ作りを楽しもう

いかがでしたか?

今回は実際にブログのサムネを作りながら、短時間でサムネ作成ができる方法を解説していきました。

一度作り方がわかると、基本的には同じような流れで作っていくことができるので短時間でサムネ作成ができるようになります。

ブログのサムネを自作することで、デザインの勉強にもなるし、何より結構楽しいです。

ブログ運営をしている人は自作サムネに挑戦してみてはいかがでしょうか!

それでは!

no image

大学生

2021/10/18

【暇な大学生におすすめ】暇な時間を有効活用できる方法

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

WEB制作 ブログ運営 プログラミング

2021/10/16

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

211007アートボード 1 のコピー 42

ブログ運営

2021/10/7

【特化ブログ運営4ヶ月目】アクセス微増、収益4桁達成!!

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

プログラミング

2021/9/30

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

ブログ運営

2021/9/5

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

WEB制作

2021/9/30

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

簡単なサムネ、バナーの作り方!

WEB制作 ブログ運営

2021/8/19

【簡単】短時間でサムネ、バナーを作る手順!

no image

WEB制作

2021/8/18

webデザイナーはコーディングできないといけない??

no image

WEB制作

2021/8/19

【web制作は大変?】実際に経験した感想を語る

no image

WEB制作

2021/10/8

webデザイナーは絵が下手でもなれる?!

no image

WEB制作

2021/8/15

web制作案件に必要なスキルセット【初心者必見】

【文系もOK】レバテックルーキーの評判、口コミと使ってみた感想

プログラミング

2021/10/16

【文系もOK】レバテックルーキーの評判と使ってみた感想

【Udemy】web制作が学べるおすすめ講座  

WEB制作

2021/10/14

【Udemy】web制作が学べるおすすめ講座  

5149301 s

ブログ運営

2021/8/20

【特化ブログ運営2ヶ月目】アクセス数と収益は先月から変わった??

fv e1622358020615

ブログ運営

2021/8/13

ブログのコンタクトフォームの必要性と実装方法

【Local By Flywheel】WordPressのローカル環境構築手順

WEB制作 wordpress

2021/8/23

Local By FlywheelでWordPressローカル環境を構築する方法

undraw warning cyit

プログラミング

2021/8/23

プログラミングスクール卒業生が「使えない」と言われる理由と解決策

WordPressの子テーマのメリットデメリット

wordpress

2021/10/12

【WordPress】子テーマの作成方法とメリットを解説

undraw researching 22gp

プログラミング

2021/10/12

文系大学生が新卒でエンジニア就職する方法

【安い】大学生に本気でおすすめのwebデザインスクール4選!

WEB制作

2021/9/29

大学生におすすめのwebデザインスクール4選【安い】

-WEB制作, ブログ運営

© 2021 よしブログ Powered by AFFINGER5