勉強会、セミナー｜こいけやクリエイト｜豊田市、長久手市　各種印刷物＆ホームページ制作

2013年4月16日勉強会へ行っています。

こんにちは。ある時はこいけやクリエイトの技術担当。スタッフのみはるです。

新年度が始まりましたね。私は専門学校で講師の仕事もしているので、新しい人達と出会えて新鮮な気持ちです。
教える仕事をしていると、自分がどんどん学びたくなります。

普段の業務でHTMLとCSSと向かい合うのも楽しいですが、最近はJavascriptやPHPを仕事で触らせてもらっているので、これまた新しい楽しみが増えています。

プログラムがやっと楽しくなってきた30歳です。Web技術は面白いです。

話は変わりますが、最近、有志で集まるiPhoneアプリの開発勉強会へ参加させていただいています。

ここでは完全に学ぶ側です。学びが楽しいです。
それぞれが自習という形で制作していて、疑問にぶつかったらお互いに助け合うという勉強会です。私は助けられてばかりですが…。

本を持って行き、プログラムを写しながら部分ごとに勉強しています。

私が作りたいのは、動く絵本アプリ。

娘のために手作りしたいものが色々あります。（＾＾）

ライフワークとしてプログラムを学び、それを色々なことに生かせていけるといいな〜と思う今日この頃です。

2012年12月9日 WEBデザインハンズオンセミナー vol.1に参加しました

未だにガラケーを使っている咲姫です。なにか？

12月8日（土）basecamp Nagoyaで開催された

「プロのデザイン手法を盗み取れ！WEBデザインハンズオンセミナー vol.1」

に参加させて頂きました。

講師は個人的にも大変お世話になっております、

グラフィック・WEBデザイナーの岡本偉武君。

私よりも年下 (；´Д｀) 24歳です。

偉武先生は大学でがっつりデザインを学んできたわけではなく、

自分で一生懸命勉強してこの業界へ入ったそうです。

自らが経験した就職活動期の思いや、

「WEBをつくってみたい！業界に入りたい！だけどどうしたらいいかわからない」

といった人が意外と周りに多いことをきっかけに、このセミナーを企画。

これから業界を目指す人に頑張ってほしい、自分も何か協力できれば

という思いを持ち、実際にここまで行動できるのはとても素晴らしく尊敬します。

そんな偉武先生のセミナー内容をちょっとだけご紹介します。

※当セミナーはこれから業界を目指す人、入社したばかりの人などを対象としています。

★前半の約2時間はWEBについてゼロから学べる座学でした

・WEBデザインをする前に知っておきたい基礎知識

→時代はインターネットメディアなんです

・WEBに関わる会社ってどんなところがあるの？

→実際の企業を例に挙げてわかりやすく解説

・WEBの職種ってどんなのがあるの？そしてお仕事の流れは？

→営業〜プログラマまで全て説明してくれました！

・WEB業界を目指す人へこれからどう行動していったらいいかアドバイス！

→WEBにどう携わっていきたいか、明確に！など先生の経験からアドバイスをいただきました。

昔から常々思っていたのですが、本やインターネットに書いてある就職アドバイスはどうも

頭に入ってきませんでした。リアルさに欠けるというんでしょうか…

でもこんなに歳の近い人が、自分の経験をもとにお話をしてくれることで

「自分もできるんじゃないか」という気を持たせてくれる効果は少なからずあると思います。

・今さら聞けない、インターネットの仕組み

→ほんとに、今さら聞けなかったです（笑）これですっきりしました。

・WEBサイトの価値・値段

・WEB用語

・デザインの基礎

→デザインにはルールがあるんだよ、こうするとスッキリするデザインが作れるよ

と実際にレイアウトをつくって見せてくれました。

参考サイトや書籍もたくさん紹介。

★後半はハンズオン！

クライアントからのWEB制作依頼メールをもとに、

グループでWEBのレイアウトを考えました。

1案は一般的なレイアウト。もう1案は挑戦的なデザインを。

挑戦的なデザインは、みんなぶっとんでて楽しかったです。

ぶっとんだデザインがでてきても、的確にアドバイスをする偉武先生。さすがです。

最後にPhotoshopでWEBのボタンづくりをしました。

もっともっとやりたい事がたくさんあったようですが、

