ワークショップの流れ

スライド（30-40分）

世話役ブログの内側紹介

ブログ計画書作成

ワイヤーフレーム・デザイン作成

世話役プロフィール

イラストの描き方やデザインの考え方、働き方などしごととその周辺のことを書いています。

デザイナーのイラストノート

読みやすいよう1カラムで余白を大きめに取っています。

アイキャッチを大きく使ったデザインにしたけれど、アイキャッチを作らないと記事が完成しないハードルになってしまった…でもイラストで覚えてくれる方もいるので結果オーライです。

どんなことを書いてる？

デザインのポイント

作ってみて気がついたこと

Webサイト制作に関することを全般的に書いています。デザイン、素材の紹介、写真のこと、SEO、マーケティング、SEO、サーバーなどなど

YATのBlog

１ 一覧ページは、各記事のセクションが判別できるよう、余白の調節と、見出し部分にアクセントを用いたこと。

２ 記事を読むことに対して、邪魔をしないようサイドバーのテキストは小さめに設定していること。

３ 読む際に、読み疲れが生じないよう、一行の長さの調節や、行間の持ち方、何行目で一段開けるなどを工夫しています。

４ サイト自体に何が書いてあるのかがわかるよう、ヘッダー部分に関連するキーワードをデザインとして入れ込んでいます。

運営がもう５年ほどになり、リニューアルも３回ほど行っています。そのたびに、ここはこうした方がいい？というのが絶対出てくるので１～２に一度はリニューアルするようにしています。作ってよく出来た！と思っても、運用していると気になる点は必ず出てくるので、ガチガチにリニューアルするより、問題点の改善としてのリニューアルをクリア出来ればOKとして、自分のハードルを高くしすぎないようにしています。

どんなことを書いてる？

デザインのポイント

作ってみて気がついたこと

Webデザインやグラフィックデザインなどの、基礎的な事（技法とかテクニックなど）を中心に、WEBに関する情報やサイトディレクションなど自分が学んだ事をアウトプットしています。

Basic Design Note

・サイトの色数を限定（3色くらい）・長文を読んでも疲れにくい背景色（＃FFFじゃない）

メインコンテンツの幅が狭いのに、記事の文字多いから息苦しさを感じるようになってきた…。※現在リニューアル作業中で、近日中にお披露目できるかと思います。

どんなことを書いてる？

デザインのポイント

作ってみて気がついたこと

あんまり更新できてませんすみませんすみません…基本的にはWeb関係のことやフリーランスのことなどお仕事関係のお話を書きためていきたいと思っています。ね、ネタはあるんだぜ…。

アカリのWEB CAFE

CAFEをイメージしているので、CAFEに居るかのような雰囲気を出すためアナログなデザインに。アナログなデザインは大げさにしすぎないことがポイントかなと思います。

アナログなデザインの欠点といいますか、「画像」が多いので、カスタマイズしにくいです。たとえばサイドバーの見出しなんかは新しくウィジェットに何か追加したら、見出しの画像を作らないといけないので、ちょっと面倒…。WordPressのいいところをムダにしちゃってる感じがしますw

どんなことを書いてる？

デザインのポイント

作ってみて気がついたこと

色フォント近接・整列・反復・コントラスト写真ブログデザイン

もくじ

カチッカチ

ッ

レシピブログ作りたいなオレンジとか明るい色が良いなテーブルクロスの柄を入れたいなカテゴリーは「和食・洋食・パスタ」あっここに隙間空いてる、入れよう・・・

”うわあぁぁぁぁぁぁぁぁぁぁ、_(o)_.; _(o)_.,,--- ---､

/( [三] )ヽ::<

::::::::::::::::::::::::::::::

デザイン無理\（^o^）/

デザインは

「Don't feel, think.」なんとなくじゃない、考えること

じゃあどうやって考える？を一緒にやっていきましょう

ブログに必要なのは？

・読みやすさ・取り扱いが見える（カテゴリなど）・人柄、個性が見えるか（キャラ立ち）・ゴールへの誘導（問い合わせなどあれば）

01色COLOR

色には「温度」や「声」のような「印象」があるファーストフード、落ち着けるコーヒーショップの色の違いとは？

明るい・冴えた やわらかい・グレイッシュ

