『ARです蚊?』がADOBE AIR コンテスト2012でファイナリストに!嬉しい!惜しい!

見習い小僧

7月にAndroid版をリリースした『ARです蚊?』ですが、この度ADOBE AIR コンテスト2012においてファイナリストに選んでいただきました!これはとても嬉しいことです!

ファイナリスト

 

ADOBE AIR コンテストとは、ご存じAdobe社さんが主宰するコンテストです。技術について詳しいことがわからないので公式サイトを引用すると、“アドビの新しいランタイム Adobe® AIR® 向けのアプリケーション、コンテンツ制作にチャレンジする次世代リーダーを発掘することを目的に実施されたAdobe AIRコンテスト”ということです。要するにAdobe® AIR®を使って作られたデジタルワークスを対象としたコンテストです。

アプリ紹介画面

 

ダメもとで応募してみたものの、まさかファイナリストに選んでいただけるとは思っていませんでしたので、メンバー一同大変光栄に感じているのですが、受賞作品達はさすがレベルが高い!最優秀賞『「Live with the Wind.」by 393』はグラフィックがやはり美しいです。Adobe Airのコンテストなので、こういう美しい系のアプリがやっぱり選ばれるのでしょうね!

蚊の季節はとうの昔に過ぎ去りましたが、みなさんも時々思い出したように『ARです蚊?』で遊んでやってくださいね!それでは!

 

■おすすめ記事

【Facebook広告】『監督Xの異常なビデオ』は、意味深な文字画像で目を奪う。

『ARです蚊?』アプリのサイトできました!←おそっ!

【Facebook広告】huluはターゲットに合わせたキャッチで誘導する。

【見習い小僧×技術小僧】小僧ブログのレスポンシブデザイン化についてまとめ

見習い小僧

まとめ

前回、あっさりとレスポンシブデザイン化を完了させてしまいましたので、ここで今回の試みについて小僧なりに(ディレクターなりに)締めをしてみます。まずは小僧ブログレスポンシブ化の一連の流れです。

【見習い小僧×技術小僧】小僧ブログの課題と新企画

【見習い小僧×技術小僧】レスポンシブデザイン!?

【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

【見習い小僧×技術小僧】いよいよレスポンシブデザイン実装!!

 

 

実際やってみて感じたのは、レスポンシブデザインはハマればとても作業が素早く進み(=工数が少なくて済む→予算も抑えられる)、ワンソース化することでHTMLのページでも更新が楽になるなということです。でも“ハマれば”と表現したように落とし穴もあって、きっと情報量が多いサイトやデザインにこだわりたいサイト、また複雑な承認フローが必要なプロジェクトだと結局普通に作った方がいい場合も多々あるだろうなという印象です。

今回の場合、作業にかかったのは実質1人日くらいのものです。これだけ短期間でできたのは、技術小僧のジョーがこの技術を既に習得していたということが1番の理由です。ですがそれだけでなく、そもそも小僧ブログが2カラムでページ数も少ないこと、デザインがシンプルでスマホ上での細かな見た目にこだわらなかったこと、更にそれらを小僧と技術小僧だけというシンプルなチーム構成でどんどん意思決定できたことというような条件がなければ厳しかったかなとも思います。

ということで万能ではないかなという気持ちも残りましたが、ひとまず小僧ブログが、スマートフォンからもオリジナリティ溢れるデザインで閲覧できるようになったことは大きな進歩です!とても満足です。しかし実は、他にもやってみたいことはあるので、次回以降このシリーズはスマートフォン対応の枠を飛び出して突き進んでみたいと思います。

 

■おすすめ記事

アジャイル・UX・リーンな時代ver.2 at ロフトワーク烏丸

どうせ1人で過ごす花金なので、今夜は7つの魅力的な水族館サイトを見て楽しむ。

【Facebook広告】目を引くキャッチ「俺は、ローラが好きなんだ!」

【見習い小僧×技術小僧】いよいよレスポンシブデザイン実装!!

見習い小僧

技術小僧のジョーです。以前お話ししたとおり、小僧ブログのスマートフォン最適化はレスポンシブデザインで実装していくことになりました。現時点での小僧ブログスマートフォン対応の要件は、以下の通りです。

sample

