こんにちは、アートディレクターのtamagoです。
ここ数ヶ月の間でいくつかのWebサイトを一生懸命制作していましたが、ようやく業務も落ち着き始めました。サイトも先日無事に公開することができたので、機会があればいつかそのお話もできたらいいなーと思っています。

まぁそれはそれとして、ここ最近アートディレクターとして社内の仲間やお客様とお話をしている色々な場面で、情報設計とデザインとの兼ね合いや、なぜそういうデザインが最適なのかということに関してすごく興味や関心を持っている人たちが増えたなーと感じています。

そこで、自らの考えをまとめたり初心を思い出すという意味で、NTTドコモ・au・SoftBankのWebサイトをアートディレクターの目線で見てみました。

人様の制作したWebサイトに対して勝手に感想を書くということはとてもおこがましいことだとは思いますが、批評をするわけではないのでそのあたりはゆるい感じで読んでください。

-

【Webサイトの役割って】

ここ数年でWebサイトのデザインの市場に対する役割や重要度って結構変わってきたなと思います。
それこそ5年ほど前あたりからでしょうか、「とりあえずwebサイトがあればいいや」っていう考え方から、「お客様の顧客満足のため」とか、もっと言うとたくさん商品を売るための「販促ツール」という役割期待が非常に強くなってきましたよね。

いまでは、４マスであるテレビと新聞に続いて、ラジオや雑誌を抜いて3つ目にWebサイトが利用されているほど広告メディアとして利用されるようになってきました。たぶんこの先も上昇傾向でしょうね。

【初心を思い出す】

私はいままでにWebデザイナーとして多くのサイトを参考や勉強のために見てきましたが、その中で大手カメラメーカーNIKONのWebサイトは駆け出しのWebデザイナーだった私の中ではかなり印象的なサイトの一つです。

Webデザイナーとも呼べないアシスタントデザイナーのころは、いいサイトと悪いサイトの区別もろくすることができずがむしゃらにデザインしていたわけですが、そんな時、NIKONのサイトを利用して
・将来こんなサイトが作ってみたい！
・こんな使いやすい設計ができるようになりたい！
・メーカーのブランドイメージとサイトのブランドイメージってこんなに近づけられるものなんだ！ほえ〜
と感じたものでした。

そのときはWebサイト自体に好感をもったわけですが、いまではカメラに対してなんとなくの知識しかない私にとっては、「カメラ＝ニコンかな」と思ってしまうほどメーカーのファンになっています。

つまり、Webサイトを入り口にして、最終的にそのブランドのファンになることもあるんですよね。そう思ってくれる人が一人でも多くできるようなWebサイトを作っていきたいなと思っているわけです。それが私の初心なわけです。

-

■■■■　NTTドコモのWebサイトって　■■■■

NTTドコモのWebサイトってどうですか？
私は3つの中で一番好きです。
好きというか使いやすいし好感が持てます。

あ、私が利用してるキャリアはauですが。

2008年の7月頃に新しくリニューアルされましたが、リニューアルされる前から使いやすいサイトだなっていう印象はありました。
今回リニューアルされて、さらにそれが増したような印象です。

【 色 】

ドコモレッドをメインに、背景を白、アクセントカラーとしてリンク色に青と、この３色をベースにサイト全体を整えているわけですが、この3色は「カジュアル」な印象を人に与えるようです。

携帯電話というものは今では子供から大人まで幅広い年齢層の人たちが多種多様な理由で利用していますよね。
もう一人一台もっているでしょうし、生活の必需品の一つなのかもしれません。
で、カジュアルな配色というのは、その多くのターゲットに対して好印象をもってもらえる色じゃないかなと思います。

赤によって暖かみや活発さを感じさせ、白によってソフトな印象をだすことができます。また、グレーのグラデーションを直接目に入らないような部分で多様することで、ちょっと堅実な感じというか、企業の信頼性というか、そういう印象もちょっと臭わせる配色だなーと思います。

つまり丁度いい感じというか。
（人によって感じ方は違うと思いますので、私はそう思いますというニュアンスです）

【 トップページの使い心地 】

まずサイトのトップページに訪れたら、私だったら「目的で探す」というエリアをクリックします。
というより、そこがすぐに目につきます。

人によってサイトに訪れる理由は様々でしょうから、ここをどれだけ使いやすく作るかで、サイト全体に感じる印象は全く変わってくるのではないでしょうか。
NTTドコモのこのエリアは結構色々考えられていてとても使いやすいです。

●トップページの「ラベリング」がいい

「料金を節約する」とか「お得な情報を知りたい」とか、利用者目線の言葉になっていますよね。
こうすることでスッと目に入ってきてわかりやすいです。携帯電話のことを「ケータイ」と記載しているところがミソですよね。

さらに、このエリアは画像文字になっています。
安易に考えると、文字サイズを大きくしたいときに大きくならなくて使いづらいのでは？とか思ってしまいますが、ここはあえて画像文字にしたことで、文字を大きくしたときにそれぞれのワードが改行されて読みにくくならないように考慮されているんじゃないかなと思います。
一つ一つのワードの文字数が短いものもあれば長いものもありますので、これが改行されたりすると逆に読みにくくなるんじゃないかなと。
それにアンチエイリアスがきれいに効いていますので可読性もいいですよね。

【 製品ページの使い心地も 】

●製品ページの「ナビゲーション」もいい

このような大規模サイトになると、かなりページ数も多いでしょうし、階層も深いでしょう。
リニューアル前から、いいなーと思っていましたが、ドコモのナビゲーションはその辺がうまくまとめられています。

まず、同階層のF906iシリーズがクリック一回で比較検討できるように考慮されていること。
さらにその上の階層にもすぐに戻れること。
さらにその上の上の階層にもすぐに戻れます。

