四谷NOW~ホームページ制作会社 gravity works(グラビティ・ワークス)ブログ

トップ > デザイン

AR:塗り絵のドラえもんが動く
2014.07.09 (Wed)
http://web.glico.jp/dr2014/cp/g-nurie/

グラビティ・ワークスの浅賀です。色々なスマートフォンアプリは私も日常便利に使っています。アプリのカテゴリーの中で“AR(拡張現実)”がありますが、なかなかコレだ!という使い方をしているものに出会える機会は少ないと感じてます。

私が便利に使っているのは、登山した山頂からアプリを立ち上げてカメラを東西南北にかざすと、周辺の山の位置を示してくれるアプリです。これも精度や日射の中では画面が見られない、など“難あり”なのですが、ARでいいなあ、と思えるのはこのアプリぐらいです。

最近、ARを使ったプロモーションで「これはスゴイ!」というものがありました。


ぬり絵したドラえもんが、アプリを通して動き出すのです。ドラえもんの色は自分次第。これはすごい。アプリ(ぬりえ)の添付の名目が、昔ながらの「グリコのおまけ」というスタンスであることや、複数のグリコ商品でシチュエーションが違いで配布されていること。「どこでもドア」もいいけど「タイムマシン」もやりたい!と思って複数購入することが期待できること、など、プロモーションの方法にも関心してしまいます。

販促アプリとしてのARっていかがなものか、と考えていましたが、これは秀逸です。使い方によってはARも“あり”なんだなあ。
個別ページコメント(0)トラックバック(0)
フォント選び
2014.05.28 (Wed)
asa_140528.jpg

グラビティ・ワークスの浅賀です。先日、社内にてフォント選びは大切、という話題になりました。

ウェブ制作をしている中で、グラフィック表現部分では、特徴やコピーをその表現に沿って際立たせるための基本的なポイントです。システムフォントもアンチエイリアス処理されて表示されるOSやブラウザが増えて来た昨今、どのフォントを使用するかを考える機会も増えました。

話題のきっかけはこの記事。裁判の判決を公に示すシーンですが、ポップ体が使われています。世の中に訴えるにはどこか厳格さや重要性が薄くなってしまっている印象です。

やはり、フォント選びは重要ですね。

写真は中禅寺湖で人気の「トンカツ浅井」の看板。精肉屋さんが営むトンカツ屋さんで美味しくボリューミーです。どこかウェスタンを感じさせるフォントですね。

【トンカツ浅井】
http://tabelog.com/tochigi/A0903/A090301/9003209/

マップを拡大

個別ページコメント(0)トラックバック(0)
導線のアピール
2014.04.16 (Wed)
asa_140416.jpg

グラビティ・ワークスの浅賀です。以前、自動ドアの開け方がわからないで入店が困難だったことでデザインを考えました。このお店は自動ドアの開け方を丁寧にわかりやすくに教えてくれています。

まず、立ち位置として、ガラス扉の下部に矢印が書いてあります。しかも4本と、かなり手厚いです。お店の外側には赤いフロアマットが設置されていることにより、立ち位置はバッチリわかります。内側にも同じく赤いフロアマットがありますが、こちらは丁寧に白い足跡まで印刷されています。注目を集める意味でしょうか、よく見るとフロアマットは黄色いテープで留めてあるようです。

これだけ強く導線をアピールしているなら、立ち位置、自動ドアの開け方は迷わないでしょう。

これが、「格好いい」、「クール」なデザインかと言われれば「ノー」と答える人が多数でしょう。ですが情報デザインという意味では、とても分かりやすいデザインだと言えると思います。ちょっとやり過ぎ感がありますか。

ホームページ制作でも、ユーザーがどの情報を欲しいと考えているか、動きを想像し、ボタンやメニューなどの配置を出来るだけわかりやすく設置してあげることが、UIデザインのユーザビティを考える基本だと考えます。その中でどういったデザインにするか、どの程度目立たせるのか、飾るか、全体のバランスを考えていくことことになります。

ちなみに、このお店はマスクをつけているウサギでおなじみの四谷の金物屋「フカツ」です。

マップを拡大

個別ページコメント(0)トラックバック(0)
「Sugru」を購入、使ってみた
2014.04.09 (Wed)

グラビティ・ワークスの浅賀です。以前、自己硬化ゴム「Sugru」がすごいというエントリーをしました。粘土のように手で自由な形に形成できて、24時間後にゴムとして硬化する、その「Sugru」を購入して使ってみました。

Amazonで購入
黒、白、赤の3色パック、黒だけ、白だけ、など、色のバリエーションが選べます。


今回は黒のみの3個パックを購入(ちなみに平行輸入品でした)
Sugru - 3 ミニパック (ブラック)【輸入】