5つの事例から学ぶレスポンシブデザイン”でも紹介したように、レスポンシブデザインでサイト構築するためにはブレイクポイント”について必ず考えなければなりません。これはどの画面幅に対してどのCSSを適用するかを決めるものですが、基本的には①スマートフォン②タブレット③PCの3つの画面幅を想定すべきでしょう。ところがこのブレイクポイント、実は標準的な数値や定石というものが無いので、サイトによって設定の仕方がバラバラなのです。そこで、ブレイクポイントを決定する際には、まずは基準のデザインをひとつ設定して、そこからウィンドウサイズを変更したときに内容が最適に表示されるように適宜ブレイクポイントを設定していく、というのが妥当な方法だと考えています。(小僧ブログではもともとのデザインを基準のデザインとして設定します。)

細かいことはさておき、とりあえず今回は2カラムしかないので、ブレイクポイントは1つだけ!!つまりスマートフォンとPCの2パターンに対応させることにしました。そして肝心のブレイクポイントは630pxに設定しました。この630pxを超えると画像が荒くなり、高解像度画像で対応したとしても今度は読み込みに時間がかかります。スマートフォンでサイトを見るなら、「表示の軽さ」というのはとても重要ですよね。

小僧ブログレスポンシブデザイン比較

とまぁ御託はさておき、実はこのサイト、既にレスポンシブデザイン化されています!PCでご覧の方はウィンドウサイズを小さくしてみてください。いかがですか??元のデザインのままスマートフォンに最適化されましたね。今回はPC用の固定幅レイアウトにスマートフォン用の変動幅レイアウトを加える形で設計しました。参考までにレスポンシブしない旧サイトを載せておきます。

小僧ブログ固定幅デザイン

 

■おすすめ記事

Pinterestを使った企業キャンペーン

京都の寺社の、見やすい2サイトと動きがかっこいい2サイト+おまけ

【セミナーレポート】図解で考える顧客視点のウェブ解析設計

2012下期 男の決起集会

見習い小僧

昨日は下期の決起集会と、新しく仲間に加わられた遠藤さんの入社祝いを兼ねて飲み会に行ってきましたよ。

2012下期男の決起集会初めて使ってみたiPhone5のパノラマ写真機能(関係ないけど自慢したいだけ)から見える爽やかな飲み会のひと幕。。。とは裏腹に現場で繰り広げられた数々の珍話。今回も終電を逃しそうになるほど面白い話が沢山できた、良い飲み会になりました!

下期はもっと良い仕事できるよう、頑張るぞ!

はてなさんでまかないランチをいただいたよ。

見習い小僧

本日、はてなブックマークやブログなど、様々なサービスで有名なはてなさんに、ランチをいただきにお邪魔してきました! ということでその話をしようと思ったのですが、はてなさんのまかないランチはとても有名で、様々な人がすでにブログを書いているので、さらっとご紹介します。

IMG_5805

インフォバーンKYOTOから徒歩5分にあるはてなさんのビル。

IMG_5806

ランチルーム(とは言わないと思うけれど・・・)に入ると、早速こんな感じでランチが準備されていました。炊飯器でかい!ずんどう鍋でかい!匂いがグッドスメルすぎる!

IMG_5807

ランチをよそうインフォバーンKYOTOメンバー。そして後ろに並ぶはてなの方々。すみません1番に取っちゃって・・・。でもこうやってみんなで一緒にご飯を食べるっていうのは、とても羨ましくもあります。高校くらいまで遡った感じがしました。

IMG_5808

そしてこれが本日のごはんでした。その名も『豚肉となすとピーナッツの○○』。なんでしたっけ・・・。名前はド忘れしましたが、味は本当に本当に美味しかったです!美味しいだけのご飯なら他でも食べられますが、はてなさんのまかないランチからは「栄養がたっぷり入っているよ~」という味がしました!これ食べたら僕、少々無理しても頑張れる気がする!という気持ちになりましたw

オフィス見学もさせていただいて(写真撮影を忘れました・・・)、至れり尽くせりのランチタイムとなりました。ほんと、ランチ食べるだけに行ってすみません・・・。とはいえせっかくご近所かつ東京‐京都という似た布陣であるので、いつか何かコラボさせていただけたらいいなあなんて1人考えました。以上、取りとめのない、はてなさんにも何の利益ももたらさない日記でしたw

【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

見習い小僧

今回は見習い小僧がお届けします。先週のブログで技術小僧のジョーからお知らせがあったように、今回の小僧ブログスマホ対応はレスポンシブwebデザインの技術を使って行うことになりました。それと同時に、前回さらっとレスポンシブデザインについて説明しましたが、もっと簡潔にわかりやすく知りたいという方の為に、今回は更に事例を集めてみました。

 

1. ソニー

ソニー

