テクノロジーと人の交差点。未来を作るイベントFuture Sync Vol.3に行ってきた。

ワサ!ワサ!久しぶりのブログ更新。

5月11日に福岡の九州産業大学で行われたIT系のイベント「Future Sync Vol.3」に行ってきました。

(今回ブログを書くにあたり、カメラマンのたいしょーくん(@taisho_jp)が撮影した写真の使用を許可して頂きました!彼が撮った写真にはキャプションつけてあります。たいしょーくん素敵な写真をありがとう!)

Future Syncってどんなイベント?

下記、イベントサイトからの引用になります。

『Future Sync』は、ITに関わる様々な人々が集い、近い未来について語り合うトークイベントです。

それぞれが別々に思い描いている「近い未来(Future)」 について語り合い、

それらを多くの参加者と「同期(Sync)」することで理解を深め合いながら、

新たな可能性・アイデア・ 閃きを得られる大きな出会いの場にすることを目指します。

WEBや映像、アニメーションやARなどITを駆使したものづくりに関する話題を中心に、都市設計やUX、コミュニティづくりなど幅広いテーマでその第一線で活躍する登壇者のお話を聞くことができます。

その豪華なスピーカー陣やセッション内容は下記のWEBサイトで見てみてください。

Future Sync Vol.3|分野を超え、未来について語り合うトークイベント

futuresync3-1

というわけで九産大に行ってまいりました。いつ来ても素敵なキャンパス!

ここに来るのはHTML5Carnival以来。九産大ではITイベントがよく行われているイメージです。

futuresync3-2

当日は実にお日柄もよく!

コンセプトは「知識の寄り道」

Photo by @taisho_jp
Photo by @taisho_jp

今回のコンセプトは「知識の寄り道」ということで、分野を超えた多くの専門テーマのセッションを選ぶことできます。普段自分が関わりのない分野の知識に触れることで、新たなヒントやアイデアが生まれそう。

そしてなんと学生は無料!

未来の担い手には学校の授業だけではなく、幅広いアイデアに触れてもらいたい!そんな想いが伝わってきます。

学生時代からプロフェッショナルの話しを直に聞くのはとてもいいことだし、イベントに参加した学生の世界が広がっていけばすごく意義のあることだと思います。

とはいえ30歳過ぎた僕だって色んなものを吸収してまだまだ成長していきたいわけで、社会人も学生も同じ目的で参加できるイベントって素敵ですね。

Photo by @taisho_jp
Photo by @taisho_jp

受付ではスタッフの方たちが丁寧に案内してくれました。

Photo by @taisho_jp
Photo by @taisho_jp

さていよいよ開催!

とは言っても実は僕は1つ目のセッションに間に合わなかったんですけどね。。。

当日は次のようなセッションに参加してきました。

TVアニメの企画から販売のお話し

Photo by @taisho_jp
Photo by @taisho_jp

アニメ作品リトルウィッチアカデミアなどを制作している株式会社トリガーの桝本さんのお話しでした。

アニメ制作の工程や業界の収益構造について、裏話的なことも含めて話してくれました。

DVDのようなアニメのパッケージ商品の今後や、海外での取り扱いの違い、そして桝本さんがこれから大事だと考えるビジネスモデルの話しなど、アニメに限らずコンテンツを扱うときに応用できそうな考えが多くありました。

futuresync3-7

実際に原画や背景画を見せてくれたり。

futuresync3-8

やっぱりプロって凄いですよね。。。

長編CGアニメ映画制作のお話し

Photo by @taisho_jp
Photo by @taisho_jp

続いてモンブランピクチャーズの田中さん達のお話しを聞きました。

昨年夏にロードショーされたCGアニメ映画「放課後ミッドナイターズ」制作時の苦労や、そこから得た学びについて共有していただきました。

実績を重ねて意気揚々と映画製作に乗り込んだその先は・・・?

多数のCM制作を手がけてきたなかで巡ってきた映画製作のチャンス、しかし想像を超える圧倒的な作業量に、制作体制の大幅な見直しを迫られたとのこと。その苦労話がとても面白かった。そのときの経験から作業量の見積りやワークフローを改善して、現在はより強固な生産体制が身についたそうです。

