実践したいコミュプロフの編集テクニック3つ!
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

実践したいコミュプロフの編集テクニック3つ!

2014-01-20 12:54
  • 6
この記事はニコ生のコミュニティプロフィールの
編集テクニックについて書いたものです。

適度に余白を使う

コミュプロフで編集できるのは文字だけになります。画像や写真を貼り付ける事は出来ず、自分の描いたイラストを載せる事もできません。特殊文字(☀☁☂☃ 等)やドット絵で絵的な内容を入れる事はできますが、基本的に文字だけです。

文字だけを書きつづって羅列したものは読んでいて疲れますし、画面内に文字ばかりだと窮屈な印象を持ちます。

下のサンプルで比較してみます。

Before ~ 余白無しの場合 ~
After ~ 余白有りの場合 ~

余白有りの方が無しの場合より、見ていて読んでいて疲れにくくありませんか?

余白無しだとごちゃごちゃしていて、どこからどこまでが同じ内容のまとまりなのか分かりにくいです。余白を取ったり改行したり、情報の区別としてコロン(:)等を入れても良いと思います。今回は最小限の余白ですが、これよりももっと余白をもって充分な余裕を持たせてデザインするのもありです。

リンクには色をつける

動画や静画への自動リンクは別ですが、ニコ生のコミュニティプロフィールでは(http://~)のURLの記述は、クリックしても自動的にそのページに飛ばないですね。そしてURLの記述に色が付いたり、マウスを上に持って行っても何も変化がありません。

つまり、色の変更や下線など、何の装飾もない場合は字面でそれがリンクかどうかを判断するしかありません。それだとちょっと見る人にとって分かりにくいから色をつけようという話です。

Before ~ リンクの色をつける前 ~
After ~ リンクの色をつけた後 ~

上記、比較してみてどうでしょうか?

コミュプロフをぱっと見て、この部分は通常の文章、この部分はリンクの文章として、それぞれ判別出来たほうが見やすくなります。

もちろん自動リンクではないのでクリックして飛びませんが、同じ色の文字列よりは色を区別して下線を引いてあげることで、ここは別ページのものだよと合図することになります。これを実践している人は閲覧者に気を使っていると分かります。

以下のソース内をコピーして使って下さい。緑字の英数字を変えると色が変化します。

WEB色見本 原色大辞典 - HTML Color Names

ソース ※下線有り
<font color="#4285f4"><u>サンプル</u></font>
ソース ※下線無し
<font color="#4285f4">サンプル</font>

見出しをつける

見出しはタイトルや標題といった内容を区別するものになります。これがあるかないかで見やすさや読みやすさは格段に違ってきます。先程から実践してきた内容に見出しをつけてみます。

Before ~ 見出しをつける前 ~
After ~ 見出しをつけた後 ~
見出しがあることによってその部分に大体何が書いてあるか分かるようになります。内容は箇条書きでも良いです。コミュニティに共通したテーマは文章よりも箇条書きで、すぐにどういう内容なのか分かる方が初見に判断しやすいです。

以上、3項目の「実践したいコミュプロフの編集テクニック3つ!」でした。

広告
コメントを書く
コメントをするには、
ログインして下さい。