関連サイト
本書の関連ページが用意されています。
内容紹介
デザイナー、ディレクター、デベロッパー、クライアントなどなど、ウェブ制作に関わるステークホルダー間でウェブデザインに関わる「共通言語」を持ち、より成果物の質を高めるためのガイドブック。
ウェブの発展につれて、ウェブデザインのワークフローは整備され、表現の幅も広がりました。しかし、そのウェブがそのデザインになった理由、良いウェブデザインの条件、ウェブデザインにおける「品質」や「理想」といった問題はまだまだ属人的で、感覚的に語られ決定されていることも少なくありません。本書ではそういった現状を踏まえ、ウェブデザインを機能性と情緒性という2つの軸を中心に分析し、体系化することを試みています。
本書は5つの章で構成されています。1～4章はウェブデザインを体系化した理論の解説で、5章はその体系化された理論を実践し、実際にデザインコンセプトを策定する上での具体的な解説をしています。各章の内容を簡単に記します。
第1章 ウェブデザインの定義 まずはウェブデザインやウェブデザイン周辺の用語を改めて定義・整理します。
第2章 デザインの機能性 そもそもウェブをデザインするということはどういうことを行なっているのか。ここではウェブデザインの役割の一つ、7つの機能性について解説します。
第3章 デザインの情緒性 機能的なだけではデザインとして不十分です。機能性と対になるウェブデザインのもう一つの役割である6つの情緒性について解説します。
第4章 デザイン要素の分類 文字・色・形など、デザインが施される対象の要素を8つに分類して解説します。また、それぞれの要素の属性をどのように変化すると機能性・情緒性にどのように影響を与えるのかも合わせて記載します。
第5章 戦略・要件定義フェーズにおけるデザイン作業とデザインコンセプトの立案方法 機能性・情緒性を使ってデザインコンセプトをどのように策定していくのか、架空のプロジェクトを想定しながら具体的に解説します。
デザイナーの方には、デザインの方針策定や成果物の言語化のためのツールとして、企業のディレクターやウェブ担当者の方には、ウェブデザインを正しくディレクションし評価する上での「手引き」として、ぜひ役立ててください。
書誌情報
- 著者: 金 成奎
- 発行日: 2019-05-31 (紙書籍版発行日: 2019-05-31)
- 最終更新日: 2019-05-31
- バージョン: 1.0.0
- ページ数: 192ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
金 成奎
ネットイヤーグループ株式会社UXデザイン部 カスタマーエクスペリエンス事業部シニアアートディレクター
1978年生まれ。島根県出身。早稲田大学第一文学部卒業後、ウェブデザイナー/アートディレクターとして事業会社、広告代理店、メディア開発会社などで経歴を重ね、2012年よりネットイヤークラフト (現・ネットイヤーグループ) に入社。コーポレートサイト、自治体・交通・学校法人などのサービスサイト、業務アプリケーションなど、大規模リニューアルプロジェクトのビジュアルデザイン・アートディレクションを数多く手がける。
目次
第1章 ウェブデザインの定義
- 1 ウェブデザインとユーザインターフェース
- 2 ユーザインターフェースとコンテンツ
- 3 コンテンツとマテリアルとコンテナ
- 4 デザインすることにより引き起こされる変化・反応
第2章 デザインの機能性
- 1 デザインの機能性とは
- 機能性の定義
- 機能性の分類
- 機能性の度合いについて
- 機能性を上げることによって失われるもの
- 2 誘目性・視認性の向上
- 実践方法：視線の誘導
- 実践方法：コントラストの調整
- 3 情報理解の促進
- 情報を構造化する
- 実践方法：統一感・類同性の演出
- 実践方法：要素間距離の最適化
- 実践方法：情報の抽象化・視覚化
- 実践方法：コントラストの調整
- 実践方法：安定感の演出
- 4 操作性の実現・向上
- 操作の種類
- 実践方法
- 実践方法：操作前
- 実践方法：操作中
- 実践方法：操作後
- 実践方法：操作全般
- 5 習熟度の向上
- 「覚えやすい」よりも「覚えなくてもいい」
- 実践方法：一貫性の保持
- 6 アイデンティティの体現
- そのデザインの「自分らしさ」
- 実践方法：帰属の明確化
- 実践方法：マスコット・キャラクターの採用
- 実践方法：サービス・理念・イメージのモチーフ化
- 実践方法：レギュレーションの適用
- 7 一般常識・社会的習慣への準拠
- 実践方法：審美性の追求
- 実践方法：文化的背景への依拠
- 実践方法：モデルケースの想起
- 実践方法：多数派への追従
- 8 可変性の維持
- ウェブデザインに可変性が求められる理由
- 可変性が保たれているとユーザにメリットがある
- 実践方法：画像の不使用
- 実践方法：相対的なサイズ設定
- 実践方法：伸縮性の担保
- 実践方法：入れ替え・組み換えの容易化
第3章 デザインの情緒性
- 1 デザインの情緒性とは
- 情緒性の定義
- 情緒性の分類
- ウェブデザインのトーンを決定するためのパラメーター
- 情緒性の軸の使い方
- デザインの擬人化
- 2 装飾性
- シンプル（装飾性：少ない）
- デコラティブ（装飾性：多い）
- 3 成熟度
- 爽やか・若々しい（成熟度：少ない）
- 円熟した・伝統的な（成熟度：多い）
- 4 態度
- 真面目・フォーマル（態度：硬い）
- ポップ・カジュアル（態度：柔らかい）
- 5 愛嬌
- スタイリッシュ・スマート（愛嬌：少ない）
- キュート・プリティ（愛嬌：多い）
- 6 品性
- アクティブ・ダイナミック（品性：少ない）
- 静か・落ち着いている（品性：多い）
- 7 温度感
- 冷たい・無機質（温度感：低い）
- 暖かい・開放的（温度感：高い）
第4章 デザイン要素の分類
- 1 コンテナとデザイン要素
- 2 8つのデザイン要素
- デザイン要素はデザインエレメントやコンポーネントではない
- デザインするとは、デザイン要素の属性を変化させること
- 3 配色
- 機能性に関わる変化の例
- 情緒性に関わる変化の例
- 4 タイポグラフィ
- 機能性に関わる変化の例
- 情緒性に関わる変化の例
- 5 イメージ（写真・イラスト）
- 機能性に関わる変化の例
- 情緒性に関わる変化の例
- 6 アイコン
- 機能性に関わる変化の例
- 情緒性に関わる変化の例
- 7 シェイプ
- 機能性に関わる変化の例
- 情緒性に関わる変化の例
- 8 デコレーション
- 機能性に関わる変化の例
- 情緒性に関わる変化の例
- 9 インタラクション・アニメーション
- 機能性に関わる変化の例
- 情緒性に関わる変化の例
- 10 レイアウト
- 機能性に関わる変化の例
- 情緒性に関わる変化の例
第5章 戦略・要件定義フェーズにおけるデザイン作業とデザインコンセプトの立案方法
- 1 4つのプロセス
- 架空のサンプルプロジェクトの概要
- 2 調査・分析
- 3 デザイン基本方針立案
- 参考例でのデザイン基本方針立案の流れ
- 機能性の方針
- 機能性の方針策定のポイント
- 情緒性の方針
- 情緒性の方針策定のポイント
- 基本方針まとめ（デザイン基本方針）
- 基本方針をまとめる上でのポイント
- 4 デザイン詳細方針立案
- [デザイン要素1] 配色
- [デザイン要素2] タイポグラフィ
- [デザイン要素3] イメージ（ 写真・イラスト）
- [デザイン要素4] アイコン
- [デザイン要素5] シェイプ
- [デザイン要素6] デコレーション
- [デザイン要素7] インタラクション・アニメーション
- [デザイン要素8] レイアウト
- デザイン詳細方針立案のポイント
- 5 可視化
- 可視化のポイント
- 解説資料の作成方法
- 資料作成のポイント