薄い・やわらかい・鈍いホワイト・ブラック・鈍い

HSBRGBレッドグリーンブルー

色相彩度明度

こっちがおすすめ

色を選ぶとき・調整するとき失敗しないコツ

247152104

2058％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

組み合わせる小ワザ

ウェイト違いだと外れがない

セリフ体とサンセリフを合わせてみる

特徴的なフォントは部分使いにする

STYLESTYLEScript

I L O V E D E S I G

N

WO R D P R E S S

BOLDOPEN SANS

design

B e a u t y B a s i c

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など

Dashicons

https://developer.wordpress.org/resource/dashicons/#editor-strikethroughhttp://wp.tekapo.com/2014/04/19/how-to-use-the-official-icon-font-of-the-wordpress/

ダッシュボードのあのアイコンもフォント

GPL

wp-includes/fonts/dashicons.ttf

記事内での使い方はここを読もう！字形パネルだと捗る

フォントデータがここにある。WordPress関係のドキュメント作るときにいいかも。

before

after

ちょっとだけかわいいフォントにしてみた

03レイアウト・情報整理

FONT

どっちが黄色なの？

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

黄色

好きな色

オレンジ

ピンク

こっちだよね

黄色

オレンジ

ピンク

情報を「まとめて」「並べて」「繰り返して」「必要なところを目立たせる」ということ。

好きな色

before

カテゴリーとサブメニューは別物だから離そう

グループのはずが右のリストに寄ってる

マージンの比率がおかしい

色んなリンクが混在してる

ブログタイトルもうちょっと目立ちたい

http://spicagraph.com/wck2015-designhandson/index3.html

afterhttp://spicagraph.com/wck2015-designhandson/index4.html

サブメニューはここタイトル大事

最初の案では印象がキツすぎたテーブルクロス柄を面積を減らして復活

カテゴリーはここ

人気レシピはサムネイルをつけて目立たせよう

意味に沿ったマージン比率

http://spicagraph.com/wck2015-designhandson/index4.html

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://webrawl.org/ http://www.yasuhisa.com/could/ http://creativememomemo.com/

ブログデザインで気をつけたいポイント

それループしても改行してもウィンドウ幅変わっても

CMS/Webならではの注意点

大丈夫？

ブログデザインで気をつけたいポイント

デザインが記事を書くハードルにならない？

デザインを実現するために手動でやる部分を増やしすぎない。「◯◯がないと成立しないデザイン」は統一感↑気軽さ↓。

この辺のタグは予めスタイルを作ってスタイルガイド（一覧ページ）を作っておくと記事を書くたびにcssを触らなくていい。

ブログデザインで気をつけたいポイント

スタイルを差別・統一できてる？

リンク

強調

引用

強調リンク

引用“ ”

最新記事、人気記事、カレンダー、カテゴリー、タグ、ギャラリー…ブログに「必須」なものはありません。「どう見せたいか」「なにを書きたいか」を書き出し、優先順位をつけてデザインに反映しよう

ブログデザインで気をつけたいポイント

なにを書く、なにを伝えるかを考慮してる？

英語だとかっこよく見えるよ

写真？テキスト？用途に合わせて

色やトーンを大幅に変えるのは大変、近いものを

日本語だとどう見える？複数行になったらどう？

きれいなメインビジュアルに惹かれても、同等のものを用意するのは意外と大変。

肉をさかなに、じゃがいもをキュウリに変えたら、もう「肉じゃが」じゃないよね？

既存テーマをカスタマイズ・子テーマ化するポイント

そのテーマ用途に合ってる？

05全体まとめ

1色テーマカラーを決めてみる

印象やテイストから選んでみる

調整は色相・彩度・明度から

情報整理やコントラストを考えよう

写真やイラストは色味に注意

ブログならではのポイントに注意

デザインデザイン

※デザインは無から生まれません

いいものをたくさん見て取り入れていきましょう

06WordCamp Kansai 2015

質問共有

01

書きたい内容のカテゴリが絞れない、どうやってデザインの方向性を決める？

02

アイキャッチを出したい

03

Webデザインできるようになるにはどうしたらいいですか

04

素人っぽいデザインをどうしたら直せますか

05

カラーは変更できない（黄色とブルーでちょっとクール）のだけど、

ゆるきゃらを出していきたい