logical webdesign-workbook2

(c)2001,2002 Hiroshi Sasaki so:an limited all rights reserved.1

ロジカルWebデザイン概論WORKBOOK

Hiroshi Sasaki2005-10-03


本講座のテーマ

【目的】～デザインスキル、センスを向上させるために。

■ルールを発見するよいデザインに共通するものはなにか？

■メディアの特性を考えるウェブメディアの特性を理解する。

■実際に手を動かして考える[IN]考えるだけではなく,[OUT]表現し感覚に問いかける。

■表現力（イメージを伝える）を高める頭に描いたイメージを伝える言葉や力をつける。

■継続的にトレーニングする一度学んで終わるものではなし。

■ウェブ以外のクリエイティブに注目するひとつを見るのではなく、ほかの視点をもつこと。

■パソコンの利点を最大限活用するデジタルのメリットを理解しセンスアップを意識的に。

■失敗を恐れないむしろ失敗することで気づけることは大きい。

■デザイン、表現を楽しむ

表現

知識

ロジカルにセンスアップ

観察眼を養う

観察力

表現力

創造力

実践力

選択眼を養う

説明力を養う表現力を養う

[R]感性を[L]ロジカルに[IN]理解し[OUT]実践してみる。

RL

IN

OUT


クリエイティブメソッドワークショップの流れデザインはやはりセンスです。しかしデザインをする上での自分なりの方法論を見つけることで、創造性は確実に高められるはずです。講座を進める上での全体像を理解しておきましょう。

表現

ワークショップ

知識

伝える力を養う

共通言語を理解する

ロジカルにセンスアップ

実践

コミュニケーション

観察眼を養う

言葉で伝える力を身につける

自分の好みを知る

描いたイメージを表現する力

客観的・理解主観的・直感

共通点を知る

選択眼を養う

説明力を養う表現力を養う

RL

IN

OUT


自己紹介自己紹介という自己表現をしてみましょう。企業や商品をアピールするウェブデザインも、自分を紹介するためのデザインをするのも根本は一緒です。限られたスペースや時間の中でなにを伝えるか？まずは難しく考えずに挑戦してみましょう。（一人～３分）

・この講座を受けた動機と期待すること。・いま自分が関心あることなど、個人的なこと。・今の自分の状態を表現するとしたら。（記号や形、色で、抽象的に）

自分のことについて何かを話そうと思ったときに思い浮かんだイメージを絵で表してみてください。

具体的なイラストではなく、○や△のような抽象的な記号でかまいません。色で言えば何色でしょうか？

表現力行動力


イメージの表現力をつけるイメージを伝える力。１）いいと思うサイト見つける。２）それらに共通するものは何か？を分析する。

３）それを言葉にしてみる。４）実際にトレースして表現してみる。

内

右左感性的要因論理的要因

外的要因

内的要因

知性感性

LOGIC SENSE

KNOWLEDGE

COMMUNICATION

コミュニケーション

外

描いたイメージをビジュアルで表現できない

なにがいいサイトなのかわからない

いいサイトに共通するものがわからない

描いたイメージを言葉で表現できない


[選択眼]～自分の「好き」を知る心の琴線に触れるものはなにか？サイトをひとつ選び、そのサイトのどこが気に入っているか？を表現してみましょう。

なぜそれがいいと思ったか？どこに魅力を感じるのか？主観的に思える感覚を大切にする。

RL

IN

OUT

http://amana.jp/


[観察眼]～法則を見抜く力そこにある法則を見つける力。ロジカルシンキング。みんなが選ぶサイトに共通するものはなにか？ルールを探しましょう。美しさだけでなく機能や、エッセンスなど。応用可能なものかどうか？

自分、他人がいいと思うものに共通するもの。そこにルールや法則が存在しないか？客観的に徹底して観察する。


[説明力・表現力]～イメージの伝達頭に描かれている絵を言葉を使って伝達してみましょう。イメージが思い浮かぶウェブサイトを頭に描いて、説明してみましょう。具体的な色や形状をつかわずに、「形容詞」を使って伝えてください。