実際、比較検討するために同シリーズのリンクボタンをクリックする人は多いと思います。
実はその上の階層に戻りたいと思う利用者も多いらしいです。私もそうですが、実際カチカチカチカチ行ったり来たりしますし、今どこにいるかわかりやすいなーと感じます。

結局、ここもパンくずのような役割になっていて、階層の構造が視覚的に表現できているから使いやすいと思うのでしょうか。参考になります。ちっちゃいサイトマップみたいなもんです。

-

■■■■　じゃあauのWebサイトって　■■■■

auについても、2008年の4月頃だったかな？ちょっと曖昧ですがリニューアルされましたね。

auは昔から「見た目」のデザインというか、ビジュアルに特化した印象を持っていました。
トップページのジャバラのメニューも色々なところで見かけ始めたのもau発信で色々なサイトで見かけるようになりましたし、「あのauのトップページのメニューみたいな」というとある程度は伝わっていましたよね。

【 色 】

オレンジをメインに、背景ではベージュ、アクセントカラーとして水色に近い青。と、この3色を利用してサイト全体構成していますね。

この3色は、基本的は「子供らしい」印象を人に与えるらしいのですが、オレンジの濃さと、青の水色加減が絶妙なバランスで淡すぎず濃すぎず調整されているので、少しカジュアル要素もプラスされています。

BtoBというより、完全なBtoCというか、親しみを非常に感じる配色になっているのが特徴じゃないでしょうか。
ほんと絶妙ですよね。たまにイラストもあってとても親近感を感じます。

【 レイアウトやスペーシング 】

今では3つのサイトともデザインがとても配慮されていて比べようなくどれもキレイですが、3つの中でも特に早い段階でビジュアルデザインに配慮されていたというように思います。

auは上でも書いたように、配色に関してもそうですが、要素ごとのバランスもキレイです。

基本的には決まった広さで間隔を空けるようにしているようですが、関連し合う要素同士の間隔は狭くしてあります。
さらに文章のレベルや役割に合わせてタイトルの装飾や枠の囲み方を区別しており、それをサイト全体で統一しているので非常に整理された印象を感じるんだと思います。

あと、ページの左右にページを区切るラインがなく、開けた感じにしてあるので圧迫感のない開放的な印象を感じます。なんというか企業の堅さを感じさせない身近さをauには感じてしまいます。

【 ページの先頭へ 】

私もWebサイトをデザインしていて、たまに悩むのですが、「ページの先頭へ」ってボタンはどこにあると押しやすいのかなと。

auのサイトだと画面の右下にいつもくっついています。
これはとても使いやすいなと個人的に思います。
ページの一番下にあったり、ページの途中にあったりが一般的ですが、これだと先頭に戻ろうかなと思ったときに少なからずスクロールしないといけませんよね。

スッと、パッと、ポチッっと押せるいい位置に配置できてて使いやすいと思います。「うまい、 やすい、はやい」の牛丼なみに。それは全然違うか。

-

■■■■　最後にSoftBankのWebサイトって　■■■■

SoftBankがリニューアルされて一番新しいですよね。
リニューアルというか新設されたんでしょうか。ちょっと曖昧です。
私がリニューアルに気づいたのは2008年の10月ですがもっと前からあったのかな。

SoftBankは他の2つに比べてめちゃくちゃスタイリッシュですよね。
カッコイイっす。
洗練された大人っぽい印象を感じますよね。

【 色 】

白・黒を基調にして、それと青の3色を主に使っているようです。

ページによって白がメインか、 黒がメインかが違うようですが、この配色は「スマート」な印象と「モダン」な印象を人に感じさせるようです。

SoftBankに関しては他の2つと比べると、ターゲットが独特というか、携帯電話の対象者全員を囲い込むというより、さらにググッとコアなターゲットに絞り込むことで、ブランドの「らしさ」を確立することができていると感じます。
SoftBankの携帯電話って、どことなくスタイリッシュで、電話を見たら、「あ、これSoftBankの携帯電話ね」ってわかると思うのですが、その印象をちゃんとWebサイトにも反映できているなーと感じます。

これってWebサイトを作るときに一番難しくて、アートディレクターとしては永遠の課題としていつも考えていて、どうしたらWebサイトでそのブランドらしさを表現したり利用者に伝えることができるのかなーと悩んでいるわけですが、SoftBankはここの点がとても参考になります。

【 サイトマップが面白いよ 】

サイトマップのページってみなさん利用しますか？
私はすぐに利用しました。
ちょっとだけトップページの導線がわかりにくかったからかもしれません。

でもそれをちゃんとカバーするようにサイトマップもこだわって作っています。

これほどの大規模なサイトを一枚のサイトマップに収めるとなると、それだけでかなりページの長さが長くなってしまうと思うのですが、SoftBankのサイトマップは、メモリをちょちょいと左右にいじることで、細かい情報を省いたり出したりが3段階に調整できるようになっています。

他のページにも、AjaxやJavascriptを小粋につかったアイデアが盛り込まれているので面白いですよ。
先端技術って感じです。

-

■■■■　そろそろマトメ　■■■■

と、つらつら書きましたが、利用者が多いWebサイトほど、使い勝手や情報整理やWebブランディングなどなど。色々なことを考えて顧客満足や販売促進が向上するように大勢の人間があーでもないこーでもないと言いながら作り上げているわけですよね。

だからこそ参考になることがいっぱいあって、刺激をうけるわけです。

私も制作者のみなさんに刺激になるような、そして利用者に満足してもらえるWebサイトをこれからも作っていきたいと思います。
長く書きすぎました。
指先がピロピロ震えてきたので数ヶ月のあいだ筆休みさせてもらいます。

ではでは〜