プロフィールページのカバー画像(ヘッダー画像)について

カバー画像(ヘッダー画像)とは

プロフィールページのカバー画像とは、webサイトでいうところのヘッダー画像・メインビジュアルにあたりますが、ココナラの場合、スライダーや全画面表示、動画やアニメーションといった表現、リンクボタンの配置なども出来ません。

縦横比の決まった一枚の画像となっています。

このカバー画像に何を載せるべきなのか、私が考える様々なタイプのカバー画像を紹介します。

---

記事を書く私の簡単な自己紹介

私は20歳になる前、学生の頃からデザイナーとして仕事を始めました。デザイン事務所、広告代理店、WEB制作会社などで、アートディレクター、グラフィックデザイナー、イラストレーター、WEBディレクター、WEBデザイナー、マークアップコーダーなどをしてきました。

現在40歳位ですので20年以上の経験があり、現在はフリーランスで、広告代理店や知り合い伝手からもらう仕事で生活をしています。

---

カバー画像のサイズ

カバー画像に使用出来る最大サイズは2560×840pxとなっており、最大100MBまでのjpeg / png / gif形式の画像となっています。

スマホでの表示についても同じ縦横比でそのまま小さく表示されるので、細い画像といった印象かと思います。

---

カバー画像で伝えられること、その種類・タイプ

カバー画像ひとつとってもユーザーそれぞれの目的・考え方の元に多様なデザインを見かけますが、以下のパターンに分けられるのかなと思います。

---

① サンプルや成果物を見せる！過去の実績を多く見せたい人向け

上記はこの記事を書くまで、私のプロフィールページのヘッダー画像として設定していた画像で、制作実績を並べたものとなります。

私がこのタイプのヘッダー画像を使っている理由は、ココナラ内のデザイナーや制作者に、未経験者、実績の少ない人が多いと感じたからです。

一目見ただけで今まで安定したクオリティで制作を続けてきている事がわかる様にと思い作成しました。それと同時にプロクオリティで仕事をしている為、安い単価での仕事は厳しいなという思いも伝えたいと思っている面があるかもしれません。

✔︎ このタイプのデメリット

・強く押し出したいタッチ・テイストがわかり辛い

・私の場合WEB制作以外にも、イラスト制作などを請け負いたいのですが、複数タイプの商品を見せようとするとごちゃついてしまう

・スマホで見た際に小さくてわかり辛い

カバー画像サンプル ①-1

一つのWEBサイトを沢山見せる。各デバイスでのトップページの見え方と下層ページを二か所載せる事で、サイト全体がイメージできる様に作成。

カバー画像サンプル ①-2

三つのサイトのファーストビューだけを大きく見せる事で、作風を伝えやすい様に作成。

---

② 画像とテキストのハイブリッド！最も効果が出やすいバナー画像タイプ

これは広告でよくあるバナー画像のタイプです。取り扱っている商品やスキル、特に力を入れているジャンル、自身の所属チームや会社、個人の顔などを使うこともあります。

見せたいイメージ画像とテキスト(キャッチコピー)の両方を載せる事で、伝えたい事をもれなく表現できます。これが最も効果が出やすい、ココナラに適したカバー画像かなと思います。

テキストで載せるべき内容

・キャッチコピー

・業種やジャンル、商品名

・他サービスにはない、自分だけの特徴

・自分が仕事をする際に重要視している考え方

✔︎ このタイプのデメリット

・ごちゃごちゃしがち

・同じタイプの人が多いため、埋没しがち？

・文字量を多くするとスマホでの表示の際に見えづらくなってしまうことも

カバー画像サンプル ②

---

③ インパクト重視！印象的な写真や一枚絵を使った目を引くカバー画像

目を引くビジュアル、インパクトのあるイラストやグラフィックデザインを使い、見に来てくれたお客様や同業者の方に一目で覚えてもらえたり、心に残る様に作成する。

写真やイラスト、グラフィックデザインといった一枚絵をメインの商品にしている方に向いているかなと思います。鮮やかな色使いやテキスタイル、自身の技術力が伝わるものなど、他では見られないオリジナルな表現を武器にしている方に多いタイプでしょう。カバー画像を作る時間が無い、準備よりも仕事が忙しい方はこれを選ぶべきかもしれません。

最も高画質で無料で画像が使える素材サイト

unsplash.com

✔︎ このタイプのデメリット

・伝えたい事が伝わらない事がある

・素材を使った場合、他の人と被る事がある

カバー画像サンプル ③-1

花や風景、光や水など、好きなものや綺麗なもの、誰もが共感するビジュアルイメージをカバー画像にしたタイプ。素材サイトからダウンロードして使う事も可能です。

カバー画像サンプル ③-2

イラストや絵画、CGやグラフィックデザイン、自身の作品を大きく一枚で載せることでインパクト抜群のカバー画像になります。

カバー画像・ヘッダー画像のまとめ

忙しい方はインパクトのある画像をそのままのせたり、自分の成果物をまとめて見られるように並べてみたり。時間を使える方は、自分のサービスをわかりやすく表現したキャッチコピーを用意して、どんな人なのか、どんなサービスなのかわかる様に作成・公開できると良いでしょう。