描いているイメージを言葉で伝えるには？具体的にあるものを伝えるのも難しい。これから創るイメージを共有するのはもっと難しい。

その言葉を聞いて思い浮かぶサイトイメージを表現してみてください。

言葉

ビジュアル


[表現力]コーヒーカップを描こうイラスト力を高めるトレーニングなるべく太いペンで、立体感あるコーヒーカップを描きましょう。ポイントはカップの厚みや丸みを工夫して表現してみてください。なるべく線の数を減らすことがポイントです。

キャラクターのイラストには、・観察力（特徴を見抜く）・抽象力（要素を抜き出す）特徴を見抜き、要素を単純化し描きだすことで、すばやくわかりやすい表現が可能です。

→このことから何を連想しますか？

５分


[表現力]パンダを描こうパンダをイラストにしてみてください。パンダの特徴はどこにあるでしょうか？中国名で大熊猫。少ない線でそう見えるようかどうか、試行錯誤してみてください。

イラストを意識することは、デザインやクリエイティブの現場だけでなく、ビジネスやプレゼンテーションなどの現場においても、これから求められるセンスともいえます。ビジネスモデルや、概念などを視覚化する際にも、言葉だけに頼らず、そのものの特徴を見抜き、シンプルに伝える力が求められるでしょう。

５分


[表現力]抽象画を楽しもうピカソ風の絵を描いてみよう

■Mr.picassoheadhttp://www.mrpicassohead.com/

５分

ロジカルに理解し伝える力をつける。[R]感性を[L]ロジカルに[IN]理解し[OUT]実践してみる。

RL

IN

OUT


デザインをロジカルに理解するためにデザインをロジカルに理解するために最低限覚えておきたいこと「色」と「形」のルール。究極はすべてセンス。とはいえ、基本的なルールを知っていると、デザインのセンスを補うにあまる武器ともなる。

■色のロジカルに学ぶ知識・トレーニング・色の基礎・配色、調和

■形の知識・トレーニング・フォント～書体、文章、ラベリング・レイアウト

■サイトのパターン「トーン」と「マナー」・レイアウトパターン・配色パターン

デザインをロジカルに伝えるために抽象的でセンスに頼られる「デザイン」にもものさしはある。共通言語を身につけることで、より明確なサイト表現ができるように。

■イメージスケールで言葉と配色の共通性を理解・イメージスケールでサイト分類

RL

IN

OUT

ウェブデザイン

色・配色

トーンマナー

知識

表現

文字・レイアウト

印象の伝達情報の伝達


色を体系的に理解する色の三属性（色相、明度、彩度）色を理解するには、これが基本です。まずは、色相を理解しましょう。

５分

虹の７色

赤

赤マゼンダ

加法混色

減法混色

明度

彩度

色相

三原色

加法混色は混ぜると「　　」に。減法混色は混ぜると「　　」に。

加法混色の三原色を英語で書くと「　　　　　　　」減法混色の４色を英語で書くと　　「　　　　　　　」

※中間混色、並置混色について。


色相環をつくろうカラー粘土で色相環をつくりましょう。各原色をまず３等分して、ほかの色と組み合わせながら色の円を完成させます。なるべく答えを見ずに作成しましょう。


トーンを理解しようそれぞれの色ごとに、明るさ（明度）や鮮やかさ（彩度）の違う色が存在します。

明るい

暗い

低い高い

明度

彩度

無彩色有彩色

トーン（印象）の名称を記入してみましょう。

PCCS（日本色研配色体系：Practical Color Co-ordinate System）

[p]pale（薄い）[ltg]lightgrayish（明るい灰みの）

[g]grayish（灰みの）[dkg]darkgrayish（暗い灰みの）

[lt]light（浅い）[sf]soft（柔らかな）

[d]dull（鈍い）[dk]dark（暗い）

[b]bright（明るい）[d]strong（強い）

[dp]deep（深い）[v]vivid（さえた）

以下の言葉はどこに当てはまるでしょうか？


トーンを理解しよう明度と彩度。色のもつトーンを言葉（形容詞）で理解するとイメージの共有ができ表現力がアップします。

明るい

暗い

低い高い

明度

彩度

無彩色有彩色

