uncategorized

【実装前に要チェック!】Webサービスのデザインでよく忘れられる可哀想な6つのもの

Young woman working with graphic tablet in office

セカイラボでディレクターやっています、岸です。クリスマスなんてただの平日です。

今回はWebサービスのデザインでよく忘れられるもの(パーツや素材、ページ)をまとめてみました。忙しいとどうしても忘れてしまうものってありますよね。そのまま開発が始まってエンジニアから指摘されたり、テスト・検証フェーズに入ってから気づいたり、忘れられたままリリースされたり…。そんな可哀想な運命をデザインがたどる前に、あらかじめ注意深くチェックしておきましょう。

Webサービスのデザインでよく忘れられる6つのもの

リンク, ボタン系

Webサービス上でユーザーが行うことの多くは「クリック」だと思います。クリックを完了するには、「クリックしたい部分にマウスカーソルを移動する」「クリックしたい部分をクリックする」という動作が必要です。しかし、これらはワイヤーフレームには記載しないのでどうしても忘れてしまいがちなもの。デザインにするときは、最低でも下記の3つをディレクター – デザイナー間で擦り合わせておきましょう!

マウスカーソルを乗せたとき:マウスを乗せたときのデザインです。マウスカーソルの形が変わったり、該当部分の色が変わるものが多いです。

クリックしたとき:クリックしたときのデザインです。色が変わるものが多いです。

選択中:現在の画面または選択中のものへのデザインです。主にナビゲーションメニューやタブ等に適用されます。

om_mouseAction

最近話題のマテリアルデザインでは、マウスカーソルを乗せたときやクリックしたときにユニークな挙動(インタラクション)をとるものが多く見受けられます。リンクやボタンにマウスカーソルを乗せたりクリックしたときの反応は、ユーザーとの大事なコミュニケーションなので忘れないようにしましょう。

コンテンツや値がないとき

検索や絞り込み機能があるWebサービスでよく忘れられるのは、コンテンツや値が何もないときのデザインです。コンテンツや値がないときを考慮したデザインになっているかどうかを確認しましょう。

検索や絞り込みをした結果、該当するコンテンツがなかったときに何を表示するのか。例えば表のようなデザインで、値がないときに項目は表示しておくのか、非表示にするのか。

これはディレクターが設計・仕様を策定する際に明記しておくことが望ましいですが、もし明記されていなかったらデザイナーからも確認してあげましょう。

▼コンテンツがないとき(セカイラボ「チーム検索画面」)
チーム検索|アプリ・Web開発ならセカイラボ

▼値がないとき(セカイラボ「チーム詳細画面」、コストが未記入だった場合)
スクリーンショット 2014-11-28 11.42.10

コンテンツや値の最小・最頻・最大パターン

デザインをする際、どうしても”最も見栄えの良いコンテンツ状態”で作成を進めてしまいがちです。クライアントに見せるときはそれで良いのですが、作業のときは必ず最小・最頻・最大のパターンを作ってデザインの検証をしましょう。

例えばTwitterのツイート文字数は1~140文字の範囲で、最もツイートされるのでは25~35文字くらいだとします。とすれば、最小値は1文字、最大値は140文字、最頻値は30文字となるので、それぞれの文字数でデザインを組んでみましょう。さらに、それらが連続したときに全体の雰囲気を乱さないかどうかも確認してみてください。これらはコンテンツや値の要件が決っていると確認しやすいですが、決まっていない場合は、”最も見栄えの良いコンテンツ状態”のみでデザインを進めないことを意識しましょう。

画像がない場合とデフォルト画像

商品やユーザーアイコンなど画像を扱うWebサービスで忘れられがちなものです。ECサイトで商品の画像がなかった場合に「No Image」画像を表示したり、ユーザー登録型のWebサービスでは「デフォルト」のユーザーアイコン画像を表示する必要があると思います。これらも、デザインをする際に”最も見栄えの良いコンテンツ状態”だけを考えてしまうと忘れがちです。もちろん、画像がない場合はコンテンツを詰めれば問題ないこともありますが、予めディレクターが要件に書いておくと良いでしょう。

noimage

ローディング画像・アニメーション

検索や絞り込み機能、画像や動画を用いているWebサービスだと、ユーザー環境によっては読み込みが遅く、コンテンツの表示に時間がかかる場合があります。このときに、ただ真っ白な画面(部分) を表示しても構いませんが、ローディング中であることを視覚的に示してあげた方が良いでしょう。ユーザーの待ち時間は素敵なUXを提供するチャンスです。

loading

メンテナンス画面, 404等HTTPエラー画面

説明するまでもないですが、忘れちゃいけない画面です。デザイン要求に画面ごとごっそり抜けていたら、ディレクターに相談してください。Twitterのクジラ画面のように、なにか工夫があるとユーザーの不快感も和らげることができます。実はセカイラボも、メンテナンス時はちょっとした仕掛けのある画面が表示されます。

デザインを確定する前に関係者全員が必ず確認しよう

これまでに挙げてきた忘れものを未然に防ぐためには、関係者全員でデザインを確認した方がいいでしょう。ディレクターやデザイナーとは別に、エンジニアがプログラミング目線で、クライアントが運用目線で確認することで、実装前にデザインの抜け漏れを防ぐことができます。どんなに綺麗なウォーターフォール型開発でも、開発・実装中にデザイン修正は発生します。それを最小限に抑えるためにも、なるべく忘れものはしないようにしましょう。

以上、Webサービスのデザインでよく忘れられるものでした!


SEKAI LAB TIMES(セカイラボタイムス)は、アプリ・Webサービス開発を世界中のエンジニアチームに依頼・発注できるグローバルソーシングプラットフォーム「セカイラボ」が運営しているブログメディアです。


YASUHIRO KISHI / ディレクター・上級ウェブ解析士
セカイラボの何でも屋。主にディレクター。たまにエンジニア。理系眼鏡。読書とアニメ鑑賞が楽しみ。好きな国は台湾とカナダ。