内容の充実した勉強会でとても良かったと思います。

なんといっても、偉武先生は若くて話しやすく、デザイナーぶっていないので（笑）

名古屋の若者たちにとってはとても頼りになる存在なのではないかと思います。

こういった人がもっと増えるといいなぁ。（私はなれませんが…）

第２回も期待しています！偉武先生！

2012年9月30日 HCD-Netセミナーin名古屋2012 (第6回)に参加しました

久しぶりに長時間寝たら、1日中眠かった咲姫です。

2012年9月29日(土)、HCD-Netセミナーin名古屋2012 (第6回)に参加させて頂きました。

今回のテーマは「感動体験から商品を発想する　XB法ワークショップ」

講師は株式会社グラグリッドの三澤直加さんです。

XB法=eXperoence ＋ Brainstorming
(感動のメカニズムを表したキーワードを使い、言葉を掛け合わせることにより、
新しい「体験」を発想する方法)

手順は以下の方法をとります。

1)チーム内で「自分のことで何か発見したことはありますか？それはなぜ気がつきましたか？」
の問いに対し、感動体験の意見交換をします。

2) テーマを設定し、その情報を可能な限りポストイットに書き出す。
今回のテーマは「人生を豊かにする日常の記録方法」

3)３つのキーワードセットを選び、イメージをふくらませる。

①価値観…「思い入れがあった」を単純に別の言葉で言い換える→大切な人に貰った、長年使って来た、ずっとやりたかった、ずっとそばにあった。
②対象…「進歩成長を感じられる」記録したい情報
③体験…「いとおしい」と感じた時にやりそうな記録の仕方→心にやきつけた、友人に報告した、ブログに書いたetc

4)イメージを掛け合わせる

3)で出たイメージをバラバラにして掛け合わせする作業を行います。
本日盛り上がった掛け合わせ

価値観→何個も持っていた
対象→作った料理メニュー
体験→ハグした

5) 上記の掛け合わせを具体的にサービス化する

この際、顧客を具体的に想像し、この人にとってどんな体験が嬉しいのか？　どんな風に実現できるのか？を考えるのがポイント
4)の掛け合わせから出た意見↓

ハグするものってなんだろう？？　好きな人？ペット？ぬいぐるみとか？

具体的に話を進めるうちに「料理をつくったら犬服をプレゼント」というキーワードに到達した我がチーム。

イメージは膨らみ、ついにA社のYさんは見かけによらずこんなイラストを描きはじめました。

オムライス犬。

か、かわいい(≧∀≦)

おすわりしちゃった

6)　以上からシナリオを展開し、発表します。

このXB法の良い所は、顧客感動をダイレクトにアイディアに繋げられるということ。
しかもイメージの掛け合わせをすることにより、新発想が展開できます。しかも顧客目線で。
という認識であってるのでしょうか(汗)
確かに、イメージの掛け合わせで、こんな面白い発案会議になるとは思いもせず…
テーマに沿った発案ができたんではないかと感じています。

このXB法で、「NUboard」というノートタイプのホワイトボードが発売されたそうです。
その時の内容が下記ブログに掲載されておりますので、ぜひご一読を(自分に向けて言っています)

・石井力重の活動報告

本年度、3回ものHCDに参加させて頂きましたが、この勉強内容をこいけやクリエイトで生かすことができるのだろうか…

何かしら身になっていると信じたいです。

2012年8月6日 1ランク上を目指す為のWeb配色入門に参加しました

スタッフの吉村です！

2012年8月4日(土)、1ランク上を目指すためのWeb配色入門の
勉強会に行って参りました。

配色って深いですね。とても勉強になりました。
簡単ですが、ザッと内容の方をご紹介したいと思います。

まず色でできることとは何か？
・美しく見せる事
・使いやすくする事
・他のサイトと区別、差別すること
 そして配色で大事な事とは？
・Webサイトの目的をくみ取り、それを達成させること
・目的をくみ取っても、デザイナーにきちんと指示できなければ工数が増えるだけ
・とりあえず3案とか言わせない（←これ良くあるな〜と）

○色はセンスではなく、知識とコミュニケーション
○配色とは色を決める事ではなく適切な場所に適切な色を配置すること

