ウープスデザイン ブログ

Archive for the ‘まじめ記事’ Category

自動車ニュースのresponseが多言語展開、スマートフォン対応。制作TIPSを紹介します。

2011年10月17日

国内の自動車ニュースといえばResponse。多言語+スマートフォン対応にてお手伝いさせていただきました。

responsejpcom

responsejp.com

多言語展開

写真

さらにスマートフォン対応

http://s.responsejp.com/

例によって制作時に気づいた点を挙げていきます。何かの参考になればと。

多言語版PCサイト

・アラビア語・中国語(簡体) ・中国語(繁体) ・英語・フランス語 ・ドイツ語 ・インドネシア語 ・日本語 ・韓国語・ポルトガル語 ・ロシア語 ・スペイン語 ・タイ語 ・ベトナム語と14言語に対応しました。翻訳はMicrosoft Translate APIを使用しています。利用を検討していたGoogle Trasnlate APIはなんと直前でAPIクローズ宣言。本当にびっくりしました。

[を] Google Translate API が終了

デザイン時:文字の扱いに注意

多言語展開できなくなっちゃうので当たり前ですね。あとは横幅を固定にしない、囲い文字を使用しないようにしています。文字数が特定できないのが多言語ですのでフレキシブルにしておきます。文字数トリミングもバイト数が言語によって違うので行えません。文字数が多い場合の対処も考えましょう。書体・行間は基本的に英語で合わせています、言語によって行間がおかしいなどいろいろ出てくるかと思ったのですがこれが以外にスムーズで拍子抜けしてしまいました。グローバルナビゲーションの当たりだけ言語によって位置を調整しました。

IE6にも対応

国内では大した数もないので省くことが多いのですが対処が多言語となるとそのシェアも変わります。国の事情によってはIE6も全盛であったりするのでコーディングはオールドスタイルで行なっています。

多言語展開のポイントはアラビア語と簡体中国語

中国で使えないソーシャルサービスを置き換え

基本的に全言語同様のテンプレートを使用していますが簡体中国語だけは別にしています。FacebookやTwitter、Googleなどが利用できないためです。中国ではこれらに類似したサービスが独自に展開されているのでそちらを利用しました。ネイティブの方にweiboがおすすめと聞いたのでこれを利用しました。

weibo.png

目玉みたい

広告はバイドゥなどでしょうか。本サイトではgoogle adsenseを使用しています。

右からはじまる言語セム系への対応

アラビア語はセム系言語になります。以下のようにサイトの要素全てが鏡面のように反対で表示されます。

アラビア語.png

<html>にdir=”rtl”と指定すると上記のようになります。

テキストインデント-999pxに注意

アラビア語だとこれも反対になってしまうので隠していた文字が表示されます。overflow:hidden;をかけるなどの対処が必要です。

海外では以外に人気?メールで送信、プリント機能

記事ページではTwitterやFacebookの他にemaliとプリントも提供しています。ハフィントン・ポストなどの多くのニュースサイトで提供されているので取り入れてみました。プリント機能は最適化したものを用意しています。

スクリーンショット 2011 10 17 19 03 15

見たままをプリントしたい場合は記事ページでそのままプリントしてもらえればいいのでこちらはインクを無駄にしない親切機能です。

スマートフォン×多言語×チャレンジ

ハンターハンターみたいな見出しですね。スマートフォンで多言語する場合も基本的には前述の注意事項を意識していれば問題ないかと思います。むしろ端末が限定されhtml5やcss3で組めるのでこちらのほうが自由度高いです。

初めてトップページにアクセスすると…

基本的にはurlにある言語ドメインを読みますが、初回に言語設定なしでresponsejp.comにアクセスすると言語選択画面が表示されるようにしました。

初回アクセス

キーボードで画面が埋まるので内容はシンプルにしています。

記事ページを回転するとギャラリーモードに

スマートフォンで作るからにはハズセないおまけですね。記事ページを回転するとギャラリーモードになります。

