Webデザインまとめ

はじめに

この記事では、ウェブデザインの思考法という本を参考にして、ウェブデザインについてのいろはをまとめます。この記事を読んで、ウェブデザインに興味を持った方、もっと詳しく勉強してみたいと思った人は、是非本を買ってください。 (ここにそのうちamazonのリンクを貼る)

目次

1. ウェブデザインの定義

デザインの定義

定義:

  • マテリアル・・・料理の材料(食材)やインテリアの材料(布や木)、webにおいては、写真や原稿などいわゆる素材と呼ばれるようなもののこと。
  • コンテンツ・・・レストランにおける料理や部屋のインテリアといった場の主役となるもの。
  • コンテナ・・・マテリアルをコンテンツにするために色や形、動きをあたえる加工や枠のこと。

    デザインするとは、マテリアルにコンテナをあたえて、コンテンツを生み出すという行為のことをさします。


デザインの例:スタバのコーヒーカップ

デザイン行為

  • 中の飲み物がこぼれにくくなるように蓋を配置。
  • 素材を持ちやすく、熱伝導性の低いものにする。
  • 表面にカフェのロゴを入れ、配色を施す。

デザインによってひこ起こされる変化・反応

  • 持ちやすい、飲みやすい
  • おしゃれ、かわいい



デザインによって、マテリアルは機能性(使いやすい、わかりやすいなど)と情緒性(おしゃれ、かわいい、かっこいいなど)が加わったコンテンツに生まれ変わると言えます。
したがって、ウェブデザインは、次のように定義することができます。

ウェブデザインとは、何らかの問題解決のために、材料であるマテリアルにコンテナを通じて機能性と情緒性を与えて、ユーザーインターフェース上にコンテンツを設計することである。
ユーザーインターフェース:ユーザーがアプリケーションとやり取りをする部分のこと。

2. デザインの機能性

ウェブアプリケーションの機能性とは、平たく言うと、そのアプリケーションの見やすさ、使いやすさ、分かりやすさなどを言います。デザインすることの目的の一つは、デザインによってウェブアプリケーションの機能性を向上させることです。ここでは、機能性を6つの観点に分類してそれぞれについて見ていきます。機能性によっては、おしゃれさやかっこよさといった情緒性とトレードオフの関係にあるものもあるので、注意が必要です。

2.1 誘目性・視認性の向上

誘目性・視認性とは、サイトをパッと見たときの目的のコンテンツの見つけやすさのことです。
具体的な実践方法としては、以下の方法があります。

  • サイズの調整やアイコンの配置、点滅などの効果を入れることによる視線の誘導
  • 背景と文字色のコントラストの調整
  • 文章を枠線で囲う。

2.2 情報理解の促進

情報理解の促進とは、アプリケーション内の情報の表示を構造化し、サイトの分かりやすさを向上させることです。
具体的な実践方法としては、以下の方法があります。

  • 関係性の強い情報を近くに、逆に関係性の弱い情報は遠ざける。
  • まとまりのある情報を枠で囲って、グループ化する。
  • 適切な文字間隔、行間、パディングの使用による要素間距離の最適化
  • 文字情報を図や表で表現することによる情報の視覚化
  • 数字や漢字など、目立たせたい箇所だけ大きくするなどして、情報の強弱を視覚化

2.3 操作性の実現・向上

操作性の向上によって、ユーザーは望んでいる情報に容易にアクセスできるようになり、利用満足度が向上します。
具体的な実践方法としては、以下の方法があります。

  • 例えば、ボタンなら影をつけるなど、その要素が操作可能であるということをユーザーに気づいてもらえるように工夫します。
  • サイズや位置などを工夫して、操作するのにストレスがないようにします。
  • 画像を多用しない、容量に気を配る、動的な処理を検討するなどによって、軽量化に努め、レスポンス時間を早くし、ユーザーの待機時間を少なくします。
  • 適切なラベル、誤解のないフォルム、ミスタッチの生まれない配置などの工夫によって、ユーザーの誤動作を防止します。
  • 別の操作により現在の操作を中断したときに、後から復帰できるような設計を採用し、操作に対するハードルを下げます。
  • 処理中なのか処理が終わっているのか、後どれくらい操作が必要なのか、などのステータスをユーザーに伝達をすることで安心感を与えます。

