※全4本構成なので、通して見たい方は、再生リストをご覧下さい。
DevLOVE HFは、運営側だったので、この時間帯は市谷さんのセッションにいたのでした。懐かしいなぁ。
ではなくて、何度観ても、よくわからないところがあったので、セッション内でも薦められている『ストーリーテリング』も読んでみる事にしました。でも、一読しただけでは何も掴めなかった。
エクスピリエンスジャーニーマップ は、観てるだけでも楽しいわけですが、主旨を読むと、フューチャーセンターみたいなことが書いてあって、とてもタイムリーなのだった。
なので、理解する必要があると思うわけですが、何で取っ掛かりにくいと思ってしまうのか、そこを本をさらに読んで解明したいと思います。
六本木ヒルズアカデミーで開催された合田誠さんのトークセッション に参加してきました。
あんまり聞いてなかった
「みんな疲れてるから直感が大事なのかもしれない」と素直に思った。
つまり、ただのサービスで頭を使わせてはいけない。
というか、サービスなのに、頭を使わせることの意味が分からない。そんなレベルで考えて行きたい。
労力は最小限に抑えることが大事であり、
かつ、楽しさが得られることを優先する。
そのために、芸術面として、こういうふうに表現すればいいのか！を貯めて行くのもありなんだろう。
人は、理想の先輩がいなければ、反面教師としてみていたはずの先輩と同じような行動を取ってしまうという。そうなのであれば、いい見本をたくさん見る事、まねぶことが学びの第一歩というわけです。
正直、全体的にアニメを芸術化したようなイメージがあったけれど、作品の完成が1992だといことを考えれば、インパクトはあったのかなと思える。それまでの美術の歴史を知らないが、評価側にも何かイノベーション的なものを感じたりもするのでした。
いいものをいっぱい観て行こう。
CAさんで開催されたAndroid UI勉強会(Android Bazaar Conferenceアンコール企画)に行って来ました。
- Honeycomb Gallery を写経しよう。
- 一端、フラグメントを実装してからABCなどの動画を見た方が理解できる。
- サンプルとして「TED」のアプリ
→Fragmentにしておくことで、レイアウトや画面遷移の変更に対応しやすい。- サンプル「Instagram」
→Activityは一つ、残りは全てFragmentで実装している。
- Designパターンを知る
→Androidのデザインパターンとして知られている方を知る
→実例アプリでどう活用されているか事例を見る- デザインパターンとデザインガイドラインは別もの
：ガイドラインは心得、操作とインタラクションの説明、名称の説明
→おすすめなデザインパターンサイト androidpatterns.com
→webページにも引用できそうなスタイルがたくさん載ってる- マルチプラットフォーム対応に耐えるパターンを！
☆iOSネイティブアプリのガイドラインはマルチプラットフォームに応用しにくい！
→ボタン1つだけのせいで、いろいろと考えてあげなきゃいけない。
→戻るボタンを毎回念頭に置いて作らなきゃ行けない
→設計的にはガラパゴス！
→Androidに慣れれば、WindowsPhoneにも対応できる！pattern > ダッシュボード
- 難点：使うとワクワク感がなくなる！
- 解決：アイコンをオシャレにすればあり！
pattern > Actionable
- 対応方法：ピクトグラム力＝デザイン力が求められる！
pattern > Segmented Control
- tabと似たような見た目、機能だが、tabではない。
- 同じデータを切り口を変えて表示したりする際に使用する（ソート順やキーワードなど）
- 見た目をSegmentedにしたのに、クリック後に全然違う情報に飛ぶのはイケてない（その場合はtabを）
- 見た目も意識しましょうぜ
pattern > Expandable List
- jQueryナイズな見た目
- 内包リストが多いとよくわからなくなっちゃう
- 親カテゴリに対して子カテゴリがある
- 複数の子カテゴリが表示できるものと、一つだけ
- カテゴリは開きっぱなしにしたほうがオススメ（せっかく開いたのに、別のクリックしたたびにクローズされたら、ストレス）
pattern > Tabs
- 言葉のセンスが必要
- 選択肢は３つぐらいにしておくのが大事
- どんどん右にスライドさせるのもあるけど、1画面には３つぐらいがおすすめ
pattern > Carousel
- 見てくれがいい！
- キャンペーンページとかに使用する。
- 気分で決められるような、感性に訴えかけるような内容がよい！
- 横にスライドするっていうのをわかりやすくするのが良いよ（はっきりとアクセスできることを示すべし）
dialog
- モーダル ：押さないと先に進めない／必ず手が止まる／必要最低限に絞るべし
- モードレス：押さなくても進める／トースト（よそ見しても済むような内容）
- ボタンは、右の方が押しやすいのか、左の方が押しやすいのか
→ボタンの結果により内容を変える必要がある場合は、モーダルのほうがいいかもね実際に使う時は・・・
- ゼロから悩むと疲れるのでパターンをあらかじめ選んでから考える
- 型がある場合は実装側も楽やねん → トリッキーな内容にすると実装者も困るぜよ
- まず動くものを作りたい場合は、Designパターンを利用するのがよろし。
Done is more better than xx?
Android3.0以降だとFragmentが使える？はず。私、2.2しか持っておらず、使った事なかったので、やんざむさんの話についていけませんでした。ただ、使いたいとは思ったので、書籍は購入！ついに、Android端末を買っちゃおうかなという次第です。
矢野サンの話はとても面白く、特にデザインガイドラインを読み始めたところだったので、これだけじゃ実践レベルじゃないんだなと気づけたところがとても良かった。デザインにおけるデザインパターンをもう少し勉強しようと思います。
iPhoneやandroid各社の出してる設計指針を読むのも良いけど、あくまであれは「守」の話で、あれを前提に話が進んで行くのだという事を理解して、次のステップへ進むわけです。
さぁ、ガイドラインの次はパターンを学ぼう。
pasonaさんで開催されたモリサワと池田さん(@tikeda）のWebFonts活用セミナーに行って来ました。
Session by モリサワ
フォント作成会社であるモリサワの、Webフォントのつくり方と想いが共有されました。
なんと、1つのフォントを作るのに、検討から作成まで3~4ヶ月、場合によっては、1年かかるそうです。
キープレイヤーが手書きで主要フォントを作成し、それをスキャナで読み込んで、メンバで協同作業と・・・。
職人技を感じました。（作業着にしているのもこだわりなんでしょう）
2月7日、モリサワは日本語Webフォントサービス「TypeSquare」を2月22日より開始すると発表した。当初提供されるフォントは154書体。年内は無償で利用できるキャンペーンが実施される予定になっている。
Session by tikeda
はてなから、2012年4月よりクックパッドへ転職された池田さん（@tikeda）が講師でした。
ちなみに、WebFontとは、今まで、ローカル環境に依存するしかなかったfontをブラウザが用意することによって、制作者側の想いのままにデザインできる比較的新しい機能のことです。（だってそんなに見かけないし、ブログの仕組みとして見かけない）
事例と参考サイトの紹介を軸に進んで行きました。
正直、紹介されているフォントの名前がわからなかったので、
Fountなど、「具体的にサイトのどこに使われてるのか検証するツール」がChrome Extensionにあるので、これを使って、どの部分にどのフォントが当てられるのか見て、デザインの幅を広げてほしい
を早速取り入れてみました。
How to use Webfont?
strength and weakness
Let’s try TypeSquare!
twitterのTLを使ったデモンストレーションがありました。
twの内容からテキストのフォント、サイズ、カラーが変わるようになってます。（面白い！）
「ねむい」などネガティブなワードであれば、グレーでへにゃへにゃした匂いそうなフォントで表示されると、「楽しい」などポジティブなキーワードであれば、ピンクでかわいらしいフォントで表示される。
プログラミングもできるデザイナーとは池田サンのことを言うのかもしれませんね。
また、サイトではアイコンとして利用するフォントも使っています。
（あとで質問したところ、ブラウザ表示できないかも対応としては、本当に必要なアイコンであれば、避けるとか、あらかじめ対応策として、似たような画像を作成して置き換えるとか、代替案を考えておく必要があるとのことでした）
もちろんこのサイトでは、Responsive Designを意識しており、スマフォやタブレットで表示させた時も崩れずに対応できますよ、と。
さらには、タイムラグ対応として、表示自体には時間はかからないけれど、作業中のアイコンを見せたり、fadeさせて表示させたりしたそうです。
つまり、「いかにユーザにストレスなく魅せられるか」をDesignしていくのが大事と！！
Knowledge of WebFonts
- 知識としてだけでなく、まず何か使ってみよう
- 自分の目でそれが、Webfontsの出番なのかをちゃんと判断しよう。
⇒「画像は画像の良さがある。WebFontsは画像の代用品ではない。」ということを意識しよう。
⇒WebFontとして使うことによる面白さ。
⇒ここは必要で、ここは必要でないと見極めることが大事- 画像は画像での美しさも感じる
- ちゃんと検証をしよう（その先にユーザがいる事を常に忘れずに）
単純に画像は想いから、パフォーマンスアップのためにWebFonts使うのかなと思って見ていたので、これを聞いて良かったです。
あくまでもDesignの手段としてWebFontsを取り入れてはいかがでしょうか？という提案でした。
this is a new mode of expression
WebFontsが今後どうなっていくかは、その技術を使った表現が本当にユーザーが求めているものなのかにかかっているかと思います。技術の進化をちゃんと理解し、よりステキなネット社会にしていきましょう。
使える技術にしないと、それが流行ることはありません。
試して行く事が大事です。
さすが、元はてなの人というところでしょうか。
はてなの近藤さんが言っていたような胸熱の言葉で締めくくられました。
WebFontを知ってしまった以上、使って行く事が、この場に参加した人の使命であるということです。
What is the design?
私はエンジニアであって、デザイナーではないので、途中で解説のあった「基本的なデザインの流れ」も印象的でした。
●一般的なデザインの流れ
1. クライアントがコンテンツを指定する
2. 適切な表現を現すのがデザイン
⇒ 「コンテンツ」ありきでデザインを考えpageを作成する●ウェブサービスデザインの手順
1.「コンテンツ」の前にデザインが存在する
2. 作成されたデザインに対して、コンテンツを埋め込んで行く
⇒ デザインありき、コンテンツは次
デザイン要素がどこで入ってくるかという話ですが、Webの場合はデザインありきで進んで行くのです。
これからのWeb社会では、Designのイケテル所が流行って行くと聞いた記憶があります。
Designのイケテルとは、Art要素というよりも、interectiveといいますか、なじみやすいとか、使いやすいとか、gamificationのいう、つい使ってしまうとか、そういった要素をこっそり取り入れられている事だと思っています。
Be a designgineer
まずは、WebFontsを使ったサイトを作ってみましょう。
お手軽に使うのであれば、google fontsが楽かと思われます。
Be a designgineer 