記事モード

回転すると…

ギャラリーモード

写真が大きくなりギャラリーとして写真を楽しめる

オーバーレイはおすすめできない

Andoridは少しお馬鹿でlightboxなどに代表されるモーダルダイアログを採用しても後ろに配置されたリンクを検出してしまいます。ミスタップでイライラしてしまうのを防ぐためにもオーバーレイではなくエクスパンドで対応するとラクです。

文字数のオーバーはてtextoverflowで。

PC版はIE6などに対応させるため利用できませんでしたが、スマフォになればこっちのもの。textoverflowを利用して画面サイズごとに文字数をトリミングしてあげます。

縦のとき

縦表示の時

横表示

横表示だとタイトルの文字数が増える

多言語+スマートフォンというのはなかなかできるものではないのでとっても勉強になりました。おもしろい気づきがあって楽しかったです。ぜひ国内の自動車ニュースはレスポンスを!

イシジマミキにインタビューをする (the interviews)

▲ ページ上部へ戻る

[wordpress]Twitter投稿用URLだけ記事ID URLにしたい

2011年1月28日

粗末な検索エンジン対策ですが、URLに日本語タイトルを使用しています。こんなの。
[cc lang="html4strict"]http://blog.woopsdez.jp/2011/01/本格派おもちゃギター Paper Jamzが楽しかった![/cc]
でもTwitter投稿ボタンを使用してもらった時にはエンコードされて長い文字列になります。Twitterは日本語やこういった長い文字列には弱いらしくて検索に引っかからないのですね。

そこで、「通常は日本語URL」だけど「Twitter投稿ボタンに使用するURLは記事ID URL」にする。という事をしてみました。いろいろ記事を探してみたけど、見つけられず強引に対応。以下のようにすることでプラグインやbitlyなど使用せず対応することができます。

[cc lang="html4strict"]http://blog.woopsdez.jp/?p=<?php the_ID(); ?>[/cc]

このようにする事で記事IDを取得して強引にリンクとして成立させました。いいのかしら…; Twitter投稿ボタンには以下のようにアトリビュートを設定しています。

[cc lang="html4strict"]
[/cc]

[cc lang="html4strict"]data-url=”http://ブログのドメイン/?p=記事ID”[/cc]

として無理くり成立させている訳ですね。うーん。あんまりスマートじゃない。でもこれでTwitter上で記事の広がりを見られるようになったハズです。しばらくは様子見。

