※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。
こんにちは。Webデザイナー兼コピックイラストレーターの柚水流亜（ @yuminaruaBlog／@yuminarua）です。
今回は私のブログでは初の試み（？）なのですが、デザインに詳しくないブロガーさん向けの記事を書いてみようと思います。
コトの発端は先日のこのツイート。
プロのWEBデザイナーの視点でブログとかHPデザインの改善ポイント提案するの、需要あるかしら…？
— Rua(るあ)@作って終わりじゃないWebデザイン (@youse_design) September 18, 2018
何気ない一言だったのですが、フォロワーさん以外の方からも反応をいただけて、自分のアカウント史上では1番反響があったツイートでした(*^_^*)
知らない方もいらっしゃると思うので前置きしておきますと、私の本職はWebデザイナーです。
（普段はコピックを使ったイラスト制作とか、趣味にフォーカスした記事ばかり書いていますがw）
今は個人事業主として働いていますが、元々は新卒・未経験でWebデザイナーとして採用され、主に月間1000万PV以上の大規模サービスのWebデザインをイチから担当してました。
その経験からユーザビリティを意識したデザインが好き・得意で、逆におしゃれさを追求したデザインはあまり得意ではないです。
なお、デザイナー歴は今年で8年目くらい。
この記事を読む前の注意点
さて。この記事を読む前に、あらかじめ知っておいていただきたいことがあります。
結論から言うと、デザインに正解はありません。
そして、デザインを整えればブログやサイトのアクセスが劇的に伸びるというものでもありません。
そういったアクセスアップのノウハウ的なものを求めている方は、多分この記事を読んでも
「で？」
ってなるだけだと思うので、ページをそっと閉じていただければと思います。笑
勘違いしてはいけないのは、何においても1番大事なのはサイトのコンテンツの核である記事の内容・質だということ。
その上で「コンテンツ」を、届けたいユーザーにより届くように・響くようにお手伝いする手段が「デザイン」だったり「SEO」だと私は思っています。
そのため、これからご紹介することについて「同じようにすればオールOK！」ではないので、その点はご理解いただければと思いますm(_ _)m
あと色々とまとめてたら死ぬほど長くなりそうだったので、記事を何回かに分けて更新していく予定です。
ブログ・サイトの配色について
自分がブログを書き始めてから色々な方のブログを拝見する機会が増えたのですが、その中で「もっとこういう色にした方がユーザーと相性が良さそうだな」と感じることが何度かありました。
記事内容・ターゲットが意識されていない配色
例えば、健康について発信してるブログなのに黒背景で赤文字とかだと不健康そうに見えますし、子育てブログなのに白黒モノトーンな配色だと、おしゃれではあって近寄りがたい硬い印象になってしまいます。
上記は極端な例ですが、ターゲットとズレた配色だと読者に違和感をもたれてしまいます。
サイトに違和感があると、せっかく良い記事であってもブログの居心地が悪くなったり、ブログへの信頼感がなくなってしまい、ユーザーの離脱に繋がってしまいます。
このような配色にミスマッチがある場合の原因としては、
- 単純に自分自身が好きな色やデザインを選んでしまった
- テンプレートのデフォルトのまま使っているパターン
- 何となく「女性向けだからピンク色！」という感じで選ばれているパターン
などが考えられます。
例えば「女性向け＝ピンク色」でもターゲットの年齢層や属性によって使われるべきピンク色の種類は濃い／淡い／青系／オレンジ系…とさまざま。
またベースの色はよくても、そこに合わせている見出しの色などが運営者の好きな色になってしまって、全体で見るとミスマッチをおこしている場合もあります。
可読性が低い配色や文字サイズにも注意
可読性とは、簡単に言えば”文字の読みやすさ”です。
ブログ全体をパステルカラー系の淡いトーンでまとめている場合など、画面全体の色が薄すぎて、文字が読みづらくなっている場合があります。
読みづらい文字はユーザーに見落とされるだけでなく、ブログを閲覧する上でユーザーのストレスになります。
特にスマホで閲覧する場合は、端末の小ささだけでなく、スマホを持つ手元が揺れやすい中で閲覧していたり、外の自然光の環境で画面が見づらくなっていることも考えられます。
【可読性の低い配色の例】
黄色地に白文字は、文字が読みづらくなる配色の典型的な例です。
自分ではなんと書いてあるか分かっているので難なく読めると思いますが、客観的に見るとぱっと見で文字を読むには少し目を凝らさないといけません。
修正してみました。
↓
【可読性を向上させるように修正した例】
ブログ全体の画面の色合いを損なわない程度に背景色の黄色を少し暗めにして可読性をアップさせました。
他にもブログテーマのデフォルト設定で、ブログの肝である記事の文字サイズが極端に小さすぎて読みづらくなっている場合があるので、一度自分のブログの文字サイズが適切になっているか確認してみると良いかもしれません！(^^)
配色でミスしないための解決策
とはいえ、じゃあどんな配色がいいか分からない。色彩感覚なんて一朝一夕で身につくものでもなければ、得手不得手もありますよね。
そんな配色に自信がないあなたにオススメする方法はズバリ…！
自サイトと同じターゲットの企業サイト・Webサービスの配色をパクる！です。笑
例えばママ向けブログであれば「mamari」、医療系転職ブログであれば「看護師求人EX」など、自分のブログのターゲットと同じターゲットが想定されるWebサービスや企業サイトを開いて、使われている色をそのまま真似してしまいましょう！
この配色をベースとして、もう1〜2色追加で使いたい時は、mamari内のカテゴリーカラーで使われている水色や薄紫色と同じ色を部分的に取り入れる。
企業が運営するサイトはプロのWebデザイナーがきちんとデザインしていますので、このような感じで企業サイトの配色を真似してブログの配色を決めれば、大きく配色をハズすことはまずないと思います。
何事も先人の知恵を拝借するのが1番手っ取り早いですね！笑
Webデザイナーと名乗っている人たちでも、最初から完璧にWebデザインができる人なんていません。
実はこうしてWebデザインを語っている私も、最初は優れたWebサイトの配色や配置をパクって（笑）…もとい、模写してデザインの勉強をしてきましたし、多くのWebデザイナーが通る道です。
ましてやブロガーさんが本当に注力すべきところはデザインセンスを磨くことではなく、質の良い記事を書くことです。
もし初心者デザイナーさんで「配色に興味がある」という方は、「やってはいけないデザイン」という本が超絶オススメです！
基本紙媒体がベースで展開されていきますが、WEBに通じるところもかなりあります。
私も思わず「あるある〜」ってなりました。笑
要点のみをサラッと抑えてあるので、パラパラ〜と配色やデザインについて勉強できるのがミソ(^^)
サムネイルの表示サイズ
ブログにおいてアイキャッチや記事一覧のサムネイル画像はとても大切です。
なぜなら人間は文字よりも画像に視線が引きつけられる傾向があるからです。
タイトルなどの文字情報はユーザーに読み飛ばされる傾向がありますが、アイキャッチなどの画像やサムネイルには目が止まりやすいということですね。
このことから、記事の顔であるアイキャッチを凝っている方は結構いらっしゃると思います。
毎記事アイキャッチを作り込んでらっしゃる方もいて、本当に尊敬です。
でもせっかく頑張って作ったアイキャッチなのに、記事一覧に並んだ時にトリミング（切り取り）されて中途半端に表示されている方が時々いて、もったいないな〜〜〜〜と思ってしまいます。
【サムネイルサイズがもったいない例】
もともと横長のアイキャッチ画像（サムネイル）なのですが、正方形にトリミング（切り取り）されて表示されており、画像によっては「何の画像なのか全然分からない」という状況です。
これではもったいないですし、ユーザーも何の画像か分からないので興味を引かれません。
↓
【画像の全容が見えるようにサムネイルサイズを修正した例】
元々の画像の全容が見えるようにサイズを調整して修正しました。
これにより、記事一覧の情報が分かりやすくなりますね。
ちなみにブログの場合は大体下記の3パターンの方法で修正できます。
- プラグインやウィジェットの設定だけでできる場合
- CSSの変更だけでできる場合
- PHPをいじらないといけない場合
プラグインの設定だけでできる場合は、簡単なので変更しておく方がいいと思います。
CSSやPHPをいじらないといけない場合は、できる人に依頼しちゃう方がいいかもしれないですけどね。
先程も書きましたが、ブロガーさんが本当に注力すべきところは記事を書くことなので、記事に繋がらないところは外部に委託してしまう方が効率的だなと思います。
分かる人からすればそんなにややこしくないので、MENTAやココナラで1000円〜2000円くらいで受けてくれる方もいると思いますよ。
もちろん割り切ってサムネイルを修正しなくてもSEOには直結はしないので放置でも構いませんが（直帰率とかで間接的には響くかもですが）、デザイナーの視点から言うと「せっかくアイキャッチ頑張ってるからサムネイルの見せ方も頑張って！」というのが本音です。笑
さいごに。次回の予定と宣伝
以上、今回は配色と画像について普段私が気になっているポイントをまとめてみました！
次回は「必要な機能」と「不要な機能」について書いていく予定ですので、もしこの記事で興味持ってくださった方は次回も読んでいただけると嬉しいです(^^)
MENTA でデザイン改善のお仕事を受け付けています！
最後に宣伝をちょこっとだけさせて下さい(^^)笑
MENTA
にて今回の記事に書いた視点を元に、非デザイナー・デザイン初心者さん向けにブログやサイトのデザイン改善をするお仕事を受け付けています！
