SwapSkills公式ブログ

デザイニングインザブラウザを実現するためのCSSスタイルガイドの作成（11月21日開催）

2013-11-05T16:47:00.001+09:00

アンディクラークが、デザイニングインザブラウザを紹介してすでに何年も経っています。6月にWebDirectionsEast協力のワークショップで紹介していた際にはカンプを全部ブラウザの中で行う訳ではなく、ディテールなどはPhotoshopを利用しながらも、多くのデバイスで実現させていくにはデザイニングインザブラウザが必要になると解説していた。

日本にもスマートフォンを中心に多くのデバイスが出てくる中、その流れが少しづつ広がりはじめているように思います。

とは言え、どのように今までのワークフローを変化させるかは悩ましいところではないでしょうか？

今回はデザイニングインザブラウザにも通じる、CSSスタイルガイドの作成方法をご紹介します。

スタイルガイド自体も昔からある方法ですが、これらも日々進化していますし、やり方が人それぞれ、プロジェクトごと、組織ごとにも変わってきます。

今回は多プロジェクトに関わる、WebDirectionsEastの菊池氏から、CSSスタイルガイドの基本の考え方と必要性、作り方を学びます。

効率よくコーディングするためのLESSベーシック

2013-09-16T00:35:00.000+09:00

9/18にLESSベーシックについてのSwapSkillsBuildを行います！

単純なコーディング、もう少し効率良く作業ができれば！と思った事はありませんか？

LESSを導入することで、効率よく更新作業が行えたり、色違いのデザイン案を簡単に作成する事が可能になります。

実際に現場で利用できるようになるためのシリーズ、ベーシック編です。LESSのメリットなどの解説から、基本的な使用例として構文の使い方などを学びます。

導入を検討されている、Sassを意識しているが理解しにくい等、感じられている方向けのイベントです。

スピーカーは、技術評論社　連載「LESSで3倍ラクするスマートフォンコーディング」掲載中の宇野雄さんです。

イベント名 SwapSkillsBuild(35)「LESSベーシック」
日時 2013年9月18日（水）19:00 ～ 21:00（18:45開場）
会場大槻社労士事務所
定員 20名
スピーカー宇野雄うの　ゆう (ヤフー株式会社)
参加費 3,000円（税込）

詳細／お申込み

アプリUI開発にも使えるインフォグラフィックスの作り方

2013-08-07T11:29:00.000+09:00

飛躍し過ぎかと思われそうですが、アプリUI開発はインフォグラフィックスに通じます。「長文の説明文を読ませたくない。」「間違えやすいミスを防ぎたい」これらの考えを解決するのがインフォグラフィックスはとても得意です。

インフォグラフィックスの魅力は情報整理術にあります。膨大な量、バラバラの要素、地理情報に、細かい数値。これらを文字情報で理解するには、時間を要することが多いです。より早く理解するために作られたインフォグラフィックスの工夫は、アプリUI開発に多くのヒントをもたらしてくれます。

機能性のインフォグラフィックス

インターフェイスとして、地図やマニュアルにおいてユーザーへの指示や状況を説明する、機能性をもつインフォグラフィックスから、見せ方を考えてみます。

(1) アイコンで見せる

インフォグラフィックスは概念を表す言葉のため、表現方法を広く含みます。言語に頼らないピクトグラムもその一つです。

文字が読めない外国人や、小さな子供でも瞬時に理解できるように使われているアイコンをピクトグラムとも呼びます。非常口のピクトグラムは1987年に国際規格ISOに組み込まれて国際標準になっています。制作したのは日本人の太田幸夫氏です。世界で使われていると思うと嬉しいですね。

Webサイトやアプリケーションではアイコンと呼ばれる事が多いですが、絵によって初心者にも使いやすいように用いられています。iPhoneのデフォルトアプリのミュージックではメニューボタンにアイコンが利用されています。

サービスが想定できるように、アイコンが補足情報となっています。画面の小さいスマートフォンは文字が読みにくくても情報の判別がつく、重要な役割を担っています。誰でもわかりやすいアイコンを身近な所から探してみると大きなヒントになるかもしれません。

(2) 色で見せる

人は、色が持つ印象を無意識に抱いていると言われています。では、問題です。赤色、黄色、青色に対してどのような印象を持っていますか？

心理学における色の印象を利用している物が多くあります。信号機は良い例です。

（UX&UI設計講座のスライドより参照）

iOS 7でも、赤い色は注意するべきこと（少ない充電、マイナス要素、アップデートの必要性等）を知らせ、青（緑）は、許可すること（承認ボタン、プラス要素、ログイン状態）を知らせています。

UIの話に偏っているようですが、多くのインフォグラフィックスでは色を有効的に利用していることが多いです。いかにビジュアルから早く情報を伝えることができるのか？誤った操作を行わないためにはどのように利用すれば良いのか？を考えるヒントになります。

(3) 地図で見せる

イギリスの石炭輸出量を表すインフォグラフィックです。1870年に死去したCharles Joseph Minardの作品です。この時代は手描きかと思われますが、美しいですね。地図との組み合わせで細かな説明文が読めませんが、輸出量と各地への輸出が図から読み取れます。

SwapSkillsのイベントDoubbble10に登壇される櫻田さんのビジュアルシンキングの記事で紹介されているサービスを見てみます。

PeekAnalyticsはTweetを解析して、話題に挙がっているハンバーガーチェーンをアメリカ地図上にマッピングされています。 Most Popular Burger Joins on Twitter（記事より引用）

2つの例にはおよそ150年の差がありますが、どちらも地図上に情報を可視化することで、文字情報を読むよりも大まかな情報を瞬時に理解することができます。スマートフォンのジオロケーションを利用したアプリケーションも数多く存在します。一見、機能ありきのように見えますが、どうして地図の上に情報があるとわかりやすいのか？今一度、振り返ると面白いですね。

(4) 量で見せる

同じくCharles Joseph Minardのナポレオンのロシア遠征の作品を見てみます。彼はサンキー・ダイアグラムという工程間の流量を表現する図表の先駆者でもありました。（wikipadeia参照）

量を可視化することは、Webサービスでも多く見られます。以下、Googleの天気予報では、選択した温度・降水確率・風力がグラフになって見ることができます。

Google Analyticsでも瞬時に、情報をグラフによって量を可視化します。

「わかりやすい」は「利用する」に繋がります。これらのツールが全てテキストの情報で抽出された場合、このツールを利用されるでしょうか？

最後に

アプリ開発に限りませんが、モバイルファーストの考え方が浸透した今、この小さな画面でどのように情報を伝えるべきか？は大きな課題です。あらゆる情報がWebサイトで氾濫し、より直感的に使用されるスマートフォンなどのデバイス。より、楽しく利用するためにもわかりやすく伝えるにはどうすればいいのか？これらのヒントがインフォグラフィックスには多く詰まっています。

普遍的な情報の読解、整理、そして表現を学ぶ事は、今もこれからも重要なヒントを与えてくれると思います。

SwapSkillsでは、インフォグラフィックスのセミナーイベントを予定しています。

SwapSkillsDoubbbleで「インフォグラフィックス」をテーマに開催

【イベント名】：SwapSkillsDoubbble(10)「「伝える」を掘り下げるインフォグラフィックス」: 【日時】：8月18日（土）13:00 ～ 17:00; 【参加費】：6,800円～7,800円; （詳細／お申し込み） http://swapskills.info/doubbble/10.html

インフォグラフィックス　徳間貴志さんのご紹介

2013-08-07T10:53:00.002+09:00

評価の高いインフォグラフィックが生まれる背景とは？

2002年「bowlgraphics（ボウルグラフィックス）」設立。国内外の雑誌・Webメディアのインフォグラフィックやマップデザイン、グラフィックデザインを手がける。著書に「クリエイターのための3行レシピ地図デザイン Illustrator&Photoshop」翔泳社。経済産業省ツタグラ・プロジェクト（2013年度）：アドバイザリーボード。JAGDA正会員。

大学卒業後に、広告デザイン専門学校に入学し、広告プロダクションにてグラフィックデザインやWebデザインなどに携わりました。多岐に渡るデザインの経験から生まれる作品は、様々な場で高い評価を得てます。

作品から楽しさと考えを見る

誰にでもわかる富士山とは？

All about Fujisan (Mt. Fuji)

世界遺産になった富士山。海外からの観光客も増えると予想されます。図と数字を用いて紹介される富士山の情報は、とてもわかりやすいです楽しく読むことができます。

作り方、工夫、思いについて

「ツタグラ賞」受賞！デザイナーの徳間氏に聞く　伝わるインフォグラフィックスの作り方

「日本の人口推移＜1959～2050＞」

制作過程や、考え方などのインタビュー記事が紹介されています。スライド十数枚分を「一枚にできないか？」と問われ、「それなら、受けて立とう！」と思い、制作を始められたそうです。

たくさんの工夫がされているようです。書体や色の制限、最後に使われる姿をイメージしながら作られた作品は、美しくわかりやすい作品になっています。

情報整理の秘訣を聞かれた答えは、「まずは何を見せたいのかを決めて、それを一番引き立たせるように。（※一部抜粋）」との事。軸があるからこそ、色や形の楽しさも情報を伝える術になっているのだな実感する一言です。

徳間さんも登壇されるSwapSkillsDoubbbleで「インフォグラフィックス」をテーマに開催

【イベント名】：SwapSkillsDoubbble(10)「「伝える」を掘り下げるインフォグラフィックス」: 【日時】：8月18日（土）13:00 ～ 17:00; 【参加費】：6,800円～7,800円; （詳細／お申し込み） http://swapskills.info/doubbble/10.html

インフォグラフィックス　櫻田潤さんのご紹介

2013-07-31T16:07:00.002+09:00

元プログラマーが考えるインフォグラフィックとは？

SwapSkillsDoubbbleにご登壇される櫻田さんは、プログラマー、システムエンジニア、ウェブデザイナーの経験を基に、2010年よりビジュアルシンキング運営をされています。
ピクトグラム、図解、インフォグラフィックの制作活動を行っています。

今年の5月に発売された「たのしいインフォグラフィック入門」の著者でもあります。

内容紹介を抜粋
インフォグラフィックとは、分解すると【ピクトグラム×図解】であると捉え、まずは基礎体力づくりとして前半でそのそれぞれの描き方を、そして後半でインフォグラフィックの作り方を一歩ずつ習得するという構成にしています。「自分の伝えたいことをビジュアルでわかりやすく他者に説明できるようになりたい」、そのようなニーズに応えることを目指しています。

ビジュアルシンキングの記事をご紹介

ビジュアルシンキングのプロフィールには、このように紹介されています。
当初は、ドラッカー著書の図解、インフォグラフィック紹介を中心とするコンテンツでしたが、徐々にインフォグラフィック・ピクトグラムの制作も始めるようになりました。
多様な記事がある中で、6つをご紹介していきます。

つたえる、たのしさ

英バンド「ザ・スミス」トリビュート路線図インフォグラフィック・アート

