Fork me on GitHub

役立ちぬ開発史、それはただのブログ

覚えておくといい、ブログの時代は終わる。いつかその内、きっとたぶん…

WCAF vol.11「Design」のレポート(スライド・感想・メモ)

| Comments

朝は曇天、昼は晴天、夜は雨天の中、福井に本社を置く株式会社 永和システムマネジメントさんで開催された、WCAFという福井でウェブ制作している人たちで行われる勉強会に参加してきました。こういう勉強会に参加すると、デザイナーさんやフロント側の人がどういう風に考えているのか、自分に無い視点からの学びが非常に多く、すごく為になる気がします。(きっと為になってます!) 北陸地方で開催される勉強会に参加するのは、昨年は就活があり、今年は研究に追い込まれて、気づいたら1年ぶりくらいになってるのかな?そこまでは、まだ経ってはいないと思いますが、それくらい久しぶりです。今も研究に追い込まれていて、来ている場合ではないのですが、そういうときにこそ息抜きは必要なのです。 べっ、別に、研究から逃げてるわけじゃ(ry

コンテンツを意識したデザイン思考

[@toybox_design][3]さんのセッション ####感想 デザインについて基礎から勉強になった。フラットデザインは知っていたけど、iOS6のようなデザインをスキュアモーフィズムと言うのは初めて聞いた。 デザイナは、何でフラットデザインはあまりよくないと言っているのかを詳しく解説した感じの話。結局は、iOS7はダメっという話。フラットデザインについて、大して意見とか考えを持ってなかったけど、言われてみればそんな風に考えれなくもないと面白かった。今度から、ちゃんと意識してサイトとか見よう。 ####メモ デザインには、狭義と広義の2つがある。 - 狭義のデザイン - 設計したものに対して具体的な形を作る これはデッサンして、清書するイメージらしい。 - 広義のデザイン - 下書きを含みつつ企画・計画する これのイメージは、忘れました。 - 目的に対してのアプローチで、コンテンツの良し悪しが決まる。 僕らが何かデザインするときは、目的があるとのこと。 - 訪問 -> 観覧(ユーザに分かりやすい気付き)-> 行動 ユーザの行動には目的があるらしい。 デザインはユーザの働きの中で、観覧の部分にアプローチする。 ** Skeuomorphism スキュアモーフィズム** 感覚的な気付きを与えて、直感的な行動を促す。 この具体例は、音楽のミキサー。 音楽をやっている人は、感覚的に使える。 スキュアモーフィズムの問題 - 3次元を2次元で表現する限界 **FLAT DESIGN** この例として - Windowsのメトロ - アップル - gmail シンプルな図形を用いて、わかりやすさ(目的)を強調。 今回は、IOS7に絞った話。 * 訪問 -> 観覧 -> 触る -> 予想 -> 行動 iOS6と比較して、感覚的な気付きがなくなっている。 そして、ユーザのステップが増加した。 Webサイトの例として - flaticon - http://www.flaticon.com/ サーチボックスにフォーカスがあたる。 ダウンロードするとき、ボタンを強調する。 **スライドロック解除**

赤ちゃんを例に。
IOS6は見た目で分かるが、IOS7はテキストで分からない。

iOS7は学習型のコンテンツ

  • 学ぶこと自体をしなければいけない。

フラットデザインのメリット

  • コンテンツに集中出来る
  • インタラクティブな仕掛けがやりやすい
  • 画像使わないので読み込み速度が早い

フラットのデメリット

  • 感覚的な部分を装飾で伝えにくい
  • インターフェイスに対し、より学習を伴う
  • 長期的なユーザに対し、対話的な仕掛けが必要

iOSカレンダー

  • 視認性が悪い。

提供としようとした体験と最適な体験が不一致

  • 目的達成のVisionをしっかり持たないといけない。

そのために、要件定義とプロトタイピングをしっかりする。

  • 要件定義
    • ユーザが抱えている問題
  • コンセプト・ダイアグラム
    • ユーザの行動予測
  • サイトマップ
    • 実際に作るサイトの構造
  • ワイアーフレーム
    • コンテンツをどう置くのか?
  • プロトタイピング
    • POP
      • https://popapp.in/
    • invision
      • http://www.invisionapp.com/

ほどよいスキュアモーフィズムを組み込んだフラットデザインがあればいい。

What's MVP、MVP Global Summit

@xin9leさんのLT

感想

Microsoft MVPは、勉強会などで話してないと受賞できないことにビックリ。てっきり、ゴリゴリのプログラマが受賞するものだと思ってた。精通してなくてもいいと言っても、技術に結構深くまで詳しくないと無理なんだろうって、気がまだする。MVPとっても、永続じゃないからすごく大変そう。でも、受賞したときのメリットがメチャクチャ羨ましい。

メモ

C#でMVPを取得

Microsoft MVPはどんなものなのか?

  • コミュニティリーダーが貰える
    • マイクロソフトの出している技術に精通していて、勉強会などで話している人
    • 技術に極めて精通していないと貰えないわけではない

MVPは「ありがとう」という気持ち。

** MVPの人数 **

  • 世界:3700名
  • 日本:200名
  • 福井:2名

受賞カテゴリーは幅広く、多岐にわたる。

** 受賞のメリット**

  • Microsoftの製品が1年間無料
  • 本社に招待
  • カンファレンスに招待
  • 未発売の新製品の提供
  • 先行チームへのフィードバック

MVPは、Microsoftが行う社外協力者への投資。
制度の循環はうまく回っている。

おまけで付いてくるもの

  • Microsoftのブランド
  • 本の執筆依頼
  • 勉強会の登壇依頼
  • 転職に有利
  • Microsoftのページに記載

** どうやって受賞するのか? **
申請は年4回(1月 / 4月 / 7月 / 10月)。
申請内容は、過去1年の実績。

  • 登壇回数
  • ブログのページビュー数
  • 書籍の部数など

応募が多いから、客観的な数字が大事!

** 審査の流れ**

  • 日本の事務局 -> 本社 -> 製品チーム

審査の相手は世界!

MVPを受賞しても、常に活動しないと次も取れないため、危機感がつきまとう。

Microsoftは、MVPを4000人に増やそうとしている。
募集を頑張ってるらしい。

** MVPのイベント**

日本から、200人中60人参加。
内容は、毎晩パーティ!

プログラマ & デザイナのコミュニティの作り方

@satococoaさんのセッション

感想

P4Dを事例に、デザイナ向けのプログラミング活動コミュニティがあるよっという話。エンジニアがデザインを学びたいってことはよく聞く、実際30名募集に80名の応募があったみたい。でも、デザイナがプログラミングを学ぶってのは稀な感じに思ってた。P4Dみたいなコミュニティができてるから、いるにはいるみたいってことはわかったけど、少なそう。都内だからコミュニティが上手くいってるだけで、地方とかはやっぱり少なくて上手くいかなそう。北陸でプログラミング学ぶなら、近くにあるものを探すか、P4Dに頑張って参加するか、自分で作るかしようってきな感じかな。増えてほしいなぁ。

メモ

P4Dとは

  • デザイナー向けプログラミング学習会
  • http://prog4designer.github.io/
  • デザイナとプログラマと集まって、Webやアプリを作ったり、相談したりする場
  • 詳しい人がすぐ近くにいるハッカソン

ハッカソンは最近(2013年以降)、異業種と行っている。
企画とデザイナとプログラマなど。

なぜデザイナ&プログラマ?

  • たまたま出発がデザイナ
    • あるデザイナがCakephpを教えて欲しい -> 教えるの自分一人だとしんどい -> コミュニティを作って負荷分散
  • 手を動かす者同士、相性が良い。
  • WEBでは、作業において両者の垣根が低い

P4Dの活動内容

  • 都内で月2回のミートアップ
    • セミナーではない
    • デザイナがRails触りたい -> じゃあ教えてあげるよみたいな
  • たまにイベント
    • ハッカソン
    • プログラマ向け、デザイン勉強会(需要が多い、30名募集に80名応募)
    • Middleman Meetup

P4Dの特徴

  • デザイナとプログラマの出会い
    • デザイナとデザイナの出会い
  • Ruby / Rails
    • バックエンド色が強い
  • プログラミング好きが多い -> 教えることも楽しい。
  • プログラマ主導

プログラマの文化の共有

  • ソーシャルコーディング
    • Githubを中心とした
  • 効率化
    • ツール、アジャイル、黒い画面
  • Web、アプリの良さの教諭
    • これ良いよね〜、クソだよね〜、そしてお互いに理由を聞く

ソーシャルコーディング

  • Githubはコードの置き場ではなく、中心としたコミュニケーションの場 -> SNS
  • PullRequestなどのコミュニケーション
    • デザインテロが成り立つ、喜ばれる

Githubにデザイナも混ざってほしい。

"良さ"の共有

  • 必要最低限のコミュニケーションの先へ
    • こうしといて〜、よろしく!で終わってる
  • デザイナとプログラマ両方の視点で考えられる
  • UI / UX / 手触り
  • "良さ"をもっと語り合うべき
    • iOSイマイチだよね〜など

Design for Programmers

ツールにもデザインが求めらている。

凝った開発ツールのサイト

  • fabrication
    • http://www.fabricationgem.org/
  • bundler
    • http://bundler.io/

bootstrapの登場・普及

  • twitterのは、デザイン界のしまむら

モバイルデバイスの台頭 -> 機能に対してのフォーカスの大切さ 

デザインビギナーズ

@netwillnetさん主催。
プログラマがデザインを学ぶ。
P4Dの逆。

P4Dの課題

  • ニーズが多い
  • スケールアウト
  • ものづくりの場
  • 成果物の出るコミュニティ

今後の展望

  • P4Dがもっとできて欲しい。
  • コミュニティは特化して欲しい。
    • 初心者向け、Rubyなど
  • "楽しい"は作れる

P4Dの作り方

  • 運用可能な運営体制
  • 少人数
  • オープン
  • 互いに尊敬・感謝

P4Dの理念
目指しているのはGive&takeではない、ともにものづくりを楽しめる仲間のいる場

Programmer's Brain

再び@xin9leさんのLT

感想

すごく共感した。当たり前になっている習慣を、こういう風な発表で言われてみると特殊なんだなと思った。普通ではなくなってしまった。逆にデザイナはどんな風に考えているのかが気になる。学生と社会人とで、内容の質に違いはあるにしても、概ね同じなんだなぁ。

メモ

Programming for Designers

プログラマの性質

  • 情報収集と娯楽
  • 情報収集源
    • 50%:facebook
    • 30%:twitter
    • 20%:bookmark
  • SNS中心

同じ業界の技術に精通した人と繋がっているから、SNSを見るといろんな情報が入ってくる。

快適こそ全て

  • 携帯3台目
  • PC4台
  • IMAC:32万円

カナ入力したらローマ字に戻せ!
プログラマはいつ考えるか、お風呂の中。

仕様相談中は全力でコーディング

  • 頭の中でコーディングして、どうやって作るかを考えている
  • できます
    • もう出来る事がわかっている
  • ちょっと待ってください
    • なにか知らない技術が必要

プログラマの美学

コードは芸術

  • コメントの書き方
    • 次のプロダクトに触る人のことを考えているか
  • 改行・空行の入れ方
    • 訳の分からない空行
    • 1行とか5行とかバラバラに挟む -> いい加減な人
  • 命名・設計の統一感
    • 同じことしているのに、入れてる名前が違っている -> いい加減な人

楽するために労力を惜しまない

汎用化・一般化

  • 将来の推測
  • 仕様変更への耐性強化
  • コードの共有

プログラミングのコツ

  • 人が話すように書く
    • 最初は荒く
    • 少しづつ細かく
    • ドリルダウン
  • 話の粒度が大事

最初は、課題に対して、なんとかすることを大雑把に簡単に言う。
なので、ちゃんと同じことを考えているか確認が重要。

プログラマは各視点で考える

電話のサービスを作る場合

  • 発信者
  • 応対者
  • 携帯電話
  • 通話呼び出し

常に色々な視点で考える

プログラミングに曖昧がない。
あんなふうに作ってじゃ、作れない。
こう作ってじゃないと出来ない。
なので、ココはどうですか?とか、細かく聞くのを面倒くさいと思わないで!
周りのプログラマを労ってあげよう。

DESIGN for FUKUI のススメ

@taisukefさんのLT?セッション?

感想

一日一創をやりたげたのに、今年は更にブログまでやっていたことに驚愕した。しかも、休まず続けれていることが、半端ない。あそこまでの人が、頑張っているのを見ると、身が引き締まる。オープンデータに関しては、前々から関心はあったので、馴染み深い内容だった。今度、行われるCode for Nagoyaの立ち上げイベントに向けて、モチベーションが上がった。

メモ

一日一創
http://fukuno.jig.jp/

プログラマは作らなきゃダメ!
2012年に365日作品を作った。
作るだけじゃだめだ!
2013年は一日一ブログ。

デザインとコード

  • デザイン for 福井
    • オープンデータ = ライセンスフリーなデータ
    • 熱いのは行政が持つ膨大なデータ

行政サービス -> イケてない
民間がサービスを作る -> イケてるものが出来る
行政はサービス作らないから、楽だよね

オープンデータはWebの本流

  • ティム・ バーナーズ・リー

データシティ鯖江

  • 30種類以上のオープンデータ
  • 50以上のオープンデータアプリ
    • 内48個は@taisukefさん

2013年内閣が動いた

  • 6月14日 世界最先端 IT 国家創造宣言
  • 6月18日 G8オープンデータ憲章

オープンデータをやると言っちゃった。
政府主催のアプリコンテスト開催決定

  • http://www.opendata.gr.jp/2013contest/index.html

オープンデータ福井が熱い

福井市

  • クリエイティブ・コモンズ・表示継承

鯖江市

  • オープンガバメントサミット

Code for X

  • Code for America
  • Code for Japan
  • Code for Kanazawa
  • Code for Sabae

シニア X オープンデータ
おじいちゃんも教えるとすごいアプリが作れる。

Code for Fukui

Code for Americaの人が来て言った。
「正直プログラマよりもデザイナが大事」
そのとおりだ〜。
デザインがイケてないと、見てもらえない。
サイトのデザインを変えたら、PVがあがった。
デザイナ大事!

DocPad と Ghostlab で Web 制作をスピードアップしよう

@shirokuro331さんのLT?セッション?

感想

DocPadとGhostlabの紹介。主にデモで終わってくれたので、楽に聞くことが出来た。華麗なライブコーディングを見させてもらい、DocPadがすごく便利で、さっそく使いたくなった。デザイナ向けのツールぽいのに、ターミナル使うってのは以外だった。素晴らしいでもだったけど、Ghostlabの方はアッサリしていて、お金払って買う魅力を得ることは出来なかったなぁ。すごく楽になって、便利らしいけど、あんましデザインやったことないから、あの短時間ではよくわかんなかった。

メモ

webデザイナは大変

  • webデザイン
  • コーディング
  • マーケティング
  • ディレクション
  • 分析・解析
  • その他いろいろ

もう無理でござる、楽したい
そこで、DocPad と Ghostlab

DocPad

  • http://docpad.org/

DocPadとは

  • コーディングを効率化
  • skeletonというひな形
  • preprocesser

各マシンにインストール
黒い画面と呼ばれるターミナルを使う

デモ

  • docpad runする
  • すると、cssフレームワークを選択できる
  • 選択したら、自動的にファイルをネットから取ってきてくれる
  • ファイルを取ってきたら、ブラウザで確認する
  • bootstrap選んだから、bootstrap一式をそろえてくれた
  • 中身を変更すると、自動的にページを更新

bootstrapのスニペットを用意しておくと便利。
かなり早く作業ができる。

情報

前回の話を、speakerdekにスライドをあげてある。 -> 見つけた。

qiitaにも投稿している。 -> このへんかな。
http://qiita.com/tags/docpad

こもりまさあきさんのブログに書いてある。 -> これか。
http://blog.gaspanik.com/

Vimeoもある。 -> あった。

Quickcast Compressed from komori, masaaki on Vimeo.

Ghostlab

  • 有料:49ドル
  • テストツール
  • http://vanamco.com/ghostlab/

サイトからダウンロードする。

Chrome, Firefoxの両方で見ると両方連動して操作ができる。

こっちも、こもりまさあきさんのブログで紹介がしてある。
コレ。
http://blog.gaspanik.com/

お金かかるが、非常に楽ができる。

ズルいデザインテクニック2013 + セミフラット version

1つめ

2つめ

@kencloさんのセッション

感想

エンジニア向けのデザインの話で、会場はデザイナが多くて外した感があったみたいだけど、自分にはクリティカルでした。内容は、デザインについてのTipsがぎっしりと詰まってました。あまりに濃厚すぎて、ついて行くので一杯一杯でした。とりあえず、スライドをじっくり見れば大丈夫らしいので、スライドが必要になった時に見るリファレンスなのかな。デザイナには当たり前のことなのかもしれませんが、エンジニアでデザインに興味ある人は、知っておかないと損な話でした。経験を積めば、エンジニアもある程度のデザイン力はつくみたいです。デザインできるようになりたいと思いながら、怠けててホントごめんなさい。

メモ

フラットデザインは難しい

  • アフォーダンスの必要性
  • コンテンツとフレームワークの差異
    • メリハリが困難
  • 紙っぽいデザインで今風

セミフラットデザインの提唱

  • 大事なところはグラデーション
  • さり気なく立体感をつける
  • 控えめなリッチ感

ツールは、SassとCompassを使うと楽。

Tips

細かくはスライド見てね!

  • ズルい線
    • 黒と白の線を合わせると掘り込んで見える
  • ズルいtext-shadow
    • 文字の白い時と黒い時はやり方違うよって話
  • ズルい背景
    • 木柄とかは使いやすいと
    • ブックマークレット
    • ズルいグレー
  • ズルいグラデーション
    • 大胆なグラデーションは難しいよ
  • ズルい配色
    • キーになる色はSassで変数にして管理
    • アクセントカラーはメインカラーの反対色と言われているが、うまくいかない時がある
    • 真逆からちょっとずらした方がいい
    • 一概に言えない
  • ズルい角丸
    • デカイとよくないよっという話
    • Compassつかうと楽だよ
  • ズルいbox-shadow
    • エンジニアは色を濃くするとかダメなことする
    • 無難に使っとけって話
  • ズルいボタン
    • これまでの技術でボタンが作れる
    • 中のpaddingが大きのが今風
  • ズルいフキダシ
    • 使うときにスライドを見てみて
  • ズルい数字
    • ポイントになる英数字だけを大きくしてメリハリをつける
  • ズルいフラットデザイン
    • うまくいくフラットデザイン
      • 寂しくならない
      • 手抜きに見えない
      • 使いやすさを担保
    • 半分ベタ塗り
    • 写真を使う
    • ごく一部にアクセントカラー

フラットデザインの法則とズルいデザイン = セミフラットデザイン

ズルいデザイン実践編

2つめのスライド
デザインは、実際に自分が作ったものに、具体的にアドバイスされるのが、一番身につく

事例

  • we love heroku
    • http://welove.herokuapp.com/
  • @ppworks
    • https://twitter.com/ppworks
  • herokuを使って作られたデザイン
  • デザインをリニューアルしたら、楽しくなった

この話かな。
http://www.genuineblue.jp/posts/weloveheroku-design-renewal/

ロゴがダサい

  • herokuっぽいもの
  • google fontで探そう
  • 作ったものはmixinしておくと便利

ちなみに、ズルいデザインテクニックのMixinをまとめたGem。
https://github.com/mahm/zurui-sass-rails

詳細ページ

  • bootstrapでいう.wellで枠を作らない
    • エンジニアは何かと枠を付けたがる(白だとこわい)
  • 枠はコラムとかあると使うと効果的
  • 行間も大きく 1.7
    • ブログとか文字が多いのは1.8〜1.9がいい
  • 見出しは行間を詰める1.4

dlのデザインが酷い

  • tableにしたらいい
  • tableはダメでない
  • 打倒なところで使う

ブロック間は40px、ブロック内の小さいのは20px、さらに小さい10px

  • marginを変数にしておくとよい
  • 最近のwebページはフォントが大きい
  • マージンも大きめに取ると良い

URLもロゴと一緒のフォントにしよう

記事一覧

  • サブになる情報のトーンを落とす

サイトには反映されてないけど、おまけの話。

ピックアップの扱い

  • 画像を大きくする
  • 上の方に持ってくるとコンテンツ主役のサイトになる
  • 集まってきたら、投稿数を出す
    • 100超えたら
  • デザインテロ待ちのサイト
    • サイドバーでレコメンド的に表示

デザイン=装飾?

  • 絵がかけなくてもいい
  • 情報の整理+ちょっとした工夫で十分

デザイン=主役?

  • 主役はコンテンツ
  • コンテンツが一番活きる見方
  • デザインはその手段

素材をいかしたデザインに

エンジニアはデザインを覚えれるのか?

関心・興味があれば出来るのでは?
デザイナがプログラミングを覚えるよりも楽

  • ある程度のところまでいける
  • 割と法則性がある
    • 経験が必要
  • 情報の分類・整理を的確に
    • ユーザについて考える
  • 良いデザインは、的確なIA、的確なマークアップと地続き

おわりに

ブログに勉強会で聞いたことをまとめるのは初めてで、やり方も分からず書いたため、上手くかけてるかわかりません。メモは走り書きしてるので、読みにくいです。でも、どんな内容だったか、紹介されたツールとかに関しては、ちゃんと書けてると思います。(…きっと) 久しぶりの勉強会で、デザインのトレンドにを知り、馴染みのないデザインに出来る気がするのと、早くツールを触りたいという気持ちになりました。でも、研究がガガ…。

Comments