画面の横幅に合わせてデザインが2段階に変化します。この、デザインが切り替わる横幅サイズは“ブレイクポイント”と呼ばれているのですが、このサイトの場合ブレイクポイントが1カ所あるということになります。いくつ、そしてどの横幅にブレイクポイントを持ってくるのかは、どんなデバイスを基準にするかによって変化します。(このサイトの場合はPCとスマートフォンの大きく分けて2つを基準にしていると言えます。)

 

2. NHKスタジオパーク

NHKスタジオパーク

とても有名な事例で、レスポンシブデザインの事例を集めた様々なサイトで紹介されています。このサイトのポイントは、画面の横幅に合わせてレイアウトが変化する際、各パーツがヌルッと動くようになっていることでしょう。レスポンシブの本来の目的と照らし合わせた場合にこのアニメーションが必要か?という問題はありますが、粋な演出だと言えるかもしれません。

 

3.セブン銀行(海外送金サービス)

セブン銀行(海外送金サービス)

このサイトでは、画面の横幅が狭まった際にメインビジュアルを完全に消してしまっています。レスポンシブデザインに限ったことではありませんが、画面の小さいスマートフォンでの閲覧時には場合によってはビジュアルを極力減らして最低限必要な情報だけを見せるということも有効なようです。また、PCで閲覧した時とスマートフォンで閲覧した時のグローバルナビゲーションが同じデザインで表示されていることもポイントと言えそうです。なぜなら、サイトユーザーの迷いを軽減できるからです。

 

4.メディアジーン

メディアジーン

手前味噌ながら、弊社姉妹会社メディアジーンのサイトです。これは横幅をスマホサイズあたりまで縮めると、グローバルナビがアコーディオン(開閉式)に変わります。これもスマホの画面サイズを意識した仕様で、なるべくメニューで画面領域を奪わないようにという工夫です。1つのHTMLから画面サイズに合わせて様々なデザインを表示するレスポンシブデザインですが、HTMLの方で工夫を加えることでこういうことも出来るんですね。

 

5.インフォバーン

インフォバーン

そして手前味噌その2ですが、弊社の最近リニューアルされたサイトもレスポンシブwebデザインです。このサイトでは、グローバルナビをはじめとする様々なパーツが元々モバイルに適したようなアイコンになっていて、狭い画面幅で見てもデザインのトーンが変わりません。また、パララックスという視覚効果も利用しているのですが、その話はいつか機会があれば技術のジョーに説明してもらいます。

 

以上5つ紹介しましたが、少し調べるとこの他にも沢山事例が出てきます。レスポンシブデザイン、ジワジワと増えているようです!ただし、ワンソース(1つのHTML)で多デバイス対応出来るとはいえ、デザインが偏ってしまったり、実は工数が必要であったりと必ずしもいい点ばかりではないということなので、サイトの目的や条件によって使い分ける必要がありそうです。とはいえひとまず、今回の企画ではレスポンシブで行きますよ!

 

■おすすめ記事

どうせ1人で過ごす花金なので、今夜は7つの魅力的な水族館サイトを見て楽しむ。

コンビニ大手4社のおでんサイトで見る、イチオシ商品のコンテンツ化手法

京都人こそ知りたい、今どきの京都について知ることができるサイトを3つ紹介します

【見習い小僧×技術小僧】レスポンシブデザイン!?

見習い小僧

はじめまして。技術小僧のジョーです。現在入社3ヶ月目、学ぶことが多すぎてパンク気味です。これから、技術サイドの話は僕からお届けします。見習い小僧×技術小僧企画の記念すべき第一弾として、小僧ブログでスマートフォン対応を実現しようということになりました。

スマートフォン最適化の方法ですが、大別すると①別途スマホ用のサイトを1から作る②プラグインでパパッと最適化する③レスポンシブデザインを適用するの3つに絞られるかと思います。①の方法だと『最適化』とは言えず、またWordPressを使用したブログということもあって、運用の煩雑さからも今回の課題には適していません。一方、現状の小僧ブログでは、スマートフォン対応に②の方法を利用しています。

小僧ブログ旧スマホバージョンデザイン

これはWordPressのスマートフォン最適化用のプラグインを使用していて、制作の手間もかからずとってもラクチンです。しかし、このプラグインで自動生成したスマホ用サイトでは、確かにスマホサイトらしいUI(ユーザーインターフェース)にはなりますが、元々あったデザインはほとんど活かされていません。PC版に登場する愛くるしい小僧アイコン等のデザインが無いなんて!モッタイナイ!!もちろん、スマートフォン最適化プラグインの中にはよりPCデザインに近づけてくれるものもあります。しかしプラグインによってスマホに最適化されたデザインは、ほとんどがプラグイン独自のUIを組み込むものです。今回の場合は、元々のシンプルなデザインをスマートフォンでもほとんど完全に継承しつつ、なおかつスマートフォンの画面幅に最適なサイズで表示したいということなので、選択肢は③レスポンシブデザインに絞られます。