情報と一緒に、楽しさも伝わる内容です。アルバムを路線に、曲を駅に見立てて紹介しています。アプローチも面白く、曲への気持ちを感じさせる作品を紹介されています。

バラバラなものも一目で分かる

60以上のチーズを分類。チーズのガイド・インフォグラフィック

たくさんあるチーズの種類、答えられるか？と問われるとチーズの名前の単語がバラバラで頭に浮かびます。インフォグラフィックにすることで、成分から種類、名前まで一発でわかるっていいですね！

Webとインフォグラフィックの関係

Webデザインとしてのインフォグラフィック

Webサイトのインフォグラフィックを紹介をしています。スクロールすることでWebサイト特有のデザインが用いられていることに注目です。

一部、記事から抜粋します。

インフォグラフィックの制作工程も、情報・データの分析フェーズ（プログラミングを使用する場合もある）の比重が大きく、グラフィックデザインよりも、Webデザインに近いものです。

「たのしいインフォグラフィック入門」でインフォグラフィック制作に必要な能力としてWebデザイナーに必須の能力に近い思う。と他の記事で書かれています。

解析能力
編集能力
デザイン能力

これらの相互の制作過程を考えると、ヒントがたくさん隠れているようですね！

プログラムでピクトグラム

HTML5 SVGを使ってピクトグラムを描いてみる

実際に描くプロセスを紹介。ピクトグラムのデザイン構造は、ひもとくと「まる」と「しかく」が基本となっています

シンプルな形が基本だからこそ、プログラムで制作できるのですね！ハッカソンのイベントも行われているようです。

ドラッガーから学ぶ

ドラッカー図解: 行動を決める際の2つの指針

ドラッガー図解シリーズを書いている、櫻田さん。書籍を参考に、自身の考えを紹介しています。こちらの記事では、「行動を決める（意思決定する）際の指針について書かれています。

「コスト」「リスク」より得られるものが大きい
「二股」や「妥協」をしない

図解で紹介されているので、わかりやすいです。

櫻田さんも登壇されるSwapSkillsDoubbbleで「インフォグラフィックス」をテーマに開催

【イベント名】：SwapSkillsDoubbble(10)「「伝える」を掘り下げるインフォグラフィックス」: 【日時】：8月18日（土）13:00 ～ 17:00; 【参加費】：5,800円～7,800円; （詳細／お申し込み） http://swapskills.info/doubbble/10.html

インフォグラフィックスとは？

2013-07-25T10:28:00.000+09:00

インフォグラフィクスとは

インフォグラフィクスとは、「information」と「graphics」を掛けあわせた造語で、伝わりずらい数値やテキストなどを可視化することで分かりやすく表現する方法として注目されています。

制作する上でイラストなどを組み込みこともありますが、根本はイラストなどを利用することだけではなく、そこにストーリーも添えるのが上手に見せるインフォグラフィックスのポイントのようです。とは言え、情報を見てストーリーだてするにはポイントやコツが必要になりそうです。

優れたインフォグラフィックスをご紹介

様々な優れたインフォグラフィックスをご紹介いたします。

Webの進化を表現

Webを行っている人であればみたことがあると思いますが、時代の移り変わりと共に変化、進化を表現しています。

https://evolutionofweb.appspot.com/?hl=ja

ワインと食材の相性がわかるインフォグラフィック

どの食べ物とワインが合うか一見してわかるインフォグラフィックスです。

http://infogra.me/ja/list/11072

瞬時の検索

Googleを利用して検索している瞬間、裏側で何が行われているか表現したインフォグラフィックス

http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/ja//intl/ja/insidesearch/howsearchworks/assets/searchInfographic.pdf

レスポンシブウェブデザインのインフォグラフィックス

レスポンシブウェブデザインの誕生についてと進化を表現。

http://www.hallme.com/blog/responsive-website-design-what-is-it-infographic/

http://www.northstudio.com/blog/responsive-web-design-infographic

http://www.dotcominfoway.com/blog/responsive-web-design-infographic

インフォグラフィックスのギャラリー

http://www.loveinfographics.com/

http://visual.ly/

http://blog.kissmetrics.com/infographics/

http://www.good.is/infographics

インフォグラフィックスのNEVERまとめ

http://matome.naver.jp/odai/2133735351603218001

インフォグラフィックスを制作するなら

インフォグラフィックスを制作する上で参考になりそうなサイトです。

http://www.coolinfographics.com/

TV東京でもインフォグラフィックスが紹介されました！

http://www.tv-tokyo.co.jp/mv/wbs/feature/post_30748/

インフォグラフィックスはサービスになる！

ioixでは、インフォグラフィックスを作成するサービスを行っているようです。

http://www.ioix.com/infographic/

SwapSkillsDoubbbleでは「インフォグラフィックス」をテーマに開催いたします

【イベント名】：SwapSkillsDoubbble(10)「「伝える」を掘り下げるインフォグラフィックス」: 【日時】：8月18日（土）13:00 ～ 17:00; 【参加費】：5,800円～7,800円; （詳細／お申し込み） http://swapskills.info/doubbble/10.html

TAM主催「モバイルファースト」セミナーを開催いたします！

2013-07-23T17:39:00.002+09:00

5月20日にSwapSkillsFreeで、モバイルファーストをテーマに開催させていただきました。

参加者の反応はとっても良く、みなさん真剣に受講されていました。受講後のアンケートの一部をご紹介いたします。

モバイルファーストというとモバイルだけを考えたもの。だと感じていた方にとっては刺激的だったようです。

「Mobile First＝パラダイムシフト」という話を聞けたこと。自分はWeb構築の一手法だと思っていたが、仕事のやり方を変えることであり、そのために製品（アプリ、サービス）を「誰が」「いつ」「どこで」使うかを徹底的に考え、そのために必要なコンテンツを極限まで絞り込むために「モバイルで情報提供する」という観点で取り組むということが大切だと理解できた。
使い手目線の重要性が強調されていたことは王道的で安心しました。
現場レベルのお話が聞けたことは、大変ためになりました。
モバイルファーストの概念がより明確になりとても参考になりました。
Mobole First や RWD についての理解がより一層クリアになりました。
モバイルファーストというものの捉え方＝モバイルサイト優先でUI・コンテンツ設計ということで理解していたが、それを超えてマーティングもモバイルファーストだという考え方ができるようになったのでよかった。
「モバイルファースト」という言葉に触れたことはあっても、具体的なコンセプトは知らなかったことを痛感させられました。今回のセミナーでの話題、今後の顧客提案に生かしてまいります。
日々の業務の中で雰囲気や感覚で捕らえていたサービスの考える手順を再確認・再認識できとてもためになりました。
モバイルの特性など、非常にわかりやすかったです。事例もあったのでとても参考になりました。

8月1日にはTAM主催の「モバイルファースト」セミナーが開催されます。参加できなかった方は参加されてはどうでしょうか？

詳細／お申し込み
http://www.tam-tam.co.jp/seminar/201308.html

WEBデザイナー、WEBディレクター向け　上手に進行するためのGitHub入門

2013-06-21T15:12:00.000+09:00

7/24にGitHub入門についてのSwapSkillsBuildを行います！

バージョン管理にGitHubを利用することが多くなりました。上手に進行するためにも大切なのですが、WEBデザイナー、WEBディレクターはなかなか手が出せないままになっていませんか？

GitHubを導入すると、作業者同士で直接データを渡し合う手間を省けたり、データが先祖帰りしてしまった、デザイン変更前と見比べたいという際、容易に以前の状態へ戻すことが可能です。

GitHubは広く利用されることにより、多くの情報をインターネットで得る事ができるようになりました。

始めるきっかけとしての入門編ですので、「今まで始めようとしてわからなかった」「興味はあるが、どのように利用したらわからない」と感じている方々にぴったりです。

イベント名 SwapSkillsBuild(34)「上手に進行するためのGitHub入門」
日時 2013年7月24日（水）19:00 ～ 21:00（18:45開場）
会場大槻社労士事務所
定員 20名
スピーカー菊池　崇きくち　たかし (WDE)@wdeast
参加費一般 2,800円/学生 2,000円（税込）

詳細／お申込み

今話題の「UX/UI」。理解を深めたい方は必読！電子書籍「ユーザーエクスペリエンスを考える」で考えを深めよう

2013-06-12T19:07:00.002+09:00

2012年8月18日に開催されたイベント“近未来のWebを見るために原点回帰！
ユーザーエクスペリエンスを考える”が電子書籍になりました。
この書籍は、今後出てくる未来の端末にも通用するUXを考えた基本原理が学べる内容です。

UX/UI は注目されている

UX/UIは2012年秋から急速に注目されるようになりました。Googleトレンドをみてもその注目度は見て取れます。

昨年6月に行われたSwapSkillsDoubbble(7)では、当日もUX分野で活躍して、現在さらに業界で注目されている方々に登壇いただきました。

まず、ご紹介したいのがUX Tokyoの主賓であり、現ビービットでUXディレクターとして活躍している前田氏。
ZingerJAPANで活躍していたフロントエンド＆UIデザイナーで、現Yahooでデベロッパーとして活躍している宇野氏。
当日ブロガーだった渡邊氏も現在ではサーバーエージェント社長室でUIの責任者として活躍しているいます。

そんな活躍する方々から、UXとは何か？現場でUIを作る際のポイントや考え方は何か？など紹介いただいています。特に以下のようなことは、みなさん知りたいと思っている事ではないでしょうか？

この書籍の読みどころ

スマートフォンとパソコンのUX/UIを考える上でおさえておきたいこと
スマートフォンアプリUIのセオリー
優れたUIを真似したけど、上手に真似ることができない
現場でありがちなUIのミスを知ることができる
綺麗なデザインだけがUXが良いとは限らない事例の紹介
UXとは何か？基本原則から考えることができる

こんな方に読んでいただきたい！

スマートフォンのUX/UIを勉強したい人
UIのセオリー、パターンの基本を知りたい人
自分はUIができていると思っている人
駄目なUIとわかっていても、改善方法が見つからない人
本当のUX/UIを知りたい人

スマートフォンなどの新しいデバイスが誕生して、まだ歴史は浅く、UX/UIなどはまだまだ研究の余地があると思います。その手助けになる一冊になっています。ぜひタブレットやスマートフォンで読んでみてはいかがでしょうか？

著者（出演者）紹介

宇野雄

イベント当時：Zynga Japan UIデザイナー
Zynga Japan 株式会社デザインセンター所属センター長／UI・UXデザイナー。主にスマートフォンWebとアプリのUI・UX設計／デザインを担当。全く新しいモノづくりよりも，既にあるモノを新しい視点でとらえるデザインが好き。犬派。技術評論社　連載「LESSで3倍ラクするスマートフォンコーディング」掲載中
現在：Yahooデベロッパー

渡辺将基

