2013年11月5日火曜日

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

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

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

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


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

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

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

SwapSkills vol.37|CSSスタイルガイドの作り方

2013年9月16日月曜日

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

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

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

2013年8月7日水曜日

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

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

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

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

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

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

2013年7月31日水曜日

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

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

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

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

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

2013年7月25日木曜日

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

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

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

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

2013年7月23日火曜日

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

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

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

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

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

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

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

2013年6月21日金曜日

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

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

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

2013年6月12日水曜日

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

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

UX/UI は注目されている

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

2013年6月7日金曜日

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

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 で行われた他の動画は有料のオンラインサイトで閲覧を予定しています。イベント当日にお越しいただいた方の中から、これらの動画を1ヶ月限定、無料で閲覧できる権限が抽選でプレゼントされます!

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

SwapSkills Free vol.19|Web Directions CODE 2013

2013年6月4日火曜日

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

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

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

2013年5月28日火曜日

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

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

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

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

2013年5月21日火曜日

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

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

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

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

   

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

2013年5月14日火曜日

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

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

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

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

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

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

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

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

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

SwapSkills vol.32|フラットデザインの概要とRWDのWin8UI