印象に残ったのは次のような話でした。

海外は技術よりも「統合力」を養うことに力を入れている。

日本人は技術に優れた人たくさんいる。

でも結局技術はお金で買えちゃうよね。

これから日本に大切なのは多様なスキルを組み合わせてプロジェクトを進める「統合力」。

大規模なものづくりになればなるほど、システマチックな管理が重要になってくる。

僕みたいな零細フリーランスでも視野を広くもって意識していたいポイントです。

モンブランピクチャーズのカッチョイイ実績の数々はWEBサイトで見ることができます。

福岡ITコミュニティのお話し

Photo by @taisho_jp
Photo by @taisho_jp

福岡のWEB制作者の間では有名人な方々によるトークセッション。

Twitterが流行りだした辺りから少しずつ活性化してきた、福岡WEBコミュニティの歴史を時系列に沿ってお話ししていただきました。

僕自身、1年前に福岡に引っ越して活動を始めたときに、福岡のWEBコミュニティの活発さに驚いたんですよね。

毎週と言っていいくらいなにかしら勉強会やイベントが行われてたりするし、それほど地方であることの技術の遅れというか、ディスアドバンテージは感じません。

こっちに来て1年経った今、贔屓目なしにしても僕は福岡のWEBコミュニティやそれを取り巻く環境は超イケてると思っています。

今回のFuture Syncをはじめ、HTML5 Carnivalや明星和楽のような大規模イベントも多く開催されるし、産学連携の取り組みも盛んに行われている気がします。

あとはものづくりに集中できる環境とか色々魅力はありますが、まあそこらへんのことは追々書きたいな、と思います。

Photo by @taisho_jp
Photo by @taisho_jp

そんな楽しいコミュニティも、今回紹介されたような先人の方たちの取り組みあってこそのものなのです。

僕は微力ながらこうしてブログで福岡という地域の良さを伝えていけたらなーと思います。

ちなみに今回登壇された皆様は実は僕が移住前にTwitterで福岡リストを作ってひそかにヲチしてた方たちでもあります。

WEB制作者で福岡移住に興味のある方は、このセッションの登壇者たちをフォローしておくと色々と勉強会やITイベントといったコミュニティ情報が拾えるのではないでしょうか。

セッション登壇者一覧

お金儲けのお話し

Photo by @taisho_jp
Photo by @taisho_jp

モンブランピクチャーズの平田さんによる、クリエイターももっとお金儲けのこと考えていけばいいんじゃない的なお話し。

ちょっと知り合いと話していて途中参加したら完全に乗り遅れました。。。

「クリエイターもプロデューサー的な考え方を意識したほうがいい、そうじゃないと悪い奴に騙されちゃう。」というお話しは大切ですね。

作れれば満足、という価値観もあるだろうけどやっぱりお金はうまく稼いだほうができることの選択肢も増える。そういう意味でも大事だと思うのです。

でもお金儲けの視点ってなかなか教わることはできない、どうやって身につけたらいいのか?という質問の回答がとても興味深かったです。

日々僕らはお金儲けの反対側、つまり消費者として生活しています。

どんな情報が購買の意思決定に影響したかは、消費者である自分自身が一番よく知っているはずなのです。

それを踏まえながら逆の立場になって、どうビジネスを組み立てるか意識して過ごせば、自然とお金儲けの視点は身につくはず、ということでした。

LT(ライトニングトーク)!!

セッションが全て終了したあとは立候補の方を募ってのLTが繰り広げられました。

持ち時間3分の中でそれぞれ活動のPRやプレゼンをしていきます。

イベントや勉強会の告知、募集をする人、

福岡で過ごした時間に対する想いを伝える人、

プレゼン上手な人も不慣れな人もどれも熱いLTばかりでした。

Photo by @taisho_jp
Photo by @taisho_jp

そして最後に全てを「破壊」していく人たち。

このLT面白いけどひどかったww

大幅な時間オーバーで強制終了されましたが明星和楽の告知もされまして、なにやら次は遠隔地との共同開催?も検討されているようなので楽しみです。

テーマは「破壊」らしいです。いいね!既存の枠組みをぶっ壊す!

Future Syncも早くもVol.4の話しが出てるとか出てないとか。

