国内の自動車ニュースといえばResponse。多言語+スマートフォン対応にてお手伝いさせていただきました。
多言語展開
さらにスマートフォン対応
例によって制作時に気づいた点を挙げていきます。何かの参考になればと。
多言語版PCサイト
・アラビア語・中国語（簡体） ・中国語（繁体） ・英語・フランス語 ・ドイツ語 ・インドネシア語 ・日本語 ・韓国語・ポルトガル語 ・ロシア語 ・スペイン語 ・タイ語 ・ベトナム語と14言語に対応しました。翻訳はMicrosoft Translate APIを使用しています。利用を検討していたGoogle Trasnlate APIはなんと直前でAPIクローズ宣言。本当にびっくりしました。
デザイン時：文字の扱いに注意
多言語展開できなくなっちゃうので当たり前ですね。あとは横幅を固定にしない、囲い文字を使用しないようにしています。文字数が特定できないのが多言語ですのでフレキシブルにしておきます。文字数トリミングもバイト数が言語によって違うので行えません。文字数が多い場合の対処も考えましょう。書体・行間は基本的に英語で合わせています、言語によって行間がおかしいなどいろいろ出てくるかと思ったのですがこれが以外にスムーズで拍子抜けしてしまいました。グローバルナビゲーションの当たりだけ言語によって位置を調整しました。
IE6にも対応
国内では大した数もないので省くことが多いのですが対処が多言語となるとそのシェアも変わります。国の事情によってはIE6も全盛であったりするのでコーディングはオールドスタイルで行なっています。
多言語展開のポイントはアラビア語と簡体中国語
中国で使えないソーシャルサービスを置き換え
基本的に全言語同様のテンプレートを使用していますが簡体中国語だけは別にしています。FacebookやTwitter、Googleなどが利用できないためです。中国ではこれらに類似したサービスが独自に展開されているのでそちらを利用しました。ネイティブの方にweiboがおすすめと聞いたのでこれを利用しました。
目玉みたい
広告はバイドゥなどでしょうか。本サイトではgoogle adsenseを使用しています。
右からはじまる言語セム系への対応
アラビア語はセム系言語になります。以下のようにサイトの要素全てが鏡面のように反対で表示されます。
<html>にdir=”rtl”と指定すると上記のようになります。
テキストインデント-999pxに注意
アラビア語だとこれも反対になってしまうので隠していた文字が表示されます。overflow:hidden;をかけるなどの対処が必要です。
海外では以外に人気？メールで送信、プリント機能
記事ページではTwitterやFacebookの他にemaliとプリントも提供しています。ハフィントン・ポストなどの多くのニュースサイトで提供されているので取り入れてみました。プリント機能は最適化したものを用意しています。
見たままをプリントしたい場合は記事ページでそのままプリントしてもらえればいいのでこちらはインクを無駄にしない親切機能です。
スマートフォン×多言語×チャレンジ
ハンターハンターみたいな見出しですね。スマートフォンで多言語する場合も基本的には前述の注意事項を意識していれば問題ないかと思います。むしろ端末が限定されhtml5やcss3で組めるのでこちらのほうが自由度高いです。
初めてトップページにアクセスすると…
基本的にはurlにある言語ドメインを読みますが、初回に言語設定なしでresponsejp.comにアクセスすると言語選択画面が表示されるようにしました。
キーボードで画面が埋まるので内容はシンプルにしています。
記事ページを回転するとギャラリーモードに
スマートフォンで作るからにはハズセないおまけですね。記事ページを回転するとギャラリーモードになります。
回転すると…
写真が大きくなりギャラリーとして写真を楽しめる
オーバーレイはおすすめできない
Andoridは少しお馬鹿でlightboxなどに代表されるモーダルダイアログを採用しても後ろに配置されたリンクを検出してしまいます。ミスタップでイライラしてしまうのを防ぐためにもオーバーレイではなくエクスパンドで対応するとラクです。
文字数のオーバーはてtextoverflowで。
PC版はIE6などに対応させるため利用できませんでしたが、スマフォになればこっちのもの。textoverflowを利用して画面サイズごとに文字数をトリミングしてあげます。
縦表示の時
横表示だとタイトルの文字数が増える
多言語+スマートフォンというのはなかなかできるものではないのでとっても勉強になりました。おもしろい気づきがあって楽しかったです。ぜひ国内の自動車ニュースはレスポンスを！
Tags: response, works, スマートフォン, 他言語
少しでも役だったらシェアしたり、コメントもらえると記事を書くモチベーションが跳ね上がります！
スマフォ対応もできました！見てみてくださいなー。 自動車ニュースのresponseが多言語展開、スマートフォン対応。制作TIPSを紹介します。 | ウープスデザインブログ (デザイナーまめこ) http://t.co/rfwaMhl8
スマフォ対応もできました！見てみてくださいなー。 自動車ニュースのresponseが多言語展開、スマートフォン対応。制作TIPSを紹介します。 | ウープスデザインブログ (デザイナーまめこ) http://t.co/rfwaMhl8
RT 自動車ニュースのresponseが多言語展開、スマートフォン対応。制作TIPSを紹介します。 http://t.co/qVpIfRlq