こんにちは、『livedoor 歌詞』や『livedoor グリーティング』を担当している吉沢です。
今回は、モバイルサイトのデザインの決め方、デザイナーとの仕事の進め方をご紹介したいと思います。

モバイルサイトのデザインというと、画面が小さいし容量制限も厳しいし、デザインのやりようがないのでは? と思うかもしれません。

確かに 1 年程前まではそんな状況だったのですが、世間的に 3G 端末が普及し、容量制限の緩和、通信速度の向上とモバイルサイトを華やかに魅せる環境が整いつつあります。

そこで『ケータイ livedoor』も昨年後半あたりから少しずつ 3G 端末をメインとした開発を行っており、今ではモバイルサイトの“こったデザイン”が必須となっています。

これまで、サイト開発時にディレクターがデザイナーにお仕事を依頼するタイミングは、サイトのリリース直前という場合がほとんどでした。最後の仕上げとして、ロゴデザインのみを依頼するカタチが多かったのです。しかし現在は、仕様が決まった段階でデザイナーが入り、ディレクターが考えたレイアウトを元に、ロゴの他にタイトル、ライン、見出しなど、どの部分を画像にするか全体のバランスを見ながらデザインカンプを作成してもらい、ディレクターがそれを元にコーディングを行う進め方が多くなってきました。

デザインカンプ作成の際に、モバイルサイトならではの検討事項として、画像のひとつあたりの容量とサイズ、画像とテキストを含めたページ全体の容量を検討しなければなりません。それに加えて初めてのレイアウトに挑戦するときは、画像を 1行に複数並べる場合、ひとつあたりの画像サイズはいくらか、画像とテキストを 1行に並べる場合、画像サイズとテキストはいくつにするとレイアウトが崩れないかなどをデザイナーと調査します。

調査後、1ピクセル、1バイト単位でレイアウトが大きく変わってくるため、キャリア(Docomo、KDDI、SoftBank)、世代(900・902シリーズ、W2X・W4Xシリーズなど)別にレイアウトが崩れていないか、表示ストレスがかからないかなど、システムが乗ったときのことも考えながら綿密に検証を行います。
ちなみにケータイ livedoor の場合、ページ全体の容量は 30 キロバイト前後を目安にしており、画像とテキストを 1行に並べるときの画像サイズ、テキストのバイト数は、QVGA を基準に、画像は横 80 ピクセル以下、テキストはフォントサイズ(小)を指定して 1 行 20 バイト前後を目安にレイアウトを決めています。

レイアウトの問題もクリアし、デザインを決める際に「どんなテイストでデザインしてほしいか」をデザイナーに伝えるのですが、伝え方に気をつけたいのが、「ポップな感じ」「若年層が好みそうな感じ」など、言葉だけで伝えてしまうことです。「ポップな感じ」といっても人それぞれの考えがありますよね。とらえ方やイメージするものがひとりひとり異なるので、テイストの参考になるサイトの URL や雑誌などの資料を用意します。

資料を揃えるだけでなく、デザイナーにとってストレスなくデザインをしてもらうために、テイストに得意・不得意がないかを気にかけています。デザイナーだからイラストが描ける、デザインができる、と当たり前に思ってしまいがちですが、なかにはどちらか一方が苦手という方もいます。「苦手なの?」とズバリ聞いてしまうのはアレなので、担当のデザイナーが日ごろどんなデザインをしているのか気にかけて、依頼するときはデザイナーのセンスが 100% 発揮できるように考える努力をしています。

スケジュールの決め方について、デザインする部分が多い場合、細かくスケジュールを区切り、テイストにぶれがないか、スケジュールに問題はないかなどの調整や相談をしながら進めていきます。そんなこんなで、デザイナーと進めながらできたコンテンツを一部ご紹介します。

01

いかがでしたか? 季節はずれのコンテンツが混じっていますが、デザイナーの協力のもと新しいレイアウトに挑戦しつつバージョンアップしています。これからも『ケータイ livedoor』や『nowa』などをはじめ、livedoor コンテンツをよろしくお願い致します。