2014/5/10のWordBench神戸のふりかえりです。
第34回 WordBench神戸勉強会 デザイン教えて君 – WordBench神戸
参加人数は70名でした。いつもの参加者数は40人前後なので、今回のテーマの関心の高さが伺えます。
2014/3/23にWordBench京都で開催されたデザインの話が、初心者にとってとてもためになる内容だったので、神戸でもぜひ同様の勉強会をやりたいと思い企画しました。
デザインに関する初心者の疑問・質問を事前に用意して、それをデザイナーなど有識者の方が当日その場で回答していく座談会形式で行いました。
メイン回答者、発表者の方々：
・川井昌彦さん @sakuragi_kei Cherry Pie Web
・チミヲさん @chimiochimio
・はざくみさん @hazakumi
・原友美さん @466548
・高井茂樹さん @shinchaya
では、それぞれの質問と回答をご紹介します。
1. 色の決め方には何かルールがありますか？ インスピレーションで色を選んだりするのか、それとも何か法則があって選んでいるのでしょうか？
はざくみさんに、色の基本的な知識について発表してもらいました。
・色は、「色相」「彩度」「明度」で決まる。
・色相ごとに12種のトーンに分け、各色相からトーンの同じ色をまとめて図にした「PCCSトーン表」というのがある。
・色相環上で、反対側にある色を「補色」と言う。
・補色をうまく使うことによって、目立たせたい色をさらに際立たせることができる。
例えばマグロ赤身の下に、赤色の補色である緑色のバランを敷くのはそういう狙いがある。
・PANTONEという会社が、色見本帳などの商品を提供しており、「今年の流行色」を毎年発表している。
・配色を自動的に選んでくれるジェネレーターが便利。
Color Scheme Designer
・先天的に「色」を見分けにくい人が5%くらい存在するので、色相で色の差をつけずに明度の差で分かりやすく表現する工夫などをした方が良い。
・アクセシビリティ・カラー・ホイールというツールで、良好な色の組み合わせを決めることができる。
続いて、チミヲさんによる色の基本の話
・デザイナーが色を決めるとき、直感で色を決めるということは無く、必ずルールにもとづいて決めている。そのための法則や手法がある。
・普段、口にしている赤や青といった「色の名前」は、明度や彩度ではなく、色相のことを指している。
・目立たせたい色、アクセントカラーは、色相・明度・彩度と対照的な色を使うのがポイント。
・配色をする際に気をつけたいのは、色相・明度・彩度による対比と共通性を用いた配色やアクセントカラー、セパレーションカラーなど。
・扱う色数が少ないほど色のメッセージ性が強くなる。
当日スライドはこちら。とても美しいスライドです。
第34回 WordBench神戸勉強会 デザイン教えて君 色のきほん
2. フォントを選ぶときってどういうことを考えながら選んでますか？ 同じ明朝体でも、違いにこだわって選んだりしていますか？
川井さんに、資料を使いながら紹介していただきました。
・男女カップルが写っている写真にセリフをつける事例。フォントを変えるだけで「男性の発言」なのか「女性の発言」なのかを見る人に暗黙のうちにイメージさせることができる。
・葬儀場の案内に使うフォントの定番は明朝体。ゴシック体にするとおごそかな雰囲気がくずれてしまう。
場や雰囲気に合ったフォントというものがあるので適切に使用する必要がある。
・DTP畑の人は、フォントが安っぽいと「文章がつながっている感じがしない」「頭に入らない」と気にする。
・同じ明朝体でも、よく見ると違いが有ることが分かる。ひらがなの「あ」とか「を」などで違いが顕著。
・写研という会社がある。組版・書体のデファクトスタンダードとして、広告・出版物からサイン、映像分野にいたるまで幅広く使用されている。
・文字組みについて。隙間が多いと読みにくい。「。」は空いていても「、」は狭いと頭に入りやすい。
・InDesignというソフトでは、文字間の制御を細かく指定することができる。
・DTP、組版の世界では大阪の大石十三夫さんが有名。ブログ:なんでやねんDTP
・MacOSでは、ヒラギノ明朝が無料でバンドルされている。これは当時は画期的なことだった。
・スマホ前提で作るときは、フォントの問題はどうすればいいか?
→ がんばってWebフォントを使う(ただし重たいので、使う場所を限定する)
・使うページで、フォントは統一した方がいいのか? それとも何種類も使っていいのか?
→ 1つのサイトでは、使うフォントは限定した方が良い。
・文字の形において、「ふところ」とは画と画が構成している内側の空間のことで、ふところが広い書体はおおらかな印象、狭い書体はひきしまった印象を与える。
ふところ、重心 | 株式会社モリサワ
・日本語WebフォントをカーニングしてくれるJavaScriptライブラリがある。
[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js | コリス
・川井さんが3月のWordBench京都のあと、補足するために書いたブログが参考になる。
Webの文字組版の問題は、かつてDTPが通ってきた道なのかも – Cherry Pie Weblog
川井さんのスライド
「フォントはしゃべる」というお話
3. DTPしかしていないデザイナーさんにWEBデザインをお願いするときの注意点はなにかありますか？
川井さんの話
・下着屋さんから印刷会社を通して受けた仕事の事例。A4のサイズでデザインもらったので、Web用にアレンジする必要があった。
「横幅960PX、縦なりゆき」などと先にサイズを指定しておくとスムーズにいくかも。
・DTPデザイナーとWebデザイナーでは使っている単位が違う。（Webでは、単位はピクセルにする必要がある）
・Webでは「ディスプレイ」で100%表示している見えるものが納品物なので、紙の感覚とは少し違う。紙の場合は紙全体が見渡せるので下の方に情報を載せても目につくが、それをそのままWebページにすると、ファーストビューからはみ出したところに位置されることもある。大事な情報は下部ではなく上部に再配置するなどの工夫が必要。
・紙はCMYKカラーだが、Webの世界ではRGBカラーなので、その違いを考慮に入れておく必要がある。
・Webでは、文字の部分は画像として表示するのではなく、テキストとして表示させるべき部分があることに気をつける。
・PhotoShopはパーツ作成、ページデザインはIllustratorで作ることが多い。
川井さんのスライド
DTPデザイナーにWebデザインを頼むときのポイント
4. 1pxの違いにこだわるときってどんなときでしょうか？
・水平線<hr> の場合では、太さを1pxにするか2pxにするかで印象が大きく違う。
・横に3ブロック並べると、隙間の空白が2箇所できるが、その2つできた隙間の横幅が同じサイズではなく1pxでも違うと、等間隔に並んでいるように見えず違和感を感じる。
・1pxだからといっても、それをわざと目立つような色にしてしまうと安っぽくなってしまう。分かるか分からないかくらいの塩梅で1pxの線を引くとか、シャドウを付けるなどをすると自然に見える。
5. デザインに関するお勧めサイトや書籍があれば教えてください。 デザインセンスって才能？勉強で身につくもの？
・デザインセンスは普段からの「積み重ね」が必要。
・人のサイトからパクる。そのままパクるのではなく、色を変えてみるとか。
・デザインとグラフィックの総合情報誌MdNがおすすめ。
・出来合いの吊り広告とかお菓子のパッケージなど、身近にあるデザインを見て、自分で真似してみるといい訓練になる。
・WordPressで売れてるテーマなどを参考にする。
・新人デザイナーのためのデザイン・レイアウトの定番を学べる本: 柘植 ヒロポン
・新人デザイナーのためのデザイン・レイアウトが上手になる本: 柘植 ヒロポン
・ノンデザイナーズ・デザインブック: Robin Williams, 吉川 典秀は、非デザイナーの人がデザインをするときに参考になる。
・Webプロフェッショナルのための黄金則 Web配色デザインのセオリー: 坂本 邦夫
・Webデザインの見本帳は、Webサイトのデザイン事例がいっぱい掲載されているので参考になる。
・国産のWebデザインギャラリーサイトが一番参考になるのでまとめた – かちびと.net
6. デザイン力を身につけるために普段していること、訓練していることは？
・普段から「なぜここ（飲食店）は赤色なのか？」と興味をもち、「辛味」とつながりあるのではないか？とかの想像を働かせる。
・お客さんが何を考えているのか？を考えてみる。
・ふだんから「ちょこちょこ」と考えておく。筋トレみたいな感じで。
・他の人のWebサイトと見比べて、良し悪しを見分けられるようにする。
・会社の業績が悪いときは、その会社が持つコーポレートカラーを変えると改善することもある。
・ピンクのクラウンの事例。こういった現状を打ち破る発想がうまくいく場合もある。
7. WordPressの既存のテーマを選ぶとき、どういう観点で探していますか？海外のテーマを日本語のサイトで使っても見た目が変わったりしないですか？
・海外のWordPressテーマをそのまま日本向けのサイトで使うと、日本語のフォントのバラエティが乏しいためどことなく見劣りし、「これじゃない感」が出てしまうことがある。
・英文のフォントは文字間が詰まっているので美しいが、日本語フォントは一般的に開いているので自然な感じにならない。
・海外テーマを日本語で使いたい場合は、Webフォントや組版を工夫してあげると良い。
8. WordPressのサイトをデザインするときに気をつけることはなんですか？静的なサイトや、他のCMSを使ってデザインする時と何か違うことはありますか？
・CMSはデザイン編集エリアとコンテンツ編集エリアが分離されているので、デザインを気にせずコンテンツを作ってしまうことになりがち。
この弊害として、例えば、記事の見出しの文字列の長さがデザインにどのように影響するかすぐに分からない。
→ タイトル文字列が長くなっても崩れないデザイン設計にする必要がある。
・例外を想定してデザインする
・どんなスキルの人が記事を更新するのか考える（HTMLが触れるのか、Web未経験者が触るのか）
・エディタで使うボタンの数を減らす。
・WordPressを使わなくても良さそうな時は、使わないことをすすめる。（アメブロとかconcrete5とか）
9. お客さんからの要望をデザインにするとき、どういうことに気をつけていますか？ 無理難題を言われた時はどうしていますか？ 抽象的なこと(かっこよくしてほしい、かわいらしいデザインにしてほしい、など)を言われたときにどう対処していますか？
・具体的な例を出す（参考サイトとか）。お客様のイメージを引き出してあげたうえで、ラフを書き上げる。
・基本的にはお客さんの要望に対して逆らわないこと。
・わざとダサいサイトを作って、自分が提案するサイトと比較して説明する。そうすると消去法で自分が提案するサイトを選択せざるを得なくなる。
・お客さんにとっての「かっこいい」をお客さん自身で定義してもらう。それを文章に残しておく。
・お客さんと話をするときに、最初に主導権を握っておく。
10. どんなツールを使ってデザインをしていますか？それぞれのツールの長所と短所を教えて下さい。(Photoshop, Illustrator, Fireworks, …)
・会場のアンケートでは、
Photoshop→50% Illustrator→25% Fireworks→50% くらいの割合だった。(複数回答)
・Photoshopはパーツ、バナーの作成に使い、Illustratorはページ作成に使う用途が多い。
・Retina対応の高解像度画像もベクターで作れるIllusttatorは魅力。今後はIllustratorの重要度が増してくるかも。
WordPress 3.9の新機能・変更点
2014/4/17にWordPressの新しいバージョン3.9がリリースされましたので、残りの時間を使ってブレンさん
(@bren_boss)による発表していただきました。
・ビジュアルエディターTinyMCEのバージョンがあがり、記事編集の操作性がアップした。
TinyMCEは大幅にバージョンアップされたみたいなので、関連プラグインが動くかどうかチェックした方がいい。
・画像の拡大縮小がエディタで出来るようになった。
・画像のアップロードが簡単になった。記事編集画面から直接画像がアップロードできる。
新機能や変更点の詳細はこちらにかかれています。
Version 3.9 WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/Version_3.9
こちらのYouTube動画も分かりやすそうです。
WordPress 3.9の新機能 画像を簡単に編集しよう
https://www.youtube.com/watch?v=QMjdjQUP_QE
[blogなど]
当日シェアしながらとった勉強会議事録(GoogleDocument)
2014/5/10 WordBench神戸 デザイン教えて君に関するツイート – Togetterまとめ
第34回 WordBench神戸勉強会 デザイン教えて君 – エコテキブログ
【名言キタコレ】第34回 WordBench神戸勉強会 デザイン教えて君 – WordBench神戸に行ってきたんやで
“デザインおしえて君” @ WordBench神戸(2014/5/10) | 網站・茶商 SHINCHAYA
来月6月はWordCampKansai2014がありますので、来月のWordBench神戸はお休みにしますす。次回は7月6日(日)に開催します。
第35回 WordBench神戸勉強会 自分好みのオリジナルサイトを作ろう
WordBench神戸 懇親会(7月6日)
