DesignSalonKobe

IDIA.JP > レポート > DesignSalonKobe
DesignSalonKobe

神戸を中心に有志で開催している「DesignSalonKobe」について、概要と振り返りをまとめました。

DesignSalonKobeとは

神戸を中心に、京阪神地区でデザインを仕事や勉強に必要としている社会人と学生を対象としたコミュニティです。デザインについての勉強会を中心に活動しています。日本語で「デザイン」というと「ビジュアルデザイン」を考えがちですが、この勉強会では、英語の「design=設計」に近い内容も含みながら、仕事や勉強に必要なデザイン、問題解決の手法としてのデザインを学んでいます。

DesignSalonKobeの考え方

  • フィロソフィー:目的としてのデザインでは無く手段としてのデザインを考える
  • スキルアップ:デザインの本質を見抜き、説得力を身につける
  • コミュニティ:デザインのコミュニティとして問題解決ができる場所にする

対象者と参加方法

デザインを仕事や勉強に必要としている社会人と学生が対象です。現在は内容や規模などを確認しながらの運営のため、参加者の公募はしておりません。2015年度に公募を開始できるよう鋭意調整中です。

イベントカレンダー

これからのイベント

2014年11月1日(土)
第4回「情報デザイン概論」
未定
第5回「自然科学とデザイン」
未定
第6回「社会科学とデザイン」

これまでのイベント

2014年08月19日(土)
プレ第1回「Webサイトのデザイン」
2014年08月27日(土)
プレ第2回「フライヤーのデザイン」
2014年9月20日(土)
第1回「フォントの選び方」
2014年10月4日(土)
第2回「PhotoshopでのWebデザイン」
2014年10月18日(土)
第3回「プレゼテーションとデザイン」

勉強会のまとめ

プレ第1回「Webサイトのデザイン」

開催日2014年8月19日(火)
時間20時〜22時
場所coloco
テーマDesignSalonKobeについて
Webデザインとグラフィックデザインの違い
課題に基づいたWebデザインの制作と批判
  • 整列とコントラスト
  • 黄色を上手く使うには
  • Webサイトのデザインと紙のデザインの違い
  • 写真を背景にする際の注意
  • クライアントやディレクターに提供される「参考サイト」の対応の仕方
  • マジックナンバー
  • 透過、グラデーション、ドロップシャドウの使いどころ
  • 金色の表現
  • 「誘目」を意識する
  • 下層ページのデザインで必要な要素
  • 「index.html」の意味
  • ブランディングサイトの方向性
課題例
課題に基づいたWebデザインの制作と批判 課題に基づいたWebデザインの制作と批判 課題に基づいたWebデザインの制作と批判 課題に基づいたWebデザインの制作と批判

プレ第2回「フライヤーのデザイン」

開催日2014年8月27日(水)
時間20時〜22時
場所coloco
テーマ課題に基づいたフライヤーデザインの制作と批判
Webデザインとグラフィックデザインの違い
課題に基づいたフライヤーデザインの制作と批判
  • 実際に印刷してみることが重要
  • 斜め線の使い方(右上がりの線=安定のイメージ)
  • コントラスト
  • 文字の整列
  • 情報整理:どこを目立たせるか(名前、日付、地図、etc)
  • 地図の描き方(どこまで詳細に書くか)
  • 誘目性
Webデザインとグラフィックデザインの違い
課題例
課題に基づいたフライヤーデザインの制作と批判 課題に基づいたフライヤーデザインの制作と批判 課題に基づいたフライヤーデザインの制作と批判 課題に基づいたフライヤーデザインの制作と批判

第1回「フォントの選び方」

開催日2014年9月20日(土)
時間14時〜17時
場所創造社リカレントスクール三宮校
テーマDesignSalonKobeについて
フォントの選び方
フォントの選び方
  • フォントの選び方がわからない
  • フォントを選ばないとどうなるのか?
  • フォントを間違えて選ぶとどうなるのか?
  • フォントについて
  • フォントの分類
  • フォントを選ぶ5つの基準
  • 商用で使えるフォントについて
  • フォントとユニバーサルデザイン
スライド抜粋
フォントの選び方 フォントの選び方 フォントの選び方

第2回「PhotoshopでのWebデザイン」

開催日2014年10月4日(土)
時間14時〜17時
場所創造社リカレントスクール三宮校
テーマPhotoshopでのWebデザイン
IllutratorでのWebデザイン
Webサイトの制作フローでPhotoshopやIllutratorを使うのはどこか?
PhotoshopでのWebデザイン
  • Fireworksの開発中止も決まっているので移行するなら今!
  • Web用の設定をしっかりと(RGB、px、解像度72px/inch)
  • レイヤーを整理すること
  • HTMLで表現するテキストはアンチエイリアス無しに
  • 画像ファイルの数が多いときは専用のフォルダを作る
  • トリミング時の「境界線の許容値」は2pxにすると美しい
  • 境界線のぼけを防ぐ:ベクトルツールと変形をピクセルグリッドにスナップ
IllutratorでのWebデザイン
  • 長所:直感的な操作、長い歴史、シンボル、SVG
  • 短所:写真の加工が苦手、容量が大きくなりがち、パーツ毎の書き出しが面倒
  • Photoshopと同様設定が大事
  • アートボードを活用する(ページの分割、表示範囲の指定も)
  • スライス機能は議論の余地あり
Webサイトの制作フローでPhotoshopやIllutratorを使うのはどこか?
ワイヤーフレーム
コンテンツを配置した骨格図
ラフ
意見を言える余地を残す
制作の初期段階で修正できる
カンプ
カンプ=確認用レイアウト(Comprehensive layout)
部分的に差し替えが可能な要素を含む完成品

第3回「プレゼテーションとデザイン」

プレゼンテーションとデザイン
素晴らしいとされるプレゼンテーション
スティーブ・ジョブズ氏による米スタンフォード大卒業式式辞書き起こし
ではなにがプレゼンテーションをよくしているのか
(討論と報告)
知識や思いを効果的に伝える方法論
6つの原則「シンプルである、意外性がある、具体性がある、信頼性がある、感情に訴える、ストーリーがある」
プレゼンテーションのプロによる指導の動画と資料の使い方
Melissa Marshall: Talk nerdy to me
プレゼンテーションのデザイン
情報デザイン+ヴィジュアルデザイン
情報の分類:アルファベットを分類してみる
ビジュアル的な区分
空洞がある
大文字と小文字が相似形である
一筆書きができる
線対称
点対称
直線のみでかける
曲線のみでかける
曲線と直線からなる
n度回転しても読める
転がる
3D化して自立する
上部が点か線か
小文字表記でベースラインを突き出るか
半月形を含む
使用用途による区分
日本語の母音かどうか
元素記号に使わている
単位になる
英単語の中で連続使用される
トランプで使われている
ガンダムのシリーズ名に含まれる
仮面ライダーのシリーズ名に含まれる
音楽のコードに含まれる
野球チームの略称
文型の表記に用いられる
数字の英語表記で頭文字になるか
ローマ数字を構成するか
Adobeのソフトウェアのロゴに含まれるか
服や飲料のサイズになるか
読みによる区分
長音を含む
濁音や半濁音を含む
読み方が複数ある
拗音や促音が含まれる
カタカナ表記で3文字以上
発音時に口を閉じるかどうか
任意の区分
順番に数で区切る
キーボードでの表示位置

記事のデータ

文責IDIA.JP
公開日2014年10月18日
カテゴリー
タグ
関連する記事

記事を共有する