Tips of Design

佐々木 敏明（Web Designer at ALLCONNECT. Inc.）

2013.04.13　Hokuriku.NET × WCAF

Tosh i ak i Sa sak i Web Designer at ALLCONNECT.Inc.

@shirokuro331

デザインとは

ある問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。

デザインの本質とは『問題の発見』と『問題の解決』である

デザインとは

　　　　　　　　　　　　 ／）　　　　　　　　　　　／／／）　　　　　　　　　 ／,.=ﾞ''"／　　　　　　／　　　　 i f　,.r='"--'つ＿＿＿_こまけぇこたぁいいんだよ！！　　/　　　　　 /　　　_,.--'~／⌒　　⌒＼　　　　／　 　,i　　　,二ﾆ⊃（ ●）.　（●）＼　　　/　 　　ﾉ　　　 ilﾞフ::::::⌒（__人__）⌒::::: ＼　　　　　　,ｲ｢ﾄ､　　,!,!|　　　　　|r┬-|　　　　　|　　　　　/　iﾄヾヽ_/ｨ"＼ 　　 　 `ー'́ 　 　 ／

※ 本セッションに限る

見た目をいい感じにしたい

わかりやすく、使いやすくしたい

デザインに求められること

目的

ターゲット

ニーズ

コンセプト

デザインするうえでの背景

　　　　　　　　　　　　 ／）　　　　　　　　　　　／／／）　　　　　　　　　 ／,.=ﾞ''"／　　　　　　／　　　　 i f　,.r='"--'つ＿＿＿_こまけぇこたぁいいんだよ！！　　/　　　　　 /　　　_,.--'~／⌒　　⌒＼　　　　／　 　,i　　　,二ﾆ⊃（ ●）.　（●）＼　　　/　 　　ﾉ　　　 ilﾞフ::::::⌒（__人__）⌒::::: ＼　　　　　　,ｲ｢ﾄ､　　,!,!|　　　　　|r┬-|　　　　　|　　　　　/　iﾄヾヽ_/ｨ"＼ 　　 　 `ー'́ 　 　 ／

※ 本セッションに限る

http://credibility.stanford.edu/

What causes people to believe (or not believe) what they find on the Web?“

人々がWeb上で何かを探すときに信頼出来る（または信頼できない）ことの原因はなにか？

ユーザーは素人が作ったようなサイトは信用されず、専門家が作ったようなWebサイトの方がユーザーを先まで進ませた

結 果

http://msdn.microsoft.com/ja-jp/hh850413

UIの改善により、利用時間の大幅なコスト削減に成功ストレスの軽減により笑顔が増えた :)

結 果

デザインするうえでの背景はとりあえずおいといて見た目を良くするコツについてお話します

見た目を良くするコツ

デモ & ツールの紹介

まとめ

アジェンダ

見た目を良くするコツ

色

タイポグラフィ（文字）

レイアウト（配置）

デザインの基礎

色

タイポグラフィ（文字）

レイアウト（配置）

デザインの基礎

近接 / 整列 / 反復 / コントラスト

デザインの基本原則

近接 / 整列 / 反復 / コントラスト

デザインの基本原則

きちんと情報をまとめて、整理してから配置して、特徴的な何かを繰り返し使うことで印象が強くなって、メリハリつけたほうが良い感じに見えるよ！

一言でまとめると「

」です。

近接 / 整列 / 反復 / コントラスト

デザインの基本原則

です。では見てみましょう

近接

項目が散らかってる 項目がグループ化されている

関連する項目（情報）をまとめてグループ化する

関連する項目（情報）をまとめてグループ化する

項目が散らかってる 項目がグループ化されている

複数のものを近づけて配置すると、見る者はそれらを仲間として関連付ける。構造と内容の直線的な手がかりをユーザーへ提供することができる。

近接

http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

画像・アプリ名・説明を一つのグループとしてまとめることで関連する情報として認識させる※関連するグループどうしはある程度間隔をあける必要がある

近接 / 整列 / 反復 / コントラスト

デザインの基本原則

きちんと情報をまとめて、整理してから配置して、特徴的な何かを繰り返し使うことで印象が強くなって、メリハリつけたほうが良い感じに見えるよ！

「

」

各項目（情報）を意図的に整列して配置する

項目が散らかってる 項目が整理され見やすい

整列

項目が散らかってる 項目が整理され見やすい上下左右の「見えない線」を意識する

各項目（情報）を意図的に整列して配置する

整列

項目が散らかってる 項目が整理され見やすい

整列各項目（情報）を意図的に整列して配置する

配置を整えることにより、見た目が良い印象を与えることができる。

http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

上下、左右、各グループの間に存在する「見えない線」を整えることで、見た目が良い印象を与える

近接 / 整列 / 反復 / コントラスト

デザインの基本原則

きちんと情報をまとめて、整理してから配置して、特徴的な何かを繰り返し使うことで印象が強くなって、メリハリつけたほうが良い感じに見えるよ！

「

」

なにかの特徴を全体を通して繰り返す

複数のパターンを使っている 使用するパターンを統一している

反復

複数のパターンを使っている 使用するパターンを統一している