例えば……
〈クライアントの希望する色〉
　頭の中にある色は皆共通ではない事を認識したうえで、どうするか？
　・色見本での指定をする
　・できれば１６進数のRGB値
　・同じ環境で見られるもので指定

〈クライアントの抽象的な言葉〉
　「高級感が欲しい」→「○○○のように高級な感じ」
　出来るだけ、具体化してあげる

と言ったようにクライアントと作り手が同じ共通認識の元制作していくと
何案もだしたり、クライアントの好みなどに流されずに1案で進めていく事ができる。
（大事ですね☆）

企画段階『どうしたいのか？？』その後の見通しも考える
例えば……
　○今あるサイトの色を本当に換えていいのか？
　・売れているサイトの色を無理に換えることはない。
　・商品力も販売力もあるなら機能性を追求する。
　・変なオリジナリティは厳禁！（この色飽きた〜とかは、ユーザーはそこまで思ってない）

　○カラーブランディングをする
　・webサイトの場合は、覚えてもらう事が重要
　・他のメディアと合わせる場合は、きちんと整合させる（パンフ、名刺etc)
　・期待感を外さない（業種カラーから外れないようにする、奇をてらわない）

　○競合サイトと違う色を使う
　・同業である以上、似るのはしかたがない
　・せめて超有名店、近所の店とデザインと色がかぶらないようにする
　・競合を避けるというのは色を決める為の十分な根拠になる

　○情報量と面積
　・情報が多いとキーカラーは減る
　・微妙な色の違いは売り上げに関係ない（中小企業は）

「きちんと作られた」サイトそのものに意味が存在する場合がある。（費用次第）
先に色を使って競合を制する。

　○小さいお店はブランディングして戦う必要がある
　できれば、この段階でキーカラーを決めたい。
　その為には書類を作ろう。

　なぜ書類を作るのか？
　・理由をつける事で反論されにくい
　・明るいものと暗いもの両方作って！と言われにくい
　・打合せに参加していない第三者に見せる事ができる
　（決定権を持つ人に見てもらう事ができる）←最後に覆ることも減らせそうですね。

　何を書くの？書けそうな理由
　・ロゴのイメージカラー
　・競合が使ってるから
　・情報が少ないからイメージで埋めようとか　etc

A4、1枚くらいであっさりめ。流れがわかれば十分です。
その中に競合サイトをいくつか並べてみる。
ワイヤーフレームに着色したものを載せると完成予想図を想像させやすくなる。
これは、できるだけ早い段階で出すことでデザインがひっくり返りにくくなるのと
手戻りを減らす事ができる利点がある。

■□■基本配色のテクニック■□■

よく使われるテクニック
・常にいくつかのテクニックの組み合わせで出来上がっている
・背景や周囲との色の差を常に考える
・情報の固まりに色を配色する

〈ドミナントカラー配色〉
・同系色の配色
・トーンでそろえた配色〉

〈トーンオントーン配色〉
・比較的に明度差のある同系色配色

〈トリコロール配色〉
・コントラストの強い3色で使う配色

〈セパレーション〉
・引き締めたり、和らげたりする
・色の分離はコンテンツを見せるのに重要
・余白の取り方も大切

視線を引きつける色は？
・彩度の高い暖色系の色は強力。（ただし周囲の色による）

明度差で文字を読ませる
（読めないサイトは価値を下げる）
・必ずモノクロにしてチェックしよう（重要な情報が見えているか？）
モノクロで読めないものはカラーでも伝わらない
Windowsではカラードクターでモノクロに簡単に見られる。

『サイトを作る上で、いい写真は無敵である』
写真にお金をかけられるならその方がいい。
（サイトだけじゃないけど、私も常にそれを思っていた。写真にお金かけよう！）

■□■最後のまとめとして■□■　

○コミュニケ−ションの為に
・指示できる色見本を持って行こう
・好み以外に話せる材料を持って行こう
・競合サイト探しは重要ですよ！
・（ここは聞き逃してしまいました。。）

○より良いビジュアルの為に
・色の分量はディレクターが決めよう！（デザイナーが困る）
・どこをどう見せたいか考えれば、配色テクニックは自ずと絞られてる

です。

配色も奥が深いですね。
安易にセンスだと思っていた自分が情けなくなりました。
より良い仕事の為に勉強会で学んだ事を実践していきたいと思います。

ありがとうございました。