前回書いた記事、#1「ブログ初心者が最初にやることは？ アクセス数を０から増やす方法」は読んでいただけましたでしょうか？
今回はデザイン関係の話をしてみようと思います。
ちなみに、デザインを変更しただけでアクセス数が増えるかどうかは分かりません。
しかし、実施することでブログの印象は確実に変わることでしょう。
人によっては自分のモチベーションアップにも繋がります！
ということで……
「ブログ初心者が最初にやることは？」
その一例を示していきます。
デザインの必要性
まず初めに、正直に言っておきましょう。
デザインは必ずしも必要ありません。
デザイン０でも、文章だけで何百人もの読者を抱えているブロガーさんも世の中にはいます。しかし、それは人を惹きつける文章が書ける人の場合であって、万人に当てはまるわけではありません。
そのため、文章だけでは足りない人は、
デザインの力を取り入れることでブログの質を向上させるのです。
あとは単純な話、きちんとデザインされたサイトの方が見やすいですからね。
デザインをサボるということは、ある意味でユーザーを蔑ろにしていると言えるでしょう。
プロフィールアイコン
言うまでもありませんが、プロフィールアイコンは「自分の姿」を表したものです。
あるいは自分の分身である「アバター」。
私の場合は（←）これですね。
人間は意外と文字を読みたがらない生き物なので、
「文章」を「意味」に変換する手間が不要である画像は、とても大きな力を持っています。
そのため、 プロフィールアイコンは名前よりも覚えやすいのです。
どのようなアイコンが良いのか？
プロフィールアイコンは個人を指し示すものなので、できれば独自性が高い画像にした方が良いでしょう。
参考までに、私が考えるプロフィールアイコンに適した画像・適さない画像をまとめてみました。
| ◎適した画像 |
・自分の写真（顔が映っていなくても良い） ・自画像、似顔絵（落書きレベルでも良い） ・オリジナルキャラクター ・ブログのイメージに合ったもの（例：ペットブログ＝動物の写真） |
| ×適さない画像 |
・無機質、記号的（ ） ・法に触れる恐れのあるもの ・ブログのイメージに反するもの |
「自分の写真」に抵抗がある人は「似顔絵」。
それにも抵抗がある人は「オリジナルキャラクター」や「ブログのイメージに合ったもの」。
あるいは「自分の趣味に関する写真」などで、○○好きの人、と印象付けるパターンもあります。
この世に唯一無二のオリジナルアイコンを描いてもらいたい場合は、ココナラというサービスを使ってイラストレーターさんに発注することもできます。
私のプロフィールアイコンもイラストレーターさんに依頼して描いていただきました。
ブログアイコン
ブログアイコンは、
プロフィールアイコンは「個人」を象徴する存在でしたが、
ブログアイコンは「ブログ」を象徴する存在です。
企業で言うところのロゴマークです。
Twitter→ Amazon→
自分が普段から商品を買っている会社の経営者やスタッフの顔を知らなくても、ロゴマークは覚えていることでしょう。
あるいは、マークを見れば会社の名前が出てくるとか。
前項でも言ったとおり、人は文字を読むのが苦手なので、名前ではなくロゴマークで会社を覚えてもらうのです。
これはブログに置き換えても通じる話なので…
ブログアイコンは、訪問者にブログを覚えてもらう役割を担っています。
なお、ブログの中でも性質の違いがあります。例えば…
管理人がタレント化しているブログ
価値のある情報を提供するブログ
後者の場合には、プロフィールアイコンよりもブログアイコンの方が覚えられやすいかもしれません。
どのようなアイコンが良いのか？
どのようなデザインが良いのかについては大したことは言えませんが、認識のしやすさを考えると、極力シンプルにした方が良いのではないでしょうか？
例えば、このブログのアイコンはこれです。
抽象的なイメージをデザイン化したものです。
三角や四角などの単純な幾何学模様で構成しました。４色を用いているのは、様々な媒体で多様なコンテンツ（ブログ、小説、動画、イラスト）を発信するイメージから。中心から放射状に広がっているようなデザインは、それらすべてが自身から発信・集合するイメージを表しています。
ちなみにこれは悪い例です。
ユーザー目線に立つならば、具体的なイメージがあるアイコンの方が親切です。
（気に入って使い続けている私が言うべきセリフではありませんが…）
他にも例を挙げると…
（ブログではありませんが）
| はてなブログ | 記事を書くイメージから「ペン先」 |
| Google |
社名の「頭文字」 |
| 任天堂 | 自社を代表するキャラである「マリオ」 |
参考に様々なサイトのアイコンを見ていて思ったことは、
基本的には「どんなサイトなのかが一目で分かる」ようにしたものが多いということです。
頭文字にしているところは、自社が世界的に有名であることを前提にしている雰囲気があります。無名ブログには適さない手法だと思います。
キャラクターを使用するケースについては、もちろん有名なキャラであるに越したことはありませんが、そうでなくても印象に残りやすいので良いと思います。
そう考えると、プロフィールアイコンと同じにするという選択肢もありですね。
反対に「それってどうなの？」と思うのは、いらすとやなどのフリー画像をブログアイコンにしているケースです。利用規約で問題がない場合でも、独自性がないので印象には残りづらいです。
どのような場所に表示されるのか？
ブログアイコンが表示されるのは以下のような箇所です。
・ブラウザのタブ
・ブックマーク
・過去記事／関連記事カード
・はてなブロググループ
ブログアイコンはブラウザの検索結果画面には表示されませんので、基本的には訪問されたユーザーに対するアピールですね。
ちなみにせっかく作ったものであれば、ブログアイコンとしてだけでなく、ヘッダー画像で使用したり、アイキャッチ画像にしてみたりと、さまざまな使い道を探してみるのも楽しいと思います。
アイキャッチ
記事を投稿する際に「アイキャッチ画像」を設定していますか？
例えばこのようなものです。
この記事の最初にあった画像ですね。
アイキャッチは名前のとおり、人の目を惹くことを主な目的としています。
これが有効なのは「アイキャッチ画像が表示される」場面です。例えば…
- SNSで記事投稿を通知した時
- 新着記事ページなどに表示された時
- ブログのトップページ（一覧形式）
- ブログの最新記事・関連記事 など
SNSや新着記事などでは、文章だけよりも集客効果があります。
ブログ内の表示では、見た目が華やかになったり、回遊性*が向上したりすることも。
訪問者がブログ内のページを巡ること。関心を持つ記事があるとPV数が増加する。
アイキャッチ画像を作る方法
法律と公序良俗を守れていれば、別にどんなツールで作っても良いです。
OSに最初から入っているペイントソフトでも、
スマホのアプリでも、
フリーソフトであるGIMPでも。
ただ、個人的には「Canva」というグラフィックデザインツールをおすすめします。
無料で使えるうえに、テンプレートや素材の種類が豊富なので、さまざまなアイキャッチ画像が作れます。
この記事のアイキャッチ画像もCanvaを使って１分で作成しました。
詳しくはこちらの記事をご覧ください。Canvaについて後半で紹介しています。
記事内に画像を使用する
記事に画像を挿入することには様々なメリットがあります。
読者の理解を助ける
ページ内に抑揚がつく
余白のように機能する
自分で作った画像を挿入するのも良いですが、苦労や努力の成果は一方通行になりがちなので、効率だけを求めるならフリー画像を使った方が良いです。
画像の挿入方法は、利用するブログサービスによって簡易化されているケースが多いためにここで説明する意味はあまりないと思いますが、一応載せておきますね。
画像を挿入する方法
下記のコードをHTML編集で貼り付けます。
HTML
<img src="画像のアドレス" alt="画像が表示されない時に表示される文章" title="画像の名前" />
紫色の部分は書き直してください。img src以外のコードは削除しても構いませんが、できればaltは使った方が良いです。
画像アドレスの例：https://◯◯◯◯◯◯◯◯.jpg
まずは自分でアップロードした画像の上で右クリックをして、「画像（イメージ）のアドレスをコピー」を選択してください。その後、コピーしたアドレスを上記コードの該当部分に上書きしましょう。
画像の表示サイズを変更したい場合には、width="300"などの大きさを指定するコードを、/>の前部分に追加してください。
画像素材をダウンロードできるサービス
以下で紹介するサイトは、画像素材を無料でダウンロード・使用できるサービスです。
著作権フリーではありません。規約の範囲内で利用するのであれば、利用料が免除される（発生しない）というサービスです。
常識的な範囲での利用であれば、ブログで使用する分にも問題はありません。
詳しくは各サイトの利用規約をお読みください。
なお、他サイトの画像アドレスを直接指定すると相手サーバーに負荷をかけてしまうため、画像アドレスを指定する際には、必ず自分でアップロードした画像のアドレスを指定するように注意してください。
写真AC、イラストAC
どちらも同じ運営会社ですが、写真とイラストでサイトが分かれています。
（他にもシルエットACというサイトもあります）
画像をダウンロードをするには無料会員登録が必要で、作成したアカウントは両サイト共通で使用できます。
また、無料プランでは以下の制限があります。
一日に検索できる回数の制限
画像サイズごとに一日のダウンロード回数の制限
ぱくたそ
「ぱくたそ」は会員登録不要でいずれの素材も制限なくダウンロードできます。
いろいろなフリー素材を提供しているサイトの中でも、特に信念をもって運営している様子がうかがえますので、とても信用のおけるサービスだと思います。
安心して利用できますので、利用規約を守って正しく活用しましょう。
いらすとや
言わずと知れた有名なサイトですね。
「いらすとや」も会員登録不要でいずれの素材も制限なくダウンロードできます。
ただし、商用利用の場合は１つの製作物につき素材は20点までの使用制限があります。広告を掲載することも商用利用にあたりますのでご注意ください。
また、ウェブサイトによっては利用条件が異なる場合がありますので、例に漏れず、必ず利用規約を確認してください。
ちなみにこれは個人的な見解ですが、見出しごとに画像を最大サイズで表示すると、記事の内容よりも画像の方が目立ってしまうため、印象がよくありません（引用の主従関係と似通った考え方です）。もし上述のような使い方をしている場合には、画像使用頻度を減らすか、サイズを縮小した方が良いと思います。
2021/6/10 追記
いくつかのフリー素材サービスについて評価したり、まとめたりした記事を書きましたので掲載しておきます。要するに上記内容の上位互換記事です。
HTMLやCSSで装飾する
HTMLやCSSを用いることで、
太字、下線、文字の大きさ、文字の色
などを始めとした様々な装飾を、記事やサイトに施すことができるようになります。
上述した基本的な装飾の他にも…
例えばこのようなものや
HTML記述
チェックサークル
箇条書き風
このようなもの
CSSでデザインした注意書きです。
…などの装飾を使うことができます。
適切に用いれば記事やサイトの見やすさが向上しますので、情報を整理したり発信したりする方にはクオリティアップの手段として有用です。
まずは自分が見て満足できる代物を作れなければ、他人を満足させることも難しいです。
ただし、いきなり理想的な代物を目指してしまうといつまでも記事が完成しないため、最初のうちは色々なサイトさんで公開されているCSSサンプルなどをコピペするところから始めると良いでしょう。
当サイト内で公開しているサンプル
以下の記事では私が他サイトさんを参考にしながら作ったCSSサンプルを公開しています。
よろしければ参考にしてみたり、コピペして使ってみたりしてください。
下の記事ではマーカー(蛍光ペン)のようなHTMLとCSSのサンプルを公開しています。
下の記事では、手順解説向きのCSSサンプルを公開しています。（１種のみ）
下の記事ではフォントアイコン（ ）を使ったCSSサンプルを公開しています。
表（テーブルタグ）を作れるツール
表を使いたいときに便利なツールもあります。
こちらのウェブページでは、
「行数と列数の増減」
「文字の入力」
を行うだけで、無料で簡単にテーブルタグを生成できます。
生成したテーブルタグは、コピーして「HTML編集」に貼り付けるだけでOKです。
＜例＞
| 西暦 | 和暦 |
| 1989年 | 平成１年 |
| 2019年 | 令和１年 |
| 2021年 | 令和３年 |
※こちらは生成後に少しだけ加工していますが、ほぼ原形のままです。
- 知識が要らない
- 短時間でつくれる
- 面倒なコードを書かなくて良い
なぜ無料なのかが分からない、そう思うぐらい便利なツールです。
注意点としては、パソコンとスマートフォンでは画面の幅が異なるため、表の見た目がそれぞれで違うことです。テーブルタグを利用する際には、デバイスごとの見た目を確認するようにしましょう。
はてなブログの場合
この先は「はてなブログ」特有の話です。
他でブログ運営をしている方は下のボタンを押してください。
デザインテーマを変更する
はてなブログでは、自分のサイトにさまざまなデザインテーマを適用することができます。
○○さんのブログ、私のブログとは見た目がまったく違う…
こういった場合、その多くはデザインテーマをインストールしています。
デザインテーマを変更すると、サイトの雰囲気が大きく変わります。
トップページの見た目だけで惹きつけられてしまうようなサイトもありますよね？
自分のサイトに合ったデザインテーマを適用することで、魅力的なブログに仕立てましょう。
デザインテーマの「インストール方法」や「おすすめのテーマ」は下の記事内で紹介していますので、参考にしてみてください。
目次にある「5.デザインテーマを変更する」へどうぞ。
なお、無料版はてなブログでもデザインテーマはインストールできますが、トップページを「一覧形式」に変更できないため、スタイルが適さないテーマが多々あります。
無料版ユーザーの場合は、「全文形式」に対応しているテーマを探して、その中から選んでみてください。
参考までに、このブログに適用させているテーマは「マテリアルぽっぷ 」です。トップページは「一覧形式」にのみ対応していますので、無料版は実質ＮＧです。
プロフィールページは重要
記事にはてなスターやブックマーク、コメントなどがついたとき、記事の投稿者はその旨が記載された通知を受け取ります。
その際、誰がつけてくれたのかは「ユーザーID」で表示されるため、そのリンク先はプロフィールページになっています。
ちなみにプロフィールアイコンのリンク先は相手ブロガーさんのトップページになっています。それと、はてなブログ内にはプロフィールページと役割が被る「aboutページ」が存在しています（後述あり）。
相手ブロガーさんに興味を持たれるきっかけとなるページですので、自分の趣味・属性・経歴など、公開しても問題のないプロフィールを掲載しておきましょう。
自身のプロフィールページは、以下の経路から変更できます。
メニューバーの「利用中のサービス 」＞Myはてな＞プロフィール＞編集
なお、自己紹介文にはHTMLを用いることも可能です。
どんなコードでも使えるわけではありませんが、基本的な<p>タグを始めとして、以下のコードは使用できることを確認できました。
プロフィールページに使用できるHTML
| 空行 | <p> </p>（←必ずスペースを設けること） |
| 文字の色 | <span style="color: #ff5252;">文字の色</span> |
| マーカー |
マーカーについては専用記事をつくりました→ 【HTML／CSS】ブログにマーカー(蛍光ペン)を引く装飾の使い方解説【サンプル付き】 |
| リンク | <a href="ここにURLを入力">リンク<a> |
リンクを使ってイチ押しの記事をおすすめすることもできますね。
どんなことを書けば良いのか分からない方は、他のブロガーさんたちのプロフィールページを参考にしてみましょう。
また、プロフィールページほど見逃されてはいないと思いますが、もし「aboutページ」の設定が済んでいないという方は、こちらも書いておきましょう。
設定＞aboutページ編集
基本的にはプロフィールページと同じような使い方で、自己紹介やサイトを紹介する文章などを書きます。プロフィールページと同じ内容を書いても良いです。表示機会はこちらの方が多いかもしれませんね。
まとめ
それでは今回紹介した内容のまとめです。
ブログ初心者は
プロフィールアイコン
ブログアイコン
アイキャッチ
画像を使用する
などから注力してみましょう。
できれば
HTMLやCSSを使った装飾
もやってみてください。
これに加えて「はてなブログ」の場合は
デザインテーマ
プロフィールページ
などにも気を配ってみてください。
今回も本当の初心者向けに記事を書きましたが、HTMLとCSSについては少し難しかったかもしれませんね。
しかし、コピペで使用できるCSSサンプルについては、理解が不十分でも実装することができますので、是非とも使ってみてください。
理想のブログを目指して着実な一歩を踏み出しましょう。
以上、『ブログ初心者が最初にやることは？ デザインを強化して魅力的なブログにしよう』でした。
今回の記事は言うなれば【デザイン編】でした。
次回記事の制作は未定ですが、書くとするなら【分析編】になると思います。
関連記事
「記事がなかなか書けない人」におすすめです！
「はてなブログで他の人を羨ましいと思う人」におすすめです！
「はてなブログ無料版を使っている人」におすすめです！
「独自ドメインの取得先に悩んでいる人」におすすめです！
