Webサイトやアプリの型をとらえることでデザインの着眼点が定まる

Webサイトやアプリの型とは何なのか

Webサイトやアプリの型とは、それを扱うユーザーに理解されている典型的な見た目や動作、性質を指します。狭義にはデザインパターンと呼ばれることもあります。

たとえば、サイト内を回遊する主要なナビゲーションは、パソコンで閲覧しているときは大抵ブラウザの上部に設置されていませんか。スマートフォンのアプリなら、画面下部にアイコンと共に据えられていることが多いでしょう。このような「大抵は」という要素の積み重ねで、特定の分野、業種、目的のためのデザインの型ができ上がっていきます。

ユーザーはこれらの存在を認知し、使用した際の動作を予測して、実際に利用します。もしこのナビゲーションが類似するWebサイトやアプリと違う場所に用意されていたとしたら？　あるいは、期待する動作と違う動作をしたら？　ユーザーはサイトの閲覧に不自由を感じるでしょう。そこで、型の出番です。

型を取り入れるメリット

型を取り入れることで、たとえば次のようなメリットをユーザーに提供できます：

• ひとめ見てどんな業種やどういった目的のWebサイトやアプリなのかを瞬時に理解できるようになる
• 類似サイトで覚えた使いかたの知識を活用できるため、行いたいことが迷わずおこなえるようになる
• Webサイトやアプリの構造が理解しやすくなるため、探している情報にたどり着きやすくなる

制作者側にもメリットがあります：

• デザイン対象のWebサイトやアプリが求めていないデザインをつくってしまう可能性を減らせる
• そのWebサイトやアプリで押さえておきたいデザインのポイントに気づきやすくなる
• ひとつのWebサイトやアプリ内で、複数の型を意識的に組み合わせることで、メリハリのあるデザインをつくることができる

型を取り入れるデメリット

反対に型を取り入れるデメリットも当然あります：

• 競合のWebサイトやアプリと似通ってしまう可能性がある
• 型を意識しすぎてしまうと、小さくまとまったデザインになってしまう可能性がある
• 型は過去の資産なので、新しさを必要とする場面には適さない

これらのデメリットはデザイナーのアイデアを最大限引き出すことを阻害する強い要因になり得ます。なので、少量は薬であるが、大量は毒であると思って付き合うのがおすすめです。

4つの型

メリットとデメリットをみたところで、さまざまなWebサイトやアプリを大きく4つの型に分類して、それらをデザインするときの着眼点を取り上げてみます。分類は次の4つにしました：

• ツール型
• コミュニティ型
• メディア型
• 情報型

上に書いたものほど「使う」という性質が強くなります。反対に下に書いたものほど「見る」性質が強くなります。具体的なデザインの見た目はデザイン対象の文脈に強く依存するので、ここでは抽象化したサンプルを載せるのにとどめています。

ツール型

ツールとは直訳すると「道具」です。すなわちユーザーが抱えている何らかのタスクを完遂することをサポートする性質がつよいシステムをツール型と呼んでいます。

たとえば以下のようなWebサイトやアプリが挙げられます：

• コラボレーションツール
• ドキュメント・メモツール
• 業務効率化ツール
• チャット
• 計測・位置情報ツール
• 比較サイト
• 予約サイト
• マッチングサービス
• 何らかのプロダクトの管理画面
• ダッシュボード

これらのサイトやアプリは、いかにしてユーザーに事前の学習を強いることなく、失敗したり迷ったりさせず、短い時間で目的達成をさせるか、ということがまず重要になります。

さまざまな属性のユーザーが（年齢・性別・知識等を問わず）等しく利用できるアクセシビリティの観点も外せません。

また、権限やロールの概念が必要なサービスも多いでしょう。デザイン面での複雑性も増しますので、どんなユーザーが扱うのかを正しく理解する必要があります。

