SlideShare

始めてアカウント取りました。pptファイルやpdfファイルだけでなく、keyファイルのアップロードにもしっかり対応されているのはありがたいですね。

テーマ選び

今回何を話そうかひたすら悩みました。HTML5の要素とかCSS3のプロパティとかセレクタとか･･･結構マニアックなネタもあったのですが、それだと何いってんのコイツ、となってしまいますし、何よりいま使えないネタは興味もってもらえないかもしれない･･･とか色々悩みました。結局できるだけ業務でも使えるTipsがいいなぁとか波が来ないので全然まとまらず、結局1日前にやっと決まりました。

• マークアップをしている方で、inline-block を知っている方は確認として聴いてもらえそう
• マークアップをしている方で、inline-block を知らない人は明日使える
• マークアップをしていない方にも明日使えるということで興味をもってもらえそう

などということを考えていました。そして「これは使えそうかも」と思ってもらえるような構成を意識してみました。3つの例は初めにいくほどオススメのTipsになっています。うまくいったかなぁ。

ただ、今回 inline-block の対応ブラウザにFirefox2の説明を省いています。配布版のスライド最後の参考サイトでは大変詳しくご説明されているのですが、時間の都合と、Firefox2はサポートが切られていてシェアも高くないことからあえて削りました^[2]。

スライド第1稿を晒してみる

スライドどうやって作ってるの？と聴かれたので、発表したスライドの前のバージョンを晒してみます(自己紹介は省略)。

ご覧になればわかるように、説明の構成も違いますし、文字の量も多いです。しかしこの量だとどれだけ練習しても5分で終わらないため、前日の夜に大幅に修正して当日版となっています。直す際に意識したことは、

• 例を説明して「〜ができる」より、「〜ができる」といっておいて例を説明する、という進行にした。これは、前者だと説明がだらだらになってしまいがちになってしまうため。
• 文字情報を極力減らす。第1稿には現状では困っていることをわざわざ書いているが、これはしゃべりで説明することにして時間を短縮した。
• 1枚のスライドにコードを多く載せない。コードが多いと読み取るまでに時間がかかり、しゃべりを聴いてもらえない。第1稿では1枚にHTMLとCSSがいっぺんに載っているが、2枚に分けて説明することで把握しやすくした。

普段の研究発表のスライドと大きく異なり、イメージ重視にしてみたので作るのを少し悩みました。わかりやすくなってたらいいな。

気になった作品

現在1人しかいないというWebデザイン専攻?のksk.さんのポートフォリオサイト(上画像^[2])と卒業制作のサイト。今回の卒展は彼の誘いで見に行かせてもらいました。
彼はコラージュが得意なようで、日本のサイトでは珍しい、というか海外っぽい作り方ですね。卒業制作のサイトには2つのプロジェクトがあって、

• arum antifeeling
• arumono

どちらも彼の世界観がよくでていると思いました。何よりFlashで作られそうなデザインをHTMLで組んじゃってるところが好きです。笑　来年はもっとWebな生徒と作品が増えるといいね！(彼は今年卒業だけど･･･)

カフェのロゴや名刺などのデザイン。僕こういうの好きだなー。彼は他にも作品を作ってたんですが、どれも雰囲気が違っていいなぁと思って見てました。

こちらはゼミ作品。多分何かのブランドのポスターを作る、みたいなのだと思うんだけど、このLACHICのポスターはまさにLACHICっぽくて雰囲気が一番マッチしてました。彼女もいくつか作品を展示していたけど、全体的にレベル高かった。あと個人的にはその隣の作品(多分下着のブランド)もアイデアがおもしろくて好きですね。笑

他にはゲームとかマンガがずらっと展示されていました。やたらレベルが高いのがあったりして何名かは商業誌の担当がすでについているらしいです。リアルバクマン。

今風な海外っぽいの

なんとなくこんなことをコンセプトにしていたと思います。そして、下記のようなビジュアルを目指してひたすら作ってはお蔵入り、を繰り返していたらこのデザインに落ち着いていった感じです。

