SwapSkills公式ブログ（東京）

ユーザービリティテスト（ユーザーテスト）のススメ。

2011-12-21T23:52:00.008+09:00

前回の「ワークショップで学ぶ！モバイルファーストでのコンテンツ＆プロトタイプ制作」でユーザービリティテストを行ったのですが、以外にもユーザービリティテストを行った事のない人が多かったのでここで整理しようと思って記載します。今まで行っていて、また今回のユーザーテストを行っている様子をみて私なりのまとめになります。（間違っていたりしたらご指摘ください。）

なお、2008年にWebDirectonsEastで行ったAndyBud 氏は、ユーザーテストというと、ユーザーをテストするみたいなので、ユーザービリティテストと呼ぶように話をしていました。

ユーザービリティテストを行う上でのポイント

最低、被験者（ユーザー）／　記録する人　が必要
ユーザーに課題を与える（例：ECサイトの場合は購入させるステップまで）
はじめに余分な情報を与えたり、脅かしたり、誘導してはいけない
同じ課題を３人に行ってもらう
（テストに慣れるまでは）制作に関わった人は参加しない方がいい

特に「制作に関わった人は参加しない方がいい」は重要だと感じました。今回のワークショップでは人数の関係などで本人に行ってもらったのですが、失敗した点と言えます。

INTERNET WATCH（ユーザーテストの実施方法）で以下のような事が記載されています。

正しく使われて当たり前と思っていたインターフェイスがことごとく使われないのを目撃すると、たいていの人はカルチャーショックを受けます。これらのデータは、Webサイトを使いやすく改善するための貴重な資料である

このようにユーザビリティテストの結果は重要な資料であると言えます。例え、ユーザーの操作が間違っていても、それは間違いではありません。それは制作者が間違いやすい、勘違いしやすいインタフェースにしたからです。真摯に受けとる事ができるように、ユーザービリティテストも工夫が必要なのかと思いますが、まずは制作者に素直な気持ちを持つ事が重要です。

最後に、ユーザービリティテストはプロトタイプがある程度で来ていた方がいいですが途中でも行う事も可能です。

レポート：モバイルファーストでのコンテンツ整理＆プロトタイプ制作

2011-12-19T17:58:00.009+09:00

ワークショップで学ぶ！モバイルファーストでのコンテンツ整理＆プロトタイプ制作(1)を行いました。

参加された方々の（プロトタイプを記載した事が初めてという）経験則の違いなども含めて、ワークショップの進行も考えるべきだと感じましたが、大半の参加者は、「あ〜！！」っと、ヒントを見つけた方、「この方法が最前かも？」「おもしろい！」と感じられた方々だったので開催してよかったと感じる事ができました。

Tweetなどでもコメントを以下のようにいただきました。ありがとうございました。

今回はモバイルファーストということで、実際にスケッチをしてみることに。見たことあるけどやったことないので四苦八苦。
すごくためになったワークショップでしたよ。ありがとうございます！　ちょうどタイムリーでスマホ制作が進んでいたので。
昨日はお世話になりました。お疲れさまです。ワークショップは気づきが多くためになりました。また次回の開催を楽しみにしています。

人数が多かったので情報が共有できなかったのは少し残念でしたので、このブログでごくわずかですが、まとめておきますので参考にしていただければと思います。

■検索などの機能に頼り過ぎてしまう。

スマートフォンという事でリモコン的な感覚になってしまって、検索に頼ってしまうデザインになっている人がけっこういる。と思いました。
検索ボックスは一見便利そうなのですが、調べる事ができない方には不便の何者でもありません。想像する簡単な事でモバイルでの入力は面倒だからです。やっぱりクリックが楽です。もちろん、GPSなどを利用したシステムなども存在しますのでシステムに頼るのは場面もありますが、検索に限っては難しい事が多いです。ましてや、その検索システムの性能が良くなければさらに使いづらいものになります。その前になんとかなるデザイン、UI設計をしないといけないでしょう。

■別ウィンドウを考えてしまう。

UI的な問題もありますが、新世代スマートフォン（iPhone5も）はWiMAXの様な4G回線になり早くなりますが、まだ時期尚早でいきなりJSを使わない設計をするのがベストです。

■目当ての商品になかなかたどり着かない

モバイルになると、商品を全て掲載しないと思われる人が4割ほどいた開催になりました。この数値は実は少ないと思っています。今回参加された方は、先進的な考え方に興味を持っている方々が多かったのでこの数字になったのだと思います。しかしながら、全ての商品の導線をつくのははやり苦戦している様ですでした。多くの商品をスムーズに表示できるようにするを考えるIA的な要素も今回は必要だったので大変だったと思います。

■新しいUIを編み出してしまう

上記の事から苦戦して、新しいボタンなどを制作してしまう人がいました。
ボタンをワンクリックするとAページ、ダブルクリックするとBページのような。工夫をされている方がいました。これも素敵なアイディアだと私は感じましたが、ユーザーが迷ってしまうインタフェースになってしまう可能性が存在しています。ただ、こういった斬新な発想は私は好きです。（アップルガイドラインに沿っていない可能性もあり）

＞上記のような説明をさせていただいたら、納得していただき、喜んでいただいたのでよかったです。

■ 紙で記載したプロトタイプ＋ユーザーテストをしていない会社が多い

以外にも紙で記載したプロトタイプを作った事がない人が多くいました。ユーザーテストを実施したとしてもその後で行っているようなので、手直しがあった際の手戻りは大変でユーザーテストの意義もわかっていただけたようです。これらの内容はモバイルファースト以前の事ではありますが、モバイルファーストから制作のワークフローが異なれば良いなと感じました。
なかなか日本の制作現場ですぐに実現できないかもですが、手戻りは大変ですのでユーザーテストは必ず行う風潮がつけば良いなと感じました。

■素敵だと思う人のプロトタイプが何名かいました。

私が見せて頂いた方の中に凄く良く出来ている方がいらっしゃいました。昨日の場面で発表などはしなかったのですが、凄く良くできたUIでした。細かく見えてないかったのですが、もしかしたら一番前の男性も細かくプロトタイプを作成していて良くまとまっている感じでした。せっかくなので発表の場面を作るようにしたいなと感じました。

■まとめ

