ビジュアルファシリテーターの阿呆な研究

Read Article

イメチェンしたホームズ君のイケメン度合いを勝手に語る

2013年になって、私の周囲の殿方数名がイメチェンした。
基本男子(人間全般)にはあまり興味がないので「ふーん」としかみてなかったけど、私の心をぐっとつかんだニクい殿方が一人いた。
その名もホームズくん。言わずと知れた有名住宅情報サイトHOME’Sのキャラクターである。

なぜ彼が私の心をつかんだかというと。
ひとえに「便利なイケメン」になったことにある。

便利なイケメン、というと、アッシーメッシー(死語)的な存在を思い浮かべる方も多いかと思うが、彼は違う。
webという媒体でいかしてくにあたり、至極便利に登場できるようになったのだ。
ホームズくんとからむ機会が多いデザイナーディレクターにとっては嬉しい変身なんじゃないかと勝手に外から推測している。

というわけで、今回はイメチェンしたホームズくんに対し、なぜ私が勝手にイケメンとみなし岡惚れしたかについて、語ってみようと思う。

ホームズくんのイメチェン概要


まず、ホームズくんの劇的ビフォーアフターについて見てみる。
※公の情報はこちらに掲載されている

ホームズ君のイメチェン点は以下。
・帽子の形が丸く変更
・目と目の間隔が開き、相対的に口が小さく見えるようになった
・肌色が色白になった
・ボディラインや衣服で曲線が増えた
・茶色い2色の衣装が明るいオレンジ1色になっている
・虫眼鏡が巨大化した

全体的に、やわらかく、明るい印象に近づいたように思う。
では、各項目についてみていくとする。

イメチェンしたポイントの分析

・帽子の形が丸く変更


帽子が丸くなったことで、ホームズ君の首から上における顔の占める割合が増えた。
首から帽子の先っぽまで、顔のしめる高さは105px中50px(47.6%)だったのが、イメチェン後は85px中45px(52.9%)となっている。
もし首から帽子のさきっぽまでの高さが同じ範囲内にホームズ君をおいたばあい、顔の面がふえた分ホームズ君の表情がより大きくみえるようになったのである。

・目と目の間隔が開き、相対的に口が小さく見えるようになった

ホームズ君は衣装変更のみならず、美容整形までした。目:間隔:目が8:11:8→ 6:14:6となっていたのである。
目と目のの幅が広がったことで、口が相対的に小さく見えるようになった。縦長気味にコンパクトにまとまっていた目と鼻と口が、少し横に広がったようにみえる。はかってみた所、整形前は横(width):縦(height)が24:26、整形後は26:24となっていた。

整形前のホームズ君はすこしシャープな印象があった。

そこで目と目のすきまをあけ横長にすこし調整することで、より目に視点がいきやすくなり、少しやわらかい表情をかもしだすことに成功した。ちょっと幼い印象となった。

・肌色が色白になった

美白である。肌の色は#facc87から#ffd9adとなった。美白したことで、より黒目の美しさが際立つようになった。リアル世界でも色白な方は目に注目がいきやすく、かわいく見えると思う。

・ボディラインや衣服で曲線が増えた

体つきもより硬派なかんじからやわらかくなった。漫画を書く時、「男性は直線的に」「女性は曲線的に」というたとえがあったけど、より女性のほうによってきた印象だ。・・・ホームズ君、ホルモン注射したの?

・茶色い2色の衣装が明るいオレンジ1色になっている


遠くから、小さい姿でも判別しやすくなった。webサイト上では、キャラクターは決して大きくあつかえないときもある。たとえばHOMESのトップページヘッダー部分におけるHOMESくんは、高さ58pxの中に顔と胴体をつっこまされている。こういう小さいエリア内でちまちまベストの色がちがったとしても、正直あまり目にははいらない。だったらいっそのこと色が統一しており、ボタンの色だけ際立ってる方が判別しやすいと思う。

・虫眼鏡が巨大化した

持ちもののインパクトが強くなった。同じく姿を判別しやすくなった。

全体としては、「表情や形がやわらかく」「服の色や顔があかるく」「顔に目がいきやすく」なったことで、よりキャラクターが認識しやすくなったイメチェンだと思う。

サイト上で使いやすいキャラクター byデザインの立場

さて、ここからはおもいっきりデザインに関わる人間の立場からホームズ君をみてみる。
正方形に顔の形がちかづいたことで、まずアイコン類でつかいやすくなった。また、尖ったり細かったりする線がへったことで、圧縮して使ってもなんとなく判別はしやすくなったように思う。
つまり、サイトの随所でホームズ君はより使いやすくなったのである。

コレは、デザインする立場からみればとても大事なこと。何かの説明画像でしゃべらせたいとき、すきまでにぎやかしたいとき、目をひきたいときなど、キャラクターは大活躍する。ユーザーの理解をより助けてくれる存在にもなりえる。webサイトサービスの顔ともなる。どんな場所でも登場しやすいすがたである、というのは非常に大事な要素なのだ。

特に、顔(表情をもつ部分)が正方形に近いのは大事だと思う。
どんな場所でも登場しやすい形状としては、正方形が一番だ。
例えばtwitterやfacebookなどのアイコン。限られた高さと幅の中では、ホームズ君の顔がよりみやすくなったはずだ。これはホームズ君の「帽子が丸くなったことで、ホームズ君の首から上における顔の占める割合が増えた。」というイメチェンの大きな効果だ。顔の形が正方形にちかづけばちかづくほど、多様で様々なエリアにおいて表情というのはわかりやすく表現できると思う(長方形の形状がいきる場所もあるとは思うが、基本アイコン関係などでの掲出は正方形に近いものがおおい。)。

ちなみに以前、@h5y1m141氏が主催されているweb業界飲み会においては、「SUMOが無敵!」という話になった。円だからねえ。無敵すぎるでしょう。

・表情をもつ部分が正方形
・尖ったり細い線がない

サービス内で活用していくメインキャラクターはこの条件をそろえるのが必須だと思う。

デザインする人間が使いづらいメインキャラクターは、そのつかいづらさゆえ登場回数をへらされ、気づいたら退場といううきめにあってしかるべきである。というわけで、私は劇的ビフォーアフターをとげたホームズ君の、今後いっそうの活躍をいのるばかりである。がんばれイケメン!きっとあなたはおモテになる!


※地獄のミサワ惚れさせ1009より掲載

ちなみに。地獄のミサワは、小さくするとほんとになにがなんだかわからない。顔面センターだし。
一定の面積のうちに台詞が巨大にあり、かつ表情もみえる大きさであること(もしくは土下座してるとかでまったくみえない)ことですてきなかんじを担保してると思う。やっぱりキャラクターっていいねえ。みんなかわゆいよ。うんうん。

URL :
TRACKBACK URL :

Leave a Reply

*
*
* (公開されません)

Facebookでコメント

Return Top