ブログデザインについてのお話と、イラスト募集

ブログデザイン拘ってますか？

※はてなブロガー向け記事です。

同じ内容を書いていてもブログの見た目次第で受ける印象は大きく変わってきます。

それどころか見た目で「うっ…」となり、そのままブラウザバックされてしまうなんてこともあります。

「誰かに伝えたい」という想いで書いた記事ですから、デザインのせいで一瞥されて終わってしまうのは寂しいですよね。

本日はそんなブログデザインについてのお話をしていきます。

見た目って重要なの？

中には「記事の内容が大事！見た目は二の次！」なんて意見を持っている人もいるかもしれません。

しかし見た目は非常に重要です。

「人は見た目が9割」なんて本が出版されているように、人や物の第一印象を決めるうえで最大の要素となるのが見た目です。

人は見た目が9割 (新潮新書)

「大事なのは中身」とどんなに訴えたところで、中身を知ってもらう前に相手が離れていってしまえばその主張は届きません。

まずは話を聞いてもらうためにも見た目を整えましょう。

髪はぼさぼさで服装もだらしない人と、きちんと身だしなみを整えている人、どちらの話を聞きたくなるか・信用できるかを想像するとわかりやすいかもしれませんね。

ファッションもブログデザインも同じです。

デザインを考えるのは苦手

偉そうなことを語りましたが、正直私に見た目のセンスというものは皆無です。

Web系エンジニアをやっていたのでHTMLやCSS、Javascriptなどのコード自体はガリガリ書けるのですが、全体のレイアウトを考えたりというのがさっぱりなのです。

こういった本を読んだりしても一向に良くなりません…

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

なので私はどうしているかと言うと、他の方々が作ってくれたテーマやパーツを利用させていただいています。

PC版

PCでの表示ではDUDEという人気のテーマを使用しています。

tsukuruiroiro.hatenablog.com

とりあえず適用するだけでかなりオシャレ感のあるブログ(※個人の感想です)になります。

シェアボタンやSNSフォローボタンも色んな人からパクった参考にさせていただいたものが多いですね。

私が自分でやったことといえば、h3タグに割り当てられていたスタイルをh2にも同様に適用させたくらいです。

SEOのテクニックで「見出しはh2タグで書こう！」と言われていますが、DUDEのデフォルトではh2は非常に簡素な見た目になってしまっています。

そこで、h3タグに適用されていたスタイルを抜き出して、そのままh2用の定義を作成しました。

ちなみにコードはこんな感じ。

.entry-content h2 {
    font-size: 140%;
    padding: 12px 0 12px 13px;
    color: #4D517D;
    padding-left: 13px;
    line-height: 1.6em;
    border-left: #4D517D solid 9px;
}

DUDEを使っているけど見出しをh2にすると目立たない…という人はこれを入れてもらえればそのまま同じ見た目にすることができます。

スマートフォン版

実は昨日、スマートフォン表示を大きく変更しました。

まずはこちらをご覧ください。(スマートフォンでこの記事を見ている人は、今見ている表示と同じ画像ですみません。)

トップ

※ぼかしてあるのはAdSense広告です。

記事内

記事下

DUDEがレスポンシブ非対応なテーマということもあり、これまでははてな標準のデザインを使用していましたがかなりの大改修を行えました。

参考記事

もちろん私が自分でこんなオシャレにできるわけもなく、参考にさせていただいた記事が存在します。

それがこちら。

www.ituore.com

shun (id:shun_prog0929)さんが先日投稿された記事です。

記事を読んだ瞬間に「あなたが神か…」と口にしたほどに感謝しております。

最近仕事が忙しく、すぐには試せませんでしたがようやく導入ができました。

shunさん、いつもありがとうございます！！

メニューバーへの変更

これまでもスマートフォン表示時、上部にはメニューバーを表示させていました。

今回は全体へのデザイン変更も入っているため、色も合わせて変更してあります。

色だけでなく、透過もさせてみました。

透過するには変更したい要素のopacityに0～1を割り当ててあげればOKです。

opacity: 0.85;

0に近くなるほど透明度が増すため、使用している色によって変えてみてください。

さて、ここからは今後デザイン関係でやりたいと考えていることを2つほどお話しします。

PC表示時のメニューバー

スマートフォン表示では出しているメニューバーですが、PCには未導入です。

初めてこのブログを訪れた人に、より色々な記事に興味を持っていただけるような導線作りをしておきたいですね。

イラストが欲しい

もう一つ、私がやりたいと考えているのがイラストの表示です。

このブログに合うようなアイコンやイラストを表示したいのです。

私がいつも読んでいるブログで気になったのはこの2つの記事です。

blog.kaerucloud.com

www.underpowermotors.com

Liab (id:varevo)さんはイラストレーターさんに直接依頼、MOS (id:Rustyman)さんはクラウドソーシングで募集をされて、お二人ともまさに「ブログの顔」と呼べるような素敵なイラストを作っていただいてます。

個性を出すのにも重要な要素ですし「力こそパワー」にも是非とも導入したいところ。

私はクラウドソーシングを利用して探してみようかと検討中です。

もしもこの記事を読んで「書いても良いよ！」という人がいましたら、お問合せフォームやTwitterのDMで声をかけていただけると幸いです。

希望イメージや金額等はそちらでお答えさせていただきます。

金額を聞いてみるだけなどでもOKですので、お気軽にご連絡ください。

Lancersで依頼を作成しました

www.lancers.jp

最後に

いかがだったでしょうか。

はてな界隈には優れたセンスを持っている人達が数多くの有益な情報を記事にしてくれています。

私のように「センスが無い…」と嘆いている人がいましたら、色んな記事・ブログを探してみることをオススメします。きっと役に立つことでしょう。

それと「コピペのみでOK」と書かれていても、知識のあるなしで応用力に差が出てきます。

ブログデザインを改善するのであれば、HTMLとCSS、Javascriptをある程度自由に読み書きできるようになると捗りますよ。

「jQueryを読み込んでいないせいでシェア数が上手く取得できていないブログ」もちらほら見かけますしね。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

その他「ここはどうやってるの？」など、ご質問があればお気軽にどうぞ。

それではまた。