今回Twitterのホットワードでも1位を記録したらしく、大盛り上がりのイベントでしたね。

福岡の若者が殺到し、Twitterトレンド第1位に昇り詰めたトークイベント『Future Sync vol.3』当日のつぶやきまとめ!

すごく充実した内容のセッションばかりで刺激をうけまくった1日でした!

開催運営者の皆様、スタッフの皆様、登壇者の皆様、会場関係者の皆様、本当にお疲れ様でした!

以下、関連ブログ・スライドまとめです!

「ブログや資料アップしたのに載ってない」という方がいらっしゃいましたら教えてください!

参加された方やスタッフの方たちのブログです。

「Future Sync vol.3」に参加してきました! | nrjlog

Future Sync Vol.3 | Find Your Alter-Ego

Future Sync v3にいってきますた。手抜き感想ver。 – nobkzのブログ

未来を同期する。Future Sync vol.3に参加してきました。 | せせストリート7番街

FutureSync vol.3に参加しました – Firespeed

FutureSync Vol3に参加して | りぐん怪獣じゃないもん!

セッション内容の資料です。

HTML5 CARNIVAL FUKUOKAに参加してきた。【スライド・Ustreamまとめあり】

※この記事は2月9日に開催されたHTML5 CARNIVAL FUKUOKAのレポート記事です。
スライドやUstreamのまとめだけ見たいという方はこちらからどうぞ! → クリック!

福岡の大規模HTML5イベント開催!

先月カルタ大会を手伝っていただいた@akase244さんが、なにやら福岡のでっかいHTML5イベントの運営に携わっていると教えてもらっていて楽しみにしていたHTML5 CARNIVALが九州産業大学にて開催されたので参加してきました。

HTML5 CARNIVAL FUKUOKA 2013年2月9日@九州産業大学

直前にチケットをプリントアウトするためにZusaarのイベントページを覗いたのですが、

html5carnival-attend

参加人数500人近くなってる。。。すごっ!

でっかいイベントとは聞いていたのですが、これだけの規模になるとは開発者、デザイナーのみなさんのHTML5に対する関心の強さを感じます。

html5carnival-fee

しかも参加費が無料。なんてこった、ありがたいありがたい。

運営者のみなさんやスピーカーのみなさん、スタッフのみなさんに足を向けて眠れません。

ってことで行ってきましたHTML5カーニボゥ!

kyusan-station

会場の九州産業大学がある駅です。博多から東側って実は来るの初めてでした。(北九州は行ったことあるけど。)

kyusan-entrance

おお!カーニボー開催中!

kyusan-campus

広々として素敵なキャンパスですねー。天気もいいし気持ちいいなー。と結構歩きましたが、

html5carnival

やっと会場に到着!

すでに最初のセッションが始まっているので早速なかに入ってみると、

kyusan-classroom

すごい人だ!240人も入る教室がほぼ満席!
WEB制作者って多いんだなーと勝手に圧倒されました。

どれも魅力的なセッションなので毎回どこの教室に行こうか迷いましたが僕が参加したセッションについてまとめておきます。

「オフライン・ファーストの思想と実践」 by 白石俊平さん

オフラインWEBとは?

例えば地下鉄でWEBアプリケーションを立ち上げてて、電波が途切れても使える、電波が復活すれば作成中のデータが引き継がれる。そんな便利な機能のこと。

去年モバイルファーストがバズワードになったけどそろそろオフラインファーストってコンセプトが注目されるのでは?

オフラインWEBのメリットはオフラインでも使えること、そしてサーバーアクセスをしないのでスピードが早い。例えばTitanium MobileのAPIドキュメントとかはオフラインWEB対応になっててサクサク動く。

app storeのトップ50に入るアプリケーションの多くはなんらかの場面でオフライン機能を実装している。

ただ、適材適所があるのでコンテンツやサービスの内容によってうまく使うことが大事。

読み物コンテンツやメディアは、データ量が多くなるし、ユーザーの行動を追うトラッキングなどがオンラインじゃないと有効にならないためにオフラインWEBには向いていない。

向いているのは編集を目的にするWEBアプリケーションとか。Google Slidesなんかはオフライン機能を持っていて、オフライン時に編集した内容はオンラインになったときにその場で送信されるようになっている。

