モノづくりが得意な日本人が手がける海外向けサイトについての調査概要今回私が調べてみようと思ったことは日本と海外サイトの違いでした。このテーマにしたきっかけは、私が海外旅行好きだからです。海外にいくと食生活、建築物、デザインすべてが異なっています。サイトにおいても、その違いを発見することが出来ておもしろいのではないかと思ったからです。そして、その違いを知ることで日本人が海外向けサイトを手がけることになったとき、何に注意して作ればいいかがわかるかもしれないと思ったからです。日本の大手企業のサイトを作るとき、外国人の方向けに英語版サイトを制作することがあります。日本語のサイトの文章だけを英語にすればいいような気もしますが、はたしてそれだけで外国の方が見やすいサイトになったかというと違うと思います。日本語サイトなしで、いきなり海外のサイトを作る場合でも、普段日本のサイトを見て、日本のサイトを作っているので、どのようなテイストでどこに注意をして作っていいのかがわからないと思ったので、今回はその違いを調べ海外の人に受け入れやすいサイトを作るための方法について考えてみました。海外のサイトについて語られているサイトを見つけることができなかったので今回は私の独断と偏見で違いを検証していこうと思います。方法は、日本と海外（アメリカ）にある同じサイトを見比べ、違うところをあげていきました。主な参考サイト ※日本語サイト名・ソニー・ナイキ・日産・トヨタ・セブンイレブン・ファミリーマート・コカコーラ・ディズニー・USJ ・マクドナルド・シティーバンク・スターバックス・ヤフー・イケア・トイザラス・ギャップ（英語サイト名）（SONY) （NIKE) （NISSAN) （TOYOTA) （Seven-eleven) （FAMIMA！！）（Coca-Cola) （Disney）（Universal Studio）（MacDonald）（citybank）（Starbacks）（YAHOO）（IKEA）（Toysrus）（GAP）日本ソニーアメリカ SO NY game game ・カチッとしたスタイル・日本と比べ細かい装飾がない・薄い灰色ベース（写真やアクセントカラーのオレンジきいている）・わりと濃いめの灰色が中心（白・黒・灰色とメリハリがある）・縦・横線で統一されている（すべて□ブロック）・あまり凝った枠を使わずにシンプルにグループ分けをしている・バナーやメイン画面など細かいところに芸がある・斜めの線や曲線などを多く使っている music music ・聞く・楽しむ・出会うなど違う切り口で入り口を作っている・レイアウトと色（濃い水色・灰色・薄い灰色）がシンプル・バナーなどにテクスチャーを加えたり、凝った作り・写真と文字で校正されていて装飾がほとんどない・ほぼすべてのボタンやバナーにエフェクトがかかってる（陰など）ナイキ・フルフラッシュで、動きも見た目もクールな感じ・トップページは画像を大きく使ってポスターのような感じニッサン・メインの画像を立てるため、あえてバナーはモノクロにしてある。（ロールオーバーするとカラーになる）・載せる情報がいっぱいでごちゃごちゃしてしまいそうなところをフラッシュを上手く使い、情報を収納している。・着せ替えシミュレーターや、他のメーカーと比較など気になるぼたんがある。 NIKE ・色合いや構成は日本と似ているがデザインのレイアウトが若干異なる。映画館のスクリーンのような感じ。（曲線） NISSAN ・日本のサイトと似ているが、若干情報が少なめ。写真を多く配置し、ナビゲーションはテキストにしてスッキリ。・詳細ページもバナーがなく、ボタンも少ないのでスッキリしてる。・ボタンを押しても画面がきり変わらずイメージ画像右下にあるテレビ画面？らしきものが、大きくなり、その画面内で説明している。・マックでは上手く機能していない。（マックでの確認不足？）トヨタ・ナビゲーションを控えめにして、画像を大きく出している。グローバルナビの上まで車の画像が出てる。・写真以外は、赤・白・灰色で統一されている。・全体的にシンプルに見えるがボタンの装飾など、少しグラデをかけたり、影を付けたりしている。 TO YO TA ・色合いなどは似ているが、日本よりさらにシンプル。レイアウトなど。・グローバルナビの影の付け方など雑な感じがする。影濃すぎ？・デザインより、ロールオーバーした時の動きなど少し凝ってる・新着情報がない・マックでは上手く機能していない。（マックでの確認不足？）・推奨環境にないブラウザに対しての、ページがある。セブンイレブン・とにかくカラフル。トップのフラッシュでキャンぺーンを流している（目立つ） Seven-eleven ・ナビゲーションはすべてテキスト・ボタンにアイコンなどを付けわかりやすくなっている・テキストと写真で構成されている。デザイン性がなくブログのよう。・トップぺージが長い。情報がいっぱい。・画面は大きすぎるし、レイアウトはいまいちで見にくい。・トップページからのリンクが少ない。・リンクしているテキストが黒色で下線のみでわかりずらい。ファミリーマート FAMIMA！！・情報が多いが、色が白ベースでムダに色を使ってないのでまとまっている・ベースが派手な緑（多分カンパニーカラー）で、ボタンもユニーク・見てほしいところにはアイコンや写真を持ってきて目立たせている。・グローバルナビは不思議な記号で、反転すると文字がでる。・ナビボタンの反転は地の色が少し変わったりする程度。控えめ（リンクしていると分かればいいという感じ）・トップページは写真が一枚もなく情報も少なめ・下層ページも色合いが派手で、グラフなども大きすぎるような気がする。・レイアウトが雑な感じ。画像が意図的ではなく重なっている。コカコーラ Coca-Cola ・新着情報からニュースリリース、キャンペーン情報まで見れる・変わったレイアウト。ポップな感じ。・リンク先が多い。情報量多い。・色がカラフル。原色が多いが白の面積が多めなので、いい感じにみえる。・レイアウトは基本的なもの。ヘッダー・コンテンツは３行（ナビ・メイン画像・ナビ）・フ・フルフラッシュでちっちゃな動きや見せ方にこっている。・コーポレートカラーの赤・白メインで、他に目立つ色は使用していない。・情報量は少なく、絵で見せる感じ。・ほぼどのページも統一されたデザイン。・下層ページもカラフルでフラッシュもかわいい。見せ方がページによって違う・ナビゲーションが最低限しかなく、自由な見せ方。イケア・アイコンを上手く使いユーザーを誘導している。・アクセントカラーに濃い青を持ってきているが、その他は白基調。区切りは薄い灰色で、画像を目立たせている。 IKEA ・白を基調としているが、日本と違い区切りはグラデではなく濃い灰色ではっきりと。・レイアウトが縦横線だけで、かっちり。・外人の画像を使い、アメリカっぽさを演出。・アイコンのような画像が大きい。一番下の箇所に設置。・詳細ページもナビ以外は色数を抑え、商品メインに。・詳細ページはよくわからないところでカラフル。真黄色。トイザらス Toysrus ・トップぺージに大きなイラストを持ってきて、おもちゃサイトらしい・青・赤・緑と色鮮やか。わりと濃いめの色を使っている。・ナビのボタンを大きく・わかりやすく・押しやすくしている。・レイアウトが崩れている。ブラウザ確認していない。（ロゴとイメージ画像を上手くつかっている。矢印もカラフル）・商品を小さくたくさん見せている。・アメリカと比べ会社情報（インフォメーション）とバナーもある。ヤフー・写真やテレビなどのアイコンがついている・ヘッダー・ボディー・右にローカルナビ・フッターの基本的な形 YAHO O ・ NEWのアイコンがない・バナーがない（広告が少ない）・枠のデザインを2パターンにし、情報の差別化をしている。・ムダなものがないのか、すっきりしている。レイアウトや色合いも関係しているスターバックス Starbacks ・アメリカっぽい感じ。背景が包装紙みたいでおしゃれ。・リンクしているところが黒に下線で少しわかりずらい。見た目を優先・新着情報が多い。・日本にはバナーあるが、アメリカにはない。・どのページも情報が多めで、いろんな商品を見せている。・下層ページのフラッシュの動きがユニーク。予想していないところに仕掛けがある。・アイコンや画像でわかりやすく説明している。・トップページのローカルナビをロールオーバーの動きが珍しい。・商品のページは面白く見せているが、他のページはテキストばかり。・ページによって、レイアウトを使い分けている。マクドナルド・白メインでさわやかな感じ。雰囲気がある。 MacDonald ・メインの画像のところやナビゲーションにフラッシュを使っている。・色合いがカラフルだが、派手な色は控えめにうまく使っている。・トップページは情報少なめ、フラッシュの画像から選択させる。・バナーが多め。大きめで結構目立つ。・色合いが派手。トップは黒ベースで、白がサブ、アクセントが赤・黄・紫。・写真の撮り方やイメージ画像のレイアウトにこっている。ディズニーランド・イラストや写真をもりこんで楽しげな感じ。 Disney ・トップが遊園地のマップのようになっていてかわいらしい。・ベースはアメリカと同じ紺だが、コンテンツは白とパステルカラーでやわらかくしている。・イラストが多く、ロールオーバーの効果音なども楽しげな感じ。・新着情報が目立つところにある。・フルフラッシュなので、いろんな動きができる。・色が全体的に濃く、どれも目立つ感じ。ギャップ・アメリカのサイトに合わた感じ。色合いやグラフィック GAP ・色合いがカラフル。グラフィックの模様がいい感じ。・ローカルナビがテキストでシンプル。日本のサイトの特徴・バナーやメイン画面など細かいところに芸がある・聞く・楽しむ・出会うなど違う切り口で入り口を作っている・載せる情報がいっぱいでごちゃごちゃしてしまいそうなところをフラッシュを上手く使い、情報を収納している。・ボタンにアイコンなどを付けわかりやすくなっている・トップぺージが長い。情報がいっぱい。・新着情報からニュースリリース、キャンペーン情報まで見れる・ほぼどのページも統一されたデザイン。・アイコンを上手く使いユーザーを誘導している。・新着情報が多い。・写真の撮り方やイメージ画像のレイアウトにこっている。アメリカのサイトの特徴・ Q バナーがない。（広告が少ない）・日本と比べ細かい装飾がない・色などメリハリがある（ペースカラー・サブカラー・アクセントカラーがはっきりしている）・斜めの線や曲線などを多く使っている・ナビゲーションはテキストにしてスッキリ Q ・新着情報がない・トップページは情報も少なめ(リンクするところも少ない） Q でも、全体的にテキストが多い感じがする。・フルフラッシュでちっちゃな動きや見せ方にこっている。デザインよりも。・見せ方がページによって違う。自由な見せ方。私の独断の意見だけでは、かなり説得力がないので、本場の方に上記のことについて聞いてみました。いくつかその理由について教えてくれました。 Q A Q A Q A バナーが多用されていない理由について確かに広告的なバナーは好まれにくく、多用されない傾向にある。小さなアイコンを指してバナーと言っていると思うが、小さなアイコンは目にとまりにくく、使用していないのではないか。むしろ、目につきやすく大きく扱っているので、日本人はそれをバナーと見なしていないのではないか。文章が多いことについてアメリカ人は自慢をしたがる民族であるが、あからさまに自慢をすることは恥ずかしいことだという文化もある。 What's Newはある意味自慢であり広告なので、それをトップページに置くことはあからさまに自慢をしていることになるので避けられているのではないか。履歴も意味するWhat's Newを全面否定するのではないが、トップではなく下位階層においた方がいいのではないか。 ※ホームページを見る人は、まず商品（サービス）を見たいと仮定している。 What's Newが少ないことについてアメリカのサイトは絵や写真を使わない文章で構成されていることが多いが、これが普通であるという意識がある。日本には子供から大人まで「漫画」という文化があるが、アメリカの漫画は「子供が読むもの」という意識が強く、漫画を読む大人は恥ずかしいとまで思われる文化らしい。その影響もあって、日本のサイトは写真やイラストを多用するが、海外のサイトは文章がメインの構成になっているのではないか。 ↓ 作るときに注意した方がよいところ装飾は、なるべくシンプルに。色などメリハリをつける。わからないぐらいのグラデとかはいらない。イラストは基本的に使わない（子供向け以外）ナビゲーションはテキストにしてスッキリさせる。基本的にトップページには新着情報はいらない。入れるなら下層ページに入れる。トップページは情報も少なめ。スッキリとさせた方がよい。バナーは置きすぎない。あまり入れない方がいいが、入れるならわかりやすく大きく。細かいディテールよりも、ダイナミックに表現した方が良い。ページによって見せ方を変える。そのページにあったレイアウトなどを用いて自由に。アメリカのサイト日本のサイト斜めの線や曲線などを多く使っているわりと濃いめの灰色が中心（白・黒・灰色とメリハリがある）新着情報がない日本にはあるバナーがない http://www.jp.playstation.com/ps2/ http://www.us.playstation.com/PS2 NEWのアイコンがないムダな装飾や区切りがないのか、すっきりしている。レイアウトや色合いも関係している http://yahoo.co.jp/ http://www.yahoo.com/