Ads by Google

 

どうも、TABI LABO編集・ライターの相原 ユーキです。

 

最近またブログデザインを一新しました。

ぼくはプログラミングのド素人ですが、ネットであれこれ調べまくってhtmlとcssを編集。

おかげで「見やすい」「おしゃれ」と言っていただく回数がかなり増えました。

 

今回はそんな一連の編集作業の中で気付いた、見やすいブログを作るためのたった一つのルールをご紹介しようと思います。

ブログがごちゃごちゃしてて困っている、というブロガーさんがこの記事のターゲットです。

 

この記事を書いている人
相原 ユーキ| TABI LABO編集・ライター。 前職は国家公務員。 大学ではAUSで1年間留学。 TOEIC985、英検1級、簿記2級、国家総合職合格。

 


 


Ads by Google

 


 

たった一つのルール:
絶対に意識すべきなのは「コントラスト」

コントラスト(contrast)とは、簡単に言うと「明確な差を設けて、区別すること」。対比。

「白に対する黒」とか「モノクロに対するさし色」、「極小に対する極大」など。

 

 

「コントラスト」によって生じる効果

コントラストを設けることで、特定の要素を目立たせる(浮き上がらせる)ことができます。

たとえば、この記事で使われている「見出し」(”「コントラスト」によって生じる効果” ……)もコントラストを意識しています。

 

見出しと本文記事で「フォント」はまったく同じものですが、「太さ」「大きさ」がずいぶん違う。

だから、あなたは見出しと本文記事を一瞬で見分けることができるのです。

 

|コントラストを効かせた例

「コントラスト」によって生じる効果

コントラストを設けることで、特定の要素を…

 

|コントラストがないとこうなる

「コントラスト」によって生じる効果

コントラストを設けることで、特定の要素を…

 

ぱっと見では、見出しと本文の違いが認識できませんよね。

これがコントラストの効果です。

 

 

見づらいブログには「コントラスト」が無い

巷には何万というブログが溢れていますが、正直「見づらいなぁ」と感じるものが多い。

理由を考えたところ、ゴチャゴチャしすぎているんですよね。

背景が柄モノだったり、カラフルなフォントがやたらと使われていたり、ボタンや画像などが散在していたり…

何を見せたいのかがわからないし、目が疲れる。だから、記事もしっかり読まれず、滞在時間も短くなる。

 

|売れているブロガーから学ぼう

稼いでいる人(結果を出している人)のブログデザインは、めちゃめちゃ勉強になりますよ。

参考:今日はこれを証明しようと思う。

 

要所要所でしっかりと「強調」し、読者を巧みに誘導していますから。

ユーザーの目線を意識してUIを考えるというスキルもブロガーには必要でしょう。

 

 

「コントラスト」がはっきりしているUI・ブログ・モデルサイト

では、どういったサイト(あるいはツール)がお手本になるのでしょう?

ここではぼくが参考にしまくったものをいくつか紹介します。

 

Apple

やはり Apple はすごいですよ。

製品の性能も素晴らしいけど、何よりも「魅せ方」が上手い。

最小限の情報で最大限の価値を生み出す。

ジョブズ亡き後も「ミニマリズム」を大切にしているのがわかります。

 

|Musicアプリが秀逸

ぼくが中でも気に入っているのが「Music」アプリのインターフェイス。

めちゃめちゃわかりやすいですよね。

 

背景はシンプルな白

見出しの「Library」や「Recently Added」は黒で、かなり太めの自体

項目「Playlists」「Artists」「Albums」…は再度の高くない赤(ピンク)

こういうデザインをさらっと出してくるあたり、Apple のセンスの高さがうかがえます。

 

Suitablism

ミニマリスト兼パーソナルトレーナー RYO さんが運営しているブログ「Suitablism」。

記事内容も素晴らしいですが、目を引くのはやはり秀逸なブログデザイン。

デザインにおいても「ミニマリズム」を実践されているのがわかります。

さがす人にしか主張しなくてよい情報、たとえば「グローバルメニュー」や「記事の更新日時」といったものは思い切ってグレーで彩度を落としています。

ケバケバした色を一切そぎ落としているから、ブログの見た目に統一感が生まれるんですね。

Suitablism の「コントラスト感」は、ぼくも超参考にしました。

 