• やっぱり空、雲の要素はいれたい
• (最近流行の)MacのUIっぽいデザインと質感
• 海外でありそうな雰囲気

レイアウトについてはずげー色々考えたのですが、あまり覚えてないしめんどうなので省略。

エントリータイプのアイコンは、PICOLさんのアイコンを使って一部手直しして使っています。エントリ個別ページのソーシャルサービスのアイコンは、Paul Robert LloydさんのSocial Media Iconsを。はてなブックマークとLivedoorクリップのアイコンは用意されていなかったので雰囲気に合うように作ってみました。ついでにGoogle バズのも。よかったらご自由にお使い下さい。

HTML5, CSS3でリニューアル

この時期に個人サイトをリニューアルするなら勉強も含めてHTML5でしょ、ということで(7度ほど作り直して)このデザインに固まってから、昨年の8月くらいからHTML5で作ってきました。ソース自体は基本的に単なるブログのHTML5化なのであまり面白い要素はないかもしれません^[1]。はじめにHTML5で組みだしてから、footer要素やaside要素の解釈が変わったりして何度か書き換えたりしました。

また、装飾程度ですがCSS3のプロパティも使っています。border-radiusとかtext-shadowくらいですが。パンくずリストにはWebfontsを実験的に使ってます。
JavaScriptに関しては、タブやアコーディオンなデザインをやってみたかったので、jQueryのプラグインyuga.js(カスタマイズしていますが)などを使って実装しています。

ペルソナ/シナリオ法の講義

講義は、HCDプロセスについての前回の勉強会の復習+ペルソナ/シナリオ法についてのより詳しいお話、という内容でした。

まずは、ペルソナ/シナリオ法の具体的な手法の前に、前回の勉強会の内容を踏まえた復習として、以前のレポートで書いたこと以外で気になった点を書いておきます。

• ペルソナ/シナリオ法の概要
  • ここ3年ぐらいで普及しつつあるマーケティングなどでよく用いられる手法
  • これといって決まった方法はない
  • 「ペルソナ/シナリオ法を使うだけでいいものができる！」はまちがい
• なぜユーザ像を明確にするのか
  • 商品の評価は使う人がするもの
  • ユーザ像をメンバーで共有する必要がある
    • 不明瞭なユーザ：ユーザは開発者自身(一方では必要なことだが)
    • 厳密なペルソナ：ユーザはペルソナ
  • Goal-Directed Design (目標主導型設計)
    1. ペルソナが目指すゴールを決める
    2. ゴールまでのシナリオを考える
  • 「優れた開発者ほどユーザのことを考えながら作らない」
    • 基本なこと：ユーザのことだけ考えているとイノベーションは生まれない
    • ユーザを要所要所に参加させる(ユーザ参加型デザイン)ことで、穴を埋めていく
• 文化の違いによる問題点
  • 日本：高コンテキスト社会
    • 行間を読む、空気を察する、など
    • ペルソナ法が浸透しにくい
  • アメリカ：低コンテキスト社会
    • はっきり示さないと伝わらない
    • 常に頭の中身を具体的に外に出す(外化)習慣がある
      • 刑事物のドラマで「壁一面に犯人のことを書き出して悩んでる場面」ってよくあるよね
• ペルソナ/シナリオ法の利点
  • ユーザ情報の理解の促進
  • コラボレーションの促進
  • 一貫したユーザ評価
    • ペルソナを基に評価ができる
    • 「ペルソナはそんなことしません！」

そして、前回よりも詳しくペルソナ/シナリオ法の具体的な手法について説明されました。

• インタビューの手法
  • ペルソナの作成には非構造化インタビューを利用
  • 2種類の非構造化インタビュー
    • デプスインタビュー
      • 根掘り葉掘り詳しく聞く方法
      • 例：心理カウンセラー
    • エスノグラフィックインタビュー
      • 現地の人に対象のものを実際に触りながら聞く方法、、Web制作ではこちら
      • 例：グルメインタビュー
  • 対象者自身は問題や不都合に気づいていないため、よりよいものを使ってもらい比較させることで発見を促す