トーン（印象）の名称を記入してみましょう。

PCCS（日本色研配色体系：Practical Color Co-ordinate System）

[p]pale（薄い）[ltg]lightgrayish（明るい灰みの）

[g]grayish（灰みの）[dkg]darkgrayish（暗い灰みの）

[lt]light（浅い）[sf]soft（柔らかな）

[d]dull（鈍い）[dk]dark（暗い）

[b]bright（明るい）[d]strong（強い）

[dp]deep（深い）[v]vivid（さえた）

以下の言葉はどこに当てはまるでしょうか？


調和のルールを知るシュブルールの色彩調和

ジャッドの調和原理

■Color match 5khttp://www.colormatch.dk/

■Color schemes generator 2http://wellstyled.com/tools/

■KRAZYDADhttp://krazydad.com/colrpickr/

■colr orghttp://www.colr.org/

■Color Palette Generatorhttp://jrm.cc/color-palette-generator/

類似の調和

対比の調和

秩序の原理

なじみの原理

類似性の原理

明瞭性の原理

色空間の中で規則的に選ばれた色は調和する。

自然界にみられる色の変化や、見慣れている配色は調和する。

色の三属性のなかで共通の要素がある場合は調和する。

配色する色の関係があいまいでなければ調和する。

１）ほぼ類似する色相でトーンが異なる場合２）色相差があってもトーンが同一か類似している場合３）補色関係にある２色、もしくはその２色でトーン差の小さい場合

１）同一色相でもトーン差が大きい場合２）類似色相でもトーンの差が大きい場合３）補色関係にある２色、もしくはその２色でトーン差の大きい場合

参照）配色イメージ見本帳（Mdn)

(c)2001,2002 Hiroshi Sasaki so:an limited all rights reserved.

配色の選定調和配色チャート調和配色のパターンにしたがって、あらかじめロゴや企業ＣＩからイメージされた基本色から調和する配色を選び出します。それぞれの配色パターンによる印象の違いなどに考慮しながら配色検討を行います。

類似色相隣接色相

Principle of Common Elements 同系の調和（共通要素の原理）

色相

トーン

対照色相補色色相

Principle of Analogy 類似の調和（類似性の原理)

Principle of Unambiguity 対照の調和（明瞭性の原理)

同一色相

同一トーン対照トーン類似トーン


配色の選定配色決定～同系の調和（共通要素の原理）

http://www.symantec.com

■同一色相の調和色相が同じで、明度や彩度、トーンといったほかの要素が変化する色調。白や黒、グレースケールといった無彩色との組み合わせにより、統一感のある安定した配色が可能です。


色相

同一色相

Color Scheme

Websafeカラーによるその他の配色


配色の選定配色決定～類似の調和（類似性の原理)

類似色相隣接色相


Color Scheme


■隣接・類似色相の調和メインカラー青に深緑といった色相の隣接する色を組み合わせた配色。明度や彩度、トーンといった要素をあわせることで、統一感のあるデザインとなる。


配色の選定配色決定～対照の調和（明瞭性の原理)

対照色相補色色相


Color Scheme


■対照・補色色相の調和ロゴマークなどはっきりとした目立たせたい配色などによく用いられる。赤に緑などトーンによっては、刺激が強くなりやすい。そういった場合は、無彩色もしくは中間色を置く（分離配置）することで、デザインのバランスがとれる。


配色の選定配色決定（同系の調和（共通要素の原理）

トーン

同一トーン


Color Scheme


■同一トーンの調和複数の配色でデザインをするときは、トーンをそろえることで、調和した配色を施すことができる。タブ式のメニューやゾーンが3つ以上ある場合など、配色によって意味をわけていくばあいなどには、同一トーンの配色を行う必要がある。


配色の選定配色決定～類似の調和（類似性の原理)

類似トーン


Color Scheme


■類似トーンの調和同じ色で構成される場合、明度や彩度をトーンマップの隣接するものに変化を持たせると、調和する。また隣接色相などで、デザインに遊びをもたせたい場合や配色のバランス（量）などによっては、効果的な配色になる。


配色の選定配色決定～対照の調和（明瞭性の原理)


