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.
ワークショップの流れ
スライド(30-40分)
世話役ブログの内側紹介
ブログ計画書作成
ワイヤーフレーム・デザイン作成
世話役プロフィール
イラストの描き方やデザインの考え方、働き方などしごととその周辺の
ことを書いています。
デザイナーのイラストノート
読みやすいよう1カラムで余白を大きめに取っています。
アイキャッチを大きく使ったデザインにしたけれど、アイキャッチを作ら
ないと...
Webサイト制作に関することを全般的に書いています。
デザイン、素材の紹介、写真のこと、SEO、マーケティング、SEO、サーバーなどなど
YATのBlog
1 一覧ページは、各記事のセクションが判別できるよう、余白の調節と、見出し部
分にアクセ...
Webデザインやグラフィックデザインなどの、基礎的な事(技法とかテ
クニックなど)を中心に、WEBに関する情報やサイトディレクションなど
自分が学んだ事をアウトプットしています。
Basic Design Note
・サイトの色数を限定(3色く...
あんまり更新できてませんすみませんすみません…
基本的にはWeb関係のことやフリーランスのことなどお仕事関係のお
話を書きためていきたいと思っています。ね、ネタはあるんだぜ…。
アカリのWEB CAFE
CAFEをイメージしているので、CAFE...
色
フォント
近接・整列・反復・コントラスト
写真
ブログデザイン
もくじ
カチッカチッ
レシピブログ作りたいな
オレンジとか明るい色が良いな
テーブルクロスの柄を入れたいな
カテゴリーは「和食・洋食・パスタ」
あっここに隙間空いてる、入れよう・・・
うわあぁぁぁぁぁぁぁぁぁぁ
、_(o)_.; _(o)_.
,,--- ---、
/( [三] )ヽ
::<
::::::
::::::
::::::
::::::
::::::
デザイン無理(^o^)/
デザインは
「 Don't feel, think. 」
なんとなくじゃない、考えること
じゃあどうやって考える?を
一緒にやっていきましょう
ブログに必要なのは?
・ 読みやすさ
・ 取り扱いが見える(カテゴリなど)
・ 人柄、個性が見えるか(キャラ立ち)
・ ゴールへの誘導(問い合わせなどあれば)
01色COLOR
色には「温度」や「声」のような「印象」がある
ファーストフード、落ち着けるコーヒーショップの色の違いとは?
明るい・冴えた やわらかい・グレイッシュ
薄い・やわらかい・鈍い
ホワイト・ブラック・鈍い
HSBRGB
レッド
グリーン
ブルー
色相
彩度
明度
こっちが
おすすめ
色を選ぶとき・調整するとき失敗しないコツ
247
152
104
20
58%
97%
なぜなら
こういう「人っぽい」要望には「色相・彩度・明度」が向いているから
色相←色相→彩度↓
彩度↑
彩度↑
明度↓
濃く 薄く 黄色っぽく 赤っぽく
補色と組み合せ 色相差・近似色の組み合せ明度差の組み合せ
メインカラーを一色決めよう
「ブログから感じて欲しい印象」から決めると吉
印象が強い
ギラギラして見える
統一感がある
単調な印象
統一感がある
メリハリがない
メイン
1色
before 背景色の
明度彩度が
高すぎ
コントラストが
きつくて
うるさい
オレンジが
きつい印象
色が
バラバラで
多すぎ
http://spicagraph.com/wck2015-designhandson/index1.html
after
メインカラーを
柔らかい印象に 背景色も
同系色で
明度高めに
テキストの色を
1色に絞る
http://spicagraph.com/wck2015-designhandson/index2.html
ちょっと補足
色は「面積」によって印象が違います。
色は絞りましたが、実はちょこちょこ彩度・明度が違う色になっています。
コーディング
は
手
間
だけどね
…
塗り
テキスト
黄色のような明るい印象の色は
明度を下げると、とても「くすむ」
そ...
1色テーマカラーを決めてみる
印象やテイストから選んでみる
調整は色相・彩度・明度から
色のまとめ
02フォントFONT
文字にも「フォント」から受ける印象や
「文字間」から受ける印象がある
なんか
違う
かわいい 繊細
ゴージャス 楽しい 軽やか
文字にも「フォント」から受ける印象や
「文字間」から受ける印象がある
こっちの方が
しっくりくる
かわいい 繊細
ゴージャス 楽しい 軽やか
フォントの種類・太さ
FONT
文字 文字
細い コンデンス太い
セリフ体 サンセリフ体
明朝体 ゴシック体
FONT
Light Bold Condensed
OSバンドルフォントにも
いいフォントはたくさん
Georgia
Verdana
TimesNew Roman
Courier
組み合わせる小ワザ
ウェイト違いだと
外れがない
セリフ体と
サンセリフを合わせてみる
特徴的なフォントは
部分使いにする
STYLESTYLE
ScriptI
L
O
V E D E S
I G
N
W
O
R D P R E S
S
BOL...
Google Fonts Font Awesome Genericons Material icons
Webフォントやアイコンフォントもおすすめ
https://www.google.com/fonts
http://fortawesome....
Dashicons
https://developer.wordpress.org/resource/dashicons/#editor-strikethrough
http://wp.tekapo.com/2014/04/19/how-to-...
before
after
ちょっとだけかわいいフォントにしてみた
03レイアウト・情報整理
FONT
どっちが
黄色なの?
近接・整列・反復・コントラスト
黄色
好きな色
オレンジ
ピンク
こっち
だよね
黄色
オレンジ
ピンク
情報を「まとめて」「並べて」「繰り返して」「必要なところを目立たせる」ということ。
好きな色
before
カテゴリーとサブメニューは
別物だから離そう
グループのはずが
右のリストに寄ってる
マージンの比率がおかしい
色んなリンクが
混在してる
ブログタイトル
もうちょっと目立ちたい
http://spicagraph.com/wck...
after
http://spicagraph.com/wck2015-designhandson/index4.html
サブメニューはここ
タイトル大事
最初の案では
印象がキツすぎた
テーブルクロス柄を
面積を減らして復活
カテゴリーはここ
人気レシピは
サムネイルをつけて
目立たせよう
意味に沿った
マージン比率
http://spicagraph.com/...
04写真FONT
写真
写真は「色の集まり」であり、
それ自体「ひとつのデザイン」(構図・色調など)なので
「デザインがどこかキマらない」というときは
写真を疑ってみるのもあり
before
写真が暗い&色味がバラバラ
http://spicagraph.com/wck2015-designhandson/index4.html
after
明るくなって色味が揃った!
http://spicagraph.com/wck2015-designhandson/index5.html
05ブログデザインFONT
どんなデザイン流行ってる?
大きめヘッダー ゆったり1カラム カード型もまだ人気
http://girlydrop.com/ http://olein-design.com/ http://www.nxworld.net/
http://web...
ブログデザインで気をつけたいポイント
それループしても
改行しても
ウィンドウ幅変わっても
CMS/Webならではの注意点
大丈夫?
ブログデザインで気をつけたいポイント
デザインが記事を書くハードルにならない?
デザインを実現するために手動でやる部分を増やしすぎない。「⃝⃝が
ないと成立しないデザイン」は統一感↑気軽さ↓。
この辺のタグは予めスタイルを作ってスタイルガイド(...
ブログデザインで気をつけたいポイント
スタイルを差別・統一できてる?
リンク
強調
引用
強調
リンク
引用
最新記事、人気記事、カレンダー、カテゴリー、タ
グ、ギャラリー…
ブログに「必須」なものはありません。
「どう見せたいか」「なにを書きたいか」を書き出し、
優先順位をつけてデザインに反映しよう
ブログデザインで気をつけたいポイント
なにを書く、...
英語だとかっこよく見えるよ
写真?テキスト?用途に合わせて
色やトーンを大幅に変えるのは大変、近いものを
日本語だとどう見える?複数行になったらどう?
きれいなメインビジュアルに惹かれても、同等のものを用意するのは
意外と大変。
肉をさかなに、...
05全体まとめ
1色テーマカラーを決めてみる
印象やテイストから選んでみる
調整は色相・彩度・明度から
情報整理やコントラストを考えよう
写真やイラストは色味に注意
ブログならではのポイントに注意
デザインデザイン
※デザインは無から生まれません
いいものをたくさん見て
取り入れていきましょう
06WordCamp Kansai 2015
質問共有
01
書きたい内容のカテゴリが絞れない、
どうやってデザインの方向性を決める?
02
アイキャッチを出したい
03
Webデザインできるようになるには
どうしたらいいですか
04
素人っぽいデザインを
どうしたら直せますか
05
カラーは変更できない
(黄色とブルーでちょっとクール)のだけど、
ゆるきゃらを出していきたい
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
Upcoming SlideShare
Loading in …5
×

WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!

2,908 views

Published on

WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜の再演です。

Published in: Design
  • Be the first to comment

WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!

  1. 1. ワークショップの流れ スライド(30-40分) 世話役ブログの内側紹介 ブログ計画書作成 ワイヤーフレーム・デザイン作成
  2. 2. 世話役プロフィール
  3. 3. イラストの描き方やデザインの考え方、働き方などしごととその周辺の ことを書いています。 デザイナーのイラストノート 読みやすいよう1カラムで余白を大きめに取っています。 アイキャッチを大きく使ったデザインにしたけれど、アイキャッチを作ら ないと記事が完成しないハードルになってしまった…でもイラストで覚 えてくれる方もいるので結果オーライです。 どんなことを書いてる? デザインのポイント 作ってみて気がついたこと
  4. 4. Webサイト制作に関することを全般的に書いています。 デザイン、素材の紹介、写真のこと、SEO、マーケティング、SEO、サーバーなどなど YATのBlog 1 一覧ページは、各記事のセクションが判別できるよう、余白の調節と、見出し部 分にアクセントを用いたこと。 2 記事を読むことに対して、邪魔をしないようサイドバーのテキストは小さめに 設定していること。 3 読む際に、読み疲れが生じないよう、一行の長さの調節や、行間の持ち方、何 行目で一段開けるなどを工夫しています。 4 サイト自体に何が書いてあるのかがわかるよう、ヘッダー部分に関連するキー ワードをデザインとして入れ込んでいます。 運営がもう5年ほどになり、リニューアルも3回ほど行っています。そのたびに、ここは こうした方がいい?というのが絶対出てくるので1∼2に一度はリニューアルするよう にしています。 作ってよく出来た!と思っても、運用していると気になる点は必ず出てくるので、ガチガ チにリニューアルするより、問題点の改善としてのリニューアルをクリア出来ればOK として、自分のハードルを高くしすぎないようにしています。 どんなことを書いてる? デザインのポイント 作ってみて気がついたこと
  5. 5. Webデザインやグラフィックデザインなどの、基礎的な事(技法とかテ クニックなど)を中心に、WEBに関する情報やサイトディレクションなど 自分が学んだ事をアウトプットしています。 Basic Design Note ・サイトの色数を限定(3色くらい) ・長文を読んでも疲れにくい背景色(#FFFじゃない) メインコンテンツの幅が狭いのに、記事の文字多いから息苦しさを感 じるようになってきた…。 ※現在リニューアル作業中で、近日中にお披露目できるかと思います。 どんなことを書いてる? デザインのポイント 作ってみて気がついたこと
  6. 6. あんまり更新できてませんすみませんすみません… 基本的にはWeb関係のことやフリーランスのことなどお仕事関係のお 話を書きためていきたいと思っています。ね、ネタはあるんだぜ…。 アカリのWEB CAFE CAFEをイメージしているので、CAFEに居るかのような雰囲気を出す ためアナログなデザインに。アナログなデザインは大げさにしすぎな いことがポイントかなと思います。 アナログなデザインの欠点といいますか、「画像」が多いので、カスタ マイズしにくいです。 たとえばサイドバーの見出しなんかは新しくウィジェットに何か追加し たら、見出しの画像を作らないといけないので、ちょっと面倒…。 WordPressのいいところをムダにしちゃってる感じがしますw どんなことを書いてる? デザインのポイント 作ってみて気がついたこと
  7. 7. 色 フォント 近接・整列・反復・コントラスト 写真 ブログデザイン もくじ
  8. 8. カチッカチッ レシピブログ作りたいな オレンジとか明るい色が良いな テーブルクロスの柄を入れたいな カテゴリーは「和食・洋食・パスタ」 あっここに隙間空いてる、入れよう・・・
  9. 9. うわあぁぁぁぁぁぁぁぁぁぁ 、_(o)_.; _(o)_. ,,--- ---、 /( [三] )ヽ ::< :::::: :::::: :::::: :::::: ::::::
  10. 10. デザイン無理(^o^)/
  11. 11. デザインは 「 Don't feel, think. 」 なんとなくじゃない、考えること じゃあどうやって考える?を 一緒にやっていきましょう
  12. 12. ブログに必要なのは? ・ 読みやすさ ・ 取り扱いが見える(カテゴリなど) ・ 人柄、個性が見えるか(キャラ立ち) ・ ゴールへの誘導(問い合わせなどあれば)
  13. 13. 01色COLOR
  14. 14. 色には「温度」や「声」のような「印象」がある ファーストフード、落ち着けるコーヒーショップの色の違いとは? 明るい・冴えた やわらかい・グレイッシュ 薄い・やわらかい・鈍い ホワイト・ブラック・鈍い
  15. 15. HSBRGB レッド グリーン ブルー 色相 彩度 明度 こっちが おすすめ 色を選ぶとき・調整するとき失敗しないコツ 247 152 104 20 58% 97%
  16. 16. なぜなら こういう「人っぽい」要望には「色相・彩度・明度」が向いているから 色相←色相→彩度↓ 彩度↑ 彩度↑ 明度↓ 濃く 薄く 黄色っぽく 赤っぽく
  17. 17. 補色と組み合せ 色相差・近似色の組み合せ明度差の組み合せ メインカラーを一色決めよう 「ブログから感じて欲しい印象」から決めると吉 印象が強い ギラギラして見える 統一感がある 単調な印象 統一感がある メリハリがない メイン 1色
  18. 18. before 背景色の 明度彩度が 高すぎ コントラストが きつくて うるさい オレンジが きつい印象 色が バラバラで 多すぎ http://spicagraph.com/wck2015-designhandson/index1.html
  19. 19. after メインカラーを 柔らかい印象に 背景色も 同系色で 明度高めに テキストの色を 1色に絞る http://spicagraph.com/wck2015-designhandson/index2.html
  20. 20. ちょっと補足 色は「面積」によって印象が違います。 色は絞りましたが、実はちょこちょこ彩度・明度が違う色になっています。 コーディング は 手 間 だけどね … 塗り テキスト 黄色のような明るい印象の色は 明度を下げると、とても「くすむ」 そういうときは「色相」を動かして 明度を下げる量を少なくする
  21. 21. 1色テーマカラーを決めてみる 印象やテイストから選んでみる 調整は色相・彩度・明度から 色のまとめ
  22. 22. 02フォントFONT
  23. 23. 文字にも「フォント」から受ける印象や 「文字間」から受ける印象がある なんか 違う かわいい 繊細 ゴージャス 楽しい 軽やか
  24. 24. 文字にも「フォント」から受ける印象や 「文字間」から受ける印象がある こっちの方が しっくりくる かわいい 繊細 ゴージャス 楽しい 軽やか
  25. 25. フォントの種類・太さ FONT 文字 文字 細い コンデンス太い セリフ体 サンセリフ体 明朝体 ゴシック体 FONT Light Bold Condensed
  26. 26. OSバンドルフォントにも いいフォントはたくさん Georgia Verdana TimesNew Roman Courier
  27. 27. 組み合わせる小ワザ ウェイト違いだと 外れがない セリフ体と サンセリフを合わせてみる 特徴的なフォントは 部分使いにする STYLESTYLE ScriptI L O V E D E S I G N W O R D P R E S S BOLDOPEN SANS design B e a u t y B a s i c
  28. 28. Google Fonts Font Awesome Genericons Material icons Webフォントやアイコンフォントもおすすめ https://www.google.com/fonts http://fortawesome.github.io/Font-Awesome/ http://genericons.com/ https://www.google.com/design/icons/ CC-BY licenseGPLSIL OFL 1.1/MIT/CC BY 3.0SIL Open Font Licenseなど
  29. 29. Dashicons https://developer.wordpress.org/resource/dashicons/#editor-strikethrough http://wp.tekapo.com/2014/04/19/how-to-use-the-official-icon-font-of-the-wordpress/ ダッシュボードのあのアイコンもフォント GPL wp-includes/fonts/dashicons.ttf 記事内での使い方は ここを読もう! 字形パネルだと捗る フォントデータがここにある。 WordPress関係のドキュメント作るときにいいかも。
  30. 30. before after ちょっとだけかわいいフォントにしてみた
  31. 31. 03レイアウト・情報整理 FONT
  32. 32. どっちが 黄色なの? 近接・整列・反復・コントラスト 黄色 好きな色 オレンジ ピンク こっち だよね 黄色 オレンジ ピンク 情報を「まとめて」「並べて」「繰り返して」「必要なところを目立たせる」ということ。 好きな色
  33. 33. before カテゴリーとサブメニューは 別物だから離そう グループのはずが 右のリストに寄ってる マージンの比率がおかしい 色んなリンクが 混在してる ブログタイトル もうちょっと目立ちたい http://spicagraph.com/wck2015-designhandson/index3.html
  34. 34. after http://spicagraph.com/wck2015-designhandson/index4.html
  35. 35. サブメニューはここ タイトル大事 最初の案では 印象がキツすぎた テーブルクロス柄を 面積を減らして復活 カテゴリーはここ 人気レシピは サムネイルをつけて 目立たせよう 意味に沿った マージン比率 http://spicagraph.com/wck2015-designhandson/index4.html
  36. 36. 04写真FONT
  37. 37. 写真 写真は「色の集まり」であり、 それ自体「ひとつのデザイン」(構図・色調など)なので 「デザインがどこかキマらない」というときは 写真を疑ってみるのもあり
  38. 38. before 写真が暗い&色味がバラバラ http://spicagraph.com/wck2015-designhandson/index4.html
  39. 39. after 明るくなって色味が揃った! http://spicagraph.com/wck2015-designhandson/index5.html
  40. 40. 05ブログデザインFONT
  41. 41. どんなデザイン流行ってる? 大きめヘッダー ゆったり1カラム カード型もまだ人気 http://girlydrop.com/ http://olein-design.com/ http://www.nxworld.net/ http://webrawl.org/ http://www.yasuhisa.com/could/ http://creativememomemo.com/
  42. 42. ブログデザインで気をつけたいポイント それループしても 改行しても ウィンドウ幅変わっても CMS/Webならではの注意点 大丈夫?
  43. 43. ブログデザインで気をつけたいポイント デザインが記事を書くハードルにならない? デザインを実現するために手動でやる部分を増やしすぎない。「⃝⃝が ないと成立しないデザイン」は統一感↑気軽さ↓。 この辺のタグは予めスタイルを作ってスタイルガイド(一覧ページ)を作っ ておくと記事を書くたびにcssを触らなくていい。
  44. 44. ブログデザインで気をつけたいポイント スタイルを差別・統一できてる? リンク 強調 引用 強調 リンク 引用
  45. 45. 最新記事、人気記事、カレンダー、カテゴリー、タ グ、ギャラリー… ブログに「必須」なものはありません。 「どう見せたいか」「なにを書きたいか」を書き出し、 優先順位をつけてデザインに反映しよう ブログデザインで気をつけたいポイント なにを書く、なにを伝えるかを考慮してる?
  46. 46. 英語だとかっこよく見えるよ 写真?テキスト?用途に合わせて 色やトーンを大幅に変えるのは大変、近いものを 日本語だとどう見える?複数行になったらどう? きれいなメインビジュアルに惹かれても、同等のものを用意するのは 意外と大変。 肉をさかなに、じゃがいもをキュウリに変えたら、もう「肉じゃが」じゃな いよね? 既存テーマをカスタマイズ・子テーマ化するポイント そのテーマ用途に合ってる?
  47. 47. 05全体まとめ
  48. 48. 1色テーマカラーを決めてみる 印象やテイストから選んでみる 調整は色相・彩度・明度から 情報整理やコントラストを考えよう 写真やイラストは色味に注意 ブログならではのポイントに注意
  49. 49. デザインデザイン ※デザインは無から生まれません
  50. 50. いいものをたくさん見て 取り入れていきましょう
  51. 51. 06WordCamp Kansai 2015 質問共有
  52. 52. 01 書きたい内容のカテゴリが絞れない、 どうやってデザインの方向性を決める?
  53. 53. 02 アイキャッチを出したい
  54. 54. 03 Webデザインできるようになるには どうしたらいいですか
  55. 55. 04 素人っぽいデザインを どうしたら直せますか
  56. 56. 05 カラーは変更できない (黄色とブルーでちょっとクール)のだけど、 ゆるきゃらを出していきたい

×