hamashun.com

追記

• 2007-09-11 まとめWikiへのリンクを追加
• 2007-09-11 cremaさんの資料追加

FrontPage - デザイン勉強会まとめサイト - livedoor Wiki（ウィキ）

1. デザイナーでない人のデザイン入門
2. ベジェ曲線で行こう
3. 簡単に名刺を作ろうぜ！
4. Webサイトのあり方と考え方
5. 総括

Twitter繋がりのまめこが主催するデザイン勉強会に行ってきました。 という訳でまとめです。
この勉強会は、デザイナー向けではなく、デザイナー以外に向けたデザイン勉強会です。

会場は今回も株式会社ノッキングオン様に提供していただきました。 いつもありがとうございます！

なお、まだ資料とか公開されていないセッションもあると思うので、タイトルとか微妙に間違ってるかもしれません。 間違ってたらごめんなさい。

デザイナーでない人のデザイン入門

資料

トップバッターは先生もされているcremaさんです。 話の仕方もさすがスムーズで、会場を暖めてくれました。
ちなみにcremaさんは「くれま」さんって読みます。「クリーム」のスペイン語なんだそうです。

さて、cremaさんが話してくれたのは、デザインの4原則に則った内容です。
デザインの4原則とはこれらです。

• 近接の原則
• 整列の原則
• 対比の原則
• 反復の原則

近接の原則

情報は、グループ分けが肝心。 意味的に近い情報同士は、近くに配置するとよい。
その為には、情報を分析する必要がある。 例として資料に載っていたチラシには、タイトル・製品紹介・申し込み情報・講師紹介、などの情報があった。

まずは、グループ化した要素ごとに間隔をとってみる。
写真と紹介文で一組として、それが複数並ぶようなデザインの場合は、一組ごとに間隔を空ける。

整列の原則

基準線、という存在が重要。 グラフィックソフトで言うところの「ガイド」や「グリッド」。
これに沿ってテキストの端を揃える。 左揃え、中央揃え、右揃え、両端揃えが考えられるが、中央揃えと右揃えは行の開始位置がバラバラになってしまうので、バランスを取るのが難しい。
よって最初は左揃えや両端揃えにするとよい。

また、イラレやInkscapeなどのソフトを使用する際には、数値を過信しすぎてはいけない。
数値上では揃っていても、人間の目と脳がズレていると認識してしまう事がある。

対比の原則

重要な部分とそうでない部分に差を付けて、目立たせる事。
大きくしたり太くしたり色を変えたりする手法が考えられる。 普段何気なく行っている、ヘッダ部分にメインビジュアルを置いたり、見出しのフォントサイズを大きくするのもこれ。

また、「ジャンプ率」という用語がある。
これは見出しと本文などの文字サイズの比率を変える事。 例えば、スポーツ新聞の見出しと本文のような差は「ジャンプ率が高い」と言える。
ジャンプ率が高いと目立ちやすいが、下品な印象を与えやすいので注意が必要。

反復の原則

繰り返しの要素を入れて、リズム感を出す。
通常、同じレベルの見出しは同じ色、同じ文字サイズにするが、これは反復の原則に則っての事である。

tips：デザインはどこから行う？

ありがちなのが、上から下へ、順番に行う方法。
しかしこれでは、最後にスペースが余ってしまった場合に対応できない。

そこで、上→下→中央、という順番にデザインするとよい。
中央でスペースが余りそうになった場合、ビジュアル要素のサイズを変えるなどで自然な形で対応できる。
（これはWebというよりは、スペースが決まっている紙デザインで特に言える事だと感じました）

tips：イラレの使いこなし術

キャンバス内に同じ枠を複数並べたい時（4コママンガの枠みたいにしたい時）には、

1. 矩形ツールで大枠となる四角形を描く
2. その四角形を選択して、上部のメニューのオブジェクト→パス→段落設定 を開く
3. そこで「プレビュー」にチェックが入っている事を確認して、数値を色々変えてみる
4. 入力した数に四角形が分割される

なお、分割した四角形の内、任意の数をShift+クリックで選択すると、更に分割したり、或いは結合したりもできる。
こうすると、4コママンガではなく普通のマンガのコマ割みたいな事が簡単にできる（文字で読むより、リストの順にやってみた方が解りやすいです）。