HTML5はこうしたオフラインWEBを実現するAPIを持っていて主なものは以下の4つ。

・アプリケーションキャッシュ
・Web Storage
・Indexed Database API
・File API

それぞれの機能や具体的な使い方はUstreamで確認してみてください。

オフライン機能を持つWEBアプリケーションは、オンラインを前提としたWEBアプリケーションとは大きく作り方が異なるので、これからの時代は「オフライン機能があることを前提」にしたオフラインファーストの考え方が大事になってくる。

「FlashじゃなくてHTML5でビュンビュン動くサイトを作ってと言われたら」 by おおくぼひろあきさん

FlashとActionScript制作に携わってきたおおくぼさんに、そのノウハウを活かしたJavaScriptでのコンテンツ制作について話していただきました。

で、FlashじゃなくてHTML5でビュンビュン動くサイトを作ってと言われたらどうするのか?

okotowari

のっけから身も蓋もなくてふいたw
でもそれってじつはこういうことなんです。

sonokawari

確かにFlashのようなアニメーションを実現しているのはHTML5の機能だと勘違いされる場面も多いと思います。

HTML5には確かにCanvasという機能がありますが、流行りのパララックスサイトやHTMLの要素を動かして魅せるサイトとして注目されるWebサイトはJavaScriptによって実現されているものが多いはずです。

で、JavaScriptを使ってDOMを操作するなら、HTML規格は必ずしもHTML5である必要はないんですよ、ということでした。

ただ、無用のトラブルを避けるためにも文字コードはUTF-8がいいですよ、と。

何かすごく苦労した経験がおありのようでしたw

詳しくはスライドを見ていただきたいですが、

フローと描画というブラウザの働きを理解して、なるべくリフローが起こらないため操作するDOMに対してposition:fixed, absoluteを設定する。

ただ、position:fixed, absoluteをあんまり使うとレイアウト作るにもJavaScript使う苦労がある。

IE6~8はCSS3使えないし、Polyfillなライブラリ使っても結局JavaScriptが衝突したりと大変なこともある。

などなど、多くの現場をこなしてきたことで見えてくるノウハウや注意点がものすごくためになりました。

最後に「これは本質的だなー」と思ったのが、

JavaScriptで実現するアニメーションについては、起点と終点の内容をHTMLとCSSで表すことができなければいけない。

という点でした。ビュンビュン動こうが基本となるのはやっぱりHTMLとCSSでしっかり書けているかということなのです。

セッションに関する補足(?)もブログにまとめいただいています。

「Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら」資料公開しました « イナヅマTVログ

ちなみにこのブログにたまーに貼ってあるアフィリエイトリンクをクリックすると何かいいことがあったり、アフィリエイトリンクをクリックすると何かいいことがあるそうです。大事なことなので2回言いました。
嘘じゃないです。おおくぼさんがしきりにそう言っていました。

とにかくセッションのあとは「JavaScript頑張ろう!」と思える内容でした。

そんなおおくぼさんのCanvasに関するお話しが3月9日にFxUG 第178回 勉強会@福岡で聴けるようなので参加したいなと思います。

「small画面でも、BIG画面でも、今すぐ使えるレスポンシブ活用術」 by ダニエル・デイビスさん

ダニエルさんのこのセッションもめちゃくちゃわかりやすくて目から鱗が落ちまくりでした!

まずは下記のような概略的なレスポンシブウェブデザインの話しから。

・ECサイトをレスポンシブデザインにしたらコンバージョン率や注文数、売上げが増えた。
・モバイルユーザーは必ずしも電波状況が悪いところや移動中とは限らない。
・コンテンツの縮小を図るより、表示の最適化を考えるべき。

この後に、既存のWEBサイトをRWDにするためのライブコーディングが実際に行われたんですが、このわかりやすいことなんの!

説明や考え方も非常にシンプルで、すでにあるWEBサイトにモバイルデバイス用のレイアウトも加えるときのポイントというか勘所というかとにかく「ああ、こうやればいいんだ!」という手順がすんなりと頭に入ってきました。

RWD気になってるけどまだ手をつけられないでいる。。。と思ってる人はぜひダニエルさんのUstreamを見て欲しいです。