対照トーン

Color Scheme


■対照トーンの調和同じ色で構成される場合、無難になりがちな色調に変化を持たせたいときに用いる。


実際的な配色のコツ■色を使いすぎないデザインは足していくのではなくて、引いていく。引き算の発想。

■無彩色を活用するグレーを使うとどこにでもあう。

■血をなじませる色が合わない場合は、セロファンのようなもので共通の色をいれる

■カラーピッカーを活用するパソコンを活用するとロジカルに調和をさせられる。

■きれいなサイトから色を参考にするきれいなサイトのキャプチャーをとっておいて、色見本をつくるとよい。

■実際においてみて考える色見本帖ではなくて、実際に色をおきながら考える

■レイアウト、文字のバランスと組み合わせるレイアウトのバランスや分量、文字などをおきながら調整する。

■写真の色やロゴなどの背景と「なじませ」を意識する白背景ならば写真の背景も白で抜くと、なじむ（appleなど）

■最後は自分の感覚で修正する（気持ちよさ、悪さ）納得いくまで調整してみること。または、少し時間を置いてみる。

■そのほか配色に役に立つ参考サイト・色とJavaScriptで遊ぶD. project

http://www.hi-ho.ne.jp/douton/index.html http://www.redalt.com/Tools/ilyc.php

http://exo.jp/keypersonq/

http://a-3s.com/cool/03ran.cgi?mode=link&id=86&url=http%253a%252f%252fexo%252ejp%252fkeypersonq%252f







文字・レイアウトの基礎■情報をわかりやすく見せるために気をつけること・文字の大きさ、書体（OS、ブラウザーによって変化するので注意、　大きさだけでなく、強調やメリハリを意識）・文字の配色（リンク色との差別化や、背景とのコントラスト）

・行間の調整（読みやすさに大きく影響）・段落を調整（頭をそろえる。適度な改行を行う。グルーピングなど）・幅をそろえる（あまり長い行をつくらないこと）・ラベリングを意識（言葉の選び方、優先順位、カナなど）・そのほか

画面と印刷の表示を分ける。PDFやCSSを使う。対象ユーザーにあった表示方法を検討するアクセシビリティーなどを考慮する

■美しく見せるための工夫・書体のもつ印象を理解する（ロゴなど強調すべきところは大切）・必要なところは文字を画像化する（altなどで補完をわすれずに）・文字の大きさ（大きいと見やすいが野暮ったくも見える）・行間を調整する（少し調整するだけで印象がだいぶ変わる）・文字間のバランスを整える（画像化する際は必須）・配色をなじませる（視認性とのバランスを考える）・段落をそろえる（画像の回り込みなど工夫する）


画面デザイン（レイアウト）の実際■基本的なウェブサイトのレイアウトの流れ・まずは横幅を決める。（固定幅の場合760px~800pxが多い）・背景色を決める。（全体を占める色）

・情報量にあわせてレイアウトのパターンを考える（後述）・ゾーンにあわせた配色を考える・基準となる文字の大きさ、行間などを設定して画像とともに流し込む・これらすべてを画像処理ソフト上（もしくはPPTでも可）で検討。・TOPと２階層含めた遷移図を作成・ナビゲーションやユーザビリティーを考慮しながら調整・CMSやロジックにあわせて調整。コーディング。・共有パーツやボタン、画像などを分離、作成。・CSSでゾーニング、文字指定、配色調整。・ブラウザで確認

■美しく見せるための工夫・CSSで設計後に配色シミュレーションをできるようにしておく。・CSSで設計後に文字の大きさ書体を調整する。・画像のクオリティを高める。・常にグリッドを意識する。

CSS 　 [Cascading Style Sheets]　HTMLの見栄えを定義するスタイルシートを記述するための言語仕様。CSSではフォント、色と背景、テキスト、ボックスなどの属性を指定することができる。

アスキーデジタル用語辞典より抜粋

CMS (content management system)コンテンツマネジメントシステム / コンテンツ管理システム

　テキストやグラフィックなどのさまざまなデジタル・コンテンツを収集、登録して統合的に管理し、更新・配信する仕組み、またはそれを実現するソフトウェアの総称。