イベント当時：Webディレクター、ブロガー。
慶應義塾大学理工学部を卒業後、人材系ベンチャーを経て株式会社モンスター・ラボに参画。セールス兼プロジェクトマネージャーとしてWebサービスの企画開発に従事する中、特に黎明期より取り組んでいたスマートフォンアプリの開発においては、数多くのヒットサービスを手掛けてきた。細部にまで戦略を張り巡らすUI設計やディティールにこだわった品質管理など、妥協を許さないモノ作りのスタイルには定評がある。 2012年より執筆を開始したブログ「Innovation from Popular Sense」では、ヒットサービスの分析から実践的なノウハウ、アイディアのアウトプットに至るまで精力灯台の足元に光を照らす的に記事を公開している。サイバーエージェント社主催モックプランコンテスト2012優勝。
現在：サイバーエージェント社長室

前田俊幸

イベント当時：UX実践家向けコミュニティであるUXTokyoを主宰。ユーザリサーチャー、コンサルタント。東京大学工学部システム創成学科卒。アイラモルト好き。Twitter:@t_maed
現在：

書籍情報

価格は1,800円で、ファイル形式はEPubとPDFの両方をご用意いたしました。

価格: 1,800円
形式: EPub; PDF; 書籍購入ページ; http://bookstore.swapskills.info/doubbble-007.html

Backbone.jsの生みの親、本人登場のセッションを日本語で勉強できます！

2013-06-07T17:36:00.001+09:00

SwapSkills FreeEvnet(19) WED×SwapSkills「Web Directions CODE 2013」「backbone.jsでJavaScriptを深く考える」

allWebクリエイター塾（東京都）主催のマンスリー勉強会 SwapSkillsとWeb Directions Eastの共同で、Web Directions South で行われた　Web Directions CODE 2013「backbone.jsでJavaScriptを深く考える」の上映カンファレンスが 6月29日（土）15時に株式会社キャリアデザインセンターで開催されます。

JavaScriptのフレームを数多く手がけている本人登場のビデオカンファレンス

CoffeeScriptのプログラミング言語、 Backbone.js javascriptのフレームワーク、Underscore.js などのJavaScriptライブラリの生みの親であるジェレミーアシュケナス氏が出演した Web Directions CODE のビデオカンファレンスが開催されます。

数多くのフレームワークを作るジェレミーアシュケナス氏は、世界的に有名で、多数の会議やイベントでのスピーカーとして名高い人物です。

その本人のセッションを日本語で開催するカンファレンスです。既に動画はサイト上にアップされていますが、英語でのセッションなので正しい英語かどうか不安に思うエンジニア、プログラマーも多いはずです。

そこで、字幕でのカンファレンスを行うことにしました。また、エンジニアだけのコミュニケーションはなかなか取れないため名刺交換も行う予定です。

Web Directions CODE で行われた他の動画は有料のオンラインサイトで閲覧を予定しています。イベント当日にお越しいただいた方の中から、これらの動画を１ヶ月限定、無料で閲覧できる権限が抽選でプレゼントされます！

Jeremy Ashkenas氏が作ったCoffeeScriptって何？

日本でもWebアプリケーションの注目度が増すようになってきました。 Webアプリケーションの代表的なものは Parl , PHP , Ruby などですが、JavaScriptでの開発も徐々に注目されています。

その一方で、JavaScript はソースコードは見苦しいものになりがちで、特に大規模なプログラムを作るのはかなり骨が折れる作業になってしまいます。冗長な記号や面倒な決まり文句などが積み重なると、読みづらくメンテナンスしづらくプログラマーからはあまり好まれていませんでした。

そこで、今回登場する Jeremy Ashkenas 氏は、JavaScript での大規模開発経験から新しい言語が必要だと考え、CoffeeScript を作りました。

CoffeeScript の特徴は、JavaScript の良い所を残し、できの悪い所を上手に補ったうえでの綺麗な文法になっているという点と、コンパイル結果が JavaScript になるという点です。文法がRubyやPythonに似ていることから、受け入れやすくJavaScriptプログラムを作るのにもCoffeeScriptを代わりに使うことができるため、開発者は障壁をほとんど感じることなく導入できるようになりました。

CoffeeScriptを作ったJeremy Ashkenas氏は、有名な2つのフレームワークを作っています。

Backbone.jsでJavaScriptを考える

ジェレミーアシュケナス氏はCoffeeScriptを作り、フレームワーク的な存在のBackbone.jsを作成しました。今回は、これらの使い方について、またJavaScriptについて勉強できるセッションを開催しました。

JavaScriptを多用したWebアプリケーションで、どのようにフレームワークが使われ、一般的なパターンがどれに向いているのか、どのように連携するのか、Backbone.jsに特色を与えるいくつかの設計上の決定について解説しています。

本人のセッションを日本語に翻訳された動画を閲覧することでよりフレームワーク利用のポイントを理解することができるでしょう。

Web Directions CODE って何？

Web Directions はオーストラリアで開催されている世界的に有名なITカンファレンスです。このイベントでは2012年から CODE というJavaScriptをメインにした開発者向けのセッションを開催しています。

Web Directions に出演する人の多くは著名で有能な方が多くいます。日本でも2008年よりWeb Directions East という形で開催しています。

CODO 2013　に出演している人が他に十数名いらっしゃいます。毎月のペースで日本語にローカライズされた情報を提供予定しています。

SwapSkillsBuild(32)「フラットデザインの概要とRWDのWin8UI」レポート

2013-06-04T17:04:00.000+09:00

2013年5月22日にSwapSkills Buildの32回目となる「フラットデザインの概要とRWDのWin8 UI」についてのイベントが開催されました。

今回のイベント内容が注目を浴びている事は、席の埋まり具合からも伝わってくるほどで、皆様は熱心に参加されていました。
スピーカーはWeb Directions East CEOで、allWebクリエイター塾でも講師をしている菊池崇氏です。webでの新しいキーワード「フラットデザイン」「RWDのWin8 UI」について解説していただきました。

菊池氏はフラットデザインが見た目の流行ではなく、コンセプトを理解する事が大事だと話しました。
参考にA List Apartの記事を取り上げ、考え方を紹介していただきました。フラットデザインとは、のぺっとした影の無いデザインという見た目の印象で考えるのではなく、物質の素材を活かすことで、長い間新鮮に感じることができる高い価値を持つデザインを考えるという事です。

記事では、material honesty = （物質に正直な）という言葉を使用しています。
菊池さんが例として、木を模した素材で装飾した車をスライドに映しました。その車の印象からは、何十年か前の映画で見かけるような印象を受けました。反対に、ステレンスのままの外装をほどこした車は現在でも古さを感じさせずに、高い人気を誇っているとのことです。まさに、長い間新鮮に感じる事ができる事を証明する一例です。

次に、実際にフラットデザインを制作する際のポイント5点をまとめて説明していただきました。

1：色は明度と彩度を利用すると良い。

この言葉は、要素がとてもシンプルであるため、微細な色の変化が重要になってくることを意識するためという事です。便利なツールの使用方法として、webインスペクタによるHSLで色を調整する方法の紹介がありました。

2：影を利用しないこと。

3：アイコンをなるべく利用しないこと。

これら2点について、マイクロソフトのサイトを参考に確認していきました。デザイン上の影はなく、コーポレートに関するアイコン以外は使用していませんでした。何となくのイメージでアイコンが多用されているように思われていることが多いが、決してそうではないと菊池氏は話しました。

4：強く押し出すパーツを置かないこと。

Windowsストアアプリのデフォルトの天気アプリ等を使用して確認しました。天気アプリでは、青空の背景に赤いバナーが大きく入っていて必要以上に目に入ってしまう状態でした。あまりに存在が強いため、広告としてはメリットかもしれませんが、アプリとしては必要な情報を取得できない、またはすぐに離脱してしまう可能性が強くなってしまうことを注意しました。

5：背景をうまく利用すること。

グラデーションや影を使用しないことで生まれてしまう、のっぺり感を和らげるために、背景に画像などを有効的に入れることが多い事例の紹介を紹介していただきました。参考のアプリでは、背景の上にタイル状のリンクがありました。メリハリがあり、要素がきれいに見えました。

この後の作業としては、visial studioを用いてアプリを作成するという流れになります。

最後に、フラットデザインは発展途上なので、早目に挑戦し問題の解決策を考える事が大事である。と話されていました。

CSS3の知識をアップデートしよう！2013年バージョン

2013-05-28T12:41:00.000+09:00

6/19に最新のCSS3についてのSwapSkillsBuildを行います！

スマートフォンなどのサイト制作が多くなってきて、CSS3でのデザインの実装も多くなっています。CSS3講座に受講されている方も多くいらしゃいますが、アップデートまで行っていない方が多いのではないでしょうか？

最近では、CSS3のプロパティによってベンダープリフィックスを記載しなくてもよいものも誕生してきました。

中には仕様が変化したことでデザインが違うように見えてしまうケースもあります。

今回は、CSS3にまつわる情報を2013バージョンのアップデートとしてご紹介いたします。

イベント名 SwapSkillsBuild(33)「UPDATE　CSS3 2013」
日時 2013年6月19日（水）19:00 ～ 21:00（18:45開場）
会場大槻社労士事務所
定員 20名
スピーカー菊池　崇きくち　たかし (WDE)@wdeast
参加費一般 2,800円/学生 2,000円（税込）

詳細／お申込み

SwapSkillsFree(18) 「モバイルファーストの考え方」レポート

2013-05-21T17:46:00.001+09:00

2013年5月20日にSwapSkillsFree(18)でモバイルファーストについてのイベントが開催されました。参加者のほとんどはプロのWeb制作者、ディレクターで大企業からフリーランスまで幅広い方のご参加をいただき、生憎の雨模様でもたくさんの方にご参加いただきました。

スピーカーは株式会社 TAM Webディレクターの角谷仁さんで、「MobileFirst.jp」を運営されモバイルファーストの提唱者ルーク氏の記事を読み日々研究を行っている方です。

既に日本でもバズワード化した「モバイルファーストとは何か？」基本コンセプトや概念から丁寧にご紹介していただきました。　2012年にWDEでルーク氏が来日した際に紹介したセッションの内容も含め、日本での実例も含めて紹介していただきました。

角谷氏は、「人間は新しいデバイスが誕生するとその媒体の特徴を捉えられず、今までの経験からそれらを定義することを行います。テレビもラジオ付き映像と紹介されていた時代があり、ラジオ放送自体を撮影していたと言われている」とルーク氏が解説したことを紹介しました。

そして、角谷氏はモバイルファーストは、ルーク氏のブログの言葉を用いて、「モバイルから生まれたイノベーション」この言葉が一番しっくりきて、この一言で表わされていると解説しました。その要素として３つあり「成長」「制約」「機能」と紹介しました。

モバイルファーストはモバイル端末からの制作を考えることが重要で、そこには制約が存在し、本当にユーザーがほしいと思っている情報にフォーカスされるようになったと解説しました。また、モバイル特有の機能から新しいイノベーションが生まれることがあると解説し、マクドナルドや飲食店のスマートフォンからのオーダー事例も紹介しました。つまり、モバイルの画面だけの話ではないと解説しました。

