こんにちは、LLENN(@LLENNblog)です!
ブログのアイキャッチ画像は、アクセス数に直結するので工夫したいところです。お店の看板と同じ媒体と考えて下さい。
今回の記事では
・アイキャッチ画像にフラットデザインを採用すべき理由
・フラットデザインのアイキャッチ画像の作り方
の二点について書いていきます。
それでは行きましょう。
ブログのアイキャッチ画像をフラットデザインにするべき理由
ブログのアイキャッチ画像にフラットデザインがおすすめな理由は
です。
そもそもフラットデザインとは何なのでしょう?定義を確認します。
”フラットデザインは、読んで字のごとく立体感や質感などの演出が少ないエレメントを使ったデザインです。
質感を出すテクスチャや立体的な効果を出すシャドーなどを用いず、色や形などによりシンプルなサイン、シグナルを用いて構成します。”
ウェブ部「いまさら聞けないフラットデザインの真実。Webデザインは、デザインとエンジニアがコラボして進化する。」https://webbu.jp/flatdesign-2762 より引用
要は、立体感や複雑な表現を排したシンプルなデザインです、読んで字の如く。
近年のWebサービスやiPhone/AndroidアプリのUI(ユーザーインターフェース)には、フラットデザインが採用されていることが殆どです。
スマートフォン、パソコン、タブレットなど様々なデバイスでネットにアクセス出来るようになった今、どの端末においても画一的な体験が可能になることが先決となります。端末の解像度に左右されるようなデザインベースでは、体験の質が一様では無くなりユーザーに満足してもらうことは難しくなります。
フラットデザインの身近な例は「iOS」です。2013年にiOS7が発表され、その後のiPhone5Sに採用されたことは記憶に新しいかと思います。
Copyright ©Apple Inc. All rights reserved.
当時はこのデザインの善し悪しが議論になりましたが、今では殆どの人が見慣れ、このUIを使いこなしています。
先ほどの繰り返しになりますが、フラットデザインのアイキャッチはブログと相性抜群です。
ブログの人気テーマは、フラットデザインを基調としたものになっており、そのWeb空間に違和感無く馴染むのは紛れもなくフラットデザインの画像です。
ブログがフラットデザインベースなのに、立体感のあるアイキャッチを設定するのはあまりおすすめしません。それは丁度、スーツ一式に身を包みながらNEW ERAのキャップを被るようなものではありませんか。
コンテンツ重視のブログにおいては、ユーザーの気が散ること無く、かつ快適に閲覧できることを前提としたシンプルなUIを構築すべきなのです。
ユーザビリティ(使用性)の面でフラットデザインはブログに最適だと断言しましょう。
フラットデザインアイキャッチ画像の作り方
フラットデザインのアイキャッチ画像がブログに最適であるということはお分かり頂けましたでしょうか。
そんなアイキャッチ画像ですが、実は、Canvaというサービスを使えば自作できます。
Canva側
まず、Canvaにアクセスします。
①「デザインを作成」をクリック
②「カスタムサイズ」をクリック
③サイズを1920px×1080pxに設定
④「背景」をクリック
⑤好きな色を選択(青、赤、緑系がフラットデザインには合います。)
これで、アイキャッチ画像の背景が完成しました。
FLAT UI DESIGN側
今度は、先ほど作った背景にフラットデザインのアイコンを載せていきます。
アイコンは、商用利用が認められていて種類も多いFLAT UI DESIGNで仕入れます。
①お好きなアイコンを選択
②素材をダウンロード(JPEGもしくはPNGでOK)
合成
CanvaとFLAT UI DESIGN、両方の作業が完了すれば、あとはそれらを合成するだけです。
①Canvaの「アップロード」をクリックし、先ほどのアイコン画像をアップロード
②好きな位置に配置
③テキスト→見出しを追加から文字を加えて完成!
ちなみに、FLAT UI DESIGNから画像をダウンロードした際、背景透明版を選択しているのに白背景になっていることがありますが、対処法としては
・「背景透明化」アプリの自動モードで背景を透明化
・パソコンに送信ないしは取り込んで、Canvaに貼り付け
がありますので、是非試してみて下さい。
以上が、フラットデザインアイキャッチ画像の作成方法となります。
フラットデザインのアイキャッチ画像を取り入れてみましょう
アイキャッチ画像とブログデザインのテイストが同じだと、視覚的に統一されている印象を与えることができます。
是非一度、紹介した手順を参照した上で試してみて下さい!
以上、LLENN(@LLENNblog)がお送りしました!