一般的にツール型のサイトは、使えば使うほどユーザーの情報を預かることになるので、ユーザーの視点からすると将来も続いていく、より良く改善されていくという期待を持ってもらう工夫ができるとベターです。

コミュニティ型

つぎにコミュニティ型です。主にUGC（User Generated Content）を扱うWebサービスの多くがここに分類されるでしょう。ユーザーが何らかのコンテンツを投稿し、そのコンテンツを別のユーザーが閲覧したり、ユーザー同士でコミュニケーションが発生したりします。

たとえば以下のようなWebサイトアプリが挙げられます：

• 文字・画像・動画などのコンテンツ投稿サイト
• SNS

これらのサイトやアプリで特に気にしたいのが、デザインやシステムの仕様でユーザー間の利害関係を調整することです。コミュニティは人の集まりなので、そのコミュニティ内で問題が起きてしまってはそれ自体が成り立たなくなってしまいます。

見せ方や仕組みで不公平感を醸成してしまったり、荒らし行為や嫌がらせ行為を食い止める手立てが不足していたりすると、コミュニティに綻びが目立ちはじめます。なので、治安維持の視点も加味したデザインの設計が求められます。

また、多くの場合でにわとり卵問題にぶつかります。書き手がいなければ読み手がこない、読み手がいなければ書き手がこないという構図はよくあるものです。どのような属性のユーザーから順番にサービスを提供するのかを吟味する必要があります。

メディア型

メディア型の見た目はコミュニティ型に近くなることもありますが、コンテンツ作成者がその道のプロであることが多いのが特徴です。UGCに対してPGC（Professional Generated Content）と呼んだりもします。プロによる質が担保されたコンテンツが常時発信されている、そんなWebサイトだとお考えください。

たとえば以下のようなWebサイトアプリが挙げられます：

• ニュースサイト
• 専門的なお役立ちコンテンツが読める企業ブログ
• アーティストやクリエイターのコンテンツ配信サイト
• ECサイト

メディア型のサイトは、コンセプトがはっきりしていて、コンテンツの方向性も揃っていることが多いため、デザイナーにとっては、いかにして媒体の考えをデザインに落とし込むのかがポイントになってくると思います。

コンテンツそのものがビジネスに直結することが多いので、問い合わせ導線や広告、ペイウォールなど、ユーザーとビジネスとをつなぐ導線設計が肝になります。

そして、コンテンツを並べる際には、情報の鮮度と人気度のバランスをとることも求められるでしょう。

情報型

最後に情報型です。情報型はその名の通り、ユーザーが特定の一次情報を収集するときに見たり読んだりするサイトです。

たとえば以下のようなWebサイトアプリが挙げられます：

• コーポレートサイト
• ブランドサイト
• ポートフォリオサイト
• 採用サイト
• ランディングページ
• 辞書サイト

今回挙げた4つの型の中ではもっとも情報を見ることに特化したシステムです。高度なインタラクションや機能からの制約がない代わりに、情報の適切な分類と組織化が腕の見せどころになります。

構造化、ラベリング、ナビゲーション、リンクなどを駆使して、情報を適切な粒度にまとめて、正しくあるいは印象に残る順番でユーザーに情報を伝える必要があります。

情報型Webサイトは、言語的な情報にとどまらず、視覚をはじめとした感覚的な情報のコントロールがツール型やコミュニティ型よりも柔軟にできますので、それを武器にデザインを仕上げていくと良いでしょう。

今回挙げた4つの型の中では、Webサイト自体に対してユーザーからのフィードバックがもっとも得られにくいと思います。なので、デザインをする際には視野が狭くならないように気をつける必要があります。

まとめ

この記事では4つの典型的なWebサイトやアプリの型をご紹介しました。

型はデザインを客観的に捉えるのに便利ですが、それが高じて型に合わせることがゴールになってしまっては本末転倒です。あくまでデザインのものさしとして活用し、ときには複数の型を組み合わせたりしながら、実際のWebサイトやアプリに相応しいデザインを選びとっていただけたらと思います。