WordBench京都の勉強会に参加してきました。今回はデザインのお話についてです。
プログラマーさん、コーダーさんから、その他いろいろな方からデザイナーさんにお聞きたいことを大喜利形式で聞き出していくというものです。
大喜利のお題は事前にアンケートで寄せられた内容について、参加者が疑問に思ったことを即興で、答えられる人が答えていくという形式です。以下は個人的まとめ。
参加できなかった方が、「こんなんやってたんだ!」と興味をもっていただけたければ、コレ幸いです。
※すいません。今までフォントについてちゃんと考えたことがありません。頭に残らずスルーしてしまったことがあるかもしれません。先回りして謝っておきます(汗
目次
フォントって大事なの?
- フォントは読めりゃいいのというわけではない
- デザイナーさんはひらがなにこだわる(特に「あ」)
- TPOに合わせてフォントを使い分ける
例)
ゴシック→カジュアル
明朝体→フォーマル
行書体→和風
- エヴァンゲリオンの見出しについて
- Webデザイナーのためのタイポグラフィと文字組版
今どきのCSSトレンド
- デザインのそもそも論(情報視覚化して整理する)
- レスポンシブWebデザイン(マルチデバイスへの対応)
- フラットデザイン
- 日本と海外のレスポンシブ対応の違い
- CSSトレンドの必要性(知っておかないと古いブラウザで対応がめんどくさくなる)
- ワイヤーフレームって何?(システムで言うところのUI設計書)
- BootStrapの使いどころ(すばやくサイトをUPしたいとき)
色の決め方のルール
- デザイナーはサイトの色を自分で決めているわけではない
- 配色辞典や他のサイトで使われている色を参考にしている
- デザインを全く知らない人が配色をする場合は、街で見える風景を参考にする
- Adobe Kulerの紹介・使い方
- 無料の配色ツールの紹介
例)
カラー配色辞典
色カラー
Color Scheme Designer
1pxの違いって大きいの?
- コンマピクセルずれると罫が崩れる
- 最初にPhotoShopやIllustratorの設定
デザイン力を身につけるために普段していることは?
- 街中を歩くときに情報を収集する
- 料理の色や光の当たり方を変えた場合にどうなるか想像してみる
- 余分なものを「省く」クセを付ける
- 「省く」とは伝えたい内容を整理する
- ノンデザイナーズ・デザインブック[フルカラー新装増補版] の紹介
- どこまで削れるかを追究する
DTPしかしていないデザイナーさんにWEBデザインをお願いするときの注意点
- DTPデザイナーとWebデザイナーではそもそも使っている単位が違う
- Illustratorで単位の設定を合わせてもらう
- 画面の倍率(ズーム)を100%にした状態で見る
- CMYKカラーとRGBカラーでは色の感じが異なる
- 印刷会社の営業担当者から受けてくる仕事の対応について
海外のテーマをそのまま使ったらダサくなるのはどう直せばいい?
- 「英語・数字だけ」と「英語・数字・漢字・かな」を使うサイトでは違う
- モリサワのフォントを使う
- 文字をあまり気にしないサイトであれば気にならない
デザイン制作の要望を受けてヒアリング方法
- お客さんは要望をすべて言葉で伝えられるわけではない
- 「文字を赤くして」と言われて赤くするわけではなく、「なぜ赤くするのか?」を聞く
- 競合企業や大手企業のサイトを参考として見せて要望を聞き出すのも1つの手
デザインの勉強をする順番
- Webデザインに専念するのであればCSSから始めてみる
- WordPressのデザインを確認してみる
WordPress想定でデザインする際の方法
- 古典的なWordPessのテーマを触ってみる
- ワイヤーフレームでつかうツールの紹介
例)
エクセル
Cacoo
visio
紙と鉛筆
Illustrator
PhotoShop
個人的な感想
自分で書いていて、言うのアレなんですが、かなり大ざっぱなまとめです(泣)しろうとが「ぼっち」でWebサービスなぞ考えている状況で、デザインについてまるで考えたことないから、当たり前と言えば、当たり前です。
しかし、Web界隈の話題なんかを見ていると、みなさん心の奥底で考えていらっしゃることは、同じだなぁと感じることはできました。
〔参考サイト〕
- 網站・茶商 SHINCHAYA ”プログラマさんのデザインに関する疑問にお応えする会” @WordBench京都(2014/3/23)
- Cherry Pie Web Webの文字組版の問題は、かつてDTPが通ってきた道なのかも
【追記】
第03回WordBench京都 勉強会 フォントって大事なの?の後日、WordBench神戸でもデザインに関する勉強会が行われました。気になる方は以下のサイトにアクセスしてください。