「コミュニケーション系API最新事情〜WebSocketからSocket APIまで〜」 by 小松健作さん

最後はHTML5のWebSocketやSocket APIなど通信系のAPIについて小松さんのお話を聞きました。

カエルの着ぐるみを着て異端な空気をプンプン醸し出しておりましたが、内容はいたって真面目な内容でした。いまとなってはあのお姿を写真におさめていなかったことだけが悔やまれます。ああほんとうに惜しいことを致し候。

なのでUstreamからのキャプチャ画像を貼っておきます。

frogman

セッション内容は各プロトコルについての説明から始まり、WebSocketの特徴、WebOSの説明へ展開していきます。

技術的な説明にはなかなかついていけなかったんですが、PCでもうひとつのデバイスのミュージックプレイヤーを操作したり、スマートフォンでPCのアプリケーションを立ち上げたりというデモを実際に目の前で見せてもらって、これらのAPIを使ってどのようなことが出来るのか?という部分はイメージを持つことができました。

・IPアドレスに依存した通信システムをつくるのはよしましょう。
・ネットワーク条件が複雑化してくるのでLayer Violationsを前提にして物事を考える。

HTML5の機能によってネットワークの形も大きく変わっていきます。デバイスの連携が実現することによって離れた場所にあるコンピュータを遠隔操作したり、私たちの暮らしも変わってくるでしょう。

ただ、同時にセキュリティやプライバシーの面でクリアすべき点も考えていかなければならないということですね。

すごく楽しいカーニバルでした!

以上、HTML5 CARNIVAL FUKUOKAにて僕が聴いたセッションでしたが、どれもまさに変化するWEB技術の最前線を走っている方たちのお話しで、HTML5の様々な側面について理解を深めることができました。

会場にはたくさんの方たちが集まっていましたが、こんなに多くの人が自発的な学習をするような業界ってあまりないんじゃないかなと思います。それもやはり、ものづくりが好きという気持ちの表れで、すごく素敵なイベントだったなと思います。

最後に今回のイベント運営の方々、スタッフの皆さん、スピーカーの皆さん、このようなイベントを開いてくれて本当にありがとうございました。そしてお疲れ様でした。

関連ツイートまとめ

今回のイベント責任者@akase244さんがTwitterまとめてくれました!
「HTML5 Carnival Fukuoka」のまとめ #html5carnival – Togetter

他の方の参加レポート

Tsuyoshi.さんの参加レポート

HTML5 Carnival Fukuokaに参加してきた。なんと500人規模の大イベント!Ustream配信もあります! | WebCake

ボタンティアスタッフとして参加されたzuzuさんのレポート

HTML5 Carnival Fukuokaに参加しました | zuzuPost

ボタンティアスタッフとして受付をされたいたのりじさんのレポート

「HTML5 Carnival Fukuoka」に参加してきました。 | nrjlog

セッションUstream、資料まとめ

さて、長いレポートになりましたが読んでくれてありがとうございます。

以下は今回開かれたセッションのUstreamと資料を見つかった分だけまとめておきますのでぜひ役立ててください。漏れている資料があればリンクさせていただきますのでTwitterなどでお知らせください。

オフライン・ファーストの思想と実践 by 白石 俊平さん

勧告候補になったHTML5.0の仕様についてと、HTML5.1の始まり by マイク・スミスさん

HTML5のWeb制作を確実に楽にする最新のアドビWeb制作ツール by 轟 啓介さん

Webプラットフォームの最新動向 2013年版 by 浅井 智也さん

FlashじゃなくてHTML5でビュンビュン動くサイトを作ってと言われたら by おおくぼ ひろあきさん

NoSQL DBとJavaScript by 原田 光一さん

Chrome Appsで作る新しいユーザー体験 by 北村 英志さん

講演資料「Chrome Appsで作る新しいユーザー体験」 | Google+

small画面でも、BIG画面でも、今すぐ使えるレスポンシブ活用術 by ダニエル・デイビスさん

ハイブリッドアプリ開発最前線から見たHTML5の理想と現実 by 田中 正裕さん

HTML5は本当にマルチデバイス対応の銀の弾丸か by 羽田野 太巳さん

