※回答一覧

 出題者   カテゴリ   作成日

坂本　邦夫		 ユーザビリティ・デザイン担当 2016-03-31 13:06:14
 問題   ヒント   回答数 
■文章の中の強調について

ウェブページにおける最も重要な要素は「文章」です。

もちろん写真の訴求力は強いのですが、検索結果や知人がSNSでシェアした先のページがどのようなものであるのかを判断するのもテキストの内容ですし、ページに到達されてから、商品やサービスが必要であるかどうかを判断するのは文章にしかできないことなのです。

文章表現を行う場合、わかりやすい日本語を書くのはもちろんなのですが、重要な部分をより見せるための工夫も重要です。

そこで今回の課題は文章内の強調をどのようにするかを考えるのが今回の課題となります。


強調にはどのような色を使うのが望ましいでしょうか?
強調に使われている色と、その色が選ばれた理由を教えてください(自分が管理するページで構いません)。

もしとりあげるサイトが浮かばない場合には、「ウェブ担当者通信のメルマガ登録ページ(http://webtan-tsushin.com/eletter)の強調色を変える」という想定で考えてみましょう。

回答例)
サイト:「運営中の自社サイト」あるいは「ウェブ担当者通信のメルマガ登録ページ」

前提となる画面の色
本文部分の背景色:白(#FFFFFF)
文字色:黒(#333333)
リンク色:青(#0000DD)

強調の色
強調1:○○色()　理由:～～～～
強調2:△△△色()　理由:～～～～
強調3:△△△色()　理由:～～～～
・
・
・		 4

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
1 yukko
強調1:赤
理由:アラート的で目に入りやすいので最も強調したい部分に使う。特に商品ページやお知らせページなどでお客さんに注意を促したい時に使います。神経を興奮させる色でもあるので購買意欲を促す時などにも有効かと思い使用をしています。が使い過ぎると注意書きのような否定要素が強くなるので注意して使用しています。

強調2:緑
理由:緑は安心感があり調和しやすい色なので想いなど強調したい部分に使います。顧客に共感して欲しい時に、気持ちを落ち着けてもらえる心理作用もあるのでこの色を使用します。主にブログなどで使用しています。		 銅 (坂本　邦夫)
色の意味も合わせてご回答いただいたyukkoさんを銅とさせていただきました。 注意喚起や安全色として使われている色はJIS規格にも定められており、私たちが普段の生活で見かけられる使い方です。それを文章も適用し、なるべく違和感を感じさせずに強調させるのが、最近の強調色では多く見られるようになっています。 コンテンツが長文化し、強調すべき場所が増えるに従って、「文章を読む」という流れを妨げない強調色が重要になってきています。
0 yamataco
サイト:「ウェブ担当者通信のメルマガ登録ページ」

前提となる画面の色
本文部分の背景色:白(#FFFFFF)
文字色:黒(#333333)
リンク色 : 青(#0000DD)

強調の色
強調1:黄色のhighlightで太い文字
理由:h2,h3の時がオレンジで目立つため、文字色を変えるよりもハイライトをつけたほうが強調できるから。
バナーやタイトル、箇条書き部分の背景色などさまざまな色があり、それらの色と被らず目立つ色で考えると黄色がよいかな、と思いました。		 銀 (坂本　邦夫)
今回唯一のハイライト色を回答していただいたyamatacoさんを銀とさせていただきました。 本文の強調はリンクの色を青とした場合、色が被ってしまうため、基本的に青は使いにくくなります。 そのため赤やオレンジといった暖色が使われることが多いのですが、今回取り上げていただいた「ウェブ担当者通信のメルマガ登録ページ」 では、見出しがオレンジであるため、強調にオレンジを使いにくいということで、黄色を背景に選ぶというのは素晴らしいと思います。 白背景の場合、黄色は文字色としては薄すぎて使えないため、背景色として使えないことがほとんどです。黄色の持つ「注意喚起」の意味も合わせて、少し強めの黄色を使うのがよいでしょう。
0 kamino
サイト:「ウェブ担当者通信のメルマガ登録ページ」
http://webtan-tsushin.com/eletter

■前提となる画面色
・本文部分の背景色 : 白(#ffffff)
・文字色 : 黒(#333333)
・リンク色 : 青(#0000DD)

■強調色
・強調1
　黒太(#000000)
　理由 : 白バックなら黒字で太字が一番目立つと思ったから
(赤もいいと思いますが警告、危険という感じがします)

・強調2
　緑太(#339900)
　理由 : 緑は目に優しい気もしますし、白バックだと映えると思ったから
(LINEの緑が印象的です、ブログなどの強調に使います)		 注目 (坂本　邦夫)
kaminoさんの回答を注目とさせていただきました。 数値を変えずに太字にするというのも実は色の面積が増えるため、色を変えるのと同じような効果があります。文字のサイズを変えるのも同様です。 強調には様々な方法がありますが、文章の流れを止めないという意味で、あえて控えめな色で強調することも非常に重要です。 ただし、強調2の緑色は白背景に対しては少し薄いかもしれません。屋内でのPCでの閲覧のように安定した環境であれば読めるとは思いますが、外光や遮光フィルムなどの影響を受けやすいスマートフォンサイトでは、どうしてもコントラストが低めになり、大事な部分が読まれにくい可能性も出てきます。 閲覧者の属性次第ですが、様々な環境を想定して、少し暗めの色を強調に選ぶようにしましょう。特に緑は色が明るく見えやすいため注意が必要です。
0 YN
前提となる画面の色
本文部分の背景色:白(#FFFFFF)
文字色:黒(#333333)
リンク色:青(#0072a8)

強調の色1: 赤色(#c40003)
[理由] 赤は一般的に注意を引くために使用されているので、色味の印象だけでまずその意図が伝わります。また、弊社のブランドカラーが青を基調としていて、サイト上のロゴやグローバルナビなど要所要所に青系の色が配置されているため、反対色である赤は非常に目立ちます。

[補足]
基本的に、強調したい内容は、テキスト表現や配置などを工夫することにより示すよう努めています。また、見出し以外の部分でのボールド文字の使用も必要最低限に抑えています。新着コンテンツを示す「NEW」などの文字や、特別に強調したい告知事項、注意事項がある場合は、赤色を使います。
いずれにしても、強調の表現を多用してしまうと、どのメッセージが本当に重要なのかが分からなくなったしまうので、極力使用しないように心がけています。
また、サイト自体がポップではなく落ち着いた印象を与えることを目的としているため、色やボールド使いだけでなく、イクスクラメーションマークなどの多用も控えています。		 金 (坂本　邦夫)
どの方の回答からもきちんとした理由を付けた強調色の選び方が書かれており迷いましたが、補足で丁寧に書いていただいたYNさんを金として選びました。 今回の出題で一番考えていただきたかったのは、実は「本文で強調を使わない」ということにありました。 各ページのコンテンツごとにきちんとした流れが出来てればそれほど問題ではないのですが、散文的に文章を書き始めてしまうと、どうしても後から書きたいことや大事に思えることが増えてきて、強調を多用したくなるのですが、実際には見出しや文章の構造そのもので解決できる部分も多く、その部分をきちんと指摘していただけました。 ブランドカラーが青ということで、赤（あるいは暖色）を強調に選ぶのもセオリー通りで問題はありません。