「モバイルEC 自社サイトを軌道に乗せるまで~(2)デザイン編~」タイトル

2011年1月 通販新聞社 月刊「ネット販売」連載記事バックナンバー

携帯電話を「通販ツール」に進化させるプロフェッショナル育成講座 タイトル ビジネス感度を高めで受講のこと

連載◆71時間目
「モバイルEC 自社サイトを軌道に乗せるまで~(2)デザイン編~」

皆さんこんにちは。飯野です。今月は、弊社でモバイルサイトの制作を承った時のエピソード第二弾「デザイン編」です。デザインによる、ユーザーからのクレームやサイト障害が起こるなどの致命的な失敗こそ起こりにくいものの、ユーザーが「そのサイトに興味をいだく」最初の判断がデザインです。デザインはサイトの第一印象として非常に重要です。今回は弊社のデザイン部のスタッフへ、デザインを完成させるまでにどのような課題、苦労があったのか、またデザインをするときのポイントを聞きながら勉強していきましょう。



コミュニケーションギャップをなくす

弊社のデザイン担当スタッフに「最も苦労したことは何か」と聞いたときにまず挙がったのが、コミュニケーションギャップの話です。一見、デザインとは関係のない話のようですが、これが制作を通して実感したことだと言います。

これは実はデザインに限らず、設計や開発などにも通じるものがあると考えます。要はヒアリングスキルが問われているわけです。お客様がデザインに何を求めているのか?目的は?会社内での承認環境は?だいたいのお客様はアバウトな意見しかお話いただけません。それをなるべく具合的な話にもっていくスキルこそ真のデザイナーだと思います。ただヒアリングしていてもだめです。中にはまったく意見をお持ちでないお客様もいらっしゃいます、「要はお任せ(笑)」。こういうお客様に限って、あとの工程でたくさんの要望がでてきて、またその方の上司や社長などからも意見が入り、最後は判断がまとまらずプロジェクトが遅れるといったこともあります。

デザイン業者を選ぶときは是非ヒアリングにたくさんの時間を取る業者を選ぶとギャップが少ないかもしれません。弊社では3つの工程を一番大事にしています。まず上工程のヒアリング、これは先ほど話したとおりです。次に第一次納品後の中工程、これはお客様へラフ案を出すときのことです。このラフ案のときは、ほとんど対面でお話いただきます。この仕事ももっとも重要な1つです。お客様の顔色やしゃべるスピード、ストレス度合い、感情などすべてを感じ取って、新しいご希望や、修正点をしっかりいただきます。且つこちら側のデザインに対する考え方もご理解いただく、この双方のコミュニケーションが1つになれば誤解が少なく後工程の作業に比較的容易に入っていけます。

3つ目は、納品後の微修正作業です。この仕事もお客様に100%満足した納品物をだすうえで大変重要です。いかに多くの細かい希望をいただけるか?「もう何も言うことはない」と言われるくらいに聞く必要があります。お客様は日によって、お話することが異なっていることも多々あります。よって数日から1週間程度の検収期間が必要です。とくに注意したいのは、紙で見たときと実機で見たデザインは印象が必ず違うということ。

よって納品は「紙」と「実機」の両方で見ていただく必要があります。

実機で見て修正点が多数でてきたということはよくあります。

携帯サイトも確認方法の基本は「紙」

IT以外の業界でもまだまだそうだと思いますが、確認作業の基本はまずは「紙」だということです。いくら作るものが小さい画面の携帯サイトだからと言って、「出来たのでサイトを見て下さい」では大抵の場合、見てはいただけません。弊社ではデザインや設計書は基本的に「紙」(パワーポイントなどのすぐに印刷可能なファイル)と「URL(実機で見れる状態)」にして送るようにしています。携帯サイト上に表示される画面を、紙で見られるようにし、お客様にそこへ直接、修正やご要望を書き込んでいただくためです。それをFAXでお送りいただくことも多いです。この「紙にする」作業はそれなりに手間がかかりますので、世の中にはこれをやらないモバイル企業もたくさんあります。しかし、弊社はこれが一番大事だと考えています。

これを最終工程で行うことで、デザイン納品のギャップはほとんどありません。

背景色やリンクの色は端末によって違う

ここからは、デザイン制作で特に気をつけたポイントを紹介していきます。PCサイトではブラウザによって色が大きく異なることはほとんどありませんが、携帯では、同じキャリアでも色が違って見えることがあります。赤や青などはっきりした色ならまだ良いのですが、パステルカラーなどの微妙な色は、一方の機種では濃くて、もう一方の機種では薄くて見えないといった現象がよく発生します。3キャリアどの機種でも丁度よく見えるように調整するのは意外と大変なのです。色の調整で特に注意したいのが、背景色とリンクテキストの色です。この2つは、今回に限らず弊社のお客様からも最もご要望が多いものの一つです。