＠IT情報マネジメント用語事典より抜粋

誰のためのウェブサイトデザイン？サイトデザインを始める前に知っておくこと。


誰のためのデザイン？ウェブという媒体の特徴的な面。デザインをする上で、考えうるデザイン対象は？

常にほかの媒体となにが違うか？を意識して、その特徴や性格を理解したデザインが必要。

美的な点だけではなく、機能性（GUIやインターフェイス）や使いやすさ（ユーザビリティー）、情報の伝達性（ナビゲーション）そして更新のしやすさ、アクセシビリティー（どんな人でも扱えるデザイン）など多角的にデザインを判断していかなくてはならないのが、「Webデザイン」の特徴。

エンドユーザーA

B

C

トーンマナー

関連するキーワード「トーンとマナー」「CMS」「GUI」「インターフェイス」「SEO」「ナビゲーション」「ユーザビリティー」「アクセシビリティー」

観察力


「トーン＆マナー」見栄え重視か？使いやすさ重視か？

トーンとマナーのもうひとつの考え方。

トーン対象ユーザーの嗜好にあったイメージやサイトのテイストを決める

マナー対象ユーザーの属性を踏まえ、わかりやすく伝える工夫

ユーザーの嗜好にあったデザインか？ユーザーの属性・傾向にあったインターフェイスか？

デザイン重視読みやすさ重視

メタファーの導入検討

機能モジュールの導入検討

情報量（図文率）の調整

レイアウトパターンの検討

ラベリングの検討

メタファーの導入検討

配色の検討

書体・文面の検討

図文率の検討

ギミックの検討

情報量・メニュー量少ない＝（ゾーン少）情報量・メニュー量多い（ゾーン多）

トーンへの配慮　【格調の高さ、上品さの表現】マナーへの配慮　【ビジネス的実用的な表現】

情報量が増えるとメニュー構造も増加し、情報感が増す反面、わかりやすくするためのマナー的配慮が必要となってくる、

情報量が少ない場合、画像などイメージの閉める割合が増える。ユーザーにあったデザインタッチ（トーン）への配慮が重要。

知性的感性的


レイアウトの種類を知るレイアウトの種類はそれほど多くなく情報量にあわせて考えみるとわかりやすい。


レイアウトパターンの選定トーン（ビジュアル）重視のレイアウト

ゲート型

選択のポイント

http://www.hermes.com

http://www.gucci.com化粧品やアパレルなどイメージ訴求を主に行うサイトや、企業のスプラッシュページ、ゲートページ（入り口）のように、余白を大きくとり、センターに画像を配置するなど、広告的な情報提示をする際によく用いられる。

Ｆｌａｓｈの技術が用いられると、動的な表現により、画面全体を使った表現が目立ってくる。

従来の紙媒体の広告的手法にはない、インタラクティブかつ動的な表現がブロードバンドの普及とともに増えてくる。


レイアウトパターンの選定サイト全体の見通しがいいレイアウト

トップメニュー型

http://apple.com/

http://symantec.com/


タブ式のメニューなどメニュー数が固定で少ない場合によく持ちいられるレイアウト。

メインエリアの自由度が高いために、デザイン性の高いサイト構築などが可能。

メニューの位置が固定されるのでグローバルナビゲーションなどもこのエリアに入る。

ユーザビリティーの高い形。

メニューを多階層的に表現する場合などDTMLなどでレイヤー的に展開することも可能。


レイアウトパターンの選定情報量が多く、変動するタイプのレイアウト

レフトメニュー型


http://www.sonytower.com

http://www.mercedes-benz.com/メニューの数が多く、またラベリングが可変型の場合によく用いられるレイアウト。

ニュースサイトのトピックスのようにテキスト文字の横幅が固定できない場合などがこれにあたる。

また折込式のディレクトリーツリーをもちいて、メニューを展開したり、DTMLなどで立体的なレイヤーでディレクトリーツリーを表現したりすることもできる。


レイアウトパターンの選定縦方向へのスクロールを減らすレイアウト

トップメニュー（＋フッター）型