Flashの軌跡から紐解くHTML5のこれから by 平山 真さん

コミュニケーション系API最新事情〜WebSocketからSocket APIまで〜 by 小松 健作さん

第3回 福岡マークアップ勉強会に参加してきた。

もう1週間経ってしまいますが、周回遅れの参加レポート。

このまま書かずに終わってしまうのかと思ったが書く!書いとこう!金曜の夜に!飲みにも行かず!飲みにいく相手がいないとか言わず!

場所はおなじみAIPカフェにて。

デザインの話し、マークアップの話し、プログラミングの話し、そして便利なショートカットの使い方とかWeb制作全部載せの盛りだくさんの内容でした!

プログラミングのお話し

@kecy_さんのPHPのお話。

PHPの処理の流れから始まり、フォームの動作の流れとか変数の定義のしかたとか。
PHPの基本的な部分を丁寧に解説。

僕みたいにコピペでなんとかのりきってそしらぬ顔してる人間からしたら、こういう基本的なことでも丁寧に説明してくれると自分の理解の再認識でとても助かる。

GET、POSTの違いやファイル読み込みのしかたまで説明したところで、実際にデモサイトで問合せフォームからメールを送ってみてちゃんとプログラムが動作することを確認。

デモサイトまで作ってなんて丁寧なんだ。。。
コンテンツ内容はめちゃ適当だったけどw

内容と関係ないけど@kecy_さんめっちゃ緊張してたから、僕はとってもためになりました!いけるいけるー!がんばれー!とインターネッツの片隅から応援しておきます。周回遅れだけど。

デザインのお話し

@naminyさんのデザイン、というか某大きな会社さんの制作体制のお話し。

規模がでてる会社がどういう体制で案件すすめているのかとか、いやー、こういうのすごく気になります。分業体制しいてるところのコミュニケーションがどうなってるとかそういうの、僕は制作会社につとめたことがないのですごく参考になるんですよね。

聞いたお話しを差し障りがないであろう程度に書いときます。

体制はプランナー(以下P)、デザイナー(D)、コーダー(C)による分業体制。

Pが仕事持ってくる(Pは営業も兼ねてるのかな?)。そこでDとCも一緒にキックオフミーティングを行う。

Dがデザインを作ったのち、同僚のDさんたちにも意見を求めデザインをブラッシュアップ。ああこういうの組織だとできるよねいいなー。

Cにデザインデータ渡してコーディング。

実際に案件として作ったサイト見せてもらう。綺麗やなー。

基本的にワイヤーフレームはPが作ってDに渡してから大体1日かかりっきりでトップデザイン、見出しなどのパーツデザインが全部出来揃う。1日で。。。?早いですね。。。orz

でもデザインって強弱の付けかたとか、メリハリとか書体選ぶの難しいですねって。それはすごくわかる。もう本当デザインのスピードあげたいです。

結構質問もでてて、PとDとCの連携についてとかも興味深かった。

顧客折衝は基本的にPが行う。ディレクションなどもP。さすがピー。Dがコーディングの難しそうなデザインをはりきって”ピー!”したとしても、Cが新しい技術を”ピー!”したいからオッケーとかお互い向上心をもって円滑に”ピー!”できてるのでなんとも素敵だねおっといけないこれ以上は他社さんのことゆえ自重します。自重はダークサイド。いいたかっただけ。

さらにデザインのお話し

@ta2kickさんのデザインの心構えとかのお話し。

デザインとは!という深い話し。これはすごく考えさせられた。
これだけは絶対忘れないでおこ!と思ったのが、アートとデザインの違いという話し。

「アートは問題提起」
「デザインは問題解決」

これ!かっこいい!名言や!

となるとその問題解決をするために初回の打合せというかヒアリングがすごい大事なわけで。

そこでこれ重宝しまっせと出たのが@mune_noriさんが所属しているアスパラガスさんヒアリングシート!

これ実は僕もこっちに引っ越してくる前から知ってて本当おすすめ。というのも僕はWEB制作の請負はじめるときにどうやって仕事すすめればいいかもわからず、とりあえずヒアリング項目を決めようということで検索して見つけたのがこのシートなのです。