それでは、レスポンシブとは一体全体何なのかと誤解を恐れずに言いますと、『1つのHTMLファイルに対して、画面幅に応じて複数のデザイン(CSS)を適用する』ということです。『画面幅に応じて』というところがキモです。サイトのウィンドウサイズを変更すると、レイアウトががらっと変わる、あれです。

ARです蚊キャプチャARです蚊?アプリサイト

上に出したのが先日ブログでもお伝えした『ARです蚊?』アプリのサイトです。ウィンドウサイズをガンガン変えてみてください。(IE9未満は非対応)いかがでしょうか。5段階ほどカクカクっとレイアウトが変わるのをご覧いただけたかと思います。いずれのサイズにおいても横スクロールバーが出ないので、スマートフォンの小さな画面であっても縦方向のスクロールだけでサイトの全体を閲覧することができますね。これがレスポンシブデザインです。

というわけで、『見習い小僧×技術小僧 企画第一弾』のスマホ対応ミッションは、小僧ブログのレスポンシブデザイン化という方法でクリアしていこうと思います。また次回からは実際に小僧ブログを段階的に設計&コーディングしていく予定なので、乞うご期待です!

 

■おすすめ記事

紅葉シーズンに向けて気になる、創業100年を超す京都老舗旅館のWebサイト5選

【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

【セミナーレポート】図解で考える顧客視点のウェブ解析設計

『ARです蚊?』アプリのサイトできました!←おそっ!

見習い小僧

この夏にAndroid版がリリースされ、日本中のAndroid端末に侵入を果たしたと言っても過言ではない『ARです蚊?』アプリですが、ローンチから約2か月を経て、今ここにアプリのサイトが完成しました!(『ARです蚊?』アプリサイト)アプリのサイトと言っても何が出来るというわけではなく、アプリの説明を読むことが出来るだけです!(あとGoogle Playのページに飛ぶことが出来るw)

ARです蚊キャプチャ

・・・とはいえしっかりワンポイントありまして、例の技術小僧ジョーが、頑張ってレスポンシブデザインのサイトにしてくれました。ということは、ブラウザの横幅を伸縮させることによってデザインが画面サイズに最適化しますよ!『ARです蚊?』なのに・・・『ARです蚊?』ごときなのに・・・無駄におしゃれ!頑張った!!

 

というわけで、この技術をあの企画に活用しますよ。乞うご期待!

 

■おすすめ記事

One more thing,,, もうひとつ発表しとこ蚊!?

【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

『ARです蚊?』がADOBE AIR コンテスト2012でファイナリストに!嬉しい!惜しい!

TEDxKyotoに行ってきました

見習い小僧

TEDxKyotoに行って来た話をする前にまず、TED(TEDカンファレンス)とは?みたいな説明をしてみます。TEDカンファレンスとは、アメリカのカリフォルニアで年に一度行われる、様々な分野の専門家が自分の持つアイデアについてプレゼンテーションを行うイベントです。英語で行われるプレゼン(勿論!)がとてもわかりやすい事から、日本ではよい英語の教材として紹介される事も多いこのイベント。近年ではその理念を引き継いだ同様のカンファレンスシリーズ“TEDx”が世界各地で開催されるようになりました。日本ではTEDxTokyoが2009年に開催されたのをきっかけに、これまで沖縄や仙台などで開催されています。

そんなTEDカンファレンスやTEDxのことが僕は以前から好きで、YouTubeで見る事が出来る様々なプレゼンをよく見ていました。(因に僕が好きなのはイギリスのセレブシェフ、ジェイミーオリバーのプレゼンです。)そんな中、あのTEDxが京都で開催される!みたいな話をFacebookで目にし、迷わず応募する事にしたのです。

TEDxKyoto2012_1

イベントは京都大学の宇治キャンパスで行われました。9:30の開場時には既に50人以上は並んでおり、その後も続々と人が集まってきました。ただ、凄いのは人の数じゃなくて集まった人の多様さでした。大学生っぽい若者から貫禄のあるおじさま、女性も沢山いて何より外国人の方の多い事多い事。半分くらい外国の方じゃないかというほどでした。また、日本人の方でも英語でコミュニケーションをとれる方が多く、開場前からTEDxっぽいインターナショナルな空気をひしひしと感じました。