• 問題シナリオ作成時の留意点
  • サマリ報告ではなく、「生っぽさ」を失わないこと
  • 行動のステップを描写すること
  • インタビューで実際に使われた言葉を効果的に利用するとよりよい
• KJ法でまとめるときのポイント
  • ポストイットには「動詞(〜する)」で書いてまとめるとわかりやすくなる
• シナリオを書くときのポイント
  • キャッチフレーズをつけるとイメージしやすくなる
• シナリオの種類
  • アクティビティ・シナリオ：やることを書いたシナリオ
  • インタラクション・シナリオ：やったことを書いたシナリオ
  • 相互に変換したり、かき分けるとユーザの行動がわかりやすくなる

前回同様、実践されている写真を交えた大変わかりやすいお話で夢中で聞いていました。
この後、今学んだばかりのやり方を早速実践！ということでワークショップがはじまりました。

ワークショップを通してわかったこと

今回は上図のような課題が与えられました。(浅野先生のブログ記事からお借りしました。)
ワークショップの様子は浅野先生のブログのレポートをご覧になると雰囲気がつかめるかと思います。
今学んだばかりのものをいきなりやってみている上に、時間がないのでもう必死でした。

そして、実践するとやはり思っていたものと実際は全然違いました。IA100を読んだりしてなんとなく頭にあったものの、2人分インタビューして、ポストイットに書いて、まではなんとか手探りでやったのですが、そこからKJ法で分類するのが難しい。「インタビュー数が少ないと後が大変」と先生がおっしゃっていたのはその通りで、2人分の結構対照的なことが書いてあるポストイットをうまくまとめ上げるのは苦労しました。

個人的な反省点は、課題である醤油への本質的欲求をしっかり意識してまとめる作業することが作業に必死で結構頭から離れていたことです。
完成したペルソナとシナリオを見ると、解決への道(=醤油を意識したペルソナとシナリオ)が見えにくいなぁと感じました。インタビューする上で、ユーザが醤油に対してどのような欲求や考えがあって行動に繋がっているのか、をもっと意識していればよかったのかなぁと。

「ペルソナは諸刃の剣」であることを実感しました。ペルソナが的外れなものだと、その上に積み重なってくるものがすべて破綻してしまう、素人には危なすぎます。うまいペルソナをつくるにはとにかくいっぱいペルソナつくって経験を積む必要があることを身をもって感じました。
そういった意味で、浅野先生の要所要所のアドバイスは本当に的確で勉強になりました。きっと、こういう経験が豊富な方に師事して経験を積んでいくのが一番の近道じゃないかなぁと感じました。

今年の抱負

今年も昨年と同様Web編とプライベート編に分けて書きたいと思います。

昨年の反省会

2009年初エントリにもえらそうなことが結構書いてますね･･･。

[SESSION-1] 名古屋のWeb制作会社2009年を振り返って
名古屋のWeb制作会社のみなさん

このセッションでは以下の制作会社のみなさんに、この2009年に力をいれたことや制作事例、気になったことなどを15分程度で取り上げていただきました。
以下に気になったことを書いておきます。

• トライデントコンピュータ専門学校 : 水野さん 原さん 堀尾さん 河口先生
• 山崎デザイン事務所 : 長谷川さん
• アップルップル : 山本さん
• スーパーエレメンツ : 中村さん
• モンキーワークス : 古庄さん
• マール : 増田さん
• アクアリング : 岩田さん

[SESSION-2] 2010年に飛躍するための7つのキーワード
長谷川 恭久　さん　(could)

ヤスヒサさんによる2010年(というかこれからのWeb)で注目すべきキーワードと、それに自分を対応付けていくためのプレゼン(鼓舞)、というありがたいお話。いや、ホントに重要なお話だと思ったのです。

まずはポイントとなる7つのキーワードについて僕なりにお話をまとめてみます。