http://www.tommy.com

http://www.aiwa.comニュースサイトなど、情報量が多く縦スクロールが長い場合は、フッターにもグローバルナビゲーションが用いられることがある。

また情報量が少なく、モニターサイズに収まるようなサイトデザインの場合はトップにあるグローバルナビゲーションを補完すりょうな形で、下部に面ニューゾーンが現れる。

この場合は、コピーライトやフィードバックといた、トップのグローバルナビゲーション等とは異なる情報が提示されることが多い。


レイアウトパターンの選定階層の多いレイアウト

トップ＋レフトメニュー型


http://www.konica.co.jp

http://www.gateway.com/上にメインメニュー、左にサブメニューといった形で、メインメニューの項目にあわせ、下階層のメニューを左側に表現する場合によく使われるレイアウト。

トップにあるタブ式などのメインメニューでは収まりきらない情報や、下階層にあるディレクトリーツリーを表示するために、左のメニューがいかされる。

また、ナビゲーションの役割としてもレフトメニューの配色を変えることにより、全体的なエリアイメージを印象づける役割にも用いられる。


レイアウトパターンの選定階層の多いレイアウト

レフト＋トップ型


http://www.nikkei.co.jp

http://www.nttdocomo.co.jpレフトメニューゾーンをメインメニューとしトップにバナーや簡易なメニューもしくは、グローバルナビゲーション、機能モジュールなどが配置される。

バナーであることが多いが、企業のアイデンティティーを表現する看板的な役割をもたせたり、通販サイトの場合は、何のショップであるかを明示するための表現場所であったり、決済方法や信頼性を表現する主張のゾーンとしての活用もある。


レイアウトパターンの選定企業系サイトレイアウト

トップ型2列コラム


http://www.ntt.com

レフト＋トップ型の要素に、タブ式などのメインナビゲーションが加わった形。

ニュースサイト、米国のサイトなどでもっとも用いられているサイトレイアウト。

特に情報量が多いサイトにおいては、このパターンが用いられる。

http://www.nec.co.jp


http://www.jal.co.jp/

レイアウトパターンの選定ポータルサイト系レイアウト

トップ型3列コラム


http://auctions.yahoo.co.jp

これが最も多いポータルサイトの形とも言える。

特徴は中央右側にある「ショートカット」のゾーン。このエリアはサイト内のダイレクトリンクであったり、検索やプルダウンモジュールなどの機能が配置される。

またリピーターが目をやる場所と言われ、キャンペーン商品など、変化を求める場所とも言われる。


レイアウトパターンの選定その他のレイアウト

横


その他

http://www.nike.com/

http://www.vuitton.com/.

http://www.uip.com

http://www.danner.comサイトパターンはブロードバンド時代を迎えもっと変化することが予想される。特にＦｌａｓｈなどの技術が普及すると、そのあり方も変わってくる。

あまり型にはまらすすぎず、柔軟なレイアウトにチャンレジしてみるのも、他者との差別化やインターネット上での表現探求には重要なことでもある。


レイアウト力を高めるために綺麗なサイトを実際にトレースしてみる。フォトレタッチソフトもしくはパワーポイントでゾーニングをトレースしてみましょう。

手書きで挑戦してみてください。

デザインをロジカルに伝えるために言葉と色のイメージに共通言語を


配色の選定（資料）イメージカラースケール

日本カラーデザイン研究所著（カラリスト・講談社刊）


印象と言葉を関連させる■今日学んできたこと。思い浮かんだイメージを言葉で伝える難しさ。イメージの共有、意思疎通の難しさ。

色や形といった抽象的なものの持つ意味。それぞれが与える印象。調和やデザインにはある程度方法論があること。自分が（もしくは人が）好きと思えるものにも共通点があること。それを見つけ出して、自分のスキルで表現してみる。

ロジカルにデザインするという意味。

■最後により具体的な方法論としてイメージスケールを用いて、ウェブサイトのもつイメージを客観的に分析してみましょう。

それをもとに、漠然としたイメージとそれを伝えること、感じ取ることにうついてみなさんでディスカッションしてみます。

Documents

logical webdesign-workbook2