アンディクラークが、デザイニングインザブラウザを紹介してすでに何年も経っています。6月にWebDirectionsEast協力のワークショップで紹介していた際にはカンプを全部ブラウザの中で行う訳ではなく、ディテールなどはPhotoshopを利用しながらも、多くのデバイスで実現させていくにはデザイニングインザブラウザが必要になると解説していた。
日本にもスマートフォンを中心に多くのデバイスが出てくる中、その流れが少しづつ広がりはじめているように思います。
とは言え、どのように今までのワークフローを変化させるかは悩ましいところではないでしょうか？
今回はデザイニングインザブラウザにも通じる、CSSスタイルガイドの作成方法をご紹介します。
スタイルガイド自体も昔からある方法ですが、これらも日々進化していますし、やり方が人それぞれ、プロジェクトごと、組織ごとにも変わってきます。
今回は多プロジェクトに関わる、WebDirectionsEastの菊池氏から、CSSスタイルガイドの基本の考え方と必要性、作り方を学びます。
単純なコーディング、もう少し効率良く作業ができれば！と思った事はありませんか？
飛躍し過ぎかと思われそうですが、アプリUI開発はインフォグラフィックスに通じます。 「長文の説明文を読ませたくない。」「間違えやすいミスを防ぎたい」これらの考えを解決するのがインフォグラフィックスはとても得意です。
インフォグラフィックスの魅力は情報整理術にあります。膨大な量、バラバラの要素、地理情報に、細かい数値。これらを文字情報で理解するには、時間を要することが多いです。 より早く理解するために作られたインフォグラフィックスの工夫は、アプリUI開発に多くのヒントをもたらしてくれます。
2002年「bowlgraphics（ボウルグラフィックス）」設立。国内外の雑誌・Webメディアのインフォグラフィックやマップデザイン、グラフィックデザインを手がける。著書に「クリエイターのための3行レシピ 地図デザイン Illustrator&Photoshop」翔泳社。経済産業省ツタグラ・プロジェクト（2013年度）：アドバイザリーボード。JAGDA正会員。
SwapSkillsDoubbbleにご登壇される櫻田さんは、プログラマー、システムエンジニア、ウェブデザイナーの経験を基に、2010年よりビジュアルシンキング運営をされています。
ピクトグラム、図解、インフォグラフィックの制作活動を行っています。
今年の5月に発売された「たのしいインフォグラフィック入門」の著者でもあります。
内容紹介を抜粋
インフォグラフィックとは、分解すると【ピクトグラム×図解】であると捉え、まずは基礎体力づくりとして前半でそのそれぞれの描き方を、そして後半でインフォグラフィックの作り方を一歩ずつ習得するという構成にしています。「自分の伝えたいことをビジュアルでわかりやすく他者に説明できるようになりたい」、そのようなニーズに応えることを目指しています。
インフォグラフィクスとは、「information」と「graphics」を掛けあわせた造語で、伝わりずらい数値やテキストなどを可視化することで分かりやすく表現する方法として注目されています。
制作する上でイラストなどを組み込みこともありますが、根本はイラストなどを利用することだけではなく、そこにストーリーも添えるのが上手に見せるインフォグラフィックスのポイントのようです。とは言え、情報を見てストーリーだてするにはポイントやコツが必要になりそうです。
5月20日にSwapSkillsFreeで、モバイルファーストをテーマに開催させていただきました。
参加者の反応はとっても良く、みなさん真剣に受講されていました。受講後のアンケートの一部をご紹介いたします。
モバイルファーストというとモバイルだけを考えたもの。だと感じていた方にとっては刺激的だったようです。
「Mobile First＝パラダイムシフト」という話を聞けたこと。 自分はWeb構築の一手法だと思っていたが、仕事のやり方を変えることであり、そのために製品（アプリ、サービス）を「誰が」「いつ」「どこで」使うかを徹底的に考え、そのために必要なコンテンツを極限まで絞り込むために「モバイルで情報提供する」という観点で取り組むということが大切だと理解できた。
使い手目線の重要性が強調されていたことは王道的で安心しました。
現場レベルのお話が聞けたことは、大変ためになりました。
モバイルファーストの概念がより明確になりとても参考になりました。
Mobole First や RWD についての理解がより一層クリアになりました。
モバイルファーストというものの捉え方＝モバイルサイト優先でUI・コンテンツ設計ということで理解していたが、それを超えてマーティングもモバイルファーストだという考え方ができるようになったのでよかった。
「モバイルファースト」という言葉に触れたことはあっても、具体的なコンセプトは知らなかったことを痛感させられました。今回のセミナーでの話題、今後の顧客提案に生かしてまいります。
日々の業務の中で雰囲気や感覚で捕らえていたサービスの考える手順を再確認・再認識できとてもためになりました。
モバイルの特性など、非常にわかりやすかったです。事例もあったのでとても参考になりました。
8月1日にはTAM主催の「モバイルファースト」セミナーが開催されます。 参加できなかった方は参加されてはどうでしょうか？
バージョン管理にGitHubを利用することが多くなりました。上手に進行するためにも大切なのですが、WEBデザイナー、WEBディレクターはなかなか手が出せないままになっていませんか？
2012年8月18日に開催されたイベント“近未来のWebを見るために原点回帰！
ユーザーエクスペリエンスを考える”が電子書籍になりました。
この書籍は、今後出てくる未来の端末にも通用するUXを考えた基本原理が学べる内容です。
UX/UIは2012年秋から急速に注目されるようになりました。Googleトレンドをみてもその注目度は見て取れます。
allWebクリエイター塾（東京都）主催のマンスリー勉強会 SwapSkillsとWeb Directions Eastの共同で、Web Directions South で行われた Web Directions CODE 2013「backbone.jsでJavaScriptを深く考える」の上映カンファレンスが 6月29日（土）15時に 株式会社キャリアデザインセンター で開催されます。
CoffeeScriptのプログラミング言語、 Backbone.js javascriptのフレームワーク、Underscore.js などのJavaScriptライブラリの生みの親であるジェレミー アシュケナス氏が出演した Web Directions CODE のビデオカンファレンスが開催されます。
数多くのフレームワークを作るジェレミー アシュケナス氏は、世界的に有名で、多数の会議やイベントでのスピーカーとして名高い人物です。
その本人のセッションを日本語で開催するカンファレンスです。 既に動画はサイト上にアップされていますが、英語でのセッションなので 正しい英語かどうか不安に思うエンジニア、プログラマーも多いはずです。
そこで、字幕でのカンファレンスを行うことにしました。また、エンジニアだけのコミュニケーションはなかなか取れないため名刺交換も行う予定です。
Web Directions CODE で行われた他の動画は有料のオンラインサイトで閲覧を予定しています。イベント当日にお越しいただいた方の中から、これらの動画を１ヶ月限定、無料で閲覧できる権限が抽選でプレゼントされます！
日本でもWebアプリケーションの注目度が増すようになってきました。 Webアプリケーションの代表的なものは Parl , PHP , Ruby などですが、JavaScriptでの開発も徐々に注目されています。
その一方で、JavaScript はソースコードは見苦しいものになりがちで、特に大規模なプログラムを作るのはかなり骨が折れる作業になってしまいます。 冗長な記号や面倒な決まり文句などが積み重なると、読みづらくメンテナンスしづらくプログラマーからはあまり好まれていませんでした。
そこで、今回登場する Jeremy Ashkenas 氏は、JavaScript での大規模開発経験から新しい言語が必要だと考え、CoffeeScript を作りました。
CoffeeScript の特徴は、JavaScript の良い所を残し、できの悪い所を上手に補ったうえでの綺麗な文法になっているという点と、コンパイル結果が JavaScript になるという点です。文法がRubyやPythonに似ていることから、受け入れやすくJavaScriptプログラムを作るのにもCoffeeScriptを代わりに使うことができるため、開発者は障壁をほとんど感じることなく導入できるようになりました。
CoffeeScriptを作ったJeremy Ashkenas氏は、有名な2つのフレームワークを作っています。
ジェレミー アシュケナス氏はCoffeeScriptを作り、フレームワーク的な存在のBackbone.jsを作成しました。今回は、これらの使い方について、またJavaScriptについて勉強できるセッションを開催しました。
JavaScriptを多用したWebアプリケーションで、どのようにフレームワークが使われ、一般的なパターンがどれに向いているのか、どのように連携するのか、Backbone.jsに特色を与えるいくつかの設計上の決定について解説しています。
本人のセッションを日本語に翻訳された動画を閲覧することでよりフレームワーク利用のポイントを理解することができるでしょう。
Web Directions はオーストラリアで開催されている世界的に有名なITカンファレンスです。このイベントでは2012年から CODE というJavaScriptをメインにした開発者向けのセッションを開催しています。
Web Directions に出演する人の多くは著名で有能な方が多くいます。日本でも2008年よりWeb Directions East という形で開催しています。
CODO 2013 に出演している人が他に十数名いらっしゃいます。毎月のペースで日本語にローカライズされた情報を提供予定しています。
2013年5月22日にSwapSkills Buildの32回目となる「フラットデザインの概要とRWDのWin8 UI」についてのイベントが開催されました。
今回のイベント内容が注目を浴びている事は、席の埋まり具合からも伝わってくるほどで、皆様は熱心に参加されていました。
スピーカーはWeb Directions East CEOで、allWebクリエイター塾でも講師をしている菊池 崇氏です。webでの新しいキーワード「フラットデザイン」「RWDのWin8 UI」について解説していただきました。
スマートフォンなどのサイト制作が多くなってきて、CSS3でのデザインの実装も多くなっています。CSS3講座に受講されている方も多くいらしゃいますが、 アップデートまで行っていない方が多いのではないでしょうか？
最近では、CSS3のプロパティによってベンダープリフィックスを記載しなくてもよいものも誕生してきました。
2013年5月20日にSwapSkillsFree(18)でモバイルファーストについてのイベントが開催されました。参加者のほとんどはプロのWeb制作者、ディレクターで大企業からフリーランスまで幅広い方のご参加をいただき、生憎の雨模様でもたくさんの方にご参加いただきました。
スピーカーは株式会社 TAM Webディレクターの角谷仁さんで、「MobileFirst.jp」を運営されモバイルファーストの提唱者ルーク氏の記事を読み日々研究を行っている方です。
既に日本でもバズワード化した「モバイルファーストとは何か？」基本コンセプトや概念から丁寧にご紹介していただきました。 2012年にWDEでルーク氏が来日した際に紹介したセッションの内容も含め、日本での実例も含めて紹介していただきました。
角谷氏は、「人間は新しいデバイスが誕生するとその媒体の特徴を捉えられず、今までの経験からそれらを定義することを行います。テレビもラジオ付き映像と紹介されていた時代があり、ラジオ放送自体を撮影していたと言われている」とルーク氏が解説したことを紹介しました。
昨年末から海外で話題になっていたフラットデザイン。
以前からBuildなどで取り上げたいと思っていたのですが、実は、フラットデザインは奥が深く勉強するのにすれなりに時間を要してしまいました。
そして、フラットデザインについての記事が日本でも話題になってきたことを踏まえ、知識も増えたことからBuildを開催することにいたしました。 フラットデザインのメリットは、グラデがない分簡単にデザインしやすい反面、ユーザーに分かり難さを与えてしまうことがあります。
今回はこのフラットデザインについて、「なぜ注目されているのか？」「どの辺を気をつけなければならないのか？」など基本的な概念をご紹介いたします。
実は、半年以上前からWeb標準技術でWin8 UIができないか？などの話題になり、レスポンシブWebデザインのテクニックに代表されるメディアクエリを利用したWin8 UIのテンプレートを作成しました。それらのテンプレートの利用方法も含めご紹介予定です。
WindowsAPPを公開する場合、Win8 UIでの実装になりますが、分業でどうしても作業していることが多く、UI部分はデザイナーが担当することが一般的です。 Web標準で作ることができれば、敷居は低くなります。
すでに、WinAPPも優れたデザインがあり実装されていますが、ビジュアルスタジオを入れずしてWeb標準技術で実装できればより自由度なデザインも実現できます。 公開されているバージョンのテンプレートは実は既にバージョンが古くいのですが、このSwapSkillsBuild では新しいバージョンを先攻利用できるようにいたしました。
SwapSkills Build では、来週末からLESSの勉強会をシリーズで開催いたします。
なぜLESSを学ぶべきなのか、なぜシリーズにしたのか、どんな内容なのかを少しだけご紹介いたします。
LESSの記述を学ぶことで単純に制作する時間が少なくなると言えます。2月に登壇していただいた斎藤さんの記事ではカラムの計算をLESSで行うことで数値を動かすことで簡単にカラムが出来上がるという記事を紹介していただきました。以下のようにLESSを勉強することでとっても効率よくサイトを制作することができるのです。
LESSの記述方法なので、それに慣れるために何度も練習しなくては身に付きません。11月17日の初回を皮切りにシリーズで回数を重ねて勉強することで現場での利用方法も自然と勉強できるように構成しています。
allWebクリエイター塾をはじめ、SwapSkillsでは考え方、概念、背景を大切にして教育しています。ある方からはこれらの知識がなくてもサイト制作ができる。と言われましたが 教育の立場でその場だけのスキルを教えることに趣をおいていません。そのような制作方法は誰にでもでき、且つ安い下請け業になりえるからです。
同じサイト制作においても、戦略的で効果の上がる制作ができればそこに価値が生まれると考えています。しかし、これらの考え方はなかなか浸透せず、目先のスキルだけができるようになりたいと思う方が多くいることも事実です。自分が今作ったサイトは先生のコードを見ながら作れた。初めて作れたことに喜びも感じることができるでしょう。しかし、次に思ったことと違うトラブルが発生した際にそのトラブルを解消する力はないと思います。CSSの仕様を理解する勉強方法でないと頭には入らないでしょうし、いつまで経っても自力でサイトを作ることはできないのです。
このように自分の頭で理解することが大切になります。ただ、もうひとつ重要なことがあります。それは柔軟な考えを持つということです。自分の考えに固執してはなりません。 人間は成功体験を経験するとその考え方に縛られる傾向があります。 Webの業界では特にスマートフォン時代になった2年ほど前にアップルのスローガン「Think different」についてご紹介し、新しい考えが生まれる時、考え方を変えなければなりません。とご紹介させていただきました。
コンテンツマーケティング、コンテンツストラテジーなどとWeb業界でもコンテンツにフォーカスした内容が盛り込み始めました。SwapSkills Doubbble「OneWeb2012」のセッションでも AQの佐々木さんが「One Webにする前に、コンテンツについて見直そう！」というテーマでセッションを繰り広げていただきました。佐々木さんの内容は感銘を受けることが多く、考え方として凄く参考にさせていただきました。ブログでもレポートを記載していますのでぜひ読んでみてください。
コンテンツと一言で言っても音楽、動画、ゲーム、アプリなど様々なものがありますが、ここでのコンテンツはテキストや画像、Webサイト上で表現するものを指します。
佐々木さんがいうコンテンツは、モバリティ（移動性）が今後のポイントになるとのことですが、私はもう一つポイントを加えるとするならば「パーソナル性が増した」ように感じます。一昔前の一家に一台のテレビ時代にはTVチャンネルを奪ったものです。私も子供の頃、母のNHK大河ドラマの時間帯は面白くありませんでした。しかし、スマートフォンで読むコンテンツ、タブレットで見るコンテンツは全て一人で楽しむためのコンテンツです。
このようにパーソナル化が進行すれば、そのパーソナルごとにコンテンツを作る必要があると言えます。もちろん、 企業は一人のためだけにコンテンツを提供することは難しいので、セグメントをきってターゲティングを行います。 企業側はこれを理解して、同じ情報でもターゲティングによってコンテンツの見せ方を変える必要がでてきていると言えます。
ESIGN IT AND BUILD IT 直訳ですと、「デザインしろ、コーディングをしろ」です。（＊コーディングだけでなく実装と訳しても良いかも知れません。） 日本語訳だと命令形なのでちょっときついのですが、デザインもコーディングも両方とも必要 でバランスが重要。というお話になります。
日本のような分業制体質ですと、コーディングとデザインと分けてしまっていることが多くなりますが、これらは共に重要で共にできなくてはならいという流れが強くなっています。 実際、海外では[DIBI]というカンファレンスが4月に実施されているくらいです。 こちらのカンファレンスも海外で人気で、セブ氏はこちらのカンファレンスでもメインスピーカーの一人として出演しています。
ちなみに、セブ氏の左となりに映っている人は、HTML5サイトで世界で一番有名なサイト、HTML5 doctorのライターでもあるブルースローソン氏です。
眼鏡の落書きはお茶目ですね。
Web Directions East 2011では来日して、私の家で焼き肉を食べました。本人を知っているだけでに笑いがとまりませんでした。（笑）そういえば、その際にも洗濯洗剤トップのTシャツを着て喜んでいました（笑）。
話は脱線しましたが、技術だけでも駄目だし、デザインだけでも駄目。 Flasherとしても活躍してたセブ氏はそのように考えています。 デザインができても技術的に難しいのでは？と考えている方に、簡単に実装できる方法をご紹介いただきます。 このタイトルにピピ！っと来たかたはぜひともご参加ください。