2.4 習熟度の向上

習熟度の向上とは、ユーザーがサービスを利用するのに必要な学習コストを小さくすることです。覚えにくいものより覚えやすいもの、覚えやすいものより覚えなくていいものを目指します。
具体的な実践方法としては、以下の方法があります。

  • 同じ役割のパーツには、同じデザインを施し、サービスの中で一貫性を保ちます。
  • 画像の解像度や大きさの変更、トリミング、明暗の調整などで不自然にならない程度に画像を加工することによる画像表示の工夫
  • 黄金比白銀比のシステムの導入などによる審美性の追求
  • 女性向けならピンクやベージュといった配色をベースにするなどの文化的背景への依拠
  • 一般的なサイトの構成に追従する、多数派への追従

2.5 アイデンティティの体現

アイデンティティの体現とは、端的に言うとデザインにそのサイトらしさを加えることです。これにより、識別性の向上、ブランディング化による満足度の向上というメリットがあります。
具体的な実践方法としては、以下の方法があります。

  • 画面の目立つところにロゴを配置し、帰属を明確にする。
  • キャラクターを配置することで、そのキャラクターのファンに対しての誘引性を高める。
  • サービスの理念やイメージなどのモチーフ化(例:背景を商品の写真にする、ボタンのデザインを料理教室っぽいものにさせるなど)
  • テーマカラーやレイアウトテンプレート、オリジナルフォントといったレギュレーションの適用

2.6 可変性の維持

ウェブアプリケーションでは、開発や運用において頻繁に更新・変更作業が発生します。また、インテリアやファッションと違い、ユーザー側の閲覧、利用環境が一定ではないという特徴があります。そこで、デザインにおいても可変的であることが求められます。 具体的な実践方法としては、以下の方法があります。

  • バイスフォントの使用やcssの利用による画像の削減によるメンテナンス性の向上
  • レスポンシブデザイン
  • コンテンツが増えても対応できるような伸縮性の担保
  • 要素の入れ替え、組み換えの容易化

3. デザインの情緒性

ウェブデザインにおいて情緒性は、6つ軸に分類することができます。サービスの性質、ターゲットの属性に合わせて、この6つの軸の強弱をイゴライザーのように調整します。ここでは、6つの軸についてそれぞれ見ていきます。

3.1 装飾性

例:googleのサイトなど

シンプル(装飾性:少ない)

要素の数は少なく最小限で、影や立体処理といった意匠も少ない。

印象
  • クリーン
  • コンテンツを利用する上での手がかりが乏しくなる
  • 画面の余白が目立ち情報が乏しい印象を与えかねない

デコラティブ(装飾性:多い)

要素の数は多く、影や立体加工といった意匠も強く施されている。

印象
  • ユーザーの目を引きやすい。
  • 過度な装飾はユーザーに雑多な印象を与えかねない。

3.2 成熟度

爽やか、若々しい(成熟度:少ない)

寒色系で明度の高い配色、太いゴシック体や意匠の少ないデザイン

印象
  • 新鮮で清潔な印象
  • 明朗で希望に溢れている

円熟した、伝統的な (成熟度: 多い)

ゴールド系の配色、明朝体や縦書きの採用などが特徴

印象
  • ベテラン、大御所
  • 重厚で高級感がある
  • 時間の積み重ねを感じる

3.3 態度

真面目(態度: 硬い)

情報を正しく伝えられるようなベーシックなレイアウト。

印象
  • きっちりしている。
  • 画一的である。没個性的である。

ポップ、カジュアル(態度:柔らかい)

