Blog Design

2021/3/26

【初心者も簡単】AFFINGER5(アフィンガー 5)デザインカスタマイズ

この記事を書いた人 ポイント この記事を書いた人 ・デザイナー歴11年(web、グラフィック) ・ブロガー向けにブログデザインを発信中 こんにちは!あるです。 今回ワードプレスのテーマをAFFINGER5(アフィンガー 5)にしました! AFFINGER5(アフィンガー 5)にした機会にデザインも一新しましたのでそのデザインカスタマイズ方法をお伝えしていきたいなと思います! Contents1 AFFINGER5(アフィンガー 5)って?2 AFFINGER5(アフィンガー 5)デザインカスタマイズの場所 ...

ReadMore

Blog Design

2021/3/7

スキマ時間にスマホで簡単!canvaアプリのおしゃれなブログアイキャッチの作り方/使い方

こんにちはあるです!今回はスマホアプリのcanvaを使っておしゃれなブログアイキャッチを作ってみます!DLから簡単に使い方を説明していきます。 いつもブログ書いた後にへろへろでアイキャッチまで気が回らない、、、 移動中や外出中の暇な間に作れたらな、、、 そんな方はスマホ版のcanvaを使えば ブログを書いた後にすぐ投稿できちゃいます! 時間を有効に使えてその分の時間を他に回せる! 使い方も簡単なので一度アプリを使ってみると時間に余裕ができますよ! Contents1 canvaアプリを早速ダウンロード1. ...

ReadMore

Blog Design

2021/3/25

ブログ初心者必見! おしゃれなブログデザインの作り方

こんにちはあるです! 今回はブログ始めたばかりの方むけのおしゃれなブログデザインの作り方を紹介します! ブログ初めて記事も書かないと・・・・色々勉強することばかりでデザインまで気が回らない・・・ そんな方に簡単ですぐできる方法が一つあります。 それは・・・ヘッダーを変更する。 これだけです。 では実際にみながらどれだけ違いがあるか見てみましょう! Contents1 ブログデザインとヘッダーの関係性2 じゃあおしゃれなヘッダーはどうすればいい?2.1 無料デザインアプリ「canva」でデザインする2.2 ...

ReadMore

Blog Design

2021/3/1

ブログヘッダーを【Canva】でおしゃれに簡単デザイン!

こんにちは!デザイナーのあるです! 今回はおしゃれなブログヘッダーをCanvaで作る方法を詳しく説明していきます! ブログでヘッダーは一番最初に目に付く部分ですので、デザインがしっかりしていたほうが信頼感が増え、記事の信頼感も同じくUPします。 アプリ版もありますが、今回はPCの操作方法をやっていきたいと思います。 Canvaはコチラ まずは右上の「登録」から無料登録をしましょう! 有料アカウントのほうが使える機能があって便利なのですが無料でもかなり使い勝手はいいです! 今現在30日間の無料お試しがあるの ...

ReadMore

Blog Design

2021/2/26

無料でおしゃれなデザインが出来る【Canva】でブログアイキャッチ画像を作る方法!

こんにちは、デザイナーのあるです! 今回は無料デザインツールの「Canva」の使い方を説明していきます!誰でも使えるのでみなさんも試してみてくださいね! Contents1 ブログのアイキャッチとは?2 早速Canvaを使ってみる2.1 デザインを作成→ブログ2.2 テンプレートを選んでいく2.3 テキストを変えてみる2.4 イラストを変更してみる2.5 色味を変更してみる3 完成! ブログのアイキャッチとは? アイキャッチとは「アイ」を「キャッチ」する。そのままですね。 このアイキャッチ一つで集客数が変 ...

ReadMore

Blog Design

自作のブログサムネイルがおしゃれに大変身!使えるポイントまとめ

こんにちはあるです!

今回はツイッターの皆さんに協力してもらい実際に使用している
「サムネイル」「アイキャッチ」を添削しながらデザインのポイントを紹介していきます!

サムネイルつくったけどなぜか綺麗にならない・・・
どうしたら上手く作れるの?

こんな悩みがある方はこのポイントを押さえておけば、あなたのサムネイルもデザインが一つアップするかもですよ!

今回は添削なので「元のイメージ」を残しつつデザインをしていきたいと思います!

case.1

@lupaton4649さんの場合

まずはオリジナルを見ていきましょう!

今回はこのアイキャッチを添削していきたいと思います!
最初に完成デザインを見ていきます!

読みやすさ・華やかさ・目視で伝わりやすくを念頭に添削させてもらいました!

ではこれを段階的に説明していきます!

まずは色味を変更します!
ここでのポイントは「文字を白抜きに」です。

白など明るい色以外に黒を乗せてしまうと全体的に暗いイメージになってしまいます。
黒が強いので周りの色が引っ張られてしまうんですよね。

なので背景を少し濃くしてもいいので白い文字が見えるように調整しています。