• OSの多様化
  • OSらしいソフトを作るためのガイドラインが存在
    • 使いやすさのヒントはOSにある
  • ニーズに合わせたハードとOSの開発が広まっている
  • OSの特徴を活かしたデザインの提案が重要
• リアルタイム
  • 時間がなくて忙しいから広まった
  • 人は今すぐの反応を期待し、「今」を楽しむようになった
    • リアル感を感じるのに貪欲になっているのでは
  • ビジネスにおいてもリアルタイムは将来必須
    • これを実現できる部署がないからできない
    • Twitterのようなコンセプトだけがリアルタイムではない、ということに注意
• Eco・IT
  • ITとEcoは切り離せない
  • 情報の透明化＝ブランド
  • 企業/個人のエゴでおわらない
• トラッキング・アラート
  • 必要なときだけ丁度良い情報提供が重要になってくる
    • 顧客との新たな関係
  • 企業はサービスプロバイダーへ
• 情報発信の民主化
  • 情報発信のコストは限りなくゼロに
  • リアルタイムなコンテンツ発信へ
• アウトソーシング
  • ユーザテストの低価格化
    • 何でも自家製にする必要はない
  • 柔軟性が今後の鍵
• 情報のポータブル化
  • データはよりコンパクトへ
  • データとデータがつながり始めている
    • (情報の賞味期限を表現している)マークアップが重要

体系的にまとまっていますが、やはり我々が知りたいのは「具体的にどうすればいいんだろう」とうことです。それについていくつか具体的なお話をしていただきました。

たとえば、マークアップでは、マークアップと表現のバランスに注意して1ページ1テーマ・なるべく絞ることを意識したり、他サービスとの連携^[1] などの工夫をする。また、ページだけでなく情報をデザインする意識でいること、などを挙げられました。

また最後の方に軽くおっしゃっていた、Webの特性を活かすこと、例えば典型的な特徴がコピー&ペーストなのに、必要な情報が画像(容易にメモやスケジュールに記録できない)、などは避けることが重要というのは、簡単なTipsですがなるほどなぁと思いました。

今回のお話は2010年じゃなくても、もう少し先にすごく生きてくるお話だったんじゃないか、感じたのでした。

忘年会

冬のWCANのメインとも言われている忘年会ももちろんありました。場所はいつもの国際会議情の展望レストラン パステルで。

まずはじめに、事前に募集されていた2010年のWCANのロゴが、勉強会での3組による決選投票の末決定しました。
決まったのはセッション1でも前で作品紹介していたトライデントさんの堀尾真衣さんのロゴでした！おめでとうございます！

僕も1点応募したのですが、かすりもしませんでした。笑

こんなの。あえてこれまでになさそうな色を選んでかっちょよく作ってみたら、決選投票の3つはすべて一代目ロゴの4色でかわいらしい感じのが選ばれていました。完全に読み違えた･･･。

で、忘年会では学生の方が多く参加されていたのでお話させていただきました。とても楽しいのですがやはりいつもあっという間ですね。もう1時間長かったらいいなぁ。
今年も大変お世話になりました。おそらく名古屋にいてWCANに参加できるのは次のSpringで最後でしょうか。とっても寂しいです。

関連記事

• [開催情報] WCAN 2009 Winter
• [報告] WCAN 2009 Winter
• [Twitter] Twitter / Search – #wcan
• [SESSION-1] 名古屋のWeb制作会社2009年を振り返って
• [SESSION-2] 2010年に飛躍するための7つのキーワード
• WCAN 2009 Winter で紹介したサイト一覧 : could

設定方法

1. Firefoxのロケーションバーに「about:config」と入力してEnter^[1]
2. フィルタの検索バーに「browser.gesture」と入力
3. マルチタッチジェスチャーで設定できる項目が複数表示されます(上画像参照)。
4. 設定したい項目の「値」をダブルクリックするとそのジェスチャーをした際のアクションを編集できます。
5. 設定が終わったらFirefoxを再起動すると使えるようになります。

設定項目のジェスチャを書いておきます。

