MUND.com

Little more MUNDY. 気になるあれこれまとめてます

見やすいコンテンツの作り方

f:id:kkotrip:20180319212351j:plain

テキストコンテンツだけで構成されたページを作ることに苦戦しております。

自分のブログだったら、とりあえず文章の間を空けて太字を入れればOKです。

しかし人様のサイトではそうもいきません。

パブリック性の強いサイトであれば、あまり営業感は出してはいけないものの目立つようにはせなあきません。

逆にガンガンセールスするサイトは、コンテンツにがっつりボリュームを出さな飽きません。それを文章ファイルだけで納品するとなると…ちょいと頭を捻らねばなりません。

考えすぎなんかもしれませんが、情報が溢れている中で「見やすさ」は超重要だと思うんです。私自身、字が小さいサイトとかめっちゃイライラするし…。

そこで、今回はテキストだけで見やすいコンテンツを作るときにおさえたいポイントをまとめました。

 

囲みを活用する

ボックスで要素ごとに囲むだけで全然見栄えが違います。

CSSならこれで

saruwakakun.com

WordPressではプラグインでTinyMCE Advancedを入れると超簡単に装飾ができます。(つい最近教えていただいたことを受け売りw)

ja.wordpress.org

 

改行はあけすぎずくっつけすぎず

スッキリさせすぎると覇気がなく寂しいし、改行ばかりの文章は正直ウザい。

でも詰め詰めにすると読む気をなくす。

ということで絶妙なバランスで改行を入れましょう。

 

サイトデザインと合う差し色を使う

赤、青などの原色をガンガン使う必要はありません。

ミントグリーンやオレンジなど、洗練されて見える色をさりげなく使ってみましょう。

差し色ってなんか萌えますよね。。このサイトもイエローをリンクのhoverにしてます。 

▼永遠に見てられそうな、見ているだけでセンスアップしそうなウェブ・ファインダーが非常に勉強になります。

w-finder.com

 

字は大きく

小さい字は読む気がおきません。その割にコンテンツのボリュームも出ないので、文字は大きめに設定するのがベター。

WordPressのカスタマイズ自体では文字の大きさを設定できないので、上述のTinyMCE Advancedでページコンテンツを作りながら大きく設定しましょう。

 

主張したいところをハッキリさせる

一番主張したい部分は、その画面で一番目が行くようにデザインしましょう。

上述のBoxを使ったり、背景色を設定したり、あえて画像ファイルを作成しても良いでしょう。

 

ということで自分のセンスと客観視でコチコチ見やすくアレンジしてまいりましょう。