皆様、こんにちは。
Ameba コミュニティ部門 チーフクリエイティブディレクターのサトウ（@sugaar）です。
今回は、弊社コミュニティ部門における、サービスクオリティの向上とデザイナーのスキルアップを目的として開催している、「デザイナーロワイヤル」についてご紹介すると共に、普段忘れがちなスマホデザインの5つのルールをまとめさせて頂きます。
1時間の会議で提案されるデザイン案は約50案。
当然ですが、デザイナーだからこそ気付ける、デザイナー視点の改善案のレベルは高く、「なぜ今までそうしなかったのか？」という、サービス側では気付けないデザイナー視点の改善案ばかりが集まります。
発表者以外にも、誰でも傍聴参加が出来るこの会議。
他のデザイナーの提案を間近で聞けるという事で、
回を追う毎に傍聴人が増え、会議終盤では熱気に包まれるほどの人気会議となりました。
そんなデザイナーロワイヤルの詳しい内容については、弊社「広報ブログ」で取材頂いておりますので、今回は、出された案の全てに採点をし、アドバイスをする上で、私自身が常に意識している、スマホデザインにおける忘れがちな5つのルールについて紹介させて頂きます。
一般的に考えて「なにが普通か」ではなく、ユーザー的に考えて「なにが自然か」を意識する事がとても重要です。
「ユーザー目線」というフレーズが一人歩きしがちですが、実際の所、現場のデザイナー自身がユーザーを100%意識する事は非常に難しく、また、意識しているようで実は自分の都合の良いように置き換えていたりします。
そうした場合に有効なのが、他のデザイナーを巻き込んでの「スクラップ＆ビルド」です。
一度デザインしたものを自分1人で壊す（ブラッシュアップする）場合、壊す角度をどうしても意識してしまいますが、他のデザイナーを巻き込む事で、まったく意図していない角度からの指摘で本質が浮かび上がるので、ブラッシュアップの方法としてはとても有効です。
そういった「第3者が指摘する機会」を意図的に作っている取り組みが、今回ご紹介させて頂いた「デザイナーロワイヤル」です。
「目立たせたいからこの位置に」などのレイアウトのバランスも重要ですが、限られたスペースの中でページ内の優先度を表現する際、大きさや場所だけでなく、「色や質感」に頼ることも有効です。
上記はスマホブログ「Simplog」のマイページです。右側の優先度に従って、各細部をデザインしています。
【優先度レベル１】
ホーム画面であるマイページでは、「マイブログ」感を演出するため、ユーザー情報をファーストビューで完結させるようデザイン。カバー画像を大きく見せ、自己表現のエリアに馴染むようにユーザー情報を表現しています。
【優先度レベル２】
機能的なボタンと投稿本文が閲覧のメインなので、周りの要素は可能な限り黒子に徹する表現としています。
【優先度レベル３】
お知らせと記事編集、詳細への導線はメインではないため、背景に馴染む質感にして優劣をつけています。
【優先度レベル４】
投稿日時はサブ的な情報なので、この画面では優先度を一番下げ、文字色に背景色と近い色を用いて、存在感を薄くしています。
このように、限られたスペースでも、「色や質感」のちょっとした工夫で情報の優劣をつける事が出来ます。特に、画面サイズに制限のあるスマホサービスにおいては、情報の優先度をいかに簡潔に表現するかが重要です。
この事はサービス運用にも言える事で、目先の機能追加によって、いつの間にか使いにくくなっているサービスケースが世に多くあります。「より便利」なユーザー体験を創出する際には、「快適性」とのバランスがとても重要であり、シンプルな機能でも、露出のさせ方１つでユーザーの困惑を招いてしまいます。そのため、「何が最適か」を常に自問自答しながらデザインし、複雑な機能をいかに快適に使えるようにするかが、デザイナーの腕の見せ所だったりします。
特に、スマホのように、画面サイズがある程度決まっているものに対して、「いかに詰め込むか」の意識になりがちですが、「本当に詰め込むべきか？」という問いを、常に心がける必要があります。
きたる10月5日(土)に「WebSig1日学校」というセミナーで、僭越ながら「スマホサービスにおけるあたりまえのデザイン」をテーマに講演をさせて頂きます。弊社コミュニティサービスを例に出して具体的なデザイン例を紹介する予定ですので、皆様ぜひお越し頂ければと思います。
【WebSig1日学校】
http://1ds.websig247.jp/2013/
Ameba コミュニティ部門 チーフクリエイティブディレクターのサトウ（@sugaar）です。
今回は、弊社コミュニティ部門における、サービスクオリティの向上とデザイナーのスキルアップを目的として開催している、「デザイナーロワイヤル」についてご紹介すると共に、普段忘れがちなスマホデザインの5つのルールをまとめさせて頂きます。
デザイナーロワイヤルとは
デザイナーロワイヤルとは、8～10名のデザイナーが、お題となったAmebaサービスを使い込み、自分なりのブラッシュアップ案を持ち寄って点数を競う、バトル形式の会議です。
当然ですが、デザイナーだからこそ気付ける、デザイナー視点の改善案のレベルは高く、「なぜ今までそうしなかったのか？」という、サービス側では気付けないデザイナー視点の改善案ばかりが集まります。
他のデザイナーの提案を間近で聞けるという事で、
回を追う毎に傍聴人が増え、会議終盤では熱気に包まれるほどの人気会議となりました。
そんなデザイナーロワイヤルの詳しい内容については、弊社「広報ブログ」で取材頂いておりますので、今回は、出された案の全てに採点をし、アドバイスをする上で、私自身が常に意識している、スマホデザインにおける忘れがちな5つのルールについて紹介させて頂きます。
1. 圧倒的なユーザー目線
画面の構成を検討する際、「ここにあったら気付くだろう」や、「ここまでやらなくても伝わるだろう」という、根拠の無いサービス都合の判断では、実際の所ユーザーは思ったように使ってくれません。一般的に考えて「なにが普通か」ではなく、ユーザー的に考えて「なにが自然か」を意識する事がとても重要です。
「ユーザー目線」というフレーズが一人歩きしがちですが、実際の所、現場のデザイナー自身がユーザーを100%意識する事は非常に難しく、また、意識しているようで実は自分の都合の良いように置き換えていたりします。
そうした場合に有効なのが、他のデザイナーを巻き込んでの「スクラップ＆ビルド」です。
一度デザインしたものを自分1人で壊す（ブラッシュアップする）場合、壊す角度をどうしても意識してしまいますが、他のデザイナーを巻き込む事で、まったく意図していない角度からの指摘で本質が浮かび上がるので、ブラッシュアップの方法としてはとても有効です。
そういった「第3者が指摘する機会」を意図的に作っている取り組みが、今回ご紹介させて頂いた「デザイナーロワイヤル」です。
2. ページ内の情報の優先度
そのページを訪れたユーザーに「何を一番に訴求したいのか」というシンプルな要求に対し、スマホ特有のレイアウト的な理由（スペースが限られているなど）からその優先度を決めてしまうケースがあります。「目立たせたいからこの位置に」などのレイアウトのバランスも重要ですが、限られたスペースの中でページ内の優先度を表現する際、大きさや場所だけでなく、「色や質感」に頼ることも有効です。
上記はスマホブログ「Simplog」のマイページです。右側の優先度に従って、各細部をデザインしています。
【優先度レベル１】
ホーム画面であるマイページでは、「マイブログ」感を演出するため、ユーザー情報をファーストビューで完結させるようデザイン。カバー画像を大きく見せ、自己表現のエリアに馴染むようにユーザー情報を表現しています。
【優先度レベル２】
機能的なボタンと投稿本文が閲覧のメインなので、周りの要素は可能な限り黒子に徹する表現としています。
【優先度レベル３】
お知らせと記事編集、詳細への導線はメインではないため、背景に馴染む質感にして優劣をつけています。
【優先度レベル４】
投稿日時はサブ的な情報なので、この画面では優先度を一番下げ、文字色に背景色と近い色を用いて、存在感を薄くしています。
このように、限られたスペースでも、「色や質感」のちょっとした工夫で情報の優劣をつける事が出来ます。特に、画面サイズに制限のあるスマホサービスにおいては、情報の優先度をいかに簡潔に表現するかが重要です。
3. 複雑さと快適性
D.A.ノーマンの著書にもありますが、技術の進展から機器に「複雑性」が伴うのは当然であり、問題なのは「複雑性」ではなく「わかりにくさと、その結果生まれる矛盾」にあるのでは、という考えがあります。つまり、デザインは「やたらと込み入った（complicated）」り「人を戸惑わせた（confused）」りしてはならないが、「複雑（complex）」になるのは、ある意味当然であるという考えです。この事はサービス運用にも言える事で、目先の機能追加によって、いつの間にか使いにくくなっているサービスケースが世に多くあります。「より便利」なユーザー体験を創出する際には、「快適性」とのバランスがとても重要であり、シンプルな機能でも、露出のさせ方１つでユーザーの困惑を招いてしまいます。そのため、「何が最適か」を常に自問自答しながらデザインし、複雑な機能をいかに快適に使えるようにするかが、デザイナーの腕の見せ所だったりします。
4. 利用シーンを考える
制作の現場は主に室内だと思いますが、ユーザーの利用シーンを想定すると屋外で利用するケースがあります。屋外での利用時に「光の加減で画面が見えない」など、自然要因による使いにくさを体験している方も多いはず。ディスプレイの設定など、機種に依存する場合もありますが、デザイン的な配慮として、背景とのコントラストを注意する事が重要です。ブログや掲示板など、読み物系のサービスであれば、テキストが置かれる背景に中間色を使ってしまうとコントラストが弱く、屋外に限らず閲覧しにくくなってしまいます。配色に関してはサービスコンセプトとの兼ね合いになるので一概には言えませんが、文字と背景とのコントラストを強める事で、快適に閲覧する事が可能です。5. 隙間について
デザイナーとして、忘れてほしくないのは、「空いているスペースを埋めて、縦幅を縮める」ことよりも、「スペースが空いていても、情報的に自然に見える」ことの方が、ユーザーにとっての心地よさにつながる場合もあるということです。特に、スマホのように、画面サイズがある程度決まっているものに対して、「いかに詰め込むか」の意識になりがちですが、「本当に詰め込むべきか？」という問いを、常に心がける必要があります。
おわりに
最後まで読んでいただきありがとうございます。きたる10月5日(土)に「WebSig1日学校」というセミナーで、僭越ながら「スマホサービスにおけるあたりまえのデザイン」をテーマに講演をさせて頂きます。弊社コミュニティサービスを例に出して具体的なデザイン例を紹介する予定ですので、皆様ぜひお越し頂ければと思います。
【WebSig1日学校】
http://1ds.websig247.jp/2013/