まとめ

「4つの原則」は凄く大事。 これを守るだけで、かなり「デザイン」できる！

おまけ

デザインもやはり、数をこなさないと自分の物にならない。
という訳で、cremaさんオススメのサイトや本を紹介してくれました。 公開される資料をチェックしてください。

ベジェ曲線で行こう

資料

多くの人はプログラマだと認識していたcheebowさん。
実は過去には看板や駅の時刻表を作る仕事をされていたんだとか。 その業界のおっちゃん達にドローソフトを教えていた事もあったらしく、ドローソフトのキモとなる「ベジェ曲線」に特化した話をしてくれました。

そもそもベジェ曲線とは？

N個の制御点から得られるN-1次曲線である。

何それ？

ってWikipediaに書いてあるけど訳わからないよね！との事。 解りません。
実はベジェ曲線とは、OSのAPIとして用意されている物なんだとか（Winの資料　Macの資料）。
そうなるとエンジニア思考としては、コードの方がラクなんじゃない？→APIでベジェ曲線を描こう！ となる人もいるけど（上記の資料にサンプルコードが載っています）、それはやりすぎ。

ベジェ曲線を解りやすく

「点」と、その点から出る「方向線（・―――・―――・ ←こんなの）」で描く曲線の事。
この「点」は「アンカーポイント」。「方向線」は「ハンドル」と呼ばれる（ソフトによって文言は微妙に変わる）。

アンカーポイント（点）とアンカーポイント（点）をつなぐ事で、線ができる。
アンカーポイントに対してハンドル（方向線）を操作する事で、なめらかな曲線が描ける。
･･････とか、ここで読んでも意味不明だと思うので、Inkscapeをインストールして、左のメニューから「ベジェ曲線」を選んで色々やってみるといいと思います。

基本のキ

直線は、クリックのみで描ける。
曲線は、アンカーポイントとハンドルを使って描く。
また、例えばマクドナルドの「ｍ」の字のように折り返す線を書く場合には、クリック→Shift+ドラッグとする（これもソフトによって多少変わる）。
･･････とか、これも読んでも意味不明だと思うので、とりあえずインストールして手を動かすといいと思います。

線を決める要素

• アンカーポイント（線）の場所
• ハンドルの長さ
• ハンドルの方向

アンカーポイントの場所は自由！
ハンドルの長さも方向も自由！

「自由」と言われても、どうすればいいのか分からないよね。 これはPerlとかでも同じかもしれない。
だからベストプラクティスとか読んじゃうのかも。 との事。

シンプルに考える

書きたい絵の、全ての点の場所や長さを最初に考えるのは大変。 なので、まずは「アンカーポイント（点）の場所」と、「ハンドルの水平・垂直」だけを考える。
もちろん、それでは描けない物も出てくるけど、練習の段階として。

細かい事は後まわし

なお、プログラマーは「例外」を考えてしまいがちだけれど、ベジェ曲線に関しては考えないで大丈夫。
「これで本当に描けるの？」とか思っても、とりあえず描いてみる。 後から修正するのは簡単。

プログラムを書く時も、人によってフローが違ったりする。
まずはコメントだけを書いていって、やる事を把握して、それからコメントの場所にコードを書いていく人もいれば、
イチからガーっと書いていく人もいる。
ベジェ曲線では最初から完璧を目指すのは大変なので、まずは大まかに描いて、それを修正していく方がオススメ。 彫刻とかもそうなのでは。

習作：トランプのマーク

トランプのマーク（ダイヤ・ハート・スペード・クローバー）は練習材料に最適。
jpgとかでトランプのマークを用意して、それを読み込んで、ペンツール（ベジェツール）でトレースして（なぞって）練習する。

クローバーは、よく見ると3つの丸と一つの楔形でできている。 実際の業務としてこういった図形を作る場合は、円系ツールと矩形ツールで作った方が効率がよい。

もっと知りたい人

トランプのマークのように、何かを読み込んで、トレースの練習をするとよい。
（ちなみに、このサイトのヘッダにいる動物達もそうやって作りました）

tips：アンカーポイント（点）だけで絵を描ける？

ぶっちゃけると描ける。 絵の曲線に沿って超細かく点を打っていけば、結果的に曲線を描ける。
でも、CPUの負荷が比例して上がっていくので、よくない。

