Webデザイナーに足りないものはブロガーから学べ!【Webサイトの命はテキスト】

どうも、プライベートではWebデザインするよりもテキストを書いてる時間が圧倒的に多かったりするウェブザワです。自分自身でブログ(テキスト)を書いているので他人ブログ以外にも他のWebサイトも見る時には「テキスト」を読んでしまいます。
その中でコーポレートサイトやCSRサイトに対して思っていることがあります。

ブロガーとしてみたWebデザインとは

2012年からブログを書き始めて7年目。やり始めた当初は三日坊主で終わってしまうかなと思っていましたが気がつくと長くやっていました。

長くブログをやっている理由はそれだけの価値があるということですが、それは今回の記事とは別の話で「Webデザイナーが教えるブログでの情報発信の価値とやり方」にて解説しているので良かったらどうぞ。
情報発信していくことで、プライベートで仕事をお手伝いしたり、いろいろな縁が出来るよという話です。

ブログをやっていく中でブロガーの本を読んだり、セミナーでブログを勉強しています。
ブロガーとして他人ブログ以外にも他のWebサイト(コーポレートサイトやCRSサイト)も見たときに気になっていることがある。

それは、コンテンツである「テキスト」の見せ方・読ませ方まで気を使っていないことだ

Webサイトがコンテンツファーストと言われる。コンテンツを構成させる要素は「テキスト」だ。
せっかくよいコンテンツ記事を書いたとしてもそのテキストが見にくくて読みにくいとストレスがかかり伝えたい情報がユーザーにとって伝わらくなってしまう。

ブロガーが読ませることに気をつかってるポイントをまとめてみました。

フォントサイズを大きくする

まだまだコーポレートサイトやCSRサイトでもテキストが小さくて読みにくいサイトを見かける。
読ませたいのか読ませたくないんだか分からなくなってくる。

フォントを小さくすることがクールでイケてるデザインだ!という考えもあるだろうが、Webサイトは命はコンテンツ=「テキスト」であるので、読まれなくては意味がない。

Googleはモバイルでのフォントサイズは16pxとされているので、PCでもモバイルでも見た目が良いフォントサイズではなく読みやすいフォントサイズにすべき。

改行は適切な箇所でつける

一般的にテキストが固まっていると読み飛ばされる可能性が高いので、ネットのテキストというのは斜め読みされるものなので、改行や行間を空けることで、テキストを「なんとなく理解できる」ようにしたい。

Webのデザイン制作会社が制作しているWebメディアでも改行せず長々と読ませている場合もあるのは驚く。書籍のテキストの流し込みと違い、多めかなと思うぐらい改行はしておくべきだろう。

ブログなんて1記事2,000字~3,000字を読むことになるが改行が入っていないと読むのに辛いものがある。ブロガーをやっていなければ改行していくという意識はなかっただろう。

画像で目をキャッチする

上記でも述べたようにネットのテキストは流し読みをされてしまう媒体である。
改行や行間を空けていても文字のみが羅列していると読み飛ばされる可能性がたかい。

読み飛ばされたとしても画像を文中に挿入することで目の流れを止めることができます。
画像には直感的に理解しやすいのたとえ流し読みされたとしてもテキストの中、画像に注目をひくことがあるのでテキスト中にうまく画像を取り入れていきたいです。

画像もきちんと意味をもった画像を用意することも忘れずに。

読まれるタイトルにする

ブロガーは特にタイトルを気にします。そもそもSEO対策のためにタイトルを考えていきましょうという流れで各ブロガーはタイトルの付け方に頭を悩ませています。それだけ大事なところです。

タイトルにも気をつかいますが見出し部分まで気をつけていきたい。

特に自分が読んでいて不満に思うのがコーポレートサイトに必ずといっていいほどある社長メッセージのページです。
社長メッセージは会社の顔として大事な部分と思いますが、ただ社長のコメントを置いているという感じでしてもっとタイトルと各見出しタイトルを読まれるようなタイトルに変えていく必要があるなと思います。

コンテンツはあるのに、まだまだ読んでもらえるコンテンツにしていないというのが現状です。

重要な箇所は太字や色変えで目立たせる

テキストの大事な部分を太文字に変えたり、色を変えたりするこで目立たせることができます。
これって昔、大昔からHTMLに直接書いていたテキストブロガーが使っていたもので、ここからビジネス書にも太文字表記が使われだしたんじゃないかな。

太文字、色文字にすることでサイトのテイストが変わってしまう可能性もあるかもしれないが、バランスを見て大事なところは太文字、色文字表記にしたい。

まとめ.Webサイトの本質はコンテンツ【大切なのでもう一度いいます】

ブログを書いて早6年ですが、ブロガーの必須スキルがWebデザイナーにはない視点であった。
デザイナーは、きれいなもの、トレンドなデザインをおってしまう傾向にあるがWebサイトの命はテキストであると言い切りたい。デザイン優先にしてしまいテキストが見にくくなってしまうことはあってはいけないと考えている。(一部例外もあるけど)

そういう点でいうとコーポレートサイトやCSRサイトは、ただテキストを流しているだけ(当の自分がPDFのテキストを流し込んだ作業経験あり)で見せ方まで考えられていないところだと思う部分なので、まだまだ考える必要があるところだなと思いましたのでブログ記事にしました。

少しでも参考になれば嬉しいです。

シェアボタン

<div class="sns-area"> <!-- Twitter / hogehogeの部分を自分のアカウント名に変更してください。--> <a class="btn-twitter" href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>&via=nishizm&tw_p=tweetbutton&related=nishizm" target="_blank"> <i class="fa fa-twitter" aria-hidden="true"></i> <!-- SNS Count CacheよりTwitterのシェア数を取得 --> <span><?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?></span> </a> <!-- Facebook --> <a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php echo get_the_title(); ?>" target="_blank" class="btn-facebook"F> <i class="fa fa-facebook" aria-hidden="true"></i> <!-- SNS Count CacheよりFacebookのシェア数を取得 --> <span><?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?></span> </a> <!-- Google+ --> <a class="btn-google" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"> <i class="fa fa-google-plus" aria-hidden="true"></i> <!-- SNS Count CacheよりGoogle+のシェア数を取得 --> <span><?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?></span> </a> <!-- はてなブックマーク --> <a class="btn-hatena" target="_blank" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank"> <i class="fa fa-hatena"></i> <!-- SNS Count Cacheよりはてなブックマークのシェア数を取得 --> <span><?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?></span> </a> </div>

おすすめ記事

関連記事