以来このヒアリングシートの内容をパク…いや参考にさせてもらっていて、なぜか今回のサイトリニューアルでもアスパラガスさんのデザインをパク…いやちょっぴり参考にさせてもらっています。

ちなみにこのヒアリングシートはダウンロードできるようになってます!

で、ヒアリングしっかりするとお客さんが自分でも気づかなかった部分に気づいてくれたり、新たな方向付けがみえたりして、相手のビジネスの根幹的な部分が共有できるようになるということ。

他のお仕事につながったりすることも多く、相手のビジネスと共栄していくことってとっても大事ですね。あとはデザインするときに誰かに説明したくなるストーリーや仕掛けを盛り込むというのはなるほどなーと思いました。

お客さんが自分で話したくなるようなデザインの意味づけができれば、ブランディングにも役立つし、お客さんがブレずにビジネスを行っていくうえでのサポートもできますね。

自分は何をデザインするのか?という問答はこれからも繰り返し行っていこうと思いました。

あと、ロゴのラフ100案とか聞いたときもう死にたくなりました。頑張れ、俺。

マークアップのお話し

@mune_noriさんのマークアップのお話し縮小版。今回はhead内のマークアップのお話し。

まずは文字化けしないように文字コードの設定から。
ごちゃっとしたコードを例にどこを改善していくかお話ししていきます。

改行やインデントも適度に行いましょう。

見やすいコードは思いやりです。

といったあの瞬間、僕は反射的に目を反らし扉の向こうの冬の寒さに思いをはせ、ああもういくつ寝たらあったかくなるとかあれ遠くに行ってた、綺麗なコードを書くことを心がけますすいません。

Webサイトが早く表示されるようパフォーマンスも意識してマークアップしよう!

これ、僕もしっかり勉強しておさえとかなきゃいけないとこだ。
まず他のファイルが同時読み込みできるCSSは最初のほうに書いておくこと。
あとはデザイン時にスプライトシート作ったりすることも高速化に寄与しますとのこと。

でも管理のしやすさとトレードオフになる場面もあるので、パフォーマンスが必要なサイトかどうか判断して柔軟に対応していこう。

スライドは下記からみれます。
俺のhtmlマークアップ【head編】

小ネタ話

そして毎回定番になってる(?)らしい@tamshow_さんの制作TIPSなどのお話し。

Macのスポットライトで計算ができたりアプリが呼び出せたりファイルと同じディレクトリに移動できるよ!とかMac使いの方たちがキャッキャウフフして楽しそうだった。

僕はそれを横目でみてた。

横目でみながらテトリスやってた。キーホルダーみたいになってるやつ。

っていう心持ちで「ドックがなんちゃらでオプション押しながらスライドするとー!」「おおー!」なんて盛り上がったときにはテトリスやってる場合じゃねー早々にMacを買おうと心に強く思いました。Macほしい。あとニンテンドーもほしい。

スポットライトの使い方は@tamshow_さんに詳しいです。
役立つスポットライトの使い方

あと、レコロっていう決めた時間ごとに自動撮影してくれるカメラをPCと同期させる方法とか紹介しててすごく面白かったです。

次期Zen-codingのemmetの実演もちょこっと拝見できました。すっげー便利そう。これ覚えよう。

ツールの使い方とか、いちいち調べるのがめんどうですが覚えとくと便利なことってまだまだたくさんありますね。ちゃんと毎回調べる癖付けよ。。。

というわけでデザイン、マークアップ、プログラミング、制作TIPSと全部のせでとても楽しかったです!次回も参加させていただきます!

今回の勉強会の様子は運営の@kanapple73さんがブログにもまとめてありますのでぜひご覧ください。
第3回 福岡マークアップ勉強会 -kanapple.net

@kanappleさんも某大きな会社でサービスのパフォーマンスをあげるために日々やるかやられるかのギリギリの高速化チューニングにいそしんでるとかいないとか。ぜひそこらへんの話しも聞いてみたいです!

僕も何か話しできたらなーとか考えてますので何かネタをさがしてみます。
気づいたら写真の1枚もございませんでしたが参加レポートでした!

「新春!!HTML5KARUTA大会」福岡会場レポート!

2013年あけましておめでとうございます!

