デザイナーの頭ん中 – 情報の可変性 編 –
私はデザインに関する記事をよく読むのですが、最近はUXデザインなどの上流工程の記事を多く見かけます。
かなり参考にしてますし、学びもかなり大きいので良いと思います。（ありがとうございます😂）
とはいえ、我々は手を動かして形を作るフェーズ（デザイン）が必ずやってくるわけです。そういったときに、デザイナーは何考えながら手動かしてるのかな？と思うときがあるんですが、そういった記事をなかなか見かけない…ので自分で書こうと思いました。
今回は、デザイナーが考慮すべき「情報の可変性」について書いていきます。
最近は特に身近な存在になりつつあるSNSなどは、自身に関する事を投稿してコミュニケーションを取れるように設計されているわけですが、これらはちゃんと「情報の可変性」について考えられ設計されているので破綻せずに運用出来ていると考えられます。（とはいえ、そんな難しい話でもなく、どちらかと言うとウェブデザインにおける初歩的な部分だと思います）
「投稿」を行えるユーザー参加型のサービスなどは、参加する人の言語や年齢や性別など様々で、多種多様な「投稿」が集まると思います。
デザイナーはその違いをあらかじめ予測し、考え、破綻しないよう設計する必要があります。
はじめに
今回は仮定のサービスを元に考えていきます。
※バックエンドで情報制御することを含んでいません。
※同様に入力時の文字数制限・画像制御も含んでいません。
- 文章や画像を投稿できるサービス
- 誰でも参加できる
- 記事を投稿出来る
- 記事には画像も投稿出来る
（Twitt◯rとかFacebo◯kまたはブログにも該当します）
これを元に簡単なラフを用意しました。
今回の対象とする要素
- ①タイトル
- ②名前
- ③日付
- ④画像
- ⑤本文
これらの要素はそれぞれで投稿者や投稿時間によって可変する要素です。
各要素の「情報の可変性」を見ていきましょう。
①タイトル
-
文字数が増えた場合
文字の最後をカット（…などに）または全部表示するか検討する。 -
文字数が短い場合
文字数が長い投稿と短い投稿を並べた際、それぞれのバランスの違いが悪影響しないか検討する。
まず考慮すべきなのはタイトルの文字数です。
もし全文を出すことで２行分の投稿と１行分の投稿が横に並んだ際、各投稿の画像位置がズレて見辛くなるなどの懸念もあります。
また、この場面でタイトルを全文字数分表示させるべきかどうか、というのも検討材料としてあります。
例えばこれらの投稿が詳細ページを持つ場合などはここで全文出さずに詳細ページで全文出す、という方法も可能性としては残されています。
②名前
-
文字数が増えた場合
フルネームなのかニックネームなのか検討する。 -
フルネームだった場合
日本人のフルネームなら漢字だろうし、極端に文字数が増えることはないかもしれない、という点で考慮する。 -
ニックネームだった場合
ニックネームなら入力者次第になるので、文字数は推測できないかもしれない、という点で考慮する。 -
言語はどうなるか
日本語なのか英語なのかまたは別の言語なのか検討する。
もしくは１つの言語だけではなく、様々な言語が入ってくる事を考慮する必要があるか検討する。
名前は国によっても変わりますし、フルネームなのかニックネームなのかでも文字数が変わってきます。
日本人の名前であれば漢字表記で文字数が10文字以上になるケースは限りなく少なく、文字数が少ない前提でレイアウトを考慮することが出来るかもしれません。（とはいえ文字数が多い場合を排除することはできません。優先度を付ける程度です）
③日付
-
日付フォーマットはどうなるか
国によって日付フォーマット違うけど、どこに最適化するのか検討する。 -
桁数などは投稿ごとに揃えるようにするかどうか
1桁の時に0で埋めて2桁にする（例：09:01）ことで投稿ごとの桁数ズレを回避するかどうか検討する。 -
そもそも日付がいるのかどうか
日付情報自体が不要な情報かもしれないという点で検討する。
日付情報は情報の新旧を判断するのに有効ですが、投稿間隔によっては日付よりも時間のほうが有効なケースもあります。
また、間隔が長い場合には日付を出すことで過疎ってしまっているように見えてしまうのも懸念としてあります。
日付の桁数埋めは日付同士の比較をする際には、桁数が揃ってることで見ている人の脳で補完する必要がなくなり、可読性が上がって比較し易くなります。（縦軸に日付が並んだ場合のみ）
④画像
-
画像のサイズはどうなるか
投稿される内容・趣旨を意識して、画像サイズを予測する。
予測出来ないような場合、どんな画像が入っても成立するように考慮する。 -
どんな画像が入るのか
写真なのかイラストなのかグラフなのか、統一性のあるものが投稿されるのかどうかを検討する。
写真だとするとどんな写真が入るのか検討する。
白い画像だと背景に溶けるし、それとも境界線を分かるようにして、背景に溶けないようにする必要があるのか検討する。 -
画像の形式はどうなるか
gifなのかpngなのかjpgなのか。
gifが入った場合、gifアニメーションとして動作するのかどうか検討する。
gifアニメーションの投稿が連なると画面がごちゃごちゃして本文に集中できない可能性があることを考慮する。
その対策として、gifアニメーションは不可とするのか、それともレイアウトの間隔をとって視界に３つ以上入れないようにするのか検討する。
画像の要素は文字と違って特にコントロールしづらい要素です。
サイズも統一しようとした場合、いくつか方法がありますが上下左右をトリミングして出力する必要があるかもしません。
逆にサイズ統一しない場合、投稿ごとの高さが変わって見辛い印象を持つということもあります。
また、画像は画面密度が大きいので、画面上の印象に強く影響を与える要素だと考えて慎重に扱う必要があります。
⑤本文
-
文字数が増えた場合
全文表示するのか、それとも一部だけ表示するのかどうかを検討。 -
文字数が短い場合
文字数が長い投稿と短い投稿を並べた際、それぞれのバランスの違いが悪影響しないか検討する。 -
どんな本文になるのか
URLが入ってくるのか、ユーザーが任意に本文にスタイルを充てられるのか、はたまた無記入のケースは存在するのか検討する。
タイトル同様に詳細ページを持つ場合、どれくらい出すのか、全く出さないのか、等が考えられます。
文字数もそうですが、文章の内容（箇条書きなのか長文なのか）などでも、最適なレイアウトやあしらいは変化していきます。
終わりに
この５つの要素だけでも、これだけの検討・考慮すべき点が出てきました。
今回は要素単独で考えた場合でしたが、実際にはレイアウトやデザインをするタイミング、サービス自体のコンセプトやターゲット等によっても考えるポイントは変わってくるため、ここに挙げた考え方が全てのサービスに当てはまる訳ではありません。
冒頭でデザイナーが考慮すべき、と書きましたが実際にはプロジェクトに関わる全ての人が頭の片隅に置くべき内容だとも言えます。
全ての人が認識出来ている事で、問題を事前に洗い出す事が可能になるのでスムーズにプロジェクトを進めることも可能だと思います。
デザイナーは単に「絵」として完成させるのが目的ではなく、ちゃんと使う事が出来て破綻してない「物」を設計する事が重要です。
使う人、見ている人、を具体的にイメージすることでそこにグッと近づける事が出来るはずです。
///////////////////////////////////
Webサービスの新規立ち上げ、UI/UX改善にお困りの方はお気軽にお問い合わせください。
また、株式会社DenDesignではサービスデザインに興味があるWebクリエイターを募集しています。求人情報はこちらからご覧ください。