TEDxKyoto2012_2

プレゼンテーションの中で個人的に1番興味深かったのは、小説家の平野啓一郎氏のプレゼンでした。自己愛をテーマにしたプレゼンの中で平野さんは次のようにお話しされていました。(お話そのままではなく、僕が受け取った理解で記します)「“自分”というものは一緒にいる相手によって様々に変化する。そしてある人といる時の自分は輝いているが、別のある人といるときには冴えない、という事が起こる。愛とは寧ろ、ある特定の他者のおかげで自分を愛す事が出来るという状況なのではないか?そして『あんなに素直になれたのはあの人の前だけだった』そういう気持ちが別れの苦しみなのではないか?」この話を聞いてなるほどなと思いました。登壇者の皆さん本当に面白いプレゼンをされていたのですが、平野さんのプレゼンは少なくとも僕にとっては今までに考えた事の無いような自己愛の解釈の仕方で、そこに小説家である平野さんらしいアイデアの表現方法が見えた気がしました。

TEDxKyoto2012_3

プレゼンの合間とプレゼン後にとても長い交流時間があるのも、このTEDxKyotoの特徴でした。参加者だけでなく登壇者も混じって行われた交流会では、ほとんどの人がとても積極的に話しかけていく光景が見られました。実は今回のTEDxKyotoへの参加の際には、観覧希望者は希望理由などを詳細に書いて運営側に提出する必要があり、それぞれの参加者が何かしらの強い動機があって会場に来ていたということが、多くの参加者が積極的にお互いの交流を求めていく雰囲気作りに貢献したのではと感じました。

今回初めて京都で行われたTEDxに参加してみて、話の内容や参加者の質の高さを実感し、とても有意義なイベントであったと感じました。運営は基本的にボランティアスタッフが多いようですが、スタッフの方々の熱意も感じる良いイベントであったと思います。来年もあれば是非参加したいと思います。このブログ(長くなりましたが)を読んで頂いた方も、まずは本場TEDのプレゼンや、TEDxKyotoのプレゼンをYouTubeで見てみる(後ほど公開される予定)のはいかがでしょうか?

 

■おすすめ記事

紅葉シーズンに向けて気になる、創業100年を超す京都老舗旅館のWebサイト5選

【セミナーレポート】図解で考える顧客視点のウェブ解析設計

【見習い小僧×技術小僧】小僧ブログのレスポンシブデザイン化についてまとめ

【見習い小僧×技術小僧】小僧ブログの課題と新企画

見習い小僧

始めてから1年以上が経ち、記事数も90件に近づいてきた小僧ブログですが、比較的早い段階からずっと気になっていた課題がありました。いくつかあるのですが、そのうちの1つがスマートフォン対応です。現在、スマートフォンからこのサイトを見ていただくと、一応スマートフォンに最適化された表示がされるようになっています。(方法は、WordpressのWPtouchというプラグインを使って対応させています。)しかし、それはあくまで簡易的な方法での対応ですので、デザインがPC版のものを踏襲できておらず、せっかくの小僧イラストや小僧ブログロゴをモバイルでも見られるようにしたいというのは当初からの課題でした。

スマートフォンでの見え方とコメント

 

ここで話が飛びますが、6月からインフォバーンKYOTOには、バイトのジョー(仮名)が入社してくれました。彼は「3か月貰えればどんな技術でもマスターします!」という意気込みで入社してくれたやる気に満ち溢れた逸材で、実際に入社3か月で多くのことをマスターして進化を遂げてきました。そんな彼と僕とは歳が近いこともあり、以前から「小僧ブログで『見習い小僧(レオ)×技術小僧(ジョー) 企画』をしたい」と話していました。

見習い小僧×技術小僧企画第一弾

 

そこで今回、『見習い小僧×技術小僧 企画第一弾』として、小僧ブログをスマートフォン表示に対応させる!というテーマを設けてみました。ただやるのではもったいないので、その様子や途中で使った技術の紹介もブログ上でしながら、多くの企業で課題となっているサイトのスマートフォン対応の1つの事例紹介になればと思っています。

とはいえ小僧ブログですから、そこはゆる~く!肩ひじ張らない記事制作を心掛けていきますので、どうぞゆるふわにご期待ください。このシリーズは右の『見習い小僧×技術小僧』カテゴリにまとめていきます!

 

■おすすめ記事

【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

京都の寺社の、見やすい2サイトと動きがかっこいい2サイト+おまけ

【Facebook広告】目を引くキャッチ「俺は、ローラが好きなんだ!」