browser.gesture.pinch.in, browser.gesture.pinch.out

ピンチイン、アウト(2本指)

browser.gesture.swipe.up, browser.gesture.swipe.down

上方向、下方向にスワイプ(3本指)

browser.gesture.swipe.left, browser.gesture.swipe.right

左方向、右方向にスワイプ(3本指)

browser.gesture.twist.left, browser.gesture.twist.right

左回り、右回りにツイスト(2本指で回転)

設定できるアクション一覧

アクションは沢山用意されており、以下に使えそうなものをメニューバーの項目名に沿っていくつか挙げておきます。
さらに多くの項目がStrings of my incoherenceの記事で紹介されています(英語)。

cmd_newNavigator, cmd_newNavigatorTab

新規ウィンドウ (Command + N)、新規タブ (Command + T)

Browser:OpenFile, Browser:SavePage

ファイルを開く (Command + O)、別名でファイルを保存 (Command + S)

cmd_print

プリント (Command + P)

cmd_close, cmd_closeWindow

タブを閉じる (Command + W)、ウィンドウを閉じる (Command + Shift + L)

Browser:AddBookmarkAs

このページをブックマーク (Command + D)

Browser:Home

ホーム

Browser:BackOrBackDuplicate, Browser:ForwardOrForwardDuplicate

戻る (Command + [)、進む (Command + ])

Browser:ReloadOrDuplicate, Browser:ReloadSkipCache

更新 (Command + R)、更新(キャッシュをスキップ) (Command + Shift + R)

Browser:PrevTab, Browser:NextTab

前のタブ (Command + Shift + [)、次のタブ (Command + Shift + ])

cmd_fullZoomReduce, cmd_fullZoomEnlarge

縮小 (Command + -)、拡大 (Command + +)

cmd_fullZoomReset

(ズームを)リセット (Command + 0)

Browser:OpenLocation

ロケーションバー (Command + L)

Tools:PrivateBrowsing

プライベートブラウジングを開始 (Command + Shift + P)

History:UndoCloseTab

閉じたタブを元に戻す (Command + Shift + T)

サンプル

下の画像の上にポインタを持ってきてみてください。

使用した画像ファイル

わかりやすいように2pxのボーダーと背景色を設定しています。

viewmore.gif

HTMLで利用した画像です。

viewmore-hover-after.gif

CSSのhover時に利用した画像です。「CSS ロールオーバーのアクセシビリティを少し考えてみた」の時とは違い、透明部分がない画像になっています。

HTMLコード

これは以前と全く同じです。

<a href="#" class="viewMore">
  <img src="viewmore.gif" alt="過去の記事一覧を見る" width="142" height="20" />
</a>

CSSコード

プロパティはわかりやすい順序で書いています。

a.viewMore {
  display: block;
  width: 142px;  /*viewmore.gifの横幅*/
  height: 20px;  /*viewmore.gifの縦幅*/
}

a.viewMore:hover:after {
  content: url(viewmore-hover-after.gif);  /*viewmore-hover-after.gifを挿入*/

  width: 142px;  /*viewmore-hover-after.gifの横幅*/
  height: 20px;  /*viewmore-hover-after.gifの縦幅*/

  position: absolute;
  margin-left: -142px;  /*viewmore-hover-after.gifの横幅分マイナス*/
}

ちなみに、今回はa.viewMoreをブロック要素にしていますが、この指定は必要なくても動作します。このサンプルではline-heightが指定されている関係でafter疑似要素で挿入した画像との縦位置がずれてしまうためにこのようにしているだけで、.css_rollover_using_after-pseudo-element p {line-height: 1;}とかすると、ブロック要素とする必要もなくなります。
つまり、ブロック要素からインライン要素まで幅広く使える手法になっています。

しくみ

1. hover時にa要素の後ろ(:after)にcontentプロパティでviewmore-hover-after.gifを挿入
2. 「position: absolute;」で挿入した画像をa要素の真後ろに配置
3. 「margin-left: -画像の横幅;」でviewmore.gifの真上に移動