まず背景色は、携帯サイトに華やかさを出すために、トップページには必ず入れたほうが良いでしょう。白だと地味になってしまいます。背景色だけでがらっと印象が変わりますので、特に見た目を重視するアパレル系のサイトなら相当凝ったデザインになることもあります。今回、弊社で承った某洋服販売サイトでは、トップページの背景を、白バックに3色のブランドロゴのモノグラム調にしたのですが、モノグラムに3色も使うため、その上に表示されるテキストが見づらくならないよう工夫しました。濃すぎても薄すぎても駄目ですし、さらに機種ごとにその度合いが異なります。何度も調整を繰り返し、最終的にはお客様のご要望で弊社が提案したものよりも薄めの色調に収まり、その上に表示されるカラフルなテキストともうまくバランスを取ることができました。

次にリンクテキストの色ですが、携帯サイトでは基本、リンクテキストの下に「下線」が付きます。このテキストリンクと下線の色の組み合わせは、キャリアによって以下のように異なります。

<ドコモ、ソフトバンク>リンクテキストの色は個別に好きな色に指定できるが、下線の色は、1ページ内で1色しか指定できない。つまり、リンクテキストと下線の色が異なる場合がある。

<au>リンクテキストと下線の色は必ず同一色となる。このような違いがあるので、理想的なデザインはどうしても特定のキャリアでしか実現できない場合があります。どのキャリアに合わせるかですが、最もシェアが大きいのはドコモの50%なので、ドコモに合わせるのが無難でしょう。ドコモとソフトバンクはページ内で下線を1色しか設定できないので、どの色にするかのセンスが問われます。シンプルなサイトでは青一色のところが多いですが、デザイン性が求められるECサイトなどでは、手間をかけて個別に設定する場合も多いです。

バナーを綺麗に見せるなら、写真よりもイラスト

サイト内でセールなどを行うときに、トップページにバナーを貼ることがあると思います。その際、注意したいのがバナーのデザインです。バナーにはPCと同じような感覚で商品画像を使いがちですが、携帯では商品画像=写真を使うことは避けたほうが良いでしょう。なぜなら、バナーのような小さい面積の画像では、写真が綺麗に出ないためです。また、写真は色数が多いため容量も多くなり、表示速度が落ちてしまいます。イラストであれば色数が少ないので比較的スムーズに表示できます。

また、バナーのような小さな場所では、写真のように細かいものを載せるよりも、イラストや大きな文字でインパクトを出した方が効果的です。デザインで迷ったら、数日間ABテストを行い、クリック数の多かったバナーを選んで使っていくのも一つの手です。ポイントは、「一瞬で理解できるもの」にすること。英語よりも日本語、そして簡潔な言葉を使うことです。

サイトの確認は“最も市場に出回っている端末”で

色々な確認作業の中で、弊社で使っている端末では正常に表示されるのに、お客様の端末では希望通りに表示されない、ということが何度かありました。お客様はあくまで一般的な携帯ユーザーであり、皆が最先端の機種を使っている訳ではなく、むしろ数年前に購入された端末を使っている方がほとんどです。そのような時、どの端末を基準に考えたら良いのか。それは「よく市場に出回っている機種」に合わせることです。サイト制作者は常に市場を把握し、変化に対応していくことが大事です。



他の記事を見る


矢印 アイコンバックナンバー目次へ


飯野勝弘プロフィール

飯野勝弘プロフィール

日本IBM㈱にて法人営業後、大手通販会社の通販部門責任者を経て、 ㈱MTI(ジャスダック上場企業)執行役員モバイルコンテンツ事業部長として、公式コンテンツ300サイト以上の立ち上げを経験。現在㈱モバイルコマース代表取締役として、全国の通販企業の携帯サイトコンサルティング業務を行う。
主業務に携帯サイトの設計企画、3キャリアへの公式承認代行(完全成功報酬制)、サイト開発、運営、売上UPコンサルティング、セミナー等 幅広く活動中。毎月4キャリア(ドコモ・KDDI・ソフトバンク・ウイルコム)へ通販企業様の公式サイト提案を行っている。数社のIT企業役員も兼務。


連絡先:東京都世田谷区用賀2-38-14 青木ビル 4階
電話03-3700-5259



トップへ戻る アイコントップへ戻る

» モバイルコマース トップページ » 通販新聞社 月刊「ネット販売」連載記事バックナンバー » 「モバイルEC 自社サイトを軌道に乗せるまで~(2)デザイン編~」