このように、モバイルの要素を踏まえることでイノベーションが生まれてくることがモバイルファーストだとまとめました。

パネルディスカッション

次にWebDirectionsEastのCEO菊池氏も合流してパネルディスカッションが開催されました。参加者の多くが開発者であることからレスポンシブWebデザインと関係性について興味を持っている方がいらっしゃったので、ディスカッションテーマにあげさせていただきました。

次に「モバイルファーストってコンテンツファースト？」というテーマでディスカッションしていただきました。あるイベントで「モバイルファーストはコンテンツファーストだ」と解説があったようで、参加者の質問としてコンテンツファースト、モバイルファーストなどいろいろなファーストがあるが何なのか？本当にイコールなのか？の内容についての解説をいただきました。

そして、弊社でよくもらう質問で「モバイルから作ることでチープなデザインになるのではないか？」についてご紹介いただきました。

最後に、弊社研修を受講された方からの質問で、スタートアップがモバイルファーストで上手く行かないという記事を見ましたが？実際どうなんですか？の問いにご意見をいただきました。

モバイルファーストというキーワードが注目されるその背景には「WebをWebとして利用する時代になってきた」ということで、このモバイルファーストというキーワードが注目されるようになっているとはじめに紹介されたTVというメディアの例を主催の大本氏が再度紹介してイベントは終了いたしました。

告知

allWebクリエイター塾ではモバイルファーストの考え方を用いたUX /UI設計講座を開催しています。法人研修としてエンジニアとの共通認識になるワークショップで大変好評です。ぜひ、ワークショップを通してモバイルファーストを取入れていきましょう！

フラットデザインの基本概念を学ぼう！

2013-05-14T17:21:00.001+09:00

5/22にフラットデザインについてのSwapSkillsBuildを行います。

昨年末から海外で話題になっていたフラットデザイン。
以前からBuildなどで取り上げたいと思っていたのですが、実は、フラットデザインは奥が深く勉強するのにすれなりに時間を要してしまいました。

そして、フラットデザインについての記事が日本でも話題になってきたことを踏まえ、知識も増えたことからBuildを開催することにいたしました。フラットデザインのメリットは、グラデがない分簡単にデザインしやすい反面、ユーザーに分かり難さを与えてしまうことがあります。

今回はこのフラットデザインについて、「なぜ注目されているのか？」「どの辺を気をつけなければならないのか？」など基本的な概念をご紹介いたします。

Win8 UI の最新テンプレートを参加者様に先攻ダウンロード

実は、半年以上前からWeb標準技術でWin8 UIができないか？などの話題になり、レスポンシブWebデザインのテクニックに代表されるメディアクエリを利用したWin8 UIのテンプレートを作成しました。それらのテンプレートの利用方法も含めご紹介予定です。

WindowsAPPを公開する場合、Win8 UIでの実装になりますが、分業でどうしても作業していることが多く、UI部分はデザイナーが担当することが一般的です。 Web標準で作ることができれば、敷居は低くなります。

すでに、WinAPPも優れたデザインがあり実装されていますが、ビジュアルスタジオを入れずしてWeb標準技術で実装できればより自由度なデザインも実現できます。公開されているバージョンのテンプレートは実は既にバージョンが古くいのですが、このSwapSkillsBuild では新しいバージョンを先攻利用できるようにいたしました。

【イベントレポート】11/24(土)「コンテンツマーケティング&戦略」

2012-12-21T15:08:00.002+09:00

本エントリーでは、2012年11月24日(土)、きゅりあんにて開催された「コンテンツマーケティング&戦略」のレポートをお送りします。

コンテンツマーケティング&戦略とは

バズを生み、クチコミを発生させサイトに効果的にユーザーを流入させるためにはどうしたらよいか。それはコンテンツをどのように提供するかという戦略にかかっています。今回のイベントは、コンテンツストラテジー(戦略)やコンテンツマーケティングについてより深く探求していくことを目的に、以下の5名のスピーカー(4セッション)により、ペルソナを用いたコンテンツ提供方法、コンテンツを使った集客、コンテンツの善し悪しを理解するための正しい検証方法などが学べる構成となりました。

「コンテンツマーケティングというマーケティングの新しい潮流」(渡辺一男氏・野口聖晃氏)
「アクセスアップできるコンテンツの考え方」(永江一石氏)
「コンテンツを検証！正しいABテストを始めてみませんか！？」(鈴木　亮氏)
「出版社こそ最強のコンテンツファーム - Web Professionalが実証したこと」(中野克平氏)

「顧客に必要とされる」コンテンツは資産となり、結果、検索エンジンにも上位表示されるようになる

イベントのトップバッターとして、日本SPセンターの渡辺一男氏と野口聖晃氏が登壇しました。両氏は、米国で議論が高まるコンテンツマーケティングの手法や考え方について、本年9月に米国コロンバスで開催されたコンテンツマーケティング世界大会(Content Marketing World 2012)で入手した最新の情報などを紹介しました。

コンテンツマーケティングとは、2008年頃から米国で活発に議論されるようになったマーケティング手法です。渡辺氏は、コンテンツマーケティングを、「見込客が欲する情報を企業自らが提供することにより、信頼を獲得し段階的に購買につながる行動を引き起こす技術」と定義できると解説しました。象徴的な事例として挙げられるのが、米国の農機具メーカーのJohn Deere社が、1895年に農家向けに発行した雑誌『The Furrow』の事例です。これは、西部開拓時代が終わり、モノが売れる時代から売れない時代へとシフトした米国で、どうやってお客様とコミュニケーションを取るかという発想で刊行されたものです。コンテンツの内容は、農作物の育て方や、新しい技術の紹介といった「農家にとって役に立つ情報」が網羅されていました。同氏によると、これがコンテンツマーケティングの起源の一つということで、同誌は現在も発行されているとのこと。

これからは、Webだけに限らず、リアルの書籍、雑誌、YouTube、Facebookなどを含め、複数のメディアやツールを使い分け、いかに見込客に情報をパブリッシュするかが大事です。コンテンツマーケティングにも「メディアの変化」「ユーザーの変化」「商品の複雑化」「検索エンジンの変化」という4つの変化が生じており、「顧客に必要とされる」コンテンツが、結局は検索エンジンにも上位にヒットするようになるということです。例えば、米国バージニア州のプール販売会社River Pools & Spa社の事例では、ブログを通じ、コンテンツを整備した結果、サイトへのアクセス数が増えました。

同社の考え方は以下の通りです。すなわち、リーマンショック後の不況でプールの販売も落ち込む状況下で、「プール」でGoogle検索した際に一番上位にヒットするよう、コンテンツを整備しようというものです。ポイントは、プール購入を検討する人に対し、「プールを買う際に役に立つ情報」を提供しようとした点です。「プールをつけると住宅の価値は上がるのか？」「8月の暑い時期に発生する藻の解決法は？」といった役に立つ、読み物として楽しい記事を掲載する取り組みを続けた結果、同社のサイトのアクセス数が増えました。こうした取り組みが従来のキャンペーンと異なる点は、コンテンツが資産となる点です。

引き続き、渡辺氏からセッションを引き継いだ野口氏は、コンテンツストラテジー策定の具体的手法について解説しました。コンテンツストラテジーの策定のステップとして、「商品・サービス理解」「顧客の定義」「コンテンツの抽出」「コンテンツマッピング」の各ステップがあります。同氏は、実際のWebサイトでの適用例として、米国の「DELL.COM」の取り組みを解説しました。サイト上のグローバルナビゲーションの表示方法や、ページ上段、中段、下段にどういう情報がどのように配置されているかというポイントについて、情報を「誰に」「何を」「どういう順番で訴求するか」という点が解明されていきました。

コンテンツを資産として活用し、Webサイトをビジネスに直結させるには、コンテンツストラテジーという考え方がキーになることが改めて理解できるセッションでした。

“集客のためのツール”としてのコンテンツを最初に設計しないといけないワケとは

続いて、ランダーブルー株式会社代表の永江一石氏による「アクセスアップできるコンテンツの考え方」というセッションが行われました。永江氏は、運営者が「見せたいコンテンツ」と、来訪者が「見たいコンテンツ」のミスマッチを解消することが大事であると提唱しました。

同氏によると、集客の基本は、サイト設計の際に集客するためのコンテンツを一緒に考える必要があるというもの。Webサイトを砂漠の中のオアシスとするなら、コンテンツという道路がなければ来訪者は訪れず、都市として発展することはありません。単にクライアントから与えられたお仕着せのコンテンツではなく、どういう手法の集客をするかを軸に発想しなければ、集客がは成功することはありません。

では、どのようにしてコンテンツを用意したらよいでしょう。同氏によると、運営者にとって「見せたい、利用させたい」コンテンツと、来訪者にとって「見たい、利用したい」コンテンツとのミスマッチを解消することが大事だということです。言い換えれば、運営者にとって来て欲しいお客様に役に立つコンテンツが必要なのです。そして、コンテンツは一朝一夕に作ることができません。ですから、最初から設計に入っていないといけないのです。

次に、同氏は、集客用コンテンツの基本的な考え方を解説しました。集客について勘違いしやすいのが、とにかく人が集まればよいという考え方です。人が集まっても、ビジネスの目的(自分たちのビジネスモデル)に沿っていなければ、目的意識が違う来訪者がいくら集まっても売上に結びつけるのは難しいでしょう。同氏は、「来訪者が見たがる、探したがるコンテンツに必要な要素」として、「得をする」「役に立つ」「面白い」「オリジナルであること」の4点を挙げました。

次に、コンテンツ内容でSEO効果を狙うためのテクニックが紹介されました。「使いやすく、役に立つコンテンツを生成する」「ビッグキーワードよりもスモールキーワードを含むページを量産する」「キーワードに関連した役に立つ内容のコンテンツが有利」「サイトで言いたいことはすべて、上の階層に集約すべき」といった差別化ポイントはどれも頷かされるものばかりです。

実際のケーススタディとして、同氏が手がけた茅ヶ崎の釣り船屋のWebサイト改修の例が紹介されました。ネットに特化したお客様の絞り込み(ターゲットの再定義)、釣り船の禁煙化、動画やツイッターを駆使し、魚が釣れた情報のリアルタイム配信、また、釣った魚の調理方法などの「お役立ち」コンテンツの定期アップ、そして釣果情報を「正直に」書くことなど、ビジネスモデルと連動したコンテンツ制作の内容は、すぐにでも自分が担当する案件で応用可能なものばかりでした。

結果がすぐ分かるABテストの活用により、コンテンツの「勝ちパターン」を見つけよう

イベントは後半に入り、ぐるなびの鈴木　亮氏が登壇しました。同氏は、ABテストの実施方法とプロセスを解説しました。ABテストとは、画像や説明文などの素材を複数パターン用意し、素材を入れ替えたWebサイトやバナー広告などを並列で公開・配信することで、利用者の反応を検証し、素材などの優劣を決定する方法です。同氏によると、ABテストは、「UI・デザイン」「コンテンツ表現」に関して、最終的にCVR(コンバージョン率)を上げる「勝ちパターン」をみつけることに重点を置くべきであるということです。