以上の事から、モバイルファーストを勉強したくても１日２時間では無理と確信。
（予測は着いていたので、今回は障りだけでも知っていただければと思っていました。）
パソコンサイトまで持っていくワークショップは１日がっつりのものか、10時間以上のワークショップが必要だと判断しました。現在予定としては以下の項目を今後のワークショップで行っていくつもりです。昨日は、1,2を行ったと思っていただけると良いのかも知れません。

モバイルファーストのコンセプト理解
上記を自分なりに解釈してみる
プロトタイプの書き方習得
解釈したモノをもとにサイト構成、導線を作成
全ページのプロトタイプを作成
ユーザーテストの方法を学ぶ
ユーザーテストの実施
検証結果の手戻り
パソコンサイトへのデザイン展開（１）
パソコンサイトへのデザイン展開（２）

募集の段階でわかるようにしますので、期待していただければと思います。
続けての参加お待ちしています。

Webが目指す夢。セマンティックスとは何か？今後の未来はどうなる？

2011-12-11T17:13:00.008+09:00

Facebookなどのソーシャルプラットフォームの普及によってOGPがかなり注目されています。そのメリットはすでにたくさんのブログでも紹介されていますのでぜひ参考にしていただき、ここでは、大雑把に" OGP（Open Graph Protocol：オープングラフプロトコル）をの事を、ソーシャル（社会的な友好）関係表現する規格でHTMLのmetaに記述させるもの”とさせてください。

以下、とても参考になるリンクです。

ブログで紹介されているように、OGPを追加する事で、掲載方法が変わったり、友達の友達にも掲載できたりする事で、流入／拡散ができるようになりました。これらのメリット（インセンティブ）によってWeb担当者、ソーシャルメディアを利用してサイト制作を行っているWeb制作者によってOGPが注目され組み込まれるようになってきました。

私自身も Open Graph (ソーシャルグラフ＝人の関係、信頼を表現したもの)は流入もコンバージョン率も高くなり有効だと考えています。ただ、その一方でセマンティクス化するためにOGPにだけ対応すれば良い、それだけで安心をしていても良くないと考えています。Webがより進化していく方向を見据えて構えておく必要があると思います。

以下は私が推測する近未来の出来事です。
先日米国で発売された iPhone 4S に搭載された音声アシスタント機能「Siri」は人工知能が入っています。

例えば、あなたが「あしたはあめかな？」と「Siri」に質問をしたとします。
「Siri」は文脈から「明日は＊＊＊＊です」と教えてくれます。

日本語の「あめ」には、　雨／飴という意味がありますが、人工知能を持った「Siri」は明日というキーワードから天気の事だと推測して解答をだしているのです。

＞上記内容は「Siriから始まる未来のコミュニケーションデザイン」を参照ください。

このようにWebでの検索方法が音声入力になっていくのではないかと考えています。そして思い出していただきたいのが、OGPは現段階としてmetaにしかデーターを埋め込む事しかできないという事です。１ページ１データーという考え方になっています。

ただ、検索の場合どうしても文中の言語に対して検索したい場合が多くありOGPだけでは役不足で、他のセマンティック言語が必要になってくるでしょう。

また、セマンティックスが普及されれば言葉が情報となり、また新しい仕組みが進化していくのではないかと思われます。
そういった意味でもOGPだけでなく、今後は進化を見据え広い意味でのセマンティックスに注目していただきたいと考えています。

＞参考情報「セマンティックWeb技術で表示を個人化するディスプレイ–umaが$1.1Mを調達」

ワークショップで学ぶ！モバイルファーストでのコンテンツ整理＆プロトタイプ制作

2011-11-28T17:58:00.001+09:00

無料イベントの告知やレポートなどもこちらのブログで紹介できれば良いのですが、日頃の業務でバナー掲載だけになっています。

という事でフリーイベントの内容がブログ記事には残っていないのですが、9月22日（木）に「スマートフォンサイト対応デバイスと制作現場　レスポンシブ・ウェブデザインとは何か？」の内容を、11月16日（水）に「レスポンシブウェブデザインと表裏一体のモバイルファーストを理解する」というテーマでSwapSkillsを開催していました。

どちらもとっても評判がよかったのですが、どうしてもモバイルファーストでのコンテンツ作成が現実のサイトと結びつかないとの声を聞いたのでワークショップを開く必要があるな。と思い次回のSwapSkillsで企画いたしました。

モバイルファーストとはコンセプトにしか過ぎません。どのようにアレンジしてサービス、コンテンツに組み込みのかは案件ごとになってしまうのかも知れません。

ただ、何かしらのモデルケースやガイドラインになるのは？と考えています。
このワークショップでそれらの発見をして業務に役立てていただければと考えています。

有料、無料イベントってどこが違う？

2011-11-28T13:13:00.005+09:00

SwapSkillsでは有料と無料のイベントを開催しています。
弊社でなくても日本のWeb関係の無料イベントは多く存在します。

無料イベントが開催できる仕組みとしては、イベント自体で集客（リクルート）、ブランドイメージアップやプロモーション目的と言っても過言ではありません。スポンサーにあたっても同じ事が言えます。

無料イベントだから凄い。営利の目的がなくてクリーンなどと思われがちですが、裏側では上記のような背景（目的）があることは間違いありません。身近なところとしてTVも同じ事が言えます。

そのため無料イベントでは集客が一番の目的になりがちです。集客のために良いスピーカーを出演させ集客をさせたいと考えるのですが、スピーカーに出演料を支払わない、交通費／エージェントなどをそのイベントでかけず人のふんどしで相撲を取るような事をするのにも関わらず、無料イベントが凄く、有料イベントは良くない。という記事などを目にします。それらは大きな間違いだと考えられます。

はじめはどの人でも自分をプロモーションしたい気持ちはあるので出演はされるかもしれませんが、人気のあるスピーカーはいろいろなイベントに出演しているので、有料、無料で講演内容を変えていますし、そのイベントに参加した人の質などを見てその後の出演を考えるようになります。

そして、最近活躍している海外のスピーカーは無料イベントでの出演を嫌がっていると聞きます。
無料イベントは弊社でも行っているので無料で行う事自体はありだと考えますが、有料イベントをけなすのは筋が違うように思います。

先日、無料でのイベントや勉強会に良く出られている方にスピーカーとして出演していただきました。
その方が言われたのですが、講演料が発生する事で責任がでた。とおしゃっていました。みなさんもご経験があるのではないかと思いますが、知り合いに頼まれてお手伝いするのとお金をいただいて仕事をするのは責任が大きく異なるのではないでしょうか？これは人間心理として誰でも感じる事だと言えます。
参加者にも同様の事が言え、参加費を払っているので勉強する側も真剣な人が多いという事です。