こちらにも少し色に関して書いているので参考にしてみてください!

次に文字のバランスを整えていきます。
最初のうちはオーソドックスなセンター揃えをお勧めします!

実は文字を一つ一つずらしてバランスを撮るのは結構難しくてプロでもできない人がたまにいるくらいです。

今回は文字を整えると同時に、ブログ記事の内容を補足する文字も追加しています。
「ダイエット効果も抜群!」と迷ったんですが今回はこちらで。。。

次は書体を変更していきます!

勝手なイメージなのですがバレエが入っているので少しスッキリしたイメージがいいのかなと思い明兆にしました。

明兆ってなに?というかたはこちらをご覧ください!

文字のバランスが整ったので右側に移ります!

バレトンってなんだろう?という目の引き方もありますが今回はぱっと見でわかるような工夫をしています。

「+」を足すだけでぐっとわかりやすくなりますね!

なんとなくバレトンってこういうものなんだ!というのが分かれば成功です!

最後に色味を足して楽しそうなイメージを足していきます!
この模様は「丸」だけでつくっているのでCanvaでも作れちゃいますね!

Canvaについてもこちらで書いているので見てみてください!

では最後にビフォーアフターをどうぞ!

視認性もあがり、デザイン性も上がっていますね!

Case.2

次は@donguriweb どんぐり所長@建築ブロガー/米国ETFさんです!
正直なところデザインセンスがあり添削もいらないんじゃないかなというレベルですが
やっていきます!

https://donguriweb.com/katteha_ikenai_tousisinntaku/

このアイキャッチのブログは↑から見れます!

まずは元のデザイン

もう完成でもいいかなという完成度です!
ではこれを添削していきたいと思います!

ではまず完成デザインから見ていきましょう!

デザインに意味や流れを追加し、さらに目立たせたいところや全体の色味を調整しています!

まずは写真のトリミングを変更していきます!
ぱっと見上手にトリミングされているんですが、タイトルの余白が均等になるように
もう少しだけトリミングをします。

写真の上手な使い方はこちら!

次にタイトルを入れていきます!
買ってはいけない→投資信託の流れをより強めるために吹き出しを使用しました。
また、デザインが大味になってしまうので英語表記も入れています!

ここでのポイントですが、文字を白抜きにする際に細すぎるフォントだと少し遠くから見ると見えなくなってしまうので太すぎず、細すぎない太さにしましょう!

次に「4選」を入れていきます。ベースデザインをそのまま周到し、「4」を大きく配置します!

文字のだんだんが気になるので、線を二本入れていきます!
これで文字が安定しました!

最後にどんぐり所長さんの「どんぐり」と「葉っぱ」を散らしてバランスを整えてあげれば完成です!

最後にビフォーアフターをどうぞ!

気づいた方もいるかと思いますが今回使用いた色味は全て写真からとっています!
なので全体的にまとまった色味になっています。色味もパキッとして見やすくなっています!

case.3

@bonjin_yusha アダムとイブ@凡人勇者さん!

https://bouken-no-syo.com/

ではベースのデザインを見ていきます!

これを添削していきたいと思います!こちらのデザインは少しアイテムが多くごちゃっとして見づらいイメージがあるので削っていく形で進めていこうと思います!

まずは完成デザインから!

可読性に気をつけてスッキリ纏めています!

では早速やっていきます!

まず初めに内容を精査します!
タイトルは長くてもいいのですが、アイキャッチに使う場合はできるだけで一目でわかるように精査していきます。

このタイトルの重要なところは「クリック率があがる」というワードが重要と感じたのでそこをさらに簡単に「クリック率UP!」に変更しました。また、「方法」もとっています。

次は優先順位をつけて文字の大小や太さを決定していきます。
Twitterのアイコンは皆さん認知があるので小さくてもしっかり認知されます。

今回の重要なワード「クリック率UP!」が目立つようにセンター揃えでしっかり揃えています。
先ほども書きましたが、慣れないうちはセンター揃えや右揃えがおすすめです!

ここでベースデザインにあった黒板を入れていきます!
今回はクオリティUPを考えて写真の黒板を持ってきています。

ここでのポイントは黒い色の上には明るい文字を持ってくる!です。
ベースデザインは白い半透明のを引いていますが色のコントラストがあまりなく視認性が薄れているので今回は白と薄い黄色で抜いています!

写真はいつものPIXABAYから持ってきています!

最後にベースデザインにもあったブログカードのスクショをいれてお終いです!

ではビフォーアフターを見てみましょう!

視認性もあがり、デザイン性も上がっていますね!
内容も使っているものも同じなんですが、色味や伝えたい優先順位などでデザインはガラッと変わります。

さいごに

今回ご協力いただいたみなさんありがとうございました!

みなさんもこのポイントを押さえてよいアイキャッチをデザインしてください!

ではでは良いデザインライフを!

-Blog Design

© 2021 ARULOG Powered by AFFINGER5