という流れです。after疑似要素は、IE8が::afterに対応していないため、:afterを使っています。

どうやらFirefox、Safari、Operaでcontentプロパティによって挿入された画像の出現位置が異なるようで、試行錯誤の過程で「position: absolute;」とすると、どのブラウザもa要素の真後ろに挿入画像がいくことが判明しました。

ですので、まだ十分な検証はできていませんし、hover時にのみviewmore-hover-after.gifを出現させると画像を読み込むタイミングがどうなるのかよくわかりません。そこのところが分かる方はぜひご教示ください。

各OFF環境での動作

CSS OFF時

イメージがそのまま表示される。
hover時は変化なし。

画像OFF時

イメージの代替テキストが表示される。
hover時もテキストのまま

JavaScript OFF時

問題なし。

もともとすべてCSSで制御しているので、もちろんCSSがOFFの時は何も変化ありません。ただ、前回と違って、画像OFF時に元の画像が消えてしまうことがないため、よりアクセシビリティは高いのではないかと思います。

考察みたいな

この方法ってすでにどなたかが見つけて実践されているんでしょうか？IE7以前では使えないのですが、今後IE8がどんどん普及してくれるようになれば、この手法も使えるようになる、ような気もします。

僕はPure CSSなところが好きです。

HCDプロセスと新しいデザイン教育
浅野 智　先生　(横浜デジタルアーツ専門学校)

随時メモを取っていましたが、ここでは特に印象に残ったこと・勉強になったことを過剰書きで。

• IT社会の問題
  • 情報が多すぎて理解できないこと
  • コンピュータが難しくて使えないこと
  • 作り手・使い手の顔が見えないこと
    • 技術さえあれば同じものが作れるわけではなく、コミュニケーションなどを通じて身につけてきた経験が必要
    • これがユーザーエクスペリエンス(UX)
• ユーザ中心設計の思想
  • UX(ユーザが良い経験をすること、経験のデザイン)をデザインすることが重要
  • フィリップス社のデザインセンター：「橋をデザインするのではなく、川を渡るシステムを作れ。」
  • Google MapsをそのままWebサイトに貼るのはダメ！
• HCDデザインの特徴：ユーザ参加型のデザイン
  • 宗教みたいに「ユーザを考える人になりなさい」といいたいわけではない
  • ユーザ自身が気がついていない問題をインタラクションの中から見つけ出し、デザインに反映
• ユーザに聴けば分かると思ってる人は大間違い：コンテキストで理解する

そして、ここからはISO12407の循環プロセスに沿って、各プロセスを説明されました。

1. ユーザ調査：おざなりになりがち
   • 一回でも参与観察しておくことが大切
   • 優秀なデザイナは参与観察を自然にやってる
   • 観察からこそデザイン(問題解決)が生まれる
2. 情報の視覚化
   • 10人のユーザを10%喜ばせるのではなく(90%は不満だから)、1人のユーザを100%喜ばせることが大切！
3. 情報のモデル化
   • ネイサン・シェドルフのモデル
   • L(ocation)A(lphabet)T(ime)C(ategory)H(ierarchy)ですべて分類可能
   • Webでいえば：地図、検索、更新情報、メインメニュー、ローカルメニュー
4. ユーザ評価
   • NE比解析
     • エキスパートとノービスのデータを取って、その比をとる
     • 3倍の差が出たはとこ、ノービスが慣れればエキスパートになれる

大変わかりやすいお話でした。今回のお話は高校の校長向けのお話の再演だったようで、Web制作とは少し分野の異なる内容もありましたが、「様々な分野に適合可能」というお言葉にもあるように、Web制作に置き換えてもとても参考になった内容だったのではないでしょうか。

また、レポートとしては、トライデントの生徒さんのブログの記事が詳しいです。

参考リンク

• 情報デザイン研究室 [先生のブログ]
• 情報デザイン勉強会＆懇親会 – ウェブDeBLOG
• IA勉強会 | おいつけおいこせ！