豊富なアイコンやイラストの使用、多様な配色、画一的でないレイアウト

印象
  • 親しみやすい。
  • 賑やかで楽しい。

3.4 愛嬌

スタイリッシュ、スマート(愛嬌:少ない)

大きく配置した写真、欧文を取り混ぜたタイポグラフィ設計、ソリッドさを強調した矩形

印象
  • シャープで洗練されている。
  • 自信や余裕が感じられる。

キュート、プリティ(愛嬌:多い)

暖色系の配色、丸みを帯びたシェイプやフォント

印象
  • 女性らしい
  • 子供っぽい

3.5 品性

アクティブ、ダイナミック(品性:少ない)

太いフォントや枠線、高い配色コントラスト、整列線を外したレイアウト。コンバージョンを求めらるようなランディングページやバナーと相性が良い。

印象
  • 大胆で積極的である
  • 立体的である

静か、落ち着いている(品性:多い)

使われている色相は少なく、要素はグリッドに沿ってしっかりと並べられる。線、ウェイトは細い。

印象
  • 上品
  • 平面的である。

3.6 温度感

冷たい、無機質(温度感:低い)

イメージ画像が少なく、情報密度が高い。平坦なテクスチャ。管理画面や業務用アプリケーションと相性が良い。

印象
  • 人工的である。
  • 実用的である。

暖かい、開放的(温度感:高い)

自然物を模した要素の配置、緑・茶色系の配色、手書きフォントなどの利用。不揃いな配置。ゆったりとしたレイアウト。飲食、美容業界と相性が良い。

印象
  • 有機的である。 -リラックスしている。

4. デザイン要素の分類

デザイン作業によって、機能性、情緒性が生み出される対象をデザイン要素といいます。デザイン要素には、以下の8つがあります。

  • 配色
  • タイポグラフィ
  • イメージ(写真、イラスト)
  • アイコン
  • シェイプ
  • デコレーション
  • インタラクション、アニメーション
  • レイアウト

5. 戦略・要件定義フェーズにおけるデザイン作業とデザインコンセプトの立案方法

戦略・要件定義フェーズにおけるデザインの進行方向は、主に以下の4つのプロセスからなります。

  1. 調査、分析
  2. デザイン基本方針立案
  3. デザイン詳細方針立案
  4. 可視化

ここでは、それぞれのプロセスについて簡単に説明します。

5.1 調査、分析

調査、分析では、デザイン作業の制限、前提となりうる情報を、調査分析し整理します。具体的には、以下の項目を確認します。

  • 対象クライアントとその特徴
  • 対象の業界
  • 種類
  • 対象のユーザー
  • バイス
  • デザインの目的、背景、課題
  • その他

5.2 デザイン基本方針立案

デザインの前提条件をまとめたら、まずは大きな方針としてデザイン基本方針を策定します。具体的には、デザインの前提条件を考慮しながら、プロジェクトにおける7つの機能性、6つの情緒性について、あるべき方向性を検討、策定します。順番としては、以下のように行うと良いでしょう。

  1. 機能性についてあるべき方向性を記載、策定する。
  2. 情緒性についてあるべき方向性を記載、策定する。
  3. 上記二つをまとめて、デザイン基本方針をつくる。

5.3 デザイン詳細方針立案

デザイン詳細方針立案では、8つのデザイン要素のそれぞれの属性はどうあるべきなのか、どのようなことに気をつけるべきなのか、デザイン基本方針で定めた機能性と情緒性に紐付ける形で記載していきます。具体的なタスクもここで切り出すといいでしょう。

5.4 可視化

作成したデザイン詳細方針案をもとに、具体的にビジュアルサンプルを作成し、立案した方針を可視化します。可視化したデザインサンプルを元にスーテクホルダー内で確認をして、デザイン方針が正しいかどうかの確認をします。場合によっては、前のプロセスに立ち戻り、再検討をする必要も生じます。