KEISUKE TSUKAYOSHI

こちらはプロのデザイナー KEISUKE TSUKAYOSHI さんのブログ。

はじめて見たときは衝撃を受けました。めちゃめちゃオシャレで見やすいですよね。

カラム構造になっているので、ブログの「全体像」を眼下にとらえながら操作できる UI も素晴らしい。

また、記事のリード文を薄い色で表示させることで、ブログタイトルが「浮き上がって」います。

まさにコントラストが発揮されていますね。

フォント遣いにも統一感があるし、月並みですが「プロってすごい…」と実感しました。

 

Inc.

こちらは海外の webメディア「Inc.」です。

グローバルメニューが黒(#000000)、以下は背景が白(#ffffff)でスッキリとしたデザイン。

iOS の「Music」アプリ同様、見出しはボールド(太字)かなり強調されています、

単にぼくの好みなのかもしれませんが、こういうデザインのメディアなら何時間でもいられますね.

 


 


Ads by Google

 


 

aihara blog における「コントラスト」の要素

|サイトの全景

白を基調としたシンプルな背景に、カード状の記事が並ぶようなデザインにしています。

 

|グローバルメニュー

 白のシンプルな背景に、ブログのロゴを載せました。

aihara」と「blog」はコントラストで区別できるようにデザインしています。

 

グローバルメニューの項目(学び、意見…)は font-weight を一番細いものに設定。

右端のソーシャルボタンは、カラフルにして目立つようにしています。

 

|サイドメニュー

見出しはフォントを極大にして、視認性・可読性をあげています。

 

プロフィール本文のフォントは weight を最小にし、あまり目立たないようする工夫も。

サイドバーのコンテンツって、「読みたい」と思わない人にとってはノイズになりますからね。

 

|記事ページ

記事タイトルは、かなり太めのフォントに。

ぱっと見で「これがタイトルだ」とわかってもらえるようにしました。

 

見出し <h2> <h3> もかなり目立つようにしました。

スマホユーザーってけっこう流し読みするので、ボールドで大きめな見出しがテンポよく目に入るように。

 

目立たせたいところは派手にして、それ以外は抑え目にする。

コントラストを意識すれば、見せたい部分を効果的に見せられるんですね。

 


 


Ads by Google

 


 

デザインのキホンの「キ」が学べる『ノンデザイナーズ・デザインブック』は必読

冒頭でも述べた通り、ぼくはデザイン初心者です。

そんなぼくでも「おしゃれだね」と褒めてもらえるようになったのは『ノンデザイナーズ・デザインブック』という本を読み込んだから。

 

「ノン」デザイナー向けの教本で、デザインの「4つの基本原則」を学ぶことができます。

「コントラスト」は、本書で紹介されている4つの原則のうち1つ。

 

残り3つも非常に重要なので、当ブログでもそのうち触れるかも知れませんが、デザインを爆速で上達させたい方は ノンデザイナーズ・デザインブック を購入してみることをオススメします。

 

 

 

カスタマイズ性の高い有料ブログテーマで効率化を

|Webデザインには最低限のプログラミング知識が求められる

デザインはセンスだけでは完結せず、コードをいじって反映させる、というプロセスを経る必要。

つまり最低限のプログラミング知識(htmlとcss)が必要になるんですよね。

 

|Webデザインは究極の「時間泥棒」

ググりながらちまちまとコードをいじってもいいですが、ほんの一箇所変えるだけでも5〜6時間は平気で経ってしまいます。

それだけの時間があれば記事を2つも3つも書けてしまう。

ブロガーの本分は記事の執筆なので、デザインに時間を割くのは最小限にしたいものですよね。

 

|有料テーマを導入して「時短」しよう

そこで、効率化を図るために有料ブログテーマを導入してしまうのがいいでしょう。

理由はカンタンで、有料テーマは元々かなりオシャレだし、カスタマイズ性も高いから。

少ない努力量で、ブログデザインを大胆に改善することができるんです!

 

|相原オススメのブログテーマ

ぼくが個人的にオススメするのは、当ブログでも採用しているWordPressテーマ「New Standard」。

超絶オシャレなサイトが、かなり手軽に作れます。

下の記事で紹介しているので、よかったら読んでみてください。

 

 


Ads by Google