こんにちは、『livedoor 歌詞』や『livedoor グリーティング』を担当している吉沢です。今回は、モバイルサイトの装飾に欠かせない、絵文字の効果的な使い方をご紹介したいと思います。

“装飾”と聞くとデザイナーの仕事のように思いますが、モバイルディレクターは、新規サイト立ち上げやサイトリニューアル以外は、UIやデザインを考えながらコーディングしていくため、絵文字を効果的に使えるセンスが必要になります。絵文字を効果的に使えると、少ないリソースで画面を装飾することができ、ユーザーにはテキストが直感的に理解されやすくなります。

それでは絵文字の効果的な使い方についてご紹介していきましょう。

こちらは装飾前のテキストになります。
40,000曲の歌詞が無料で見放題!


ユーザーに強くアピールしたい部分を考えながら単語と助詞に切ります。
40,000曲 / の / 歌詞 / が / 無料 / で / 見放題 / !


「40,000曲」は「4万曲」とした方が直感的に理解しやすいことが多いので漢字にしてみます。絵文字の選び方は、コンテンツ内容とそれぞれの単語を補完するようなものを選び、単語の前後に配置していきます。
たとえば「4万曲」+「」の絵文字の選び方は、4万曲 → たくさんある → うれしい、たのしい、笑顔 などです。
4万曲の歌詞が無料で見放題!


「無料」と「」そのままでもよいのですが、くどい感じがするので「無料」を削除します。
4万曲の歌詞で見放題!


次に色をつけます。アピールしたい単語は「歌詞」と「」なので、これらに濃いめの色を持っていきます。
4万曲歌詞で見放題!


全体のバランスを見つつ、調整して完成です。
4万曲歌詞見放題


以下は補足です。
DoCoMo の場合、絵文字に色を指定することができます。
KDDI や SoftBank の絵文字とは違い、単色ですのでその特徴を生かします。

単語と絵文字を同じ色にすると、より強調されます。
docomo_emiji1


さらに単語と絵文字の色を分けると、カラフルで楽しいイメージになります(ごちゃごちゃしてしまうこともあるので注意)。
docomo_emiji2


下記のようなベタぬり部分が多い絵文字は、ユーザーの目線を誘いやすくなります。
docomo_emiji3


いかがでしたか? この使い方はほんの一例ですが、絵文字を使うのが苦手な方は参考にしていただけると幸いです。