届きました。すてきなパッケージ。
asa_140409_1.jpg

使用するのは、自らのエッジでガリガリと削ってしまったスキー板です。
asa_140409_2.jpg

傷はこんな感じにコアが見えてしまってます。痛々しい。このままだと水分を含んでしまって、ソール面と剥がれてきてしまう可能性がありますので、修繕が必要です。

指で子猫ねして埋め戻しました。24時間後。。。見事に固まってます。ゴムといえど、ブヨブヨ柔らかいわけではなく、質感としては堅いものです。瀬戸物の修繕などにも使えそう。
asa_140409_3.jpg


Sugruには消費期限がありました。硬貨能力などに影響するのでしょうか。
asa_140409_4.jpg

私のものは2014年12月15日まででした。使用目的があって始めて購入する、というのが正しいようです。買いだめには向いてませんね。


感想は、加工も簡単で仕上がりもキレイ。仕上がりで気になる凸凹はカッターで削げました。とてもいいと思います。もうちょっと安いとなお良し、ですね。

個別ページコメント(0)トラックバック(0)
開かずの扉
2014.02.04 (Tue)
asa_140204-1.jpg

昨日の節分に人生始めての恵方巻きを食べました。豆まきもしました。こちらは幼少期ぶりです。グラビティ・ワークスの浅賀です。

先日、牛丼が食べたくなり近所の牛丼屋へ足を運びました。

入店時に事件です。入店できない、つまり、扉が開かないのです。外観は上の写真の通り。

 まず、自分は中央の2枚のガラス枠の右側の方に立ちました。扉は開きません。この時点で頭の中は「何かを間違っている」ことを認識。とっさに「間違った場所に立っている」ことに気づきます。

 次に、慌てて左側のガラス枠の前に移動して立ちます。扉は開きません。移動した末に開きませんので、ちょっとしたパニックに陥ります。と同時に、少し恥ずかしさが込み上げてきて、冷静さが失われていくのを感じます。「もしかしたら自動ドアではないのかも?」と考えて、持ち手、取手を探しますが、見つけられません。

 探していると、ガラスの胸の位置あたりに、約径10センチの円形のシールが貼ってあり、「TOUCH」と書いてあります。その下に英語より小さく「ここに触れてください。」と書いてあります。この付近を触る、つまり手をかざすと、赤外線が反応する自動ドアで、ガラス枠がスライドして、やっとのことで牛丼屋さんに入れました。

タッチマークはこれです。
asa_140204-2.jpg

この条件でこの程度のヒントでは分かりづら過ぎます。

やっとの思いで入店しました。牛丼屋に入るのに、こんなにハードルが高く、こんなに緊張しなくてはいけないのでしょうか。老若男女、難なく開閉できるのでしょうか。店内の皆さんは平気な顔で牛丼を食べていましたが、この難関を全員クリアしていると思うと、店内みな戦友!な気分です。


この入り口や外観の設計は、とても多くの問題があると思います。


<外観に「扉である」というヒントが少ない>

・壁面がほぼ左右対称の作りである
・ガラス面にまんべんなくポスターが貼ってある。
・扉であるガラス面と扉ではないガラス面に同じポスターが同じ位置に貼ってある。
・扉であるというデザイン的なヒントが少ない。
大きな取手がついていれば引き戸、ないしは押し戸だし、枠に比較的大きな凹凸があるボタンが付いていれば自動ドアとわかる。
・立つ位置を示せるであろうフロアマットが扉側の地面に置いてない。
・「TOUCH」マークが小さすぎる。
・「TOUCH」マークは視線の遥か下の位置に(おそらく、地面から120cm程度)あり、目の前に立つと分かりにくい。(「TOUCH」しやすいのでしょうが‥‥)
・「TOUCH」を英語であることは単語で分かりやすいが、日本語が小さすぎる。
・そもそも「触れる」=「開ける」か?


 私たちもウェブ制作では情報設計や画面インターフェイス設計、デザインを業務で行っています。ウェブの重要な役割は情報提供だと考えると、やはり分かりやすく、欲しい情報が容易に手に入ることを常に心がける必要があります。当然『押せる』ボタンのデザインや配置位置、フォントの大きさ、言語など、熟考を重ね、配慮しなくてはならない、と心底考えさせられました。昨今ではフラットデザインなどが流行の兆しにありますが、『ぷっくりボタン(デザイン)』を推奨したい気分です。

 ちなみにこの店の食券販売機は購入の仕方が分かりにくい!と当社内で悪評です。確かにインターフェイス、購入フローがとてつもなく分かりづらく、牛丼にありついたときには疲労困憊でした。
個別ページコメント(0)トラックバック(0)

タグクラウド

YOKAN CLOCK
グラビカ学習帳
CSSブログ
ムービーサイズ計算機