次に、ABテストのプラン方法について解説しました。テスト方法には「スポット型」「シナリオ・プロセス型」というものがあります。前者は、キャッチコピーの文言や、クリエイティブを局所的にテストするもので、クリックしたかどうかを評価指標とする場合とCVRを指標とする場合があります。一方、後者の「シナリオ・プロセス型」は、流入元、対象ページ、パス、ゴールといった、コンバージョンが生まれるまでの一連のプロセスをテストするものです。

スポット型のテストの進め方のポイントは、「比較するサンプルの間で、変更する要素(見せ方や表現など)を2つ以上にしない」ことが大事ということです。デザイン要素を複数変更してしまうと、ユーザーがどこに反応したのかが、テスト結果から読み取れなくなるためです。

次に、「シナリオ・プロセス型」のテストプランの進め方について、シートの作成方法が紹介されました。プランシート作成に際しては、「何をテストするのか」について、テスト概要をなるべく詳細に書き出すことが大事です。これにより、何を確かめたいのかという目的を明確にすることができます。そして、テストをするのはイメージなのか、ランディングページなのかといったテスト形式や評価指標、訪問者割合やセグメンテーション(初回訪問かリピーターか)などを明確に設定していきます。

テストを行ううちに陥りがちなのが、あれもこれもとテストするうちに、本当に検証したいことが見えなくなる状況です。「ランディングページのテストだから、イメージのテストだけでなくバナーのクリエイティブも複数用意したい」などと、あれもこれもと複数の要素をテストしてしまうことを避けるため、テストのゴールを設定し、事前にプランシートを作成し、メンバー間で共有しておくことが大切です。

テストでみるべき指標はシンプルであること
何を出すかでなく、何を確かめたいか
結果は、パターンの1つ　正解ではない

こうしたポイントを踏まえながら、上手にABテストを活用し、UIデザインやコンテンツ表現の「勝ちパターン」を見つけることの重要性を再確認したセッションでした。

コンテンツが収益を上げるための“出版プロモーション”としてのWeb活用の取り組み

イベントの最後として、アスキー・メディアワークスの中野克平氏が登壇しました。同氏は、出版社がWebをどう活用するかという点やサイト運営を通じて得たノウハウなどをテーマに、自身が携わった「Web Professional」という情報サイトの立ち上げのエピソードを紹介しました。

まず同氏は、出版社を取り巻く状況について言及しました。インターネットの普及により、雑誌、広告、書籍といった出版社のビジネスモデルが徐々に崩れていった状況や、同氏が、2007年、社内のWebメディア戦略の立案を担当した際のエピソードが紹介されました。同氏は、広告収入に依存したWeb戦略を棄て、Webを出版プロモーションのツールとして活用する道を選びます。

具体的には、「Web Professional」という情報サイトの立ち上げで、これは、編集部管轄の情報サイト内で記事を公開し、それを書籍化して収益を上げようというビジネスモデルとのこと。サイト立ち上げ時の同氏の仮説は、「本を読まなくなったのではなく、新刊が売れないだけではないか」というものでした。実際、1960年からNHKが5年ごとに実施する「国民生活時間調査」によると、読書に使う時間は2005年調査時のものより、2010年の調査の方が増えていることがわかり、結果的に、この仮説は正しいことが裏付けられました。

同氏の考えた「Web Professional」の戦略ストーリーは、「記事を作る」「サイトに人が集まる」「本を宣伝する」「本が売れる」「儲かる」というサイクルを循環させるようというものです。この循環が、どんどんメディアを成長させるというシナリオのもと、様々な取り組みがなされました。その一例として、「Web Professional」立ち上げ後、1年目に発行した2冊の書籍(『Google Analyticsの使い方』『jQueryデザイン入門』)の事例が紹介されました。

書籍のタイトルはGoogle AdWordsのキーワードツールで多かった「Google Analytics　使い方」「jQuery デザイン」をもとに付されたそうです。このように、書籍のタイトルや編集方針もWebでの検索を相当意識したものであることが分かります。また、検証の結果、著者の持つブログなどのコミュニティがクチコミを生み、それが書籍の売り上げにも影響を及ぼすことが分かったそうです。

出版のプロモーションとしてWebを再定義しながら、Web上できちんとコンテンツを作り、それを書籍化(マネタイズ)していくという同サイトの取り組みは、コンテンツをどのように作っていくべきかについて、一つの方向性を示すものだったと思います。「ニーズは高いが、競合が低いキーワードできちんと記事を作る」「顧客データベースの構築」「Webを通じた自社サービスの開発」など、今後の同サイトの取り組みにも注目していきたいという感想を持ちました。

各セッションを通じて、バズを生み、クチコミを発生させサイトに効果的にユーザーを流入させるためには、コンテンツにきちんと向き合うことが大事だという思いを改めて強くしました。そして、具体的なコンテンツ戦略の進め方についても、大いに参考になるセッション内容だったと思います。

LESSは今からでも確実に勉強しよう。

2012-11-08T19:12:00.000+09:00

SwapSkills Build では、来週末からLESSの勉強会をシリーズで開催いたします。
なぜLESSを学ぶべきなのか、なぜシリーズにしたのか、どんな内容なのかを少しだけご紹介いたします。

なぜLESSを学ぶべきなのか

LESSの記述を学ぶことで単純に制作する時間が少なくなると言えます。2月に登壇していただいた斎藤さんの記事ではカラムの計算をLESSで行うことで数値を動かすことで簡単にカラムが出来上がるという記事を紹介していただきました。以下のようにLESSを勉強することでとっても効率よくサイトを制作することができるのです。

▼ご紹介いただいた記事▼

なぜシリーズにしたのか

１）LESSは１日では覚えられない！

LESSの記述方法なので、それに慣れるために何度も練習しなくては身に付きません。11月17日の初回を皮切りにシリーズで回数を重ねて勉強することで現場での利用方法も自然と勉強できるように構成しています。

２）記述方法を学ぶこと同じくらい、その背景の理解が重要になる

２月に一度開催したものは概要、基本的な使い方の事例を紹介させていただきました。
セミナー形式では知識は増えますがなかなか現場で使う段階になりません。実際のページではどのように使うべきなのか、など検討しながら進めていこうと考えています。先ほどご紹介した斎藤さんのグリットでの計算もグリットシステムを理解して計算式を作成できる力がなければ効果的なLESSを記述することはできません。Buildではそれらの背景も簡単に含めてご紹介予定です。

３）現場で使える知識を知る必要がある

LESSをキチンと勉強するには記述方法と同じように重要なのが、CSSの綺麗な設計です。
事実、制作の現場では LESS, SaSSで納品されてコンパイル（CSSへ展開）したらぐちゃぐちゃなソースだったということがあると聞きます。
今回登壇いただく宇野さんが連載している技術評論社の記事にも記載「ネストの落とし穴」があるように、ネストして記述することでセレクタが長くなってしまいます。このようなことにならないよう書く方法を必要とします。
記述方法的に間違っていなくても展開した(コンパイルした)CSSのセレクタが無駄に長いとパフォーマンスも悪くなります。記述方法だけでなくCSSの設計上どのように構成すべきか？などを考えながらLESSを勉強できるようにと企画しています。

▼参考▼「LESS記法を身につける（初級編）」
http://gihyo.jp/design/serial/01/less/0002

記事内容抜粋

どんな内容なのか

今まで紹介したように、できるだけ現場で使うための考え方も同時に学べるように構成していく予定です。

OOCSSは知っていますか？

OOCSS（オブジェクト指向CSS）はご存知でしょうか？
クラスでCSS指定をオブジェクト型にするものです。ある意味class厨になり、Web標準の表現と構造を分離させるコンセプトから外れてしまいます。ですが、コンパイルされたCSSコードがWeb標準のコンセプトにハマっていればLESS内では記述することができると言えます。2回目以降の開催になりますが、OOCSSとLESSについても少し組み合わせた内容で行っていこうと思います。

次に感違いしそうな、UX、UIとコンテンツについて。

2012-10-24T15:24:00.000+09:00

allWebクリエイター塾をはじめ、SwapSkillsでは考え方、概念、背景を大切にして教育しています。ある方からはこれらの知識がなくてもサイト制作ができる。と言われましたが教育の立場でその場だけのスキルを教えることに趣をおいていません。そのような制作方法は誰にでもでき、且つ安い下請け業になりえるからです。

同じサイト制作においても、戦略的で効果の上がる制作ができればそこに価値が生まれると考えています。しかし、これらの考え方はなかなか浸透せず、目先のスキルだけができるようになりたいと思う方が多くいることも事実です。自分が今作ったサイトは先生のコードを見ながら作れた。初めて作れたことに喜びも感じることができるでしょう。しかし、次に思ったことと違うトラブルが発生した際にそのトラブルを解消する力はないと思います。CSSの仕様を理解する勉強方法でないと頭には入らないでしょうし、いつまで経っても自力でサイトを作ることはできないのです。

このように自分の頭で理解することが大切になります。ただ、もうひとつ重要なことがあります。それは柔軟な考えを持つということです。自分の考えに固執してはなりません。 人間は成功体験を経験するとその考え方に縛られる傾向があります。 Webの業界では特にスマートフォン時代になった2年ほど前にアップルのスローガン「Think different」についてご紹介し、新しい考えが生まれる時、考え方を変えなければなりません。とご紹介させていただきました。

それと同時に、背景をしならければ、何のためのものなのか理解していなければ、目的も定めることができないでしょう。モバイルファーストというコンセプトはモバイルから制作することを意味しています。その考え方からいろいろな発見がでてきました。マーケティングにおいても考え方が変わって戦略もかわりました。制作においてもコンテンツをどのように見せる必要があるのか？などを考える必要がでてきました。一見、関わりがないように思える制作現場にもコンセプト、概念は大きく関わっているのです。

少し話しが外れてしまいましたが、「コンテンツとUXとUI」について少し勘違いが起きてしまうのではないかと思いブログを書こうと思います。実際私も迷ってしまったので私の今現状の考え方をご紹介いたします。それはコンテンツストラテジー（戦略）とユーザー体験(UX)、ユーザーインタフェース(UI)です。