tips：左右対称のロゴとかを描く時にラクする手段は？

半分だけ描いてコピペ。 それを反転すれば半分の作業量で済む。

まとめ

ベジェ曲線とは、アンカーポイント（点）とハンドル（方向線）でできている。 それぞれの役割は、アンカーポイントで線を繋いでハンドルで曲線の具合を決める、という物。
最初は、アンカーポイントを打つ場所は（図柄の）線の頂点・折り返しで、ハンドルは水平・垂直に出す（・―――・―――・ ←こういうのが一直線になるように）ようにする。 それで思い通りの物ができなかったら、編集ツールで調整する。

ツールは、とりあえずInkscapeがオススメ。 無料だし。
トランプのマークをトレースして練習する。

簡単に名刺を作ろうぜ！

資料

主催者であるまめこは、名刺作りを例に一連のフローを話してくれました。 まめこナイト。
後半は大分専門的な内容が入ってきて、結構難しかった。
使ったソフトはイラレとフォトショ。

ケースバイまめこ

名刺を作成する最初の流れはこんな感じ。 あくまでまめこの場合なので、こうしなければいけない、という物ではない。

1. 原稿を考える（名前や各種アドレス、アイコンやIDなど）
2. コンセプトを考える（好きな音楽のジャンルをテーマにする、とか）
3. ラフを紙に書く（超簡単でOK。 ラクガキっぽいのを紙に書く）

ちなみに、スライドに載っていた原稿に、twitterIDはあったのにlivedoorIDが無かった。 きっと公開の時にはこっそり追加されているはず。

アイディアを膨らませる

コンセプトを元に連想や妄想を膨らませて、ビジュアル的なアイディアを出していく。
例えば音楽だったら、そのジャンルで使われる楽器や服装や色。

素材を探す

写真やフォントなど。 素材集や無料素材のサイトを探す。
素材サイトの場合、商用利用に制限がある場合が多いので注意。
（特にGIGAなんとかとかで紹介されている海外のサイトとか注意した方がいいと思います）

仕様について考える

色は1色、2色、4色があるが、名刺なら4色で。
サイズは91mm×55mm。
紙の種類はマットとかツヤツヤとかあるけど、それもデザインに盛り込むのはもうちょっと成長してからで。 最初は好みでOK。
ちなみに、変形名刺（細長い形とか）にすると印刷屋の料金が跳ね上がる。

まずは名刺の形の枠線を作る

1. イラレで新規ファイルを作成し、サイズはミリメートル、色はCMYKを選択する
2. 長方形ツールを選択し、画面をクリック
3. 数値の入力欄が出るので、91×55で長方形を作成
4. 長方形をカットしてペーストすると、画面の中央に置ける（作業しやすい）
5. 四角を選択して、上部メニューのフィルタ→クリエイト→トリムマーク で、トンボを出す（四角を選択しないとダメ）
6. このトンボ、実は正確ではない。それは、四角の線の中央を基準に表示してしまうから。 つまり、線と塗りを一度非表示にしてからトンボを出す必要がある
7. そうすると、91×55の領域が分からないので、Ctrl+Rでルーラー（定規）を出して、そこからドラッグする事でガイド（基準線）を引く

ちなみにトンボとは紙を裁断する時の目安となるもの。 由来はそのまんまで、虫のトンボのように見える事から。 トンボは虫の動物（まめこ語録）。

また、ドブや断ち切りと呼ばれる空間を用意しておく。 現在の技術では数百枚を裁断していくとどうしてもズレが生じてしまうので、その誤差を埋める為の物。
サイズは内側が最低3mm、外側は3mm以上あればよい。

テキスト情報を流し込む

これで準備完了。 ここから実際に作っていく。
まずは用意した原稿を流し込む。 住所などのサブ情報は6ptがまめこの流儀。
文字数の関係で入りきらない場合は、改行して調整する。

名前は今回の作例では明朝体を選択。 漢字が分かりづらい場合には読み仮名を用意する。

まめこメソッド1：写真から素材作成

