分かりやすい資料(コンテンツ)作りのちょっとしたコツ!

シンプル に大切なことを 分りやすく 伝えたいウェブ(web)デザイナー やす です。

ここ最近、ホームページやポスターなどを見ていると、「あ~デザイン性が豊かだな~」って思うことがあるんです。でもその反面、

ちょっと分かりにくいな~。
ちょっと見にくいな~。
なんて思うこともあるんですよね。

そんな経験ありませんか?

なんかそんな広告を見ていると、「もったいないな~」って思うんですよね。
高いお金をかけて作ったのに、見る人からは「これなんだろう?何を伝えたいんだろう?」なんて思われて、結局オーナさん側の自己満足で終わってしまった。なんてこと・・・。

僕思うんです。

どうせ表現(発信)するんだったらまずは見やすくしておいて、見る人に分かりやすさを与えておかないと、元も子もないな

って^^;

簡単なんですよ^^分かりやすく表現することって^^
ちょっとした工夫なんです。

だからちょっとだけ、今回のブログを通して一緒に学んで行けたらいいな~っと思っています。今回は、僕なりの「特別な技術を使わず、このようにすれば、分かりやすい媒体になりますよ!」っという部分を簡単に紹介してみますね(^^)

見る人が分かる言葉で書いてあげる

もう、これは言うまでもないですよね(笑)

見てくれている人の為に書いている訳なんで、見てくれている人が分からない言葉を書いたダメですよね(^^;)