どなたか良い方法知りませんかー(´・ω・`)

イシジマミキにインタビューをする (the interviews)

▲ ページ上部へ戻る

「まめこ」でSEO対策

2010年4月29日

Googleのみですが、「まめこ」で1位をとってやろうとちょびちょび施策をしています。web業界の「まめこ」の座は渡さない!幸いなことに友人たちが「まめこ」で私のブログやwebサイト、Twitterにリンクをしてくれているので元々検索結果の1ページ目には出ていたのでそこからの調整だけで済みました。自分のブログよりどたばた会議が上にきた事がショックだったのです。

現在の施策は以下になります。って対したことしてないんですけど。

titleタグにまめこを入れる

「ウープスデザイン ブログ」→「ウープスデザイン ブログ (デザイナー まめこ)」

こちらはすぐに効果がでました。5位くらいだったのが2-3位くらいになりました。ひょほほ。でもまだ1位には「マメコネシア」さんが鎮座しております。イラストレーターさんで本も出版されています。とってもかわいいイラストでほんわか。

URLに「mameko」とあるのが強いのでしょうか。
んで次に考えてみた施策がこちら。

ドメインを変えてリダイレクト

mameko.woopsdez.jpというサブドメインを用意し、blog.woopsdez.jpに恒久的リダイレクト。

昨日対応してみたので経過を見守りたいと思います。ぱかすかとサブドメインを作れるヘテムルサイコー! リダイレクト設定もGUIでできるといいな…。
あともう一個実践使用と思ったのがこちら

h1に「まめこ」を入れる

そういえば入れてなかった、初歩ですね。さっそく入れてきます。

これらで検索結果はどうなるのでしょうか。

※どうやらちょこちょこ順序がリフレッシュされるようで、なぜかナイロンガールズで書いているコラム「メタモル補正|東京ナイロンガールズ」がまめこブログより上にきちゃいました。くぬぅ!

インターネット「まめこ」の座を奪還できるのはいつの日でしょうか。

イシジマミキにインタビューをする (the interviews)

▲ ページ上部へ戻る

サンプル文章にみる性格診断

2010年4月27日

性格診断っていうのはちょっとウソですがw
クライアントから原稿が貰えないままデザインに着手しなくてはならない場合、サンプル文章を用意する必要があるのですが微妙に問題ですよね。

ちらっとTwitterでも発言したのですが、以下のようなものに大別されそうです。

1.生真面目さんは「□□□□■」

文字ではなく□で対応。5文字目を■にすることで文章量も計算しやすい。文章に色がないため、自由な発想でかけますね。だけど、実際に文字が入った時に見た目がイメージと異なることもしばしば。ラフ案ではイメージを重要視する先方に良い印象を与えられるかちょっと不安。

2.見た目もちょっと気になる人は「サンプル文章サンプル文章 x ∞」

サンプル文章という文章でアタリである事が分かりやすいですね。また、文字を入れたイメージもなんとなく掴めるので汎用性が高い。けれどもやっぱりまだイメージを把握しずらかったりもします。

3.ちらりと余計な事がしたい天邪鬼さんは「我輩は猫である」

著作権の切れた有名な小説を流用。文章の実際のイメージも分かりやすいのでクライアントにも伝わりやすいかもです。小説のチョイスにセンスが光ります。

夏目漱石 吾輩は猫である

4.先を見据える執事さんタイプは「文章の叩き台を入れる」

至れり尽くせりなパターン。原稿を書いたことが無いクライアントでも、叩き台をもとに文章を考えたり修正する事が可能です。忙しい人にも喜ばれそう。ただ、自分でしっかり文章を入れたいクライアントさんの場合には難色を示すかも。
また、文章量の多いサイトで使用した場合、正規の文章との見分けがつかないので忙しい時には精査する手間がネックになりそう。

こんな感じでしょうか。

個人的には3が好き

自分の場合は3を使用する事が多いです。初めてのクライアントさんの場合はなるべくこれで、発注自体が初めてのクライアントさんや多忙にされているがある程度まかせていただける場合には4を使用します。代理店さんなどの直クライアントでない場合は1 or 2 で見栄えを調整したい場合は2を優先、さらにライターさんがいる場合やブログ記事をクロールして引っ張ってくる場合は1ですね。

意思疎通ができているクライアントさんの場合はちょっと遊ぶこともしてみたいものですw

イシジマミキにインタビューをする (the interviews)

▲ ページ上部へ戻る

先人に教わったプレゼン向上TIPS

2010年2月17日

こうするとプレゼンはもっとスムーズになる!

前回のPAGE2010のセッションのお話をくださったInDesignの勉強部屋YUJIさんが「鷹野さんから教わった」と、様々なTIPSを教えてくださいました。Macに限った話になってしまいますが、ぜひ活用してみてください。

プレゼンの文字は太く! 太く!

ヒラギノ角ゴのw3とw6を使用してプレゼン資料を作成していたのですが、遠くの席の方の視認性を考えるともっと太い書体を使うことがベストですね。

喋りに抑揚を!

セッションのテーマは何か。これだけは覚えていってもらいたい事をちゃんと伝えるためには声にも工夫が必要。すごく重要な時は少しタメを作り、「これだけは! …(タメ) 覚えていってくださいね」と抑揚をつけることが良いそうです。

これってあたり前に感じられることですけど、実際自分で話している様子を音声で聞いてみると意外に出来てないんですよね。

デモせずとも操作手順を分かりやすく!

powerpointでもkeynoteでもアニメーション設定ができますね。

そうする事によってデモ無しでも分かりやすいですね。後日の公開においても抜け落ちる部分もなく資料だけでも理解度が高まります。

画面ズームを使いこなせ!

奥まった席の場合目が悪いと操作パネルの文字が見えなくて困ることも多々あると思います。デモをする時に画面の拡大縮小をスムーズに行うと参加してくださった方の理解度も深まりますよね。

ユニバーサルアクセスでカンタンショートカット


システム環境設定→ユニバーサルアクセスをクリックします。


こちらを見てみるとオプション+コマンド+^で拡大できることが分かります。縮小の場合はオプション+コマンド+-(マイナス)ですね。

オプションでさらに詳細設定


さらに詳細設定もできるので「オプション」を押して拡大を自分の良い感じのところへ調整しておきましょう。

自分はこれをずっと知らなくてマウスホイールとコマンドキーでしかできないのだと思ってました。目から鱗!さらなるポイントはセッション時には片手だけで出来るように押しやすいショートカットへ変更することです。

素早いショートカット操作でさらにスムーズに


システム環境設定→キーボートとマウス→キーボードショートカットへ行くとOSに設定されているショートカット全てカスタマイズする事ができます。こちらで片手で押せるようなショートカット。例えばオプション+コマンド+1にしておくなどするとベスト! ハンズマイクを持ちながらのセッションやデモ時も片手はマウスに置いておけるのでももたつきません。ビックリ!

ポインタをデカくしてみる!

マウスポインタを大きくするのも一つの手です。より操作箇所が分かりやすいですし、レーザーポインタを併用しなくても画面上のマウスで該当箇所を示しやすくなります。


こんな事も出来たんですねー。まだまだ底が知れないです。

ポインタにスポットを挙てて該当箇所を分かりやすく!


Mousposeでもっと分かりやすくなります。有償ソフトになりますがこれもすごく良さそう!


このように周りが暗くなり、該当個所がスポットライトを当てたように明るくなります。設定画面でショートカットや明るさなど細かい設定ができるのでいろいろいじってみると良いです。

今後のセッションはそういうところも意識してやれたらな、と思います。がんばろーがんばろー!

イシジマミキにインタビューをする (the interviews)

▲ ページ上部へ戻る

出版社の中の人が教える楽しい本屋さんめぐり!

2009年12月12日

デザイン勉強会で出会った技術評論社の傳(でん)さんと一緒に本屋さんめぐりをしてみました。

IMG_0330
餅は餅屋ですね! 本の探し方がとても上手でした。

ご一緒させていただいたランチで

・人の褒め方のボキャブラリーを増やしたい
・商業向けのライティングの本が欲しい

と話したところ一緒に本屋さんに行くことに。場所は新宿のジュンク堂。傳さんは本を見つけるのがスゴく早い!

人の褒め方のボキャブラリーを増やしたい

そんなジャンルの本ってどこにあるんだ! と思考停止してましたが冒頭の写真にある「人事・労務」棚にあったんですねー! うわー。絶対踏み入れない場所でした!

おすすめしていただいたのはコチラ。かなり人気のある本のようです。

ほめ言葉ハンドブック
ほめ言葉ハンドブック
posted with amazlet at 09.12.12
本間 正人 祐川 京子
PHP研究所
売り上げランキング: 1085
おすすめ度の平均: 4.5

5 寝る前に読み返すと良いのでは
4 机の中に忍ばせたい本
5 相手だけでなく、自らの向上心のアップにも。
5 社会を温める1冊
4 使える!

実は褒め方ボキャブラリーを増やしたいのは私でなくてご近所さんたちなのです。もっと褒めてもらって有頂天になりたいのでこれを人数分購入してプレゼントしようと思います。

大人メールの引き出しを増やそう

また社員時代にはあまり無かった大人メールをするようになったので、こちらの本もおすすめしてもらいました。どうしても語尾が「思います。」ばかりになってしまいます。要は引き出しが無いんですよね。

「思います。」「くださいませ。」

この2個ばかり使ってます。(取引先の皆さん! 私からの大人メールを読み返してみると面白いですよ。)

という事でこれも傳さんが良い本をピックアップ。もちろん技術評論社さんです! さすが!

ビジネスメール ものの言い方「文例」辞典 (@ベーシック)
シーズ
技術評論社
売り上げランキング: 66451
おすすめ度の平均: 3.5

1 単なる文例集
5 ビジネスメールの入門書
4 ネットショップ運営の方は必見
4 参考になります

本屋さんにはなんでもありますねー。悩みも全部解決してもらえるんじゃないかってくらいいろんなテーマがある。栃木じゃこんなに無かったよ!

商業向けのライティングの本が欲しい

ライティング。照明ではなくて原稿執筆の方ですね。原稿を用意してもらうのを待つだけじゃなく、提案を含めてデザインを制作しているので文章力の無さに困っています。

料理の表現には心強い味方を見つけたので問題ないのですが、お店の空間を言及するとなるとありきたりになりますね…。
ちなみに強い味方はこちら。

おいしさの表現辞典
おいしさの表現辞典
posted with amazlet at 09.12.12
東京堂出版
売り上げランキング: 76472
おすすめ度の平均: 5.0

5 おいしいと伝えるために

例えば夏くらいに公開したル・プレジール 九段にあるフランス料理店の場合、店内のフインキを伝えるために

「清潔感のあるこじんまりとしたレストラン。お客様一人一人見届けて料理をお出ししています。」

のような文章を考えるんですけど、こういった表現のバリエーションを増やすのってもう場数踏むしかないですよね…。参考になるものは実際のチラシやwebサイトなどですかね。でも探すのに時間もかかるし効率悪いのですよ。

http://le-plaisir.net/
ル・プレジール 九段にあるフランス料理店

そういった内容ってどこで学習できるのかと話したら、広告系の棚へ。

「バカ売れ」キャッチコピーが面白いほど書ける本
中山 マコト
中経出版
売り上げランキング: 54512
おすすめ度の平均: 4.0

3 他人の脳を覗く
5 ターゲットを絞ってココロに響かせるコツ
5 「通販生活」のようなビジネス書
4 売れるキャッチコピーの書き方がシンプルにまとめられている
4 コツをつかめた気がします。

これはかなりウリウリですね。でも分かりやすそう!

ザ・コピーライティング―心の琴線にふれる言葉の法則
ジョン・ケープルズ
ダイヤモンド社
売り上げランキング: 5436
おすすめ度の平均: 4.0

5 ヤラレタ。
3 物事全てにおいて基本あり
4 テスト、テスト、ひたすらテスト
5 パワーポイントユーザーに
4 ヒントがいっぱい入っている

こっちはいい事書いてそうだけど難しそう…。

実はネットショップに明確に向けたライティングの本ってあまり無いんですよね。普通にコピーライティングで見ればいろいろあるのですけど、ネットショップの店長さんとかそんな棚行くのかな…と傳さんと二人で話してました。もしかするとパソコン棚にネットショップ向けのコピーライティングの本が並ぶかも…?楽しみですね。

話しはそれて

ソフトの使い方系の実用書を買う時に注意していることは「表紙のおしゃれなものは買わない」事。

最近は違うのかもしれませんがFlash本とかおしゃれなもの程上級者向けだったり説明が足りなかったりと満足したことがありません。多少表紙がアレな方が分かりやすい事が多かったっす。自分は第1章をパラパラ読んでみて気に入ったら買ってます。見出しもチェックポイントだと傳さんが教えてくれました。おもしろいですね!

また本屋さん巡り行こうーっと。

イシジマミキにインタビューをする (the interviews)

▲ ページ上部へ戻る