Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

非デザイナー向けWebデザインテクニック 13.02.13

7,458 views

Published on

2013年に作った社内勉強会用資料です。
Speaker : @keita_kawamoto

Published in: Design
  • Be the first to comment

非デザイナー向けWebデザインテクニック 13.02.13

  1. 1. デザインのポイントと、Webデザインとは何か? @keita_kawamoto Webデザインテクニック
  2. 2. 趣旨 見た目 に関するポイント 非デザイナー向けスライド。 正しいコーディングや最新技術はまた今度。 ・企画から実際にWebサイトにするまでの工程 ・悪い例を作り直してベストに近い状態にする ・マージンの取り方や配色、しっくりくる見た目にするポイント 何のためにわざわざデザインする? という事についての考え方。
  3. 3. 今回はまず、一例の開始から完成までを追いながら、 ・企画から実際にWebサイトにするまでの工程 ・悪い例を作り直してベストに近い状態にする 上記2つをセットで見て行きます。 完成までに実際に右往左往している場面も載せているので、 なぜこれじゃダメなのか?という点に注目してください。 合わせて、その合間合間に ・マージンの取り方や配色、しっくりくる見た目にするポイント を含めて解説して行きます。
  4. 4. ではさっそく始めましょう。
  5. 5. 状況 写真中心の、部活動の 活動記録ブログ ・目的は、存在のアピール・活動内容を知ってもらいたい ・写真がない事はない(写真が主役と言ってもいい) ・活動内容は登山・キャンプ・クライミング・釣り・その他
  6. 6. 写真中心という事で、トップページではこのように写真が並ぶレイアウトにして みた。まずは、ほかのサイトでもよくある形式を真似て用意してみる。 ※ロゴは阿部さんが作成した 各記事のページは、通常のブログ同様、縦長に記事を読む事ができる事を想定し た。トップと内部ページのレイアウトは別々。トップを見れば 最新の更新がす ぐに一覧でわかるように ということでこういうレイアウトにした。
  7. 7. しかしサイトのベースカラーや、背景はどうする? 目的にある 存在のアピール から、ワンゲル部のイメージをストレートに表現で きるものがよかった。
  8. 8. まずは山の画像を背景に配置してみる。背景と画像類を合わせてみるため、トップ キービジュアル部分に画像も配置してみた。 微妙。 山の写真自体、あまりクオリティの高い写真ではないし、このクオリティのモノク ロでは少しイメージを暗くしてしまう。
  9. 9. 次に、山らしい「緑」を背景にしてみた。微妙。 この状態では写真が生きていないし、山なので緑で間違いではないが ワンゲル部っぽさはない。なので却下。 どうもワンゲル部は特定の色で表現するのに向いていない。
  10. 10. 合わせやすく白背景? しかし、ワンゲル部にはちょっと合っていない。 妙な爽やかさがアウトドアというイメージではない。 あと、ひとまず置いてみたキービジュアルの部分、ブログに必要だろうか? ワンゲル部の存在アピールにはなっているかもしれないが、古くささがあるし なにより変動しないでかい画像がここに鎮座するのは、うざったいかもしれない。
  11. 11. せっかく写真がメインのサイトなのだから、ということで背景に写真を配置した。 一定時間で写真が切り替わるイメージ。キービジュアルを取払い、新着記事のサム ネイルがずらりと並ぶようにしてみた。 ずらりとならんだサムネイルはまあレイアウトとしては悪くはないが、背景が絶望 的にアウトである。写真に写っているものがサムネイルで隠れる上、背景が内容を 紛らわしくさせてしまっている。 さらにロゴが背景と同化して文字が読めなくなってしまっている。
  12. 12. ならば、コンテンツ部背景に色を置いてみてはどうか? 装飾次第では上手くまとまるかもしれないけど、これではそもそも背景に画像を配 置する意味があまりない。 写真類は基本的に中央に被写体がくるので、中央にコンテンツがあっては、背景に 写真を置く意味があまりない。
  13. 13. そこで、 ・ワンゲル部のイメージを伝える ・トップで記事一覧を見れるようにする ・新着記事は一発でわかるようにする ということを念頭において、もう一度ゼロからレイアウトし直した。
  14. 14. 「ワンゲル部のイメージを伝える」 背景が単色等ではワンゲル部らしくない、写真をそのまま使う、という理由から先 ほどと同じように背景には写真を配置した。今回は画面から新着記事一覧を思い 切ってカット。こうすることで背景は背景でありながらキービジュアルと同じ効果 を持った。また、背景写真はローテーションで様々な写真を表示するので、飽きら れることは少なく、ワンゲル部の様々な風景を印象づける事ができる。
  15. 15. 「トップで記事一覧を見れるようにする」 背景の問題を解決するため、新着記事一覧はカットし、上部に新たにカテゴリーメニューを用意。 メニューの項目にカーソルを合わせると、カテゴリ別の新着記事一覧を一目で見る事ができるよう にした。これで一覧は収納され、背景と一覧の閲覧を同時に満たす事ができた。一覧では記事の画 像も掲載。そうすることで視覚的にも内容がわかるようにした。 ※カテゴリ名は本来日本語の方がわかりやすく良いが、サイトの目的が商売ではないため、わかり やすさよりアルファベットにしてアウトドアっぽい格好よさ(イメージ)を優先した。
  16. 16. 「新着記事は一発でわかるようにする」 トップを見て、「更新されてる!」と一目で分かるよう、一番新しい記事はカ テゴリーに関係なく画面左下に表示するようにした。 一つの記事だけならば、背景表示の邪魔にはならない。
  17. 17. 「毎回毎回、新着記事の内容を見るまでに  ワンクリックが必要ってめんどくさい!」 という常連ユーザーに対する対策は、右上にRSSを設置する事で解決する。 こうすることによってわざわざサイトにこなくても、RSSリーダーで新着記事を直で見る事が できる。新規ユーザーに対する印象付けと、常連ユーザーへの配慮を両立できた。
  18. 18. 画像以外の範囲の狭い背景色は、画像の邪魔になりにくく、アウトドアに良く 合う黒を選択した。 文字の基本色は白(記事単体のページは除く)。 ロゴや記事タイトルなどの部分的な文字の色には先ほど出た「山らしさ」から 緑を選択。黒背景なので明るい緑で、さらに最近のアウトドアウェアが非常に カラフルということもあり、蛍光色の緑にした。
  19. 19. ロゴの部分を社名とクラブ名を色分けし、アクセントをつけてみた。こうすることで「何の何 なのか」をわかりやすくできた。必要性の低さ・RSSアイコンの有名度から、RSSをアイコン のみにした。メニューにもわかりやすさをプラスするため、ピクトグラム(内容を表したアイ コン)を設置した。 ※メニューがアルファベットでも、ピクトグラムを追加する事で、サイトのイメージを維持し たままわかりやすさを向上できた。 左下の新着記事部分は、キービジュアルの邪魔にならないよう、淵をできるだけ小さくした。 また、「続きを読む」部分をボタンにすることにより、新着記事への誘導をしやすくした。
  20. 20. ここで気になったのが、メニューの部分。 なぜロゴの段とメニューの段、2段にしているのか?その必要性がない。 ロゴとRSSの間に空白があるし、さらにメニューの段のスペースによってキー ビジュアルがその分狭くなっている。 使いやすさ・わかりやすさに変わりがないならば、この場合キービジュアルは 広い方が良い(画面全体に表示するタイプなので) よって、メニューの位置は移動する必要がある。
  21. 21. メニューの問題を解決し、キービジュアルのスペー スも広くなった。 ロゴやメニューの文字サイズやフォントをサイトデザインとマッチし違和感の ないものに変更・調整。上手くまとまり、気になるところもなくなり、トップ のデザイン完成!
  22. 22. 内部ページはこのようにした Webサイトを見るとき、人の視線は左から右へ移動するため、メインである 記事部分を左に、サブ要素であるサイドメニューは右に配置した。 記事とサイドメニュー間、ヘッダと記事・サイドメニュー間とのマージンは同 じ値にし、バランスをとった。 マージンは左右を同じにする等、関連する要素は同じ値にすると整いやすい。
  23. 23. 内部ページはこのようにした Webサイトを見るとき、人の視線は左から右へ移動するため、メインである 記事部分を左に、サブ要素であるサイドメニューは左に配置した。 記事とサイドメニュー間、ヘッダと記事・サイドメニュー間とのマージンは同 じ値にし、バランスをとった。 マージンは左右を同じにする等、関連する要素は同じ値にすると整いやすい。
  24. 24. 記事の画像の表示サイズについて 画像はすべて、記事部分の横幅いっぱいのサイズ。こうすることで画像が見や すくなる。また、画像自体の縦横比は黄金比にしてある。 黄金比とは、最も美しいとされる比「1:(1+ 5)/2」のことで、近似値は 1:1.618、約5:8。なぜ黄金比にするかは、最も美しい比率なのでユーザーに 好感を持たれやすく、そして特にそれ以外にする理由がないため。 ※黄金比はパルテノン神殿やピラミッドといった歴史的建造物、美術品の中に見出すことができるとい う。また、自然界にも現れ、植物の葉の並び方や巻き貝の中にも見付けることができるといった主張が ある。これらの主張から、最も安定し美しい比率とされ、意図的に黄金比を意識して創作した芸術家も数 多い。(Wikipediaより抜粋)
  25. 25. 黄金比じゃなくても、画像は大きめに表示する事をおすすめ。 下のようにサムネイルが並んでいるのは、見たいときにいちいちクリックしな いといけない。それになにより、ダメな余白が多くイケてない。
  26. 26. 何のためにわざわざデザインする?
  27. 27. Webサイトで果たしたい事を、 より円滑に、より効果的にするため。
  28. 28. なぜそういうデザインなのか?という理由の根底には、必ずそのサ イトの目的がなければなりません。 ・何が目的のサイトか? ・目的を果たすのにそれは本当に必要か? ・どういうUI(ユーザーインターフェイス)=見た目にするのが一 番ユーザーはスムーズに動けるか
  29. 29. デザインがダメだと、ユーザーがコンテンツに触れる前にはなれて いってしまいます。 この上のサイト、凄くダメです。背景の黄色がものすごく目がチカチカするし、コンテンツも マージンがなく枠と内容がくっついていて読みにくいし、高さなども合わせられておらずバラ バラで整頓されていません。ほかにもまだまだ突っ込みどころが満載です。
  30. 30. 目的に合った適切なデザインは、ユーザーがコンテンツを理解しや すくなります。 「なにが適切か?」 答えはありません。適切に近いものがいくつかあるというだけで す。作ったデザインが目的に対し適切か適切ではないかは、ユー ザーの立場に立ってみて、自身で判断しましょう。 自分自身で使いにくい、わかりにくいと思うデザインは、目的を果 たしにくい出来ということです。
  31. 31. (一応)Webデザインに関する一部用語 Webデザインを始めるにあたって、よく聞く専門用語をざっと紹介します。 ・UI(ユーザーインターフェイス):使い手(ユーザー)の操作感 ・UX(ユーザエクスペリエンス):ユーザーの体験をもとにした考え方 ・IA(情報アーキテクチャ):「情報をわかりやすく伝える」               「受け手が情報を探しやすくする」ための表現技術 ・ユーザービリティ:ユーザーの使い勝手 ・ファインダビリティ:見つけやすさ・操作しやすさ でも!
  32. 32. 用語なんか知らなくてもデザインはできる
  33. 33. 実際に自分たちでまずやってみた後。 段階を踏んで、興味がわいたら、調べてみてください。
  34. 34. デザインする際のポイント
  35. 35. Webデザインをするにあたって 押さえておくと便利なポイントをいくつかご紹介。
  36. 36. 文字、読みにくくないですか?
  37. 37. 文字を置く背景には注意 背景と同化して文字が見にくい場合、文字用に背景をつける。 基本的に文字は単色の上におくのが一番見やすい。 透化やグラデーションにはOKでも、 背景が写真やイラストの場合読みにくくなりやすい。
  38. 38. 文字自体にシャドウや淵をつけて、 背景との区切りをつけるという手もある。 ※それでも若干の読みにくさは残る
  39. 39. どちらがアクティブでしょう?
  40. 40. 濃いものがアクティブ、薄いものが非アクティブ アクティブなのは、右側の色のついた方です。 ユーザーは濃いものをアクティブ、薄いものを非アクティブと感じる。 ※押せる・押せない、対応・非対応などの判別 ※それらが並んでいる場合
  41. 41. 強弱を活かす 強弱のパターンを駆使すると、 メリハリが付き、項目と本文という事が伝わりやすく、 よりわかりやすくすることができる。 大小   濃さ薄さ   文字自体の装飾の具合
  42. 42. ユーザーは何をリンクなのだと判断するのか? ボタンっぽい   文章と色が違うアンダーラインのテキスト さらに…
  43. 43. ロールオーバー (カーソルを上にのせると反応する)
  44. 44. バナー的 などなど、リンクなのだと伝える テクニックはいろいろあります。 逆にリンクっぽくないものを リンクにすると困惑させてしまいます。 「今日はいい天気ですね」 上の文章の「天気」の部分だけが「カーソル合わ せてみたらリンクだった!」となっても、カーソ ル合わせるまで気づかない。
  45. 45. 背景色の違う2つのデザイン。 右と左、どちらがしっくりきますか?
  46. 46. その配色は本当にそのサイトに合っているのか? 邪魔をしていないか しっくりきているのは、右。右には アイコンのベースカラーに合わせて背景はオレンジ という理由がありますが、左にはパープルである理由がありません。 さらに見た目に統一性がなく、アイコンのイメージの 邪魔をしてしまっています。
  47. 47. 色がかぶって文字が読めない場合は淵をつける 背景色と文字色がどうしてもかぶる場合は、淵をつけるなりシャドウ をつけるなりする事で、だいぶ良くなり、読みやすくなります。
  48. 48. Webサイトには、 統一感 が大切 サイトデザインのルールを決めましょう。 アイコンには立体的なものを使わず平面的なものに統一する、とか テーマカラーはオレンジで、目立たせるところにはオレンジを使う、など。
  49. 49. ドロップシャドウはほんの少しでいい ドロップシャドウ(影)を使うと、立体的に表現する事ができ、 デザインをスマートにできるケースがよくあります。 しかし、右の画像のように過剰にシャドウをつけてしまうと 逆に素人っぽさが出てしまいます。 ほんの少しのアクセントといった具合で、シャドウをかけましょう。
  50. 50. 立体的なアイコンなど、場合によってはシャドウを 濃くした方が良いという場合もあります。
  51. 51. 流行っている要素でも、ケースに適切でなければ使わない よくわからないところでアコーディオン(タブの一種)とか。 不便になるようなら、流行っていても導入する必要はない。 何のために という目的からブレないようにしましょう。
  52. 52. Webデザイン力を磨くための 大切な7つのこと
  53. 53. 1. 観察する事 とにかく見ましょう。内容だけでなく、デザインを含めた全体を。 時には内容は無視してデザインを見るだけでもいい。 2.「なぜこうなっているのか?」と感じる事・分析する事 ※一回一回深く掘り下げる必要はありません。苦にならない程度 に、無意識に感じれるような癖を付けましょう。 3. 再現するためにはどうすればいいのか? 「ここはほんのちょっとシャドウをかければこういうふうに見える のか」「1pxフォントに陰をつけて下から光が当たっているように すれば、彫り込まれているような表現ができるのか」といった、分 析からの再現を実際にやってみて、身につけましょう。
  54. 54. 4. デザインセンス=知識 専門学校時代の恩師から教わった事ですが、これは最もだと思って います。知識だからこそ、トレンドという言葉があるんです。 生まれてから何も見ず触れずに、凄いサイトを作れる人なんかいま せん。観察し分析する事や、ネット上で関連記事を読む事が知識を 増やす近道です。 5. デザインは組み合わせ 僕は全く新しい要素というものを今までたぶん見た事がありませ ん。新しいトレンドもデザインも、過去どこかにある要素の組み合 わせです。 丸角、シャドウ、ストライプ、ドット、グラデーション… いろいろ工夫をしてみましょう。
  55. 55. 6. オリジナルは真似から生まれる 2013年のトレンドだってgoogle mapアプリにそっくりなものが あります。それでも、それは 同じテクニックを使っている だけで あって、サイトはgoogle mapではなく別のものです。 トレンドとは誰かがやり始めたデザインをほかのデザイナーが追随 して生まれるものです。 オリジナルとは、真似から、組み合わせから生まれるのです。
  56. 56. 7. Webデザイナー=アーティストではない Webデザイナーは、目的を果たすために「デザイン」することが仕 事。ユーザーにコンテンツを伝えるため・使ってもらうため、ユー ザーとコンテンツ双方のことをよく考えて動く必要がある。 アーティストは、自分を表現し自分が最高にイイ!と思う「アー ト」を作る事が仕事。ユーザーはそれを見て惹かれる人が寄ってく る。コンテンツを「作る」人がアーティスト。「活かす」人がデザ イナー。と、僕は考えています。 アーティスト気分のWebデザイナーは、大切な事を見失いそう。
  57. 57. Webデザイン力を磨くのに助かる おすすめサイト・記事
  58. 58. Design Bombs http://www.designbombs.com/ ズルいデザインテクニック https://speakerdeck.com/ken_c_lo/zurui-design 2013年のウェブデザインのトレンドを探るかっこいいUIデザインのまとめ http://coliss.com/articles/build-websites/operation/design/ showcase-ui-design-2013-jan-by-dribble.html 見やすい・使いやすいレイアウトの為に考えるべき事。 http://basicdesign-note.com/easytoread-layout/? utm_source=rss&utm_medium=rss&utm_campaign=easytoread- layout イケサイ - WEBデザインリンク集 いけてるサイトドットコム http://www.ikesai.com/ 参考になるデザイン収集サイトや、参考記事一部 ※星の数ほどあるので、自分で検索して見つけ出しましょう! Cart Craze http://cartcraze.com/ The Design Gene http://thedesigngene.com/ リンク不要で商用サイトにも利用可能なフリーのアイコンセットいろいろ http://kachibito.net/web-design/free-icon-seto-for-commercial-use.html 素人っぽいデザインから脱却するための12のデザインチップス http://blog.we-boxes.com/design/web-design-12-tips/
  59. 59. Dribbble http://dribbble.com/ 世界中のプロのデザイナーが集うサイト。 検索窓で ui と検索するだけでモダンなデザインがたらふく見れます。
  60. 60. まとめ Webデザインとは 目的を果たすための手段。 「デザインすること」が目的ではない。 目的を果たすのにどちらが最善か を忘れないようにしましょう。
  61. 61. まとめ 理由なく好き放題デザインするより、 目的に対した理由をもとにデザインした方が デザインしやすいしイケてる
  62. 62. まとめ 観察   分析   再現 Webデザインは、これの繰り返し。 これがクオリティの高いオリジナルへの近道。
  63. 63. お疲れさまでした。

×