さて、今年はこのブログもちょっと力を入れて更新を増やしていこうかなーと思ったり思ってなかったり。

今回は1月6日に行われたHTML5KARUTA大会の様子をまとめてみます。

 HTML5KARUTA大会とは?

Webcre8.jp@glatyouさんによってデザイン・作成された、HTML5を遊びながら学べるカルタを使って全国同時にカルタ大会をしよう!という斬新な企画です。詳しくは下のリンク先のサイトに書いてあります。

HTML5KARUTA – 「HTML5カルタ」で覚えるHTML5の108つのタグ

「これは面白そうだ!WEBコミュニティが盛んな福岡としても参加するしかないッ!」と半ば勢いで福岡会場の主催者として手を上げさせて頂きました。

とはいっても集客などの告知については僕はあまりに力足らずで、HTML5勉強会を開催している@akase244さんのご協力なくしては開催自体が危うかったはずです。@akase244さんありがとうございました!

蓋を開けてみれば13人の方にご参加いただき開催したHTML5KARUTA大会 in 福岡、今回は僕も運営に携わっている福岡大名のシェアスペース「Future Studio 雁林」を会場として使用しました。

HTML5KARUTA大会開始!

当日は各会場でUstreamの配信が行われましたが僕は配信するのが初めてだったのでちゃんと出来ているのか不安なまま大会説明スタート。

っていうかカルタ自体が久しぶりすぎてルール忘れてた。お手つきとかあったよね、ペナルティは一回休みでいいですねー、というふわっとした説明でとりあえず練習開始。

今回使用したカルタはデザインも凝っていて、ちゃんとソースコードがグレーで記述されているのがわかります。見た目に紛らわしいpタグとbタグなども背景のソースコードの向きで判別するという技も編み出されました。

見出しを表すh1~h6のタグなどは狙い目タグとして激しい取り合いになる場面もあり、HTML5KARUTAならではのゲーム性があって面白かったです。

いよいよ決勝戦!

予選を勝ち抜いた上位4名による決勝戦です。
さすがに決勝だけあって札に読まれてからの反応の速さや、タグの理解の正確さなどが求められる勝負となりました。

結果、圧倒的な強さで@andante0727さんが優勝!
優勝した@andante0727さんと準優勝の@yuki930さんにはそれぞれ賞品として下記の書籍を贈らせていただきました。

優勝者:すべての人に知っておいてほしい HTML5 & CSS3 の基本原則
準優勝:10日でおぼえるHTML5入門教室

この日の服装が書籍の表紙とまるかぶりだったので著者と間違えられた!
自分でもわらうわこれはw

いや、僕にこのような本を書くスキルはございません。。。

ちなみに3位、4位のかたには今回使用したカルタを賞品として贈らせて頂きました!

ぜひ会社の同僚の方と一緒に遊んでみてください!

大会終了後は頼んだピザと飲み物を囲みながら、雑談タイム。
その他、博多で行われるMovable Typeのカンファレンスなど、イベントの告知なども行われました。

また、当日の様子は下記のブログにもレポートしていただいてるので読んでみてください。

HTML5KARUTA大会に参加してきました! – WebCake

新春!!HTML5KARUTA大会(福岡会場)に参加して来ました | ぺぺろぐ

開催を終えて

なんとか無事に終えられて良かったーという気持ちが正直なところです。

思っていた以上に盛り上がり、初めて会った方とも交流ができたので福岡開催に手をあげてみて良かったなあと思います。

今年は自分でも勉強会やイベントを企画して福岡のWEBコミュニティに貢献していきたいなと思っています。

今回告知を手伝っていただいた@akase244さんは福岡でHTML5やPHPの勉強会も開催されてますので、お近くの方はぜひ下記勉強会に参加してみてください。

HTML5+α @福岡

Fukuoka.php

また、今回このような機会を作ってくれた@glatyouさん、どうもありがとうございました!
HTML5KARUTAが今後また面白い展開を見せてくれることを期待しています。

このカルタ大会の全国会場の様子などはこちらの記事にまとめられているのでご参考ください。

新春!!HTML5KARUTA大会報告&まとめ #HTML5KARUTA – WEBCRE8.jp

そんなこんなで、皆様、今年度もよろしくお願いいたします。