世の中のすべての有料イベントや講座の内容が素晴らしいとは言い切れないですが、上記のような心理は必ず存在します。

弊社でも関わっている WebDirectionsEast では毎年の様に他のイベントでスピーカーの引き抜き講演やインタビューなどが行われますが、ビジネスとしては「声がけする」という筋を通すのは当たり前の事なのですが、無料イベントやコミュニティになるとその意識も主催にかけてしまうのかも知れません。ただ、いくらコミュニティでも相手がビジネスとして行っているのであれば筋を通すべきだと考えます。

TwitterやFacebookなど個人でのやり取りが簡単になった時代だからこそ、またオープン＝無料＝なんでも利用してよい。という事がどこでも成り立つという風潮を消したいという思いから記載させていただきました。

結局のところ、参加する側もお客様にならない、運営する側も一番になろうとしない、互いを尊重するというのがフェアーで業界を盛り上げる材料になるのではないかと感じています。

電子書籍、電子出版の波に備えて勉強しておこう！

2011-11-07T22:51:00.011+09:00

Webと同じ技術(HTML5,CSS)であるEPUB（電子書籍）。
そのためか、注目された電子書籍元年(2010年）当初でもWebに吸収されるなどの話がささやかれた。

しかし、電子書籍にする事でパッケージ化され、記事自体のマネタイズが実現でき、リーダー（ビューアー）のメニューなど独自のお作法が作られ、Webとは明らかに異なり始めた。
(＊Kindle のHTML5サポートはよろしくない。参照）
しかし、現実は技術やマネタイズだけの話でないのが電子書籍業界での盛衰に大きく関わる。

参考になる記事を見つけたので紹介する。
【検証】電子書籍元年は終わった。日本でもアマゾンひとり勝ちの時代が目前に迫る！--DIME

上記の記事の要約は以下。

2010年の電子書籍元年から、日本でもガラパコスをはじめいろいろな電子書籍端末「Reader」が発売れているけど、「使いづらい＋通信費」などの理由で売れない。
電子書籍の出版数が少なすぎる。
アマゾンは端末(Kindle)で赤字を出しても出版で儲かる。
電子書籍は技術や製品でなくサービスビジネスだ。

実際に、1993年にはNECから電子書籍が発売されていたのだけど、失敗に終わっているのはサービス(電子書籍)が整っていなかったからなのかも知れない。時期尚早と言ってしまえば簡単だが、昨年(2010)の元年と言われた時代にそれに気がつかなかったのはちょっと悲しい感じもする。

GALAPAGOSは TSUTAYA GALAPAGOS に進化(?)しているので今後どうなるのか期待したい部分もあるけれど、書籍がデジタル化される事は目前になってきている。

しかも、アップル同様に黒船のアマゾンが来るからにはもたもたしていられない。

iTunes Store でアプリが売れるように、Amazon や paboo などで書籍を出版し、波に乗るのもあなた次第だろう。そして、そういった風潮になり電子書籍を作りたいというニーズは必ず突然とやってくるだろう。

電子書籍がブックオフにならないように、電子書籍を生かした文化を作っていきたいと考え勉強会を開催する。

Web標準 ePub3.0 で作る、電子書籍、電子出版

日時:2011年11月23日（祝：水）13:30 ～ 16:00（13:15開場）
会場:大田区産業プラザ
主催:SwapSkills
講演者:吉田健吾／境　佑司
参加費:2,600円
詳細:
SwapSkills(8)「電子書籍 Web標準 ePub3.0 で作る、出版する」

SwapSkills(7) WordPressのスマホ化！　jQuery Mobileも入れてしまおう！

2011-08-31T12:18:00.003+09:00

WordPressをjQuery Mobileを用いたスマートフォン向けサイトの作成

ブログCMSとして世界シェア No.1の WordPress。

みなさんも一度は使ってみたことはあるのではないでしょうか？

今回はWordPressにjQueryMobileを組み込んでみよう！という内容で開催されます。

現状のWordPressのスマートフォン化に伴う情報をkeitaiStyleという

プラグインなどの制作者である池田さんから、jQueryMobileを組み込みについてWordPressのコミュニティで活躍されている星野さんからご紹介いただきます。

WordPressについて細かくご存知のお二人から学べる勉強会となっています。

【イベント名】:「スマートフォン+ jQuery Mobile in WordPress」

【日時】：2011年9月17日（土）13:30 ～ 16:00

【会場】：五反田文化センター第一会議室

【定員】：40名

【スピーカー】：池田百合子 / 星野邦敏

【参加費】：2,300円

(詳細・申込）

http://swapskills.info/2011/06.html

レポート：「スマートフォンUX」SwapSkillsDoubbble(2)

2011-08-30T16:03:00.024+09:00

初対面で立場も環境も違う登壇者お二人は同じ着地点を見ていた
2011年8月20日にSwapSkillsDoubbble(2)が開催されました。
日本初のスマートフォンUXのセミナーという事で、日本のIA,UXを専門としている企業や今後主軸の業務にしようとされている企業のUXデザイナー、デベロッパーの参加が多かったイベントになりました。

今回のイベント内容は私にとってもとってもタイムリーな話題で凄くためになる内容でした。
少し驚いた事にアンディとコバヤシさんは初対面なのにも関わらず、また切り口が違う内容だったのにも関わらず同じコトをお話されていた事にとても感銘いたしました。

どんな事が共通だったのか私なりの解釈をした結果、３つありました。

１）ガイドラインはあるけれど、実際に作りながら何が良いのかを検証する必要がある
２）”楽しくなる＝好きなる”インタフェースを作る
３）モバイルウェブは２階層まで

一言で言ってしまうと簡単ではありますし、そのメソットだけを取り入れてもきっと成功はしないのだろうという事もこのセミナーに参加して感じる事ができました。

ただ、どうしても型に填めたがってしまうのが世の常だったりします。
Andyもガイドラインを利用するのは有効的ではあるけれど、WindowsPhone,Android,iPhoneのガイドラインの共通部分が少ないため、実際には難しいと解説しました。

そして、２歳の赤ちゃんがiPadを利用する動画を見せ、タブレットの中に本物があるかのようなインタフェースはわかりやすいと解説しました。

わかりやすく、楽しくなる操作は２歳の赤ちゃんでも操作でき、これは natural interface と解説し人間の本能に備わっているもので、これらを組み込んだデザインに落とし込む事が良いと解説しました。

その言葉をそのまま鵜呑みにし、リアル店舗をそのままWebに実現するインタフェースを作っているサービスをみた事があります。店舗のリアルな映像が忠実に再現されていますが、私にとっては不便なものでした。

なぜ不便か？

誰でもそうだと思うのですが、初めて行く店舗でどこに何があるのかを知っている人はいません。

リアル店舗であれば商品の陳列や客層などで理解する事ができますが、カメラのフレームのような小さな画面で適切な商品にたどり着く事は極めて難しくリアルのようなデザインが必要なのかと感じていました。

リアル店舗の実現は健常者の私が体験できる事ではありますが、２歳の子供も理解できないしょうでしょうし、身体に不充がある人も体験できません。

このようにメソットだけをそのまま利用するのはとっても危険で、言葉の裏にある本当の意味を感じなくてはなりません。

コバヤシさんは、natural interface に近いところで、使いやすいだけのアプリでなく好きになるアプリ開発をされていると解説されました。好きになってもらうために楽しくなるインタフェースを追加したと解説されていました。

次に「２階層目まで説」ですが、Andyはスマートフォンがでてきた過渡期の現段階では２階層目まではわかりやすいと解説したように、コバヤシさんも実際に作った結果、２階層目までが良いとの結論を付けました。

ただ、続けてAndyは現状のところは２階層目でも今後の利用シーンでは２階層以上の必要もでてくるし、良い方法を見つけなくてはならないと解説しました。同様にコバヤシさんもはじめは少ない機能でローンチしたが、今後はユーザーの操作も慣れてくる事も考慮し機能を追加していくと解説していました。

Andyのセッションで概念的な内容、考え方などを紹介いただき、コバヤシさんからは実際に経験した制作行程からAndyのような結論に至ったという事を教えていただきました。
そういった事を踏まえてもひとつひとつ検証しながら制作する必要があるのだとお二人から勉強させていただきました。

その他、参考になるメソットを多くご紹介いただき、質疑も長くなるほど熱い勉強会となりました。

HTML5を使うためのプログレッシブエンハンスメント：SwapSkillsFreeEvnt(6)レポート

2011-07-22T20:53:00.036+09:00

2011年7月13日（水）にアップルストア銀座で第4回目のSwapSkillsFreeEventを開催いたしました。
今回は、allWebクリエイター塾で HTML5マークアップ講座、ゼロから学ぶJavaScript講座を担当いただいています羽田野太巳さんから、「HTML5を使うためのプログレッシブエンハンスメント」について紹介していただきました。

プログレッシブエンハンスメントと言う言葉は、CSS3のサポートが違うブラウザのシェアが横並びになった際(日本では2008年頃)に話題になった言葉で、WebデザイナーにとってはプログレッシブエンハンスメントというとCSS3だけの違いを言う。と間違った認識を持っておられる人もいるようで、今回は再度「プログレッシブエンハンスメントとは何か？」とキチンと認識していただくため、そしてまだ新しいHTML5を利用するにあたってのプログレッシブエンハンスメントについてご紹介いただきました。

では、そもそもプログレッシブエンハンスメントとは何のでしょうか？
羽田野さんは、「Progressive Enhancement それは違いを受け入れること」と言います。紙などの媒体はどれも同じだけれど、ウェブの場合は違う事が当然でそれを受け入れる事が前提の考え方だと紹介いただきました。

以前、Web Directions East で来日したJohn Allsopp氏もキチンとしたHTMLであればそれだけで十分に情報を伝える事ができるので極論をいえばCSSは要らず、それより情報にアクセスできる事が最も重要だと話された事がありました。

そして、Progressive Enhancement の他に Graceful Degradation、Regressive Enhancementなどという考え方があるという事を紹介いただきました。

2009年4月5日に行われたSwapSkillsでも Progressive Enhancement と Graceful Degradation については見ている方向（目線）が違うという事で立っている場所は同じという事を菊池さんから紹介をいただいた事もあります。

繰り返しになりますが、冒頭でも紹介した様にプログレッシブエンハンスメントはCSSだけの考え方ではありません。
みなさんもご承知の様に、JavaScriptもブラウザ対応が統一化されていなく、そもそもJavaScriptを利用していないユーザーも存在し、そういったユーザーにもキチンとアクセスできるようにするという考えがプログレッシブエンハンスメントで最も重要な意味と言えます。

では、実際にはどのように制作するべきなのかをいくつか具体的な例をご紹介いただきましたので、そのひとつを以下でご紹介いたします。

例として出していただいたのは、HTML5のビデオ要素です。HTML5の新要素も同様にブラウザごと・バージョンごとにサポートが異なります。

記述方法は以下になります。

第一段階として、HTML5の新要素であるvideo要素で記述します。サポートしてないブラウザのために、mp4を第２段階で用意します。それもサポートしていないブラウザにはwebmでサポートします。それにも対応していないブラウザのためにfalshの対応も行います。もしかしたらFlashも対応していない場合もあるので、最終的にダウンロードリンクも用意する。という例をご紹介していただきました。

このように新しいものだけにサポートするだけでなく、どのブラウザでも閲覧できるように配慮した制作の考え方がプログレッシブエンハンスメントです。

今回は概念だけでなく、実際のマークアップの例を出していただいたのでとてもわかりやすく、参加者は真剣にメモしていました。

テクニックなども重要ですが、実はユーザーの事を考えた愛情のあるマークアップや制作仕様が重要なんだと理解していただけたのではないかと思います。

HTML5を使うためのプログレッシブエンハンスメント〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement

View more presentations from SwapSkills.

HTML5で作るスマートフォンアプリ：シリーズ１〜Canvas〜

2011-06-28T22:22:00.000+09:00

Webアプリケーションは、iPhone,Andriodでも動くという事でかなり注目を浴びていますが、まだまだ使われているアプリは世の中にあまり出回っていません。

ですが、スマートフォンへのWebアプリの需要が増えている現状もあります。ネイティブアプリとWebアプリとの違いに関しては、前回のSwapSkillsでご紹介させていただきました。

今回から、スマートフォン向けWebアプリケーションというテーマで、”JavaScriptやHTML5 API”を勉強しよう！というシリーズを企画いたしました。

今回は、WebデザイナーでもなじみのあるCanvasについてです。
概要とデモサイトを作りながら学ぶ事ができるようにしています。

SwapSkillsDoubbble チケット当選者発表

2011-06-18T15:07:00.000+09:00

先日おこなれた SwapSkillsFreeEvent(3) Dreamweaver CS5.5で作るjQuery Mobileを組み込んだスマートフォンサイト制作で、行われたSwapSkillsDoubbble チケットが当たるキャンペーンで当選された方を発表いたします。

当日はダブルでの当選方法でした。１つ目としてTwitterを利用してTweetされた中からスロットでチケットがその場で当たるというものを開催しました。

もうひとつは、名刺をいただきその中から抽選とさせていただきました。これらのキャンペーン情報は登録された方や @all_Web でのTweetで発表しています。ご希望の方はフォローしていただくか、イベントごとに登録申込をお願いいたします。

なお、ブログで応募していましたTwitterキャンペーンは100アカウント未満でしたので当選者はいません。ご了承ください。

お名前はイニシャル表記とさせていただきました。

Tweet当選者名：キャノンシステムウェア株式会社　M.A様
名刺当選者：ソフトバンクモバイル株式会社　H.T様

SwapSkillsへの出演希望の方が出現！

2011-06-18T14:41:00.000+09:00

SwapSkillsもあちらこちらのメディアに掲載されるようになり、注目をさせるようになってきたためでしょうか、出演されたい希望のメールをいただきました。

問い合わせのメールでは、allWebクリエイター塾の講師にも登壇いただいている手前、塾の講師や知り合いでないと出演できないのでは？と考えられていていたようです。もともと、塾のサポートという事で講座では教えきれない情報、雑談、新しい技術を伝授できればというのが狙いだったのですが、一般的には講座とSwapSkillsでの勉強会と一緒に見えてしまう可能性もあるものなんだと客観的に感じる事ができたので新鮮でした。

塾の講座を受講された方は理解されているのだと思いますが、講座とSwapSkills（勉強会）では大きく異なる事があります。これはウェブページで掲載すべきだと思ったのですが、まずはブログで記載する事にしました。

講座に関しては、基本的に実務ですぐに役立つものを体系的に抜けがないように解説しています。その中でも、テクニック、セオリー、ノウハウだけを単純に教えるのではなく、イノベーションに必要なコンセプトや概要を大切にしています。

テクニックなどの表面的なものだけを学ぶのは、技術的な事でさえ本質的な創造の力にならないと考えています。参加者が”創造できる力を付けていただく”ための場所の提供だと考えています。

賢い受講生は、弊社の講座を効率よく受講されて現場で利用されています。自分で勉強するのにも時間がかかり勤務していると業務に追われなかなかできないけれど、参加すれば時間も労力も短縮されるからだそうです。

Web業界は本当に進化の早いところですので、講師も必死になって勉強して良い情報を提供するために、いくつもの海外書籍を購入したりWeb上で勉強されています。

逆にSwapSkillsに関しては、すぐに役立つというより、マイノリティ的な内容。今後、注目されるであろう技術や情報、啓蒙などの意も含めて開催しています。

SwapSkillsではみなさまのご興味のある内容を取り上げて行く予定です。リクエストやご登壇されたい方は、どんどんお声がけしていただければ企画させていただこうと思います。

＞＞aka@all-web.org （大本まで）

SwapSkills 2011(5)「自分の価値を高めるための思想＆ツール〜クラウドサービスやソーシャルメディアの効率的な利用法　〜」

2011-05-26T22:30:00.003+09:00

例えば、Dropbox。最近では使われるようになった方も多くなりましたが、少し前まで以外に利用していない人もいたりします。Web制作者においてもツールの利用方法で仕事の効率があがる事が多くあります。

最近では、電子書籍を全て裁断し電子化する、いわゆる「自炊」の方もでてきているようです。いつでもどこでも知りたい情報をすぐにアクセスできる事は便利です。

ただ、これらを闇雲に作成していても意味はありませんし、使い方にもコツがいるかも知れません。また最近ではスマートフォンを始め、いろいろなWebサービスが誕生しているいますが、どのサービスが便利なのかは Dropbox 一つ見ても知っている人と知らない方、使い方をキチンと理解している方としていない方では仕事の効率なども変わってきます。

みなさんもウェブで情報検索したり、Webメディア.ブログ.RSS.Tweet.Facebookなどでいろいろなツールの紹介を目にしますが、実際にはどのように利用するのが便利なのか単発の情報でかわりにくくなっているのではないでしょうか？

と言う事で、今回はFacebookなどのウェブサービスを利用しつつ自分のブランドを確立させている佐々木さんに、クラウドサービスの利用方法と連携を中心に、情報収集、発信、まとめ方などもご紹介いただきます。

サービスを利用して自分自身をブランディングしていく事や、情報をまとめて効率的にまとめるなどの方法もとても重要ですが、自分を高めるための基本的な思考がなければなりません。

そこで「ユーマナー」というタイトルの書籍を書かれた中村祐介さんに、書籍のタイトル通り「自分自身がお金＝つまり自分を高く売るコツ」を紹介していただきます。中村さんご自身もご多忙な毎日を送っていますが、常に自分の価値を見いだして高める思考をお持ちになっている方でなので、中村さんの考え方は参考になるでしょう。中村さんの世界観、ユーマネー流の考え方を感じていただければと思います。

ウェブアプリやFacebookを始めとするウェブサービスを連携させて上手に利用されている佐々木宏和さんと合わせて一緒にお話がきけるチャンスはなかなかありません。
ぜひ、自分を高めるために時間を作って参加してみてはどうでしょうか？

イベント名:「自分の価値を高めるための思想＆ツール
〜クラウドサービスやソーシャルメディアの効率的な利用法〜」
日時：2011年6月19日（日）13:30 ～ 16:00
会場：五反田文化センター
定員：60名
スピーカー：中村祐介（株式会社エヌプラス）／佐々木宏和
参加費：2,000円

SwapSkills doubbble vol.1　Twitter キャンペーンでチケットを当てよう！

2011-05-20T23:13:00.011+09:00

2011年7月2日に開催されるSwapSkills doubbble vol.1が開催されます。このチケットを100名様Tweetにつき1名様に当たるキャンペーンを開催いたします。

応募方法

応募方法は簡単！

以下のTweetをご自身のTwitterアカウントで投稿していただくだけ！

「SwapSkills doubbble vol.1　Twitter キャンペーンでチケットを当てよう！以下のチケットが100アカウントごとに1名が当たります。http://t.co/js7Lv2t #swapskills_w 詳細は http://bit.ly/ltLPgX」
または、以下[Tweet]ボタンをクリックして、ハッシュタグ　[ #swapskills_w ] をつけてコメントを書くだけ！

100名目になった方のアカウントの最初のTweetをもって１つの当選枠(100アカウント)とさせていただきます。その間に同じ方のTweetはいくつでもOK。そのTweetの中から1名様に「SwapSkills doubbble 」のチケットが当たります。Tweet数が多ければ多いほど当たる確立は上がります。200名で2名様、300名で3名と100名ほとに1名の方をご招待いたします。

なお、100名様のアカウント以下の場合は切り捨てさせていただき、all_Webの公式アカウントは数の対象外となります。

みなさまのキャンペーン応募お待ちしています。

■キャンペーン概要■

日時：2011年5月21日（土）16:00〜6月17日（金）15:00
当選方法：6月17日（金）16:00 にslotで当選。様子を動画で公開。
内容：100アカウント数ごとにイベント勉強会チケットを1名様にプレゼント。
100アカウント間のTweetをTweet順に並べ番号をつけます。slotで当選いたします。

モバイルサイト制作に見る、次世代Webのカタチ「One Web」の開催コンセプト

2011-05-20T17:37:00.007+09:00

前回の記事でご案内したように、SwapSkillsは拡大版として「SwapSkills doubbble」を行う事になりました。今回は、この企画をしたコンセプトをご紹介いたします。

スマートフォンなどのモバイルの誕生によって、ユーザーのウェブの利用方法が異なりはじめました。

FacebookなどのSNSやアプリケーションなどを利用する事が当たり前になり、スマートフォンで利用しやすい専用サイト（スマホサイト・ページ）が、どの企業でも準備されるようになりました。

スマートフォンの利用がパソコンの利用より多くなれば、当然パソコン向けウェブページよりスマホページへ注力がシフトします。今年(2011年)2月には欧米では既にパソコン台数を超えていますし1年後くらいには当然日本でも同様の現象になります。

Google や Facebook では ”Mobile First モバイルファースト”というコンセプトによるウェブサイト制作が行われています。

”Mobile First ”はモバイルを中心にしたウェブサイト制作を考慮していくというものですが文章では理解しずらい考え方が盛り込まれています。

また、これらのコンセプトを理解するか否かで、ウェブページの構成・ユーザーへのアプローチ、Webを利用したプロモーション、マーケティングにも大きく関わってきます。

スマートフォンの誕生、進出で大きく変わる事になる”次世代のウェブのカタチ”を理解していただく事をコンセプトに、そこに伴う技術やスキル・コンセプトをビジネス観点も踏まえながらご紹介できればと考えています。

今からスマートフォンサイトを作り上げていく企業の担当者の方はもちろん、クライアントに提案するウェブ制作の方々に多く参加していただきたいと考えています。

【概要】
「モバイルサイト制作に見る、次世代Webのカタチ[One Web]」
2011年7月2日（土）13:00 ～ 18:00
詳細＞　http://swapskills.info/2011/doubbble01.html

SwapSkillsが拡大版として開催いたします！

2011-05-14T17:46:00.002+09:00

SwapSkillsもマンスリーイベントが常に満席になるようになりました。

そこで今回からSwapSkillsのダブル(SwapSkills doubbble)と命名し150名以上の開催をする事にいたしました。
会場変更もあり金額が少し上がってしまいましたが、いままでのように低額で尚かつ良い内容が聞ける勉強会として企画いたしました。

今までのスマートフォン関係のSwapSkillsは開催していますが、より深い内容、新しい情報が取得できるイベントになっています。

ぜひともみなさまのお越しをお待ちしています。

【イベント名】：モバイルサイト制作に見る、次世代Webのカタチ「One Web」
【日時】 2011年7月2日（土）13:00 ～ 18:00
【会場】野村カンファレンスプラザ日本橋
【参加費用】6,500円~8,500円

モバイル＋CSS3の内容で5/21に開催いたします！

2011-04-28T11:54:00.003+09:00

スマートフォンなどの端末はブラウザに WebKit が入っていてCSS3なども問題なく表示されて良いと考えがちで、以前のガラケー時代のような端末振り分けはないと思われていますが、実はディスプレイサイズ・解像度などでデザインが異なる問題があり振り分けを余儀なくされています。

iPhone 一つとっても次世代の iPhone5 ではディスプレイサイズが現行サイズと異なるとの噂もでていますし、Andriod では端末ごとにディスプレイサイズが違うと言っても良いくらい多機種が存在しています。

前回のSwapSkillsではアプリとサイトとの違いやサポート端末についてガラケー時代のような振り分け方法をご紹介しましたが、今回はそれらを回避するレスポンシブウェブデザインの考え方とスマートフォンサイト制作に便利なフレームワークについてご紹介いたします。

また、スマートフォンのデザインにおいてアプリケーションの利用も多くなりタイトルなどのテキストを画像で対応する事は皆無になります。

そこで今回は「CSS3の基本」とスマートフォンサイトを作成しながら現場で使う便利なツールなどもご紹介いただきます！Webデザイナーはもちろん、アプリ開発の方やディレクターの方に参加いただける
内容で開催させていただきます。

レポート：SwapSkills2011(3)[Facebookページをオリジナルページにカスタマイズ！ FBML廃止、進化するFacebookの利用方法]

2011-04-18T14:16:00.002+09:00

先週末行われた「Facebookページをオリジナルページにカスタマイズ！FBML廃止、進化するFacebookの利用方法」のレポートです。

震災の影響で日程変更になった事もあったのですが、多くの方にご参加いただきありがとうございました。今回はの参加者は、制作者だけでなく広告代理店や大手メディア企業の方のご参加もあったのですが、中には音楽関係だったりネイル関係だったりと直接運営される方の参加も以外と目立ちました。

裏付けではないですが、2011/4/15(金) の Web担当者Forumの記事「自治体の助成金を使ってFacebookページを開設しよう（東京23区平成23年度調べ）」でもFacebookページが助成金の対象となる区（練馬区、豊島区）もあるようでFacebook自体がいろいろな分野の方に認識され、注目をされているのだと痛感いたしました。

そんなFacebookですが、加藤氏と佐々木氏の考えが共通の認識のある方だったので異なる内容を設けていながらもFacebook自体を一環として考えられる勉強会になりました。

参加者は２つのセッションを通して「Facebookとは何か？」「どのようにカスタマイズをするべきか？」が理解できたのだと思います。

まず、加藤氏よりカスタマイズについてiframeに変更になったページのカスタマイズ方法をご紹介いただきました。実際のデモサイトとしてFBMLで作成しているSwapSkills「SwapSkillsとは」のページをwordPressで作成し、ifreameで読み込んでみるというサンプルをご紹介いただきました。

FBMLの際も同じでしたが、アプリケーションを１ページにつき１つ追加する必要があり、今回はタブでページを出すようなレイアウトを「involver」の「staic HTML」を利用してご紹介いただきました。

アプリケーションは基本的に(install)ボタンを押せば問題なく動きFacebookとコネクトできます。
involverは他にもいろいろなアプリを提供しているので英語で解りにくいですが、使ってみると良いかも知れません。

カスタマイズも今回デモのような簡単なものからプログラムを利用して行うシステムを組み込む事ができるようになりました。iframeになった事でWebページでできる事が全てできるようになったと言っても過言ではなく、Web制作の技術になってしまうため、今回は最も一般的なタブ表示の紹介でテクニック的な内容を紹介され終了しました。

その分、運営においてのポイントをご紹介いただきました。
運営のポイントとして次にご紹介いただいた佐々木氏と共通の認識があり、一貫性のある勉強にできた事は主催者側として参加者が理解されやすかっただろうと感じよかったと感じました。

次の佐々木氏よりマーケティングに関する内容をご紹介いただきました。
SwapSkillsはウェブ制作者の参加者が多いためどのようにプレゼンをしたら良いのかを
迷われているようでしたが、とっても素晴らしい内容でウェブ制作者においても考えがはっきりした勉強会になったのではないかと感じました。

冒頭に日本でも注目されつつあると記載しましたが、実際に利用してしている人はまだまだ少ない状態であると私自身は感じています。日本においてソーシャルメディア自体がまだまだ目新しい物でどのようにつきあって行く必要があるのかを知る必要があるからです。

流行っているからFacebookページを作ってみたが、ファンとこの交流まで考えて作っていなかった。ソーシャル担当は企業の顔になるためどの部署とも精通していなければならず、そういった意味でも難しい部分を秘めています。

佐々木さんは、クロスメディアは当たり前の時代に、ソーシャルメディアの価値は上がってきています。と言われました。実際に大手企業ではソーシャルを無視して成り立たなくなっています。
が、闇雲にページを作るのではなくキチンとしたコンセプトに作成する必要があり「ソーシャルメディアにセオリーはない！」の名言を残されました。今回のSwapSkillsを通してその基本理念がご理解いただけたと感じています。

最後に質問などで「ROI」に関しての質問がでました。企業としては当然の事だと思います。ただ、日本はまだ第１フェーズの段階でROIの価値に至までに達していないのが現状で、第３フェーズになればキチンとしたROIもでてくるようになりインサイトがそれを示してくれるとご紹介いただきました。

「ソーシャルメディアも一日にして成らず。」まさに、信頼と一緒だと感じました。

■懇親会は目黒のお蕎麦屋さん「旭屋」でおそばをいただきました！

懇親会は、目黒川の桜を見ながら散歩をして、目黒の旭屋さんでおそば屋さんに入りました。勉強会では聞けなかった以外が手口でファンを増やすやり方など飲んだ席でしか聞けない内容も聞く事ができました。

今後もソーシャルメディア／Facebook関係の内容を行っていきますので、その際に再度このような内容をお話いただこうと思っています。（実際にはお酒の上だったのでお話できた部分もありますが。）

ちなみに、おかめそばをいうものを人生で始めて食べました。かまぼこなどが顔のように配置？されている事からその名がついたと誰かが言っていたような？まぁ、おそばもお出汁もおいしかったのでなんでもいいかな（笑）

■最後に。スピーカーが連載している記事・書籍＆ブログをご紹介！！

株式会社TAM 加藤洋（カトウ・ヒロシ）

アートディレクター兼ソーシャルメディア・プランナー。
「Social Media 360.jp［役に立つソーシャルメディア情報配信サイト］」

佐々木和宏（ササキ・カズヒロ）

「フェイスブック facebook 完全活用術」の著者。
ブログでFacebookなどの情報を公開中！

Facebookページをオリジナルページにカスタマイズ！ FBML廃止、進化するFacebookの利用方法:SwapSkills2011(3)

2011-03-05T17:08:00.002+09:00

3 月11日よりFBML廃止になり、(旧：ファンページ)Facebookページのカスタマイズは、iframeでの掲載となります。iframeを利用したカスタマイズなので通常のHTML、CSS,JavaScriptなどが利用できるようになりより自由度が増します。

自由度が増す事で、カスタマイズ方法もいろいろな方法がでてきますが、闇雲にカスタマイズすれば良いというものでなく、マーケティングにおいてのFacebookの特性を理解し、適切なカスタマイズが必要になります。

カスタマイズのための設定紹介をはじめ、根本の考え方をマーケティングの観点から実例も加えていただきご紹介いただきます！

今回のご登壇される方も、すばらい方々でHNKにもソーシャルメディア関係の事で出演されている佐々木和宏氏と、FacebookやTwitterなどソーシャルメディア活用のノウハウ蓄積と情報発信を行なうサイト「Social Media 360.jp［役に立つソーシャルメディア情報配信サイト］」を運営しているTAMの加藤洋氏になります。

現在、書籍の入荷待ちの「フェイスブック facebook 完全活用術」1,029 円がついて2,500円で受講できる特別プライスもご用意しています！

o 開催日：2011年3月26日（土） 13:30 ~16:00
o スピーカー：加藤洋（株式会社TAM）／佐々木宏和
o 会場：五反田文化センター
o 参加費：2,000円　（1,000円ほどの書籍付きで2,500円）

▼（内容詳細）▼
http://swapskills.info/2011/03.html

スマートフォン向けサイト＆アプリケーション～ディレクション＋企画のための基礎知識～

2011-02-10T12:19:00.000+09:00

次回、SwapSkills2011 vol.2 のご案内です。

既に公募もしていて残席も少ないので恐縮なのですが、2/20に「スマートフォン向けサイト＆アプリケーション～ディレクション＋企画のための基礎知識～」と題して勉強会を開催いたします。

スマートフォンサイトの本当のメリットや実務を行っている方からの制作相場や、繁殖するAndroid端末の対応範囲など、現場での話しがたっぷり聞けるSwapSkillsならではのイベントになる予定です。

席数がのこり僅かですので、ご希望の方はお早めにお申込みください。

スマートフォン向けサイト＆アプリケーション
～ディレクション＋企画のための基礎知識～
2011年2月20日（日）13:30 ～ 16:00

jQueryモバイルで簡単！スマートフォンサイト作成|レポート

2011-02-10T02:18:00.001+09:00

本日アップルストアで、「jQueryモバイルで簡単！スマートフォンサイト作成」について開催いたしました。

みなさまの注目が凄いという事が分かるイベントで参加人数が210名以上となりました。消防法で180名ほどの参加と伺っていたのですが、以外と入れました。

みなさまのアンケート回収もかなり良かったのでメールアドレスの入力に時間がかかりますので
スライドの公開は、Facebookページに「いいね！」ボタンをクリックして閲覧いただければと思います。

今回の内容は基礎的な事になりましたが、ご紹介いただいた吉川さんの解説と白石さんのライブコーディングが良くとっても参考になりました。

以下、つぶやきのまとめです。
本日ご参加いただいたみなさまありがとうございました。

スライド▼

SwapSkillsFree|jQueryMobile [基礎編]

View more presentations from SwapSkills.

無料でのSwapSkillsを開催いたします！

2011-01-26T18:02:00.001+09:00

SwapSkillsは今まで有料のイベントとして開催していましたが、無料でのイベントも開催する事になりました。

初回は、HTML5とか勉強会主催の白石氏とスタッフとして活躍されている吉井氏を招いて、今大注目されているjQueryモバイルについてご紹介いただきます。

今後、無料でのイベントが続くようにみなさまのお声でイベントを盛り上げていただければと考えています。

Facebookで参加表明をおこなっていますので、ぜひともご登録お願いいたします。ご登録いただきますと、スライドなどのURLをご案内させていただきます。

（詳細）
「jQueryモバイルで簡単！スマートフォンサイト作成」
* 開催日：2011年2月9日（水） 19:00 ～ 20:00
* スピーカー：白石俊平（株式会社オープンウェブ・テクノロジー：HTML5とか勉強会主催）& 吉川　徹
* 会場：アップルストア銀座
* 定員：84名　それ以上は立ち見150名以上はお入りいただけません。

詳細ページ

スマートフォンページ制作　〜開発環境設定＋マークアップ＋JavaScript〜 SwapSkills2011 vol.1

2010-12-22T22:53:00.000+09:00

2011年初のSwapSkillsはスマートフォンについて開催いたします。

スマートフォン向けのサイト制作やアプリケーション開発を大きくひとつに括っても、実はデバイスは AndroidとiOSの両方が存在します。ネイティブのアプリになればJava,Object-Cと言語さえ違いアプリ開発は全く違うものになります。

ですが、スマートフォンページはどちらのデバイスでも閲覧する事ができるため両方のエミュレーターや実機で確認する必要があります。

特に、Androidは頻繁にバージョンアップされ多種多様な端末に入っているため検証方法も難しい状況にあります。
以前まで簡単に揃えられたAndroidの開発環境設定もややこしい設定が必要になりました。今回は、iOSとAndroid向けという切り口で「マークアップ」「デバイスの振り分け」「各開発環境設定」「JavaScript」を勉強していただきます。電子書籍のWebアプリをデモに解説され、サンプルコードのプレゼント付きで開催いたします。

Webデザイナー向けスマートフォンページ作成の勉強会です。ご興味のある方はぜひお時間を作っていらしてください。

今回も、金沢ではオンライン中継を予定しています！

詳細お申し込みページ

開催後記：2010(vol.10)「Faccebook活用　〜コトハジメ〜」

2010-12-15T15:13:00.000+09:00

最近話題になっているFacebookの勉強会を開催いたしました。

SNSですから、やっぱり個人で利用しなくてはなりません。
今回は、Facebookを活用されているECナビの斧田さんに個人的に便利な使い方をまた、メンバーズの吉居さんにビジネスで役立つ運営方法をご紹介いただきました。SwapSkillsでの女性の登壇者は初で且つお二人ともという事で私も楽しみにしていました。
Facebookは世界でトップのユーザーがいるSNSですが、インタフェースなどもちょっと変わりにくかったりして日本人には使いにくい！という声は今でも耳にします。実際、「私もあれ？」「どうなるの？」なんて事になったります。ですので、インタフェースについてと、友達の作り方やtwitterなどの連携もスマートに行う方法などをご紹介いただきました。
実際に管理画面に入っていただいて操作などもしてもらえばよかったかな？とも。とちょっと反省もしています。カスタマイズでFBの話や質問もあったのでFacebook 有効活用　なんてテーマで応用の勉強会も開催しようかな？。なんて思ったりしています。
その頃にはもっと効果的な広告や、日本での成功事例もご紹介できているくらいFacebookが流行っているといいな。なんて思ったりしています。

SwapSkillsのファンページも作成しています。ぜひ「いいね！」で参加してみてください。

Facebook活用としてお進めの書籍

facebook 活用　〜コトハジメ〜 vol.10

2010-11-30T00:04:00.000+09:00

世界最大のSNS facebookが日本でも突然ヒットしています。その理由もさておきながらfacebookは企業のマーケティングにおいて無視できないSNSのひとつになっています。

今回はコトハジメとして、「なぜfacebookが日本でもはやり始めたのか？」「本当に流行るのか？」その裏付けを解説いたします。また、Twitterをはじめ、日本のSNSなど発信ツールが複数になっている現状、どのように情報発信をすることがスマートなのか？　個人として、企業のソーシャルマーケティングとしてのfacebookの運用のコツなどをご紹介予定しています。

12月11日（土）14:30~17:00
東京 &金沢
2,000円（東京）1,500円（金沢）＊12月10日申込みより当日払い(2,500円/2,000円)当日払いとなります。
詳細／お申し込み