1. 素材探しで見つけた写真素材を、フォトショップで開く
2. 上部のメニューから、イメージ→モード→グレースケール→OK
3. 上部のメニューから、イメージ→色調補正→トーンカーブ→「右上から左下にかかっている斜線を『√』の記号のようにドラッグで変形させる」
4. 写真が黒い感じになった
5. 上部のメニューから、選択範囲→色域選択→写真の黒い部分をクリック
6. レイヤウィンド（大抵右下にある）の「パス」タブをクリックして、下部メニューの「選択範囲から作業用パスを作成」をクリック
7. 左上のフローティングメニューから、パスコンポーネント選択ツール（下の方のの矢印のアイコン）を使って、写真の左上から右下まで選択
8. それをコピーして、クリップボードに入った状態のまま、イラレにペーストする
9. 塗りと線を指定すると、いい感じに仕上がる
10. あとは回転させたり、素材同士をくっつけたり、コピーして反転させたり、拡大縮小したりでロゴっぽくするだけ

まめこメソッド2：Web2.0ぽい集中線

1. 円系ツールで正円を書く
2. 円を選択し、線のみにする
3. 線の太さを300とかにする
4. 線を破線にすると、Web2.0ぽい集中線になる
5. 線の色を変えたり、位置を変えたり、破線の間隔を変えたりしていい感じにする

タイトルを作る

ロゴの画像要素の上に配置する文字の事。
フォントを選んでテキストを入力し、選択して右クリック。 コンテキストメニューから「アウトラインを作成」。
これでそのテキストは、テキストデータではなくパス（画像）として扱える。 逆にいえば、文字を打ち直す事はできなくなる。
（不安だったら、一度コピペして保険として残しておくといいよね）

パス（画像）になったので、1文字づつ回転させたり大きさや色を変えたり、シャドウを入れたりしていい感じにする。

詰め

これでロゴや名前、住所などのパーツができた。
詰めとして、これらをバランスよく配置して調整、細かいデザインを追加していく。

• 罫線を引いて情報をグループ化する際には、罫線の上にワンポイントの要素を置いたりするとプロっぽい
• 背景に色を敷く
• ペンキを散らせた紙をスキャナで読み込んで、上記まめこメソッド1で背景画像を作り、配置する（これは使いまわせるので、アイディア次第でストックしておくといい感じかも）
• ロゴにグラデを使って色味を出す
• テキストの色を指定する
• 空間が空いたら、何か入れて埋める（まめこは屋号のロゴを入れていた）
• 全体的な位置の微調整は、モニタから遠ざかってチェック

裏面を作る

表面を全部コピーしてペーストする。
そこからいらない物を削除したり、色を変える。 空間が空いたら、何か文言とか入れる。
ロゴは表だけでいいので、Webサービスで使っているアイコンを入れたりしてもよい。

入稿の方法

• データはCMYKで
• テキストはアウトライン化する
• 断ち切りは端まであるかどうか
• 拡張子があるか

これらをチェックした上で、データとキャプチャ（印刷屋の人が見る確認用画像）を用意する。
表面と裏面は、それぞれ別のファイルにする。
CMYKのチェックは、全てを選択して上部メニューからフィルタ→カラー→CMYKに変換 で行う。
テキストをアウトライン化したら、もうテキストを編集できないので、別名で保存しておくとよい。
保存の際のバージョンは余り気にする必要は無い。 自分のバージョンに対応できる印刷屋を探すようにする。

なお、まめこオススメの印刷屋さんが資料に載っているはずなので、公開されたらチェックするといいと思います。

tips2種

• とにかくたくさんのデザインを見る。 可能なデータ形式なら、パスを見る（つまりソース嫁、って事）
• 文字数が多い場合、改行以外にも、文字の幅や高さを変える事でも対応できる。
  この手法は、フォントが持つデフォルトの特性も調整する事ができる（例えば、丸々ふっくらしたフォントの幅を狭めると、少しシャープに調整できる）。

Webサイトのあり方と考え方

色んなセミナーなどでも講演されているガクさん。 まめこの熱烈ラブコールに答えてトリを飾ってくれました。
ガクさんはデザイナーでは無く、また今回の内容もデザインとは少し離れた物でした。 しかし、主催まめこがその考え方に非常に共感する所があったようで、拝み倒されて（？）の講演となったようです。