たまに見かけませんか?
IT関係は特に・・・(;^_^A

専門用語が、すーーーーーーーーーーーーーーーーーーーーーーーーーーんごく沢山あって、何を書いているのか、ま~たく分からないことって^^;

文章は、見る人の為にあって、自分の為にあるのでは無いので気をつけてくださいね。

ただ!!!

ここで重要なのが、やっぱり見てもらいたい人をある程度想定して(絞って)おくこと!
それが無いと、どこまで優しく書けばよいのか分からなくなります。

例えば、僕がよく話しているIT関係の話は、デジタルが苦手な人を対象に、話をさせてもらっています。でも、だからといって、パソコン自体を知らない。マウスをしらない。クリックって何? っていうくらいのレベルの方達には合わせていません。

手元にパソコンやスマホがあって、文字を打ったり、インターネットで検索をすることが出来ることを想定した上で話をしています^^

なのでこんな感じで、ある程度、自分の文書を読んでもらえる人の範囲を定めておいてくださいね♪

分かりにく箇所は出来るだけ「例え話」を使ってあげる

誰でもそうですが、話を聞いていて、イメージ(想像)できないモノは分からないですよね。

例えば、ホームページってサーバーに保存されていて、ドメインとサーバー内のホームページデータが結びつくことによって、僕ら閲覧者は見ることができるんですよね~

なんて言われても。。。はぃ? ( ̄ω ̄;)?

ってなりますよね。
でも、

ホームページって、インターネット上にあるスペース(土地)に保存されていて、アドレス(住所)とスペース(土地)内にあるホームページのデータが結びつく事によって、僕たちは見ることができるんですよ~

って書いてあると、イメージしやすく分かりやすいですよね(^^)

こんな感じで、見る人がイメージしやすい形(ことば)に変換してあげるコトが大切になってくるんですが、ま~~なかなか、例えって出したくても出てきませんよね^^;

なのでココでは、ちょっと僕なりの例えの作り方を紹介してみますね♪

「例え話」の作り方

例え話って、言ってみれば、話の構造が似ているモノに置き換えるってことなんですよね。(具体的な話を、一度抽象化してみて、そしてさらに相手が分かりやすい話(具体例)に置き換える)

例えば、先程のホームページの話を例えてみると。
(一度、抽象化してみる・・・)

・ホームページは、作られたモノ
・サーバーは、設置される場所
・アドレスは、その場所を示すモノ

この様になります。

さらに、この抽象化されたモノを、相手が分かりやすい具体例に変換し、

・作られたモノは、お家
・設置される場所は、土地
・その場所を示すモノは、住所

これで例え話に使うパーツの完成です!

あとは話の中で、変換することができる文言の後ろに”()”を利用して表現してみたり、もしくは「例えば、●●●・・・・・・・●●●。な感じで~」みたいに表現してあげれば完成です(^^)

フォントは用途によって使い分けてみよう

フォントにもそれぞれ、役割があるってご存知でしたか?
普段からよく利用されているのが、ゴシック体。そして明朝体。この2つがメインだとおもうんですが、どんな感じで利用されていますか?

なんとな~く。って感じですか?
それとも、お気に入りはこっち!って感じですか?

実はですね。
ゴシック体は視認性が高く、タイトル・キャッチコピー・見出し等に向いていて。
明朝体は可読性が高いから、文章等に向いているんですよ。

視認性が高いとは、人から目に付きやすいという意味で、
可読性が高いとは、読みやすいという意味です^^

だからほら、

新聞も、タイトルや見出しには、ゴシック体を。
文書には、明朝体を使用されているでしょ^^

この様に、フォントにもそれぞれ役割があるので、「見やすくしたいな~」と思うときは、このフォントもちょっと気を使ってみてくださいね。

行間を考えてみよう

行間に関して言えば、実際に見てもらったほうが分かりやすいので、まずは下の図を御覧ください^^

まずは、行間が全くない文章です。

ちょっと窮屈で見にくいですよね^^;
では次に、行間が0.5文字分空いている文章です。

ちょっと見やすくなりましたよね^^
それでは最後に、行間1文字分を空けて文章です。

どうです?

行間を空けて見やすくなったと思いませんか?

僕らが文章を読むときに、一番読みやすく感じる行間は、

0.5文字 ~ 1文字

と言われています。
このくらい空けておけば、長い文章でも、読む人に、そんなに負担を与えず読んでもらえるようになります。

しかし、行間0.5文字 ~ 1文字の間では、その文章の量と、フォントによっても変わってきますので、そのあたりはちょっと調整してみてくださいね。

ちなみに、ゴシック体と明朝体で考えると、

ゴシック体の文章は、フォント自体がちょっと詰まっている(可読性が低い)ので、行間はちょっと広めに(0.8~1)。

明朝体の文章は、フォント自体がスッキリしている(可読性に優れている)ので、行間はちょっと狭く(0.5~0.8)。

してみると見やすくなりますよ(^^)

アメブロで行間設定をするやり方>>

ひらがなを使ってあげる

”ぱっ”と見の印象ですが、
哲学書や歴史書などは、とても漢字が多く、興味が無いと読みたくないですよね(^^;) っというか逃げたくなりますよね(笑)

でも逆に、分かりやすさを追求された本(例えばブログの書き方の本)などは、ひらがなも多く、なんとなく優しさも感じられ、ちょっと目を通して見ようかな~という気持ちにさせてくれますよね♪(これも興味があればの話にはなりますが^^;)

やっぱり文章も人と一緒で、”ぱっ”と見の印象が大切なんですよね。
”ぱっ”と見の印象がよければ、それだけ読まれやすくなるんですよね^^

だから、できるだけ、

ひらがなを使いましょ~う!

ひらがなは、文章全体の6~7割がベストだと言われています。

そして、もし、どうしても漢字が多くなりすぎたーーーー!っと思ったときは、ひらがなにできる箇所を探してみてください^^

「漢字をひらがなにひらく」ってご存知ですか?

実は、ひらがなと漢字のバランスを保つために、この「ひらき」という技があるんです^^これメッチャ便利なので覚えておくと良いですよ~。

ちょっと、その「ひらき」をここで紹介しますね^^

漢字をひらく

代名詞

あなた(貴方)、だれ(誰)、これ、どこ。など

接続詞

あるいは(或いは)、かつ(且つ)、しかし(然し)、ただし(但し)、なお(尚)、また(又)、および(及び)。など

形容詞

こと(事)、とき(時)、ところ(所)、もの(者/物)、ため(為)。など

副詞

いつか(何時か)、さらに(更に)、すでに(既に)、ぜひ(是非)、ちょうど(丁度)、どこか(何処か)、ほとんど(殆ど)、ますます(益々)。など

その他もこちらから調べることができます  >> google検索(漢字 ひらく 一覧)

もちろん漢字で書いても問題はないので、そんなに細かく気にする必要はないのですが、もし「ちょっと漢字が多くて、見た目かたいな~」と思ったときは、漢字を、この様にひらいてみてくださいね♪

まとめ

高いお金(時間)をかけて作るんですから、自己満足で終わるモノじゃなくて、ちゃんと見る人にも伝わるモノを作りましょうね!じゃないともったいないです。

ホームページ、パンフレット、広告などなど、これらを作ったり企画したりするときは、

見る人へ伝える為だけのモノなんだ~。
間違っても、自分の為ではないのだ~。

っと思いながら、おこなってくださいね♪

それだけで視点が変わり、見る人(ユーザー)にとって、分かりやすく見やすいコンテンツになります。そしてそれが最終的には結果へと結びつくようになります。

まず一歩目は、見てもらうところからです^^♪

僕(やす)はこんな人(Facebook)です。

僕はこんなモノ(和を感じる)(自然)を撮影するのが好きです。

僕はWEBサイト(ホームページ)を制作しています。