ma9no

へっぽこデザイナーが書く備忘録ブログ

CSS_nite に参加してから約半年。頭に残ってることを整理してみる

      2014/12/09

 

th_16H

2014/11/22 一部修正しました。

データベースをなくして、はや一週間。記事拡充のために頑張ります!!

さてさて、失くす前までは存在していた「セミナー行ってきたよ」投稿を修復しようと考えていたわけなのですが、今さら前の事を書いて良いのかと考えました。

ちゃんと前の保存されたデータがあるわけじゃないし、残ってるのはメモしたノートとサイトだけで…

th_hollowH

(※色々あってひらめいたらしいです。 2014/11/22)

今、あのセミナーで自分に残っていると思うことを主に書いていけばいいんじゃないかと思い、2013年6月30日にあったCSS_nite  in Kobe vol.2で学んだことが今の自分にどう影響したかを書きたいと思います

th_unsplash_52a088bb6fb98_1

セミナーは合計4つの講演でなりたっておりました。

  • クロスチャネル時代のWebデザイン by長谷川敦士
  • Webデザインで考えておきたい色の話 by坂本邦夫
  • Webデザイナーのためのタイポグラフィと文字組版 by鷹野雅弘
  • Webデザインは、いったい、何を解決できるのか?! by中川直樹

どれもええ話やったなと今になって改めて思います。あの頃はhtmlしか知らなかったし…
(この中でも最後のスピーカー中川さんのTwitterは、勉強になることが多いのでフォローしてみてはどうでしょう。)

それでは、ノートとサイトを見ながら振り返りつつ、今残っていることを整理したいと思います。

1.クロスチャネル時代のWebデザイン by長谷川敦士

クロスチャネル時代のWebサイトデザイン from Atsushi HASEGAWA

入学したての頃は明確にWebデザイナー・デザイナーという職業を単なるキラキラした職業としか捉えていませんでしたが、この講演で具体的なイメージが掴めたように思います。

coming-of-age-1_l
「デザイナーはコミュニケーションの問題を解決する」

この言葉がノートにしっかりと書かれていました。たぶん冒頭であった本題への導入の中での話でしたがとても心に響きました。

あと、IAという言葉も初めて知った時でした。(これについてはIA=♡としか書かれてない)

じゃあ具体的にどうするのか?というのが本題で内容はAI/UXの話でした。(UXがわからない人は→http://e-words.jp/w/UX.html)

ノートには続けて

「データとは転がっているだけのただのノイズ」
「ユーザーと情報を繋げる」
「ユーザーの状況を理解する」

本当にその通りですよね。

今、1つのサイトをリニューアルしようとしていて、そのサイトは内容は詰まっているのですが、外観がよろしくない。

けど、情報を省くとサイトの価値が下がってしまう。これをどのようにコントロールして、配置できるかが本当に良いデザインだと、今、見返していて改めて思いました。

でも、この話はそのコントロールだけではなく、「平面的に良いデザインをしよう!!」のその先、ユーザー体験(UX)もきちっと考えようというので、今はスマホやタブレットなどでユーザーがWebにアクセスできるツールは増えているけど、それをうまく使ってUXをより向上させるかの話だったと思います。

iphone-5c-1_l
デバイスの向き不向きを考えることが大事。

場所性+一貫性+弾性、復元性+縮約性+相関性という図がノートには書いてあります。なんとなくわかるようなわからないような…

実例として航空会社の旅行前と旅行中と旅行後の動きについてやEvernoteのiPhoneとAndroidのUIの違い、Pocketの利用時間のグラフなどあり、ノートの最後にはこう書かれていました。

「ユーザーのテンションを上げる!!ことが大事」

2.Webデザインで考えておきたい色の話 by坂本邦夫

これはストレートに、わかりやすかった講演でした。講演者さんの本も持っていたのですが、あまりまじめに読んでなかったので、なんともいえないですが(坂本さんごめんなさい)それをわかりやすく!!という感じでした。

  • 美しさと機能性と印象深さを兼ね備えた色を選ぶことが大事!!
  • 読みやすく
  • 目立たせる
  • 誰にでも伝える
  • ◯◯サイトと同じようにとは危険
  • 企画のヒアリングで抽象的なのは危険
  • ベース70%サブ25%アクセント5%
  • 全体に影響しない色をつくる←薄い色
  • 分量で悩む
  • 最低限読みやすくする
  • グレースケールにするとわかりやすい!!
  • スマホサイト 背景白・文字黒
  • 可能なら予算を写真にまわせ

とりあえずノートに書いてあることを書き出してみましたが、どれも超重要ですよね。

3.Webデザイナーのためのタイポグラフィと文字組版 by鷹野雅弘

これは学校で勉強していたのである程度は知ってましたが、フォントの合わせ方とか知らなかったので、タイポグラフィの知識が拡張された感じがしました。

年、月、日を小さくするだけで読みやすくなるとか、少し調整しただけで見やすくなる考えはここで知った気がします。役立ってます!!

 

4.Webデザインは、いったい、何を解決できるのか?! by中川直樹

これはね。なんかね。

めっちゃ頭に残っていることは「パララックスには気をつけろ」という言葉です。なんでもかんでもパララックスにしとったらええんちゃうぞ!!そういうメッセージが残ってます。

あと、この話もUXを良くするにはどうしたらいいか!!という話でかなり面白かったです。

あの任天堂のCMの「ッパン!!」の音の意味とか「色は会話を0.2秒でする」とかオノマトペのすごさとか勉強出来ました。

肝心のプレゼンシートが公開されていないのですが、中川さんのプレゼンシートはどれを見ても本当にわかりやすい!!

構成とか参考にします!!

th_IMG_2453

懇親会の様子

 

th_53H

まとめ

今回、この記事を書くにあたって色々調べたりして、良い復習になりました。

2014/11/22追記 ブログを書いてて本当に良かったと思いました。

 - セミナー