まめこは過去に「人とのコミュニケーションもデザイン」と言っていました。
これは僕の主観なのですが、「デザインとは、目的や問題を解決するための手段」と考えるなら、こういったアプローチもまたアリかな、と思いました（プロダクトデザインで見かける考え方かも？ 雑誌Penとか）。 参加者の意識とはズレがあったかもしれませんが。
その辺を念頭に置いて、このセッションのまとめを書きました。

WebとWebに関連する企業の歴史

2000年頃のWebは、リンクでサイト同士が繋がっている程度だった。
それが2003年、2004年と年を重ねていくに連れて、企業が戦略的にWebを使用するようになった。
現在は様々なサイトが繋がっているだけでなく、ユーザー同士も繋がっている（口コミの効果）。
また閲覧する為の媒体（ケータイとかPSPとか）も広がりを見せている。

昔は買い物に行くとしたら、消費者は小売店舗に出かけていた。 しかし、最近はネットを通して企業から直販で買う事も可能になっている。
つまり、昔は企業にとって顧客とはあくまで小売店舗であり、消費者は直接的にお金を落としてくれる存在では無かった。 最近はそれが変わってきている、という事。
（企業が消費者を「顧客」と呼ぶ場合、その意識がある。 「消費者」と呼ぶ場合には、そういった意識が低い。 または無いと考えられる）

One to Oneマーケティング

販売者と消費者が取引（やりとり）する場合、大切なのはマニュアル以外の部分である。
例として分かりやすいのは、地元の馴染みの八百屋や魚屋のイメージ。

• 「いつもありがとうね！ 今日はサービスしちゃうよ！」
• 「お宅の息子さん、悪そうな連中とつるんでたよ？ 大丈夫かい？」
• 「今日は夕方から雨って言ってたから、早く帰った方がいいぜ」

こんな感じ。
そういった事を意識している仕事は他にもあって、新幹線パーサーやキャバクラ、コールセンターやメイドさん・執事などがそれにあたる。
共通するのは、1対多の接し方ではなく、1対1の接し方であるという事。
（この辺り、いわゆるホスピタリティにも通じる話かな、と思いました）

それをWebにあてはめてみると、PCの画面というのは、多くは一人で見る。
であるならば、WebにもOne to Oneマーケティングの方法が使えるのではないか。

One to Oneマーケティングで大切な事

キーワードとなるのは、4C。

• 顧客価値
• 対価
• 利便性
• コミュンケーション

簡単に言うとこう。

• 価値ある存在か？
• 価値に見合った対価か？
• わかりやすい場所にあるか？
• コミュニケーションは良好か？

Webデザインにあてはめて考える

例えば、プロダクトデザインでは美しさ、見易さ、扱いやすさの3つが重要としたら、Webデザインでは配色、配置、ユーザビリティの3つがそれにあたる。

tips：配色バランス

ベースカラー、サブカラー、アクセントカラーの割合は、70：25：5の割合が定番。
もし色を足したい場合には、最も多い割合を半分の35%にする。

tips：名刺を貰う時のマナー

名刺を貰ったら、相手より一秒でも早く上に持ち上げる。

この辺りから、上司にご馳走してもらった時のマナーやメールの書き方を間違うと職を失いかねないなど、マナーについての話になったんですが、これはさすがに蛇足だったかな、と感じました。
なんとなく、（マナーの話をするのは）ガクさんの本意では無いような気もしました。 あくまで予想ですが。

まとめ

• 情報は整理して、誰に伝えたいかを考える
• One to Oneコミュニケーションでは、相手の喜ぶ姿を考える
  例えばソースコードを書く職では、読みやすいコードを心がけるなどにも繋げられる
• マナーは大事

総括

デザインって、なんとなく「才能」とか「神が降りてきた」とか、天性の物が必要とされるイメージがありますけど、必ずしもそうでは無いんですよね。
理屈を学んで経験を積めば、ある程度のデザインはできるんだと思います。 ビジュアルデザインって言うか、絵を描いたりはまた違いますけど。

今回のセッションでも、「4つの原則」や「ベジェ曲線とは」など、理論的な説明が多くて解りやすかったです。
ビジュアル的な要素では「ごにょごにょして」という説明もありましたけどｗ まあそこは感性に基づく部分なのかな。

今回の勉強会を通して、デザインに関する興味が深まりました。
IAとかUIとかは（色の使い方とかに比べて）マークアッパーにも近い分野だと思うので、そういった方面で積極的に勉強したいです。