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

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

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

リンク, ボタン系

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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