1. TOPTOP
  2. Web学習法

2014年度 第03回WordBench京都 勉強会 フォントって大事なの?

|

coto

WordBench京都(新しいタブで開く)の勉強会に参加してきました。今回はデザインのお話についてです。

プログラマーさん、コーダーさんから、その他いろいろな方からデザイナーさんにお聞きたいことを大喜利形式で聞き出していくというものです。

大喜利のお題は事前にアンケートで寄せられた内容について、参加者が疑問に思ったことを即興で、答えられる人が答えていくという形式です。以下は個人的まとめ。

参加できなかった方が、「こんなんやってたんだ!」と興味をもっていただけたければ、コレ幸いです。

※すいません。今までフォントについてちゃんと考えたことがありません。頭に残らずスルーしてしまったことがあるかもしれません。先回りして謝っておきます(汗

フォントって大事なの?

  • フォントは読めりゃいいのというわけではない
  • デザイナーさんはひらがなにこだわる(特に「あ」)
  • TPOに合わせてフォントを使い分ける

例)
ゴシック→カジュアル
明朝体→フォーマル
行書体→和風

今どきのCSSトレンド

  • デザインのそもそも論(情報視覚化して整理する)
  • レスポンシブWebデザイン(マルチデバイスへの対応)
  • フラットデザイン
  • 日本と海外のレスポンシブ対応の違い
  • CSSトレンドの必要性(知っておかないと古いブラウザで対応がめんどくさくなる)
  • ワイヤーフレームって何?(システムで言うところのUI設計書)
  • BootStrapの使いどころ(すばやくサイトをUPしたいとき)

色の決め方のルール

  • デザイナーはサイトの色を自分で決めているわけではない
  • 配色辞典や他のサイトで使われている色を参考にしている
  • デザインを全く知らない人が配色をする場合は、街で見える風景を参考にする
  • Adobe Kulerの紹介・使い方
  • 無料の配色ツールの紹介

例)
カラー配色辞典(新しいタブで開く)
色カラー(新しいタブで開く)
Color Scheme Designer(新しいタブで開く)

勉強会で思わず歓声が! Color Scheme Designについて。

1pxの違いって大きいの?

  • コンマピクセルずれると罫が崩れる
  • 最初にPhotoShopやIllustratorの設定

デザイン力を身につけるために普段していることは?

DTPしかしていないデザイナーさんにWEBデザインをお願いするときの注意点

  • DTPデザイナーとWebデザイナーではそもそも使っている単位が違う
  • Illustratorで単位の設定を合わせてもらう
  • 画面の倍率(ズーム)を100%にした状態で見る
  • CMYKカラーとRGBカラーでは色の感じが異なる
  • 印刷会社の営業担当者から受けてくる仕事の対応について

海外のテーマをそのまま使ったらダサくなるのはどう直せばいい?

  • 「英語・数字だけ」と「英語・数字・漢字・かな」を使うサイトでは違う
  • モリサワ(新しいタブで開く)のフォントを使う
  • 文字をあまり気にしないサイトであれば気にならない

デザイン制作の要望を受けてヒアリング方法

  • お客さんは要望をすべて言葉で伝えられるわけではない
  • 「文字を赤くして」と言われて赤くするわけではなく、「なぜ赤くするのか?」を聞く
  • 競合企業や大手企業のサイトを参考として見せて要望を聞き出すのも1つの手

デザインの勉強をする順番

  • Webデザインに専念するのであればCSSから始めてみる
  • WordPressのデザインを確認してみる

WordPress想定でデザインする際の方法

  • 古典的なWordPessのテーマを触ってみる
  • ワイヤーフレームでつかうツールの紹介

例)
エクセル
Cacoo(新しいタブで開く)
visio
紙と鉛筆
Illustrator
PhotoShop

個人的な感想

自分で書いていて、言うのアレなんですが、かなり大ざっぱなまとめです(泣)しろうとが「ぼっち」でWebサービスなぞ考えている状況で、デザインについてまるで考えたことないから、当たり前と言えば、当たり前です。

しかし、Web界隈の話題なんかを見ていると、みなさん心の奥底で考えていらっしゃることは、同じだなぁと感じることはできました。

〔参考サイト〕

【追記】

第03回WordBench京都 勉強会 フォントって大事なの?の後日、WordBench神戸でもデザインに関する勉強会が行われました。気になる方は以下のサイトにアクセスしてください。