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