【もったいないSNSヘッダー】FBカバーの意外な落とし穴とは?

こんにちは!デザイナーの 紺野香織です。

今日は前から書こうと思っていた「惜しいSNSヘッダー」についてです。

皆さんはSNS、されていますか?

SNSのプロフィール文やアイコンに力を入れている方、たくさんいらっしゃいますよね。それでも「このヘッダー、こうすればもっと良くなるのにな〜」と感じるヘッダーを設定されている方が多いです。

いきなり上から目線に聞こえたらすみません。でも、ほんのちょっとの工夫で、見やすい・伝わりやすいヘッダーに変えられることを知っている身からすると「なんとかしたい…!」と見かける度に思ってしまうのです^^;

ちなみにヘッダーとは、ユーザーのプロフィールページに表示される横長の画像のことです。「アイコンの後ろに表示される画像」といった方がわかりやすいかもしれません。SNSによっては「ヘッダー」ではなく「カバー」と名称が変わることもあります。

今日はそんな「惜しいヘッダー」のよくあるパターンと、解決方法をお伝えします!

ちょっとドキッとした方、もっといいヘッダーにしたいとお考えの方、少しでも興味がある方、お読みいただけたら嬉しいです。

※本記事内の画像やその内容は架空のものです。実際に見かけたものを参考にしていますが、内容や文面などは全て紺野が考え作成したものです。


このFBカバー、何が問題?

では実際に「惜しいヘッダー」のよくあるパターンを見ていきましょう!

今回のヘッダーの設定は以下の通りです。

・ファスティングレッスンを開催しているアカウント

・「効果がありそう」「取り組みやすそう」という印象を与えたい


では早速クイズです。↓のFBカバー、重大な問題があるのですが、なんだと思いますか?

note_001_ダメ

ヒントは以下の二つ!

・↑はPCで表示させた状態

・プロフィールページはカバーだけでなく、アイコンなども表示される

これでわかった方はすごいです!


正解は…

スマホで見た時、文字が切れてしまう

です。文章だとわかりづらいので、画像でお見せしますね。

note_001_ダメ_スマホ

左右の黒いスペースはスマホで見た時表示されない部分です。ちなみにアイコンは私のものを使っています。

PCで表示させた時は「ファスティングレッスン」が見えていますが、スマホだと「スティングスン」になってしまっていますね。

SNSのヘッダーは縦幅が狭かったり、アイコンにカブる部分があったりと制約が多いので、大事じゃない部分は切れること前提でデザインすることもあります。

ですが、例のヘッダーの「ファスティングレッスン」は、文字の大きさからもわかる通り、一番目立たせたい部分です。「申込み受付中」とあっても、「何」の申込みを受付中なのか、わからなかったら意味がないですよね?

でも、この文字が切れているパターン、実は一番良く見かけるんです。

心配な方は、一度ご自身のプロフィールページをチェックしてみてください。


どうやっていいヘッダーに変えるの?

では文字が切れてしまっている場合どうすればいいのか、実際に見ていきましょう!ここで、例で出したヘッダーの、PC表示とスマホ表示をもう一度確認します。

note_001_ダメ_PC

↑PC表示

note_001_ダメ_スマホ

↑スマホ表示

この場合「ファスティングレッスン」がスマホ表示だと切れているのが問題なので、

切れている文字を移動

全体のバランスを見ながら他の文字も移動

と直しました。その結果…

note_001_いい_スマホ

このようになりました。

「ファスティングレッスン」の文字は、あえて斜めにして、はみ出すようにした方がインパクトがあって「効果がありそう」という印象を与えるかな、と思いこうしました。

PCで表示させると、

note_001_いい_PC

こうなります。いかがでしょうか?

今回したことは

・切れている文字を移動

・全体のバランスを見ながら他の文字も移動

の二つだけです!もちろん場合によりますが、一からヘッダーを作るのに比べるとそれほど手間はかかりません

スマホ表示を確認できるテンプレートを配布しているサイトもあるので、そのテンプレートを使うのが一番手間が少ないと思います。


ヘッダーの編集、自分でやるのはちょっと…

とはいっても、「めんどくさい」「うまくできるか自信がない」という方もいらっしゃるかと思います。

そんな場合は、私にお任せください!以下の料金で承ります。

文章でのアドバイス:500円/1箇所

修正:2000円〜

Twitterヘッダーの場合はTwitterのDM、FBカバーの場合はMessengerにてご相談ください。メールでのご相談も受け付けています!

k.designer.ind★gmail.com

※★を@に変えてください。


Twitterアカウント:@k_woman_design

https://twitter.com/k_woman_design


FBアカウント


SNSのプロフィールを見直す機会になりましたら、とても嬉しいです。

それではまた次の投稿でお会いしましょう!


この記事が気に入ったらサポートをしてみませんか?