少し話しがさかのぼりますが、2008年WDEのために来日した英国のアンディバド氏に、「ユーザー体験のユーザーって誰を示しているのか？」を問いてみました。アンディは「人間。この現代の社会生活をしている人」と解説してくれました。それは国が違っていても子供や大人であってもという意味でした。ちょうど今月行ったSwapSkillsFree(13)で行ったHCD(人間中心デザイン）の考え方と同じです。そして、ゲームニクスの提唱者サイトウアキヒロ氏の考えも同じでした。誰でもわかるユニバーサルなデザインであるべきという考え方です。

そして、スマートフォンが誕生。今まででのパソコン端末と同じ扱いでスマートフォンのコンテンツを作っては駄目でしょ？という考えになりました。先に述べたように「Think different」です。
UIも今までの考え方を変化させて作るようになりました。ユーザーの行動や利用シーンにおいてストーリーを考えます。ある種コンテンツを考えるストーリーテーリング手法があります。

またコンテンツストラテジーにおいては、セグメントをきってターゲットを決定いたします。一つ一つ見ると理解できるのですが、全て少し矛盾しているように感じませんか？
もちろん、同じ言葉でも利用するところで意味合いが異なるのですが、実際に言葉が同じ、似ていること、尚かつ同じ類のものを論じているので勘違いをされる可能性が高いのではないかと感じています。

実際に、SwapSkills Free(13)の「UXの基本」を学ぶ勉強会に、参加者に動機のアンケートを取ると、”UIの勉強したく。”とか、”具体的なスマートフォンサイトのデザインを勉強したい。”と思ってイベント参加される方がいらっしゃいました。
間違ってはいませんが期待とは明らかに異なっていることを感じましたし、受講後のアンケートは「期待とは違うけど参加してよかった。」の感想がいくつも見られました。このように誰もが理解しているだろうと思われることも以外と理解されていないケースも多くあったりします。

今回は上記のように勘違されやすい内容について、例えでご紹介いたします。

お弁当をWebサイトとして例えてご紹介します。お弁当箱を作るための手法がストーリーテーリング。例えば、味噌汁付きのお弁当だとお弁当箱がかわりますね！箸やスプーン、フォーク、お弁当の形状などがUI（ユーザーインタフェース）です。そして、お弁当の中身がコンテンツです。量や好き嫌い、価格などでユーザーが異なります。

ユーザーによって好みがバラバラに分かれるます。ただし、どのお弁当でも購入者が異なっても開け方や食べ方が分かるように設計されていなくてはなりません。誰でも食べられるようなお弁当でなくてはならないのです。

この説明でどこまでご理解していただけたかわかりませんが、それぞれに違うものだと思うことも繋がっていることが多いので1つのお弁当で例えてみました。

みなさんもいろいろなセミナーに参加して、１つひとつの点の情報を結び付けられると良いと思います。そのためにも一旦は受け取り、解釈して一つひとつ違うことを話しているように思う点という情報を繋ぎ合わせてみてはいかがでしょうか。いろいろな知識が点と線になって結ばれるのは、その場では理解できないものでもそのうちに気がつくことってあります。また、セミナーなどで疑問に思っていることをぶつけてみてはどうでしょうか？

繰り返しですが、点を点を結ぶためにもコンセプト、概要、背景を意識してください。そのためには、正しい情報を得ることも大切です。Web上ではたくさんの情報が飛び交っていて間違っている情報も多くあります。正しい情報源は自分の価値を高めてくれるはずです。良い、新しい情報を得て自分なりに点と点を結んでいきましょう。

コンテンツの戦略とコンテンツの見せ方

2012-10-23T23:31:00.000+09:00

コンテンツをマーケティングに活かす

コンテンツマーケティング、コンテンツストラテジーなどとWeb業界でもコンテンツにフォーカスした内容が盛り込み始めました。SwapSkills Doubbble「OneWeb2012」のセッションでも AQの佐々木さんが「One Webにする前に、コンテンツについて見直そう！」というテーマでセッションを繰り広げていただきました。佐々木さんの内容は感銘を受けることが多く、考え方として凄く参考にさせていただきました。ブログでもレポートを記載していますのでぜひ読んでみてください。

コンテンツと一言で言っても音楽、動画、ゲーム、アプリなど様々なものがありますが、ここでのコンテンツはテキストや画像、Webサイト上で表現するものを指します。

佐々木さんがいうコンテンツは、モバリティ（移動性）が今後のポイントになるとのことですが、私はもう一つポイントを加えるとするならば「パーソナル性が増した」ように感じます。一昔前の一家に一台のテレビ時代にはTVチャンネルを奪ったものです。私も子供の頃、母のNHK大河ドラマの時間帯は面白くありませんでした。しかし、スマートフォンで読むコンテンツ、タブレットで見るコンテンツは全て一人で楽しむためのコンテンツです。

このようにパーソナル化が進行すれば、そのパーソナルごとにコンテンツを作る必要があると言えます。もちろん、企業は一人のためだけにコンテンツを提供することは難しいので、セグメントをきってターゲティングを行います。企業側はこれを理解して、同じ情報でもターゲティングによってコンテンツの見せ方を変える必要がでてきていると言えます。

新しい情報は人にとって変化する

パーソナル性があがればコンテンツはどのように変化する必要があるのでしょうか？きっと好みが出るでしょう。また、パーソナル化が進めばさらに情報の格差／タイムラグがでてくるようになります。恥ずかしいことではありますが、私はその日TVニュースも見ずにパソコンで作業を深夜まで作業していたため次の日まで9.11事件を知りませんでした。これは極端な例ですが、古い情報でも知らない人には新しい情報というように時間的格差がでてきます。

これらの現状は、自分の好みの情報だけを読む傾向が強くなっているとも言えます。つまり、自分が習得したい情報だけに目が行くようになります。同じ内容のものでも興味深く表現することで興味を引き、その人にとっては新しい情報の入手経路になり得るということになります。

インターネットは元々情報収集をする媒体になります。自分にとって面白いコンテンツ、役に立つコンテンツだと思えば、そのサイトのブランドは上がります。広告に当たっても同様のことが言えます。

Doubbble(8)ではコンテンツについて勉強していただく

11月24日にSwapSkills Doubbbleでは「コンテンツストラテジー」「コンテンツマーケティング」としてWebコンテンツの活用方法を学んでいただきます。上記にも紹介したようにコンテンツに適したセグメント方法はどのようにするのか？コンテンツをどのように興味深いように見せるのか？またその効果は？検証方法は？などを Web専門の方でなく、コンテンツ制作を長年やってこられた方とコンサルでの現場経験を多く持つマーケティングに強い方を招いてご紹介させていただきます。ぜひ、多くの方にご参加いただきたいと思います。

打ち合わせを終えて

既に決定ているスピーカーの方々とは打ち合わせをさせていただきました。海外ではコンテンツマーケティングというカンファレンスも開催され、書籍もいくつかでていて実績などもでているとのことでした。もちろん、日本での実例も出していただくように打診していますが成功事例が既に海外であればその手法でのサイト制作、コンテンツ制作を行うことで成功に導かれる可能性が高いのではないでしょうか？

また、コンテンツは評価がされにくいものの一つでもあります。ブログのようにポストされてその情報が拡散すれば評価しやすいのですがウェブサイトや広告となると評価方法がわかりにくくなります。コンサル経験を持ち自社メディアを持っている企業にお勤めの方にもご登壇いただき、その評価方法などもご紹介いたします。
例えば、ABテストやユーザビリティテストなども言葉では簡単ですが実際に行ってみると間違ったテスト方法をして検証しているケースをみます。誤った物差しで評価することほどばかばかしいものはありませんので、それらのノウハウをぜひ取得していただければと思います。

【イベントレポート】6/9(土)「WebサイトもスマートフォンアプリもOne Web」

2012-10-11T23:07:00.001+09:00

2012年6月9日(土)、きゅりあんにて開催された「One Web」のレポートをお送りします。

One Webとは

スマートフォンをはじめとするモバイル端末の普及により、Web制作の概念は大きく変わりました。昨年の「One Web」では、「レスポンシブWebデザイン」の考え方や具体的な制作技術、方法論などを紹介し、今年はその続編と位置づけられるイベントです。

今年の「One Web」では、より深く、より実践的に「モバイルデバイスへの対応」に踏み込む内容となっています。スピーカー陣は以下の5名。海外等における最新動向や、より実践的なノウハウ、ワークフロー等が学べる構成となりました。

「Transformative Web Design〜変化にしなやかに対応するデザイン力〜」(長谷川恭久氏)
「レスポンシブWebデザインを商業(ビジネス)サイトで実現するための考えと仕組み」(菊池　崇氏)
「マルチデバイス対応に最適な手法『デザインニング・イン・ブラウザ』」(斎藤祐也氏)
「『制作』から『開発』へ、そして最先端へ - Webアプリ開発の現状と未来」(白石俊平氏)
「One Webにする前に、コンテンツを見直そう！コンテンツ・ストラテジーの意味。」(佐々木朋美氏)

「モバイル化」とは「デバイス対応」ではなく「コンテンツのモバイル化」である

まず、基調講演としてCouldのWebデザイナー、長谷川恭久氏が登壇しました。同氏は、モバイルの普及により、「Web」の示す範囲がどんどん広範になっている点を指摘しました。私たちは今後、想像もつかない場所やデバイスを通して「Web」を体験する可能性があります。2014年には、インターネットのトラフィックはモバイルがデスクトップを超えて1位になり、2015年には、インターネットに接続するために10億台のモバイルが利用されると言われています。パソコンは6億台売れるのに20年かかったのに対し、スマートフォンは8年で6億台を達成したという数字もあるそうです。

こうした状況下で、私たちはどのようにしてWebをデザインしていくべきか。そのためのキーワードとして、同氏は「コンテンツ」を挙げました。今まで「モバイル化」というのは「デバイスに対応する」ことを指していました。しかし、「モバイル化」とは、増えていくデバイスに後追いで対応することではなく、「コンテンツを動かせる状態にする」ことだというのです。わずか百数十ピクセルから数千ピクセルまで、様々なサイズのスクリーンからWebが閲覧できる時代になりました。そうした時代では、コンテンツを、サービスやデバイス、環境、シチュエーションに応じて「自由自在に動かせる」よう設計する必要があります。

特に、これからのデザイナーの仕事は「情報の構造の設計」「情報の配信経路の設計」であるという指摘には、思わず頷かされました。

正しく構造化されたマークアップやコピーライティング(テキスト)、サムネイル(画像)、ビジュアルデザインなど、デザインのスキルは単なるページデザインではなく、情報をどうデザインするかという視点に変わっていきます。また、自分たちが配信している情報が、どうやってユーザーに届き、どうやって共有され、リンクされ、拡散していくのか、デザイナーは想像しながらデザインする必要があるということです。つまり、「モバイル化」というのはデバイスに対応するのではなく、コンテンツをいかにモバイルできるよう設計するかにかかってきます。これこそが、これからのWeb、すなわち「Transformative」(環境や状況に応じて変化できるWebデザイン)なのだという講演内容でした。

「コンテンツアウト」とはモバイル時代に必要な“引き算のデザイン”

引き続き、Web Directions Eastの菊池　崇氏が登壇します。同氏は、「レスポンシブWebデザイン」を商業サイトで実現するために知っておくべきポイントを解説しました。海外では2010年頃より提唱されている「レスポンシブWebデザイン」は、「Media Query」「Fluid Image」「Fluid Grid」の3つの要素で実現しますが、よく「商業サイトでは使えない」という声を聞きます。その理由として挙げられるのは以下の3点ということです。

アイテムが多すぎて対応できない
PCでもスマホでも同じ画像を読み込むから時間がかかる
レイアウトがうまくいかない

同氏は、この3点について解決策を解説しました。特に印象に残ったのは、限られたモバイルの画面サイズに対応するために、たとえば、商品画像の中に、商品名や値段といった情報を含めるといった「スペースの有効活用」により、デスクトップWebと同じ程度の情報量をユーザーに提供しようという考え方です。モバイルWebでは“引き算のデザイン”で情報をうまくまとめる発想が必要なのです。

また、画像のあしらい方を工夫することでパフォーマンスを向上させるテクニックも紹介されました。「Data URI」を用いてアイコンなどの小さい画像を文字列で読み込ませるテクニックや、サイズの大きなメインの画像は、画像の色数を減らし軽量化するとともに、赤や緑や青のフィルターがかかっているように見せる手法が、海外の事例などを引きながらわかりやすく紹介されました。

そして、セッションの最後を締めくくったのが、「コンテンツアウト」という考え方です。コンテンツアウトというのは、必要なコンテンツは何かというのを最初に吟味し、テキスト、バナー、重要な画像…、何が重要なパーツなのかを考えて、それを基準にしてグリッドを設計していく手法です。

このように、「レスポンシブWebデザインは商業サイトに向かない」という声に対する技術的な解決策が提示されました。新しい技術だからこそ、色々な情報や技術を勉強しながら、実際の自分の案件で少しずつ試行錯誤を繰り返す必要があるのだと考えさせられました。

「ブラウザを使ったデザイン」はワークフローの変革とツールの変革を可能にする

続いて、サイバーエージェントの斎藤祐也氏が「デザインニング・イン・ブラウザ」というテーマでセッションを行いました。これは、様々なデバイスに対するデザインをこれまで以上のスピードで行うために、従来のPhotoshop、Fireworksでのモックアップ制作からコーディングというワークフローを見直し、ブラウザでデザインするという実践的な開発手法です。

まず、同氏は、「ワークフローの変革」を提唱しました。これまでのワークフローでは、「設計→デザイン→開発」という、いわゆるウォーターフォール・モデル(前工程を踏まえて次工程を進行する手法)で制作を進めていました。これからは、アジャイル開発のような「設計→開発・テスト・デザイン・スケッチ」という、開発とテスト、デザイン、スケッチの工程を反復させる手法が必要になるという指摘です。

次に、「ツールの変革」です。これが、Webブラウザを、開発プラットフォームして活用する本セッションのテーマとなるポイントです。実際に、ブラウザを使って「ワイヤーフレーム」を作るデモや、それを元に、ブラウザ上で動くモックアップまでをワンストップで作り上げるデモは、鮮やかな手際で「こんなに簡単にできるものなのか」と感じさせられました。ロゴやフッター、スライダー、入力フォーム、ボタン、見出しといった様々なデザインパーツを「基本パターン」とし、組み合わせたものをワイヤーフレームの出発点として、スケッチ＆ビルドが繰り返されていく様子は、まさにアジャイル開発なのだなあと思いました。

実際にブラウザ上で組み上げられたワイヤーフレームやモックアップは、その場で動作確認が可能なため、早めにテストが可能になり、結果として、クオリティを高めていくメリットがあります。同氏がセッションの最後に引用したスティーブ・ジョブズの言葉は、“[Design is] not just what it looks like and feels like. Design is how it works.”というものでした。「デザインはどう見えるか、どう感じるかだけでなく、どう動くかが最も重要だ」という言葉です。

実際に制作の現場で、明日から少しずつでも取り入れていけるような有用なTIPSが数多く披瀝されたセッションでした。

Webアプリや、Webアプリのようなサイトを作るための7つのポイント

次に登壇したのが、シーエー・モバイルWeb先端技術フェローの白石俊平氏です。同氏は、実際にデザイナーと協業してWebアプリを構築した経験・ノウハウや、最新のWebテクノロジーの事例を紹介し、「Webアプリや、Webアプリのようなサイトを作るための心得」をテーマにセッションを行いました。

Web制作は、単なるページ制作から、デザイナーとデベロッパーが分業、協業することにより、Webアプリ開発ともいうべきチームを作ることができます。同氏は、自身の失敗談から得た知見として、「デザイナーとデベロッパーが協力して、アプリ／アプリっぽいサイトを作るためのポイント」を示しました。

(1)セマンティックなマークアップは完璧に身につける
文書のアウトラインを意識してマークアップすると、あとから仕様変更などがあった場合にも、臨機応変に対応が可能になります。事前にHTMLをしっかり作り込んでおくために、セマンティック性をきちんと身につけておくことが大事です。

(2)「シームレスな」レスポンシブデザインにこだわらない
レスポンシブWebデザインは、PC向けもスマホ向けも1ソースで「できる」ものですが、同時に、「しなくてはならない」制限にもなりうる点に注意しましょう。現時点では、PC向けとスマホ向けのデザインを大きく違ったものにはしにくいという性質があります。

(3)レスポンシブにするなら、モバイルファーストで
レスポンシブにするならモバイル向けのサイトを最初に設計した方が絶対によいです。デスクトップファーストにすると、パフォーマンスはどうか、CSSだけでモバイル向けに最適化できるか、コンテンツの設計は適切か、といった不安と常に隣り合わせになります。

(4)「それ、CSSでできる？」の判断力を磨こう
HMLT5/CSS3は素晴らしい技術です。しかし、古いブラウザはどこまで考慮するのかという問題があります。CSS3で色々できるといっても、古いブラウザを考慮するとなかなか難しい面がまだまだあります。悲しいことですが、JSでやる方が簡単なこともたくさんあります。

(5)フレームワークは適材適所
フレームワークとは、作業効率化のためのツールで、クリエイティビティと相反する部分があります。jQuery Mobileをはじめとするフレームワークは確かに便利ですが、万能ではありません。適材適所で使うことが大事です。

(6)インタラクティブなコードでは、「UIの状態」を意識しよう
コーディングの際は、「CSSプロパティは直接JavaScriptで書き換えるのをやめる」ことを意識します。CSSだけ変更すれば、JavaScriptに手を入れなくてもエフェクトを変更できるようにコードを組み立てておくことにより、変更箇所がCSSに集中して、保守性が向上します。

(7)コミュニケーション
デザイナーとデベロッパーが共同で開発するときはコミュニケーションが重要です。コーディングしながら、デザインを変更、微調整する。デザイナーとデベロッパーはコミュニケーションを取りながら進めることが大事です。

やはり、デザイナーとデベロッパーとの対話がものを言うのだなあと感じました。そして、両者のスキル、仕事の領域は今後ますます融合していくのだという思いを強くしました。

コンテンツ制作を成功に導く「コンテンツ・ストラテジー」

イベントの最後として、AQ株式会社 Webディレクターの佐々木朋美氏がセッションを行いました。同氏が提唱したのはコンテンツ戦略(コンテンツ・ストラテジー)という考え方です。これは、エリン・キセーン氏の『THE ELEMENTS OF CONTENT STRATEGY』と、クリスティナ・ハルボーソン氏の『CONTENT STRATEGY』という著作で提唱された考え方で、コンテンツ全体を、「私たちの言いたいことは何か？」「どういうツールを使ってコンテンツを作るのか？」「公開後は誰が管理するのか？」というように体系立てて整理するものです。

モバイルの台頭により、「コンテンツ」は、「デザイン」や「技術」などと並んでWebサイトの中核をなすべき戦略と位置づけられます。コンテンツ・ストラテジーは「有益かつ有効なコンテンツの制作・発信・管理に向けたプランニング」と定義されます。では、「有益かつ有効な」コンテンツというのはどういう特徴を備えているのでしょう。同氏は以下の5つのポイントを示しました。

ユーザーにとって、ビジネスにとって、適切である
特定した目的を達成するために、役に立つ
表現が一貫性を保っている
簡潔であり、要点を押さえている
サポート体制がある

上記のポイントを押さえながら、PDCAサイクルを回していくことが大事だということです。セッションを通じて興味深かったのが、同氏が提示した「コンテキストの多様化」というテーマです。

ユーザーが使用するデバイスによって、コンテンツをいつ読まれているかという「時間のコンテキスト」や、どこで読んでいるのかという「場所のコンテキスト」は変わってきます。さらに、モバイルは「パーソナルなコンテキスト」という特性も備えています。ユーザーのパーソナルな情報は全て端末内に集積されているからです。そして、一番大事なのがコンテンツの「モビリティ(可動性)」というコンテキストです。コンテンツは、転送や再配布が容易で、別形態での転送や分解されて流通されるといった可動性が高いことがわかります。モバイルの台頭により、伝え手が思いもよらないような方法で、コンテンツは消費されていくのです。

デバイスが多様化し、新しい技術が出てきているこれからの時代は、制作者はより「モビリティの高い」コンテンツづくりを意識する必要があるのだと感じました。

このように、デザインから開発、コンテンツまで、より実践的な内容で「モバイルデバイスへの対応」を解説した今回の「One Web」。Web制作に携わる方にとって、今後の仕事の進め方を考えるきっかけになったと思います。

SwapSkillsDoubbble(6) セブ氏のセッションタイトルが決定！

2012-06-27T11:14:00.000+09:00

セブ氏のカンファレンスセッションタイトルが決定しました。

デザインと技術のコンビネーションが必要！

ESIGN IT AND BUILD IT 　直訳ですと、「デザインしろ、コーディングをしろ」です。（＊コーディングだけでなく実装と訳しても良いかも知れません。）日本語訳だと命令形なのでちょっときついのですが、デザインもコーディングも両方とも必要 でバランスが重要。というお話になります。

日本のような分業制体質ですと、コーディングとデザインと分けてしまっていることが多くなりますが、これらは共に重要で共にできなくてはならいという流れが強くなっています。実際、海外では[DIBI]というカンファレンスが4月に実施されているくらいです。こちらのカンファレンスも海外で人気で、セブ氏はこちらのカンファレンスでもメインスピーカーの一人として出演しています。

[DIBI]

HTML5 doctorのブルースローソン氏も出演

ちなみに、セブ氏の左となりに映っている人は、HTML5サイトで世界で一番有名なサイト、HTML5 doctorのライターでもあるブルースローソン氏です。
眼鏡の落書きはお茶目ですね。
Web Directions East 2011では来日して、私の家で焼き肉を食べました。本人を知っているだけでに笑いがとまりませんでした。（笑）そういえば、その際にも洗濯洗剤トップのTシャツを着て喜んでいました（笑）。

話は脱線しましたが、技術だけでも駄目だし、デザインだけでも駄目。 Flasherとしても活躍してたセブ氏はそのように考えています。デザインができても技術的に難しいのでは？と考えている方に、簡単に実装できる方法をご紹介いただきます。このタイトルにピピ！っと来たかたはぜひともご参加ください。

海外で一番ホットなスピーカーに会えるチャンスはここしかありません。

SwapSkillsDoubbble(6) インタラクションデザインをHTML5,CSS3,JavaScriptで実現!! 詳細

SwapSkillsDoubbble(6)メインスピーカーのご紹介　vol.1

2012-06-26T19:12:00.000+09:00

日本では馴染みではないようなのですが、Seb Lee-Delisle（セブ・リー・デリスル）氏は海外では、英国映画テレビ芸術アカデミー賞、プラグインメディア部門を2度に渡って受賞するほどの実力者です。
この記事ではセブ氏の実績を追ってご紹介いたします。初回の今回は昔作った作品をご紹介いたします。
まずは、３年前に作成した「Lunar Lander 3D」というゲームの骨格。Flashで作られ、swfファイルが5118 バイトしかないということで注目されました。

Lunar Lander 3D from Seb Lee-Delisle on Vimeo.

ChatWork（チャットワーク）

2012-06-01T12:57:00.000+09:00

ChatWorkはメール・個人向けチャットツールの問題点を解決したクラウド型ビジネスチャットツールで、2011年３月よりサービスを開始しています。
現在では70,000ユーザーを超えるみなさまにご利用いただいています。（2012年5月現在）

クリエイターのみなさまに関係するところでは、バーグハンバーグバーグ様でも社内コミュニケーションツールとしてご利用いただいています。

◆バーグハンバーグバーグのChatWork活用事例

ChatWorkは、「メールの時代は終わりました」というキャッチフレーズのもと活動しています。みなさんも、以下のような問題を、一度はお感じになったことがあるのではないでしょうか？

◆メールでの問題

迷惑メール

やり取りをさかのぼることが困難

重要なメールを見逃してしまう

誤送信問題

◆個人向けチャットツールの問題

お互いオンラインでしかやり取りが出来ない

デバイスごとにログがバラバラ

メッセージの検索性が良くない

人の管理が難しい

このような問題を一気に解決し、業務効率を2倍、3倍に上げていくことで、時間を生むことができるツール、それがChatWorkです。

◆KDDIとの業務提携により、今後は大企業でも導入が進みます

ChatWorkは、5/8（火）にKDDI株式会社様との業務提携を発表、今後は大企業様でもChatWorkの導入を推進していこうとしています。

いよいよ日本のビジネスシーンでもメール中心から、チャット中心へと、ワークスタイルが変化していきます。

みなさんのワークスタイル改革も、このChatWorkを通じて支援させていただき、みなさまの笑顔のために、社員一同頑張っていきます。

無料からお使い頂けるツールですので、是非ご登録いただき、使ってみてください。お待ちしております！

ゴールドスポンサー

2012年5月よりゴールドスポンサー様として「ChatWork」様よりSwpaSkillsをご支援いただくことになりました。

Wakanda

2012-05-30T21:31:00.000+09:00

WakandaはビジネスWebアプリケーションを構築するためのプラットフォームです。 Webサーバー、データベース、ランゲージ実行エンジンがひとつのパッケージに含まれていて、インストールから開発、配布、運用までを容易に行うことができます。

JavaScript上で実行される統合スタックをエンド・ツー・エンドで提供しており、バックエンドはクロスプラットフォームでクラウドにも対応し、フロントエンドはデスクトップ、モバイル、タブレットアプリケーションなどに完全対応しています。

開発ツールはグラフィックエディターを使って、モデルの定義やビューの作成‘HTMLエディター）、さらにコントローラーの記述（JavaScriptエディターおよびデバッガー）が可能です。 WakandaのすべてのコンポーネントはJavaScriptを使用しています。

インターフェイスのウィジェットの動作も、サーバー上のビジネスロジックの操作もすべてJavaScriptで行われます。詳細はwww.wakanda.jpをご参照ください。

Wakanda 日本語

ブロンズスポンサー

2012年6月よりブロンズスポンサー様として「Wakanda」様よりSwpaSkillsをご支援いただくことになりました。

イマジカデジタルスケープ

2012-05-24T17:54:00.000+09:00

イマジカデジタルスケープは、国内最大規模のクリエイター人材コンサルティング企業として、1995年の創業以来、デジタルコンテンツのクリエイターに特化した人材派遣・紹介事業を展開し、既に数多くの方がWeb、ゲーム、映像、放送、CG、プロダクトなどの業界最前線で活躍しています。

人材派遣・紹介以外にも、新卒の就活支援「クリ博」の企画運営、企業研修・トレーニング等のクリエイター支援や、ゲーム・CG、Web、映像の制作・編集を中心とした様々なコンテンツ制作サービスなど、時代に沿ったニーズに対するサービスを展開しています。

わたしたちは、ご登録者の適正・目標をともに考える充実した「カウンセリング」を強みとし、職務スキル・テクニカルスキル・ヒューマンスキル等の見えにくいスキルをしっかりと把握することで、公開・非公開の豊富な求人の中から最適なお仕事へのサポートを行っています。クリエイティブなお仕事をお探しの方は、当社までお気軽にお問い合わせください。

メディアスポンサー 2012年5月よりメディアスポンサー様として「イマジカデジタルスケープ」様よりSwpaSkillsをご支援いただくことになりました。

typeの人材紹介

2012-05-23T16:16:00.001+09:00

わたしたちは、プロの転職アドバイザーとして、あなたの成功を支援します。

中途採用による人材の流動化で、日本の経済成長を加速させたい。
「typeの人材紹介」は、その理念の下に、1993年に設立された株式会社キャリアデザインセンターに所属する、人材紹介サービスです。

ご登録者様ひとりひとりを、業界専任の「転職アドバイザー」が担当させていただき、ご志向や経験に合わせた適職のご紹介、受かる応募書類の書き方や面接対策といった充実のサポート、5年後、10年後を見据えたキャリアプランニングなど、オーダーメイド型のキャリアアドバイスを行う点を特徴としております。

設立以来、一貫してIT・Web系のエンジニアを中心とした、キャリア志向の高い人材を対象に転職のサポートをして参りました。関東を中心に、質の高いIT・Web系の求人情報を豊富に持ち合わせております。

Webマガジン「エンジニアtype」や技術系のイベント・セミナー、SNSを通じた仕事・キャリアに関する情報発信など、エンジニアのキャリアUPを支援するための取組みも続々スタートしております。

転職をお考えのエンジニアの方は、是非「typeの人材紹介」までお気軽にご相談ください。

メディアスポンサー 2012年5月よりメディアスポンサー様として「typeの人材紹介」様よりSwpaSkillsをご支援いただくことになりました。

SwapSkills公式ブログ

デザイニングインザブラウザを実現するためのCSSスタイルガイドの作成（11月21日開催）

効率よくコーディングするためのLESSベーシック

9/18にLESSベーシックについてのSwapSkillsBuildを行います！

アプリUI開発にも使えるインフォグラフィックスの作り方

機能性のインフォグラフィックス

(1) アイコンで見せる

(2) 色で見せる

(3) 地図で見せる

(4) 量で見せる

最後に

SwapSkillsDoubbbleで「インフォグラフィックス」をテーマに開催

インフォグラフィックス 徳間 貴志さんのご紹介

評価の高いインフォグラフィックが生まれる背景とは？

作品から楽しさと考えを見る

誰にでもわかる富士山とは？

作り方、工夫、思いについて

徳間さんも登壇されるSwapSkillsDoubbbleで「インフォグラフィックス」をテーマに開催

インフォグラフィックス 櫻田 潤さんのご紹介

元プログラマーが考えるインフォグラフィックとは？

ビジュアルシンキングの記事をご紹介

つたえる、たのしさ

バラバラなものも一目で分かる

Webとインフォグラフィックの関係

プログラムでピクトグラム

ドラッガーから学ぶ

櫻田さんも登壇されるSwapSkillsDoubbbleで「インフォグラフィックス」をテーマに開催

インフォグラフィックスとは？

インフォグラフィクスとは

優れたインフォグラフィックスをご紹介

Webの進化を表現

ワインと食材の相性がわかるインフォグラフィック

瞬時の検索

レスポンシブウェブデザインのインフォグラフィックス

インフォグラフィックスのギャラリー

インフォグラフィックスのNEVERまとめ

インフォグラフィックスを制作するなら

TV東京でもインフォグラフィックスが紹介されました！

インフォグラフィックスはサービスになる！

SwapSkillsDoubbbleでは「インフォグラフィックス」をテーマに開催いたします

TAM主催「モバイルファースト」セミナーを開催いたします！

WEBデザイナー、WEBディレクター向け 上手に進行するためのGitHub入門

7/24にGitHub入門についてのSwapSkillsBuildを行います！

今話題の「UX/UI」。理解を深めたい方は必読！電子書籍「ユーザーエクスペリエンスを考える」で考えを深めよう

UX/UI は注目されている

この書籍の読みどころ

こんな方に読んでいただきたい！

著者（出演者）紹介

宇野 雄

渡辺 将基

前田 俊幸

書籍情報

Backbone.jsの生みの親、本人登場のセッションを日本語で勉強できます！

SwapSkills FreeEvnet(19) WED×SwapSkills「Web Directions CODE 2013」「backbone.jsでJavaScriptを深く考える」

JavaScriptのフレームを数多く手がけている本人登場のビデオカンファレンス

Jeremy Ashkenas氏が作ったCoffeeScriptって何？

Backbone.jsでJavaScriptを考える

Web Directions CODE って何？

SwapSkillsBuild(32)「フラットデザインの概要とRWDのWin8UI」レポート

1：色は明度と彩度を利用すると良い。

2：影を利用しないこと。

3：アイコンをなるべく利用しないこと。

4：強く押し出すパーツを置かないこと。

5：背景をうまく利用すること。

CSS3の知識をアップデートしよう！2013年バージョン

6/19に最新のCSS3についてのSwapSkillsBuildを行います！

SwapSkillsFree(18) 「モバイルファーストの考え方」レポート

パネルディスカッション

告知

フラットデザインの基本概念を学ぼう！

5/22にフラットデザインについてのSwapSkillsBuildを行います。

Win8 UI の最新テンプレートを参加者様に先攻ダウンロード

【イベントレポート】11/24(土)「コンテンツマーケティング&戦略」

コンテンツマーケティング&戦略とは

「顧客に必要とされる」コンテンツは資産となり、結果、検索エンジンにも上位表示されるようになる

“集客のためのツール”としてのコンテンツを最初に設計しないといけないワケとは

結果がすぐ分かるABテストの活用により、コンテンツの「勝ちパターン」を見つけよう

コンテンツが収益を上げるための“出版プロモーション”としてのWeb活用の取り組み

LESSは今からでも確実に勉強しよう。

なぜLESSを学ぶべきなのか

インフォグラフィックス　徳間貴志さんのご紹介

インフォグラフィックス　櫻田潤さんのご紹介

WEBデザイナー、WEBディレクター向け　上手に進行するためのGitHub入門

宇野雄

渡辺将基

前田俊幸

SwapSkillsDoubbble(6)メインスピーカーのご紹介　vol.1