角丸や色彩なども繰り返される何かの対象となりえる

なにかの特徴を全体を通して繰り返す

反復

なにかの特徴を全体を通して繰り返す

複数のパターンを使っている 使用するパターンを統一している

角丸や色彩なども繰り返される何かの対象となりえる

特徴あるパターンを繰り返し使うことで作品全体に統一感が生まれる。

反復

http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

近接 / 整列 / 反復 / コントラスト

デザインの基本原則

きちんと情報をまとめて、整理してから配置して、特徴的な何かを繰り返し使うことで印象が強くなって、メリハリつけたほうが良い感じに見えるよ！

「

」

異なる要素をはっきりと違わせる

コントラスト

違いがわからない 違いが一目瞭然

異なる要素をはっきりと違わせる

違いがわからない 違いが一目瞭然

異なる要素をはっきりと違わせることにより目を引きつけさせることができる。優先すべき情報はコントラストを意識して大きくしたり色を変えたりする。

コントラスト

http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

キャッチコピーや見出しなどはコントラストを強くして強調することにより、どういう情報なのかをわかりやすく伝える

近接 / 整列 / 反復 / コントラスト

デザインの基本原則

きちんと情報をまとめて、整理してから配置して、特徴的な何かを繰り返し使うことで印象が強くなって、メリハリつけたほうが良い感じに見えるよ！

「

」

近接 / 整列 / 反復 / コントラスト

デザインの基本原則

キレイに見えるデザインは 近接 / 整列 / 反復 / コントラスト の4原則がうまく使われている。

感覚的に情報を配置するのではなく、こういった基本となる原則を押さえてレイアウトすることでまとまりや見やすさを「作り出す」ことができます。これらをおさえるだけでも見た目をかなり良くすることができます。

余白

人間がキレイと感じる形

テクスチャ・グラデーション

見た目に差をつける

行動のとっかかりを与える

そのほか見た目をよくするコツ

hoge

余白余白上下左右・項目の間隔を調整する

真ん中

hoge

余白余白上下左右・項目の間隔を調整する

真ん中

Hokuriku.NET × WCAF北陸のコミュニティがコラボする

今回はデザイナーからプログラマーへ、そしてプログラマーからデザイナーへ、をテーマにこれまでとは違った視点で勉強会を行います。

Hokuriku.NET × WCAF

北陸のコミュニティがコラボする

今回はデザイナーからプログラマーへ、そしてプログラマーからデザイナーへ、をテーマにこれまでとは違った視点で勉強会を行います。

Hokuriku.NET × WCAF

北陸のコミュニティがコラボする

今回はデザイナーからプログラマーへ、そしてプログラマーからデザイナーへ、をテーマにこれまでとは違った視点で勉強会を行います。

内側の余白が外側の余白より大きいとバランスが良くない

hoge

余白人間が見た時に美しいと感じる形の比率がある

1 : 1.4141 : 1.618

黄金比 白銀比

キレイに見える形

hoge

余白

要素に質感を与え、見栄えを良くする

テクスチャ・グラデーション

木目とか良い感じですね

色使いのけばけばしいものはあまりよろしくない

色のトーンを抑えましょう

グラデーションも良い感じ情報を邪魔しない、さりげなさがポイントです

http://www.kendoui.com/dojo.aspx

色の階調 位置と整列

色の明度 向き

見た目に差をつける

abcdefabcdefabcdef

abcdefabcdefabcdef

abcdefabcdefabcdef

abcdefabcdefabcdef

abcdefabcdefabcdef

abcdefabcdefabcdef

abcdefabcdefabcdef

abcdefabcdefabcdef

色の彩度 大きさ

質感 形状

見た目に差をつける

デザインによって、ユーザーの行動を誘導する

行動のとっかかりを与える

デザインによって、ユーザーの行動を誘導する

行動のとっかかりを与える

デモ & ツールの紹介

「cafe la hokunet」という架空のカフェのサイトをデザインします

手書きラフ ▶ HTML ▶ CSS ▶ 完成

http://yeoman.io/

http://docs.emmet.io/

http://compass-style.org/

http://griddle.it/

http://fortawesome.github.io/Font-Awesome/

http://colorschemedesigner.com/

http://www.google.com/fonts/

http://css3button.net/

まとめ

常識を知らないと非常識はできない

本日お話させてもらったことはセオリーの一部です。さらに人を惹きつけるためには、セオリーを知ったうえで、

セオリーを破ることです。

「真似ぶ」ことから始めるのは学びの基本

デザインスキルを向上させるコツはひたすら手を動かすことです。そのためには優れたデザインを

よく見て真似て、学びましょう。

http://dribbble.com/

http://ui-patterns.com/

Great design is invisible

デザインの本質は「問題の発見」と「問題の解決」です。本当に優れたデザインとは、生活に溶け込み、問題と感じない

ものなのかもしれません。

本日の話がみなさまの「問題発見」と「問題解決」の手助けになれば幸いです。

Thanks all #hokunet

佐々木 敏明（Web Designer at ALLCONNECT. Inc.）

2013.04.13　Hokuriku.NET × WCAF