サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
画力アップ
tadashiku.jp
Passbook対応のパス作成サービス『Passify(パシファイ)』を開始しました。大変ありがたいことに、すでに美容室のメンバーズカード、病院の診療券、リサイクルショップのクーポン券などの用途でお問い合わせをいただいております。 O2O施策、スマートフォンを活用したマーケティング施策に興味をお持ちの方は、ぜひ一度特設サイトをご覧いただければと思います。 Passbook対応のパス作成サービス『Passify(パシファイ)』 本サービスの開始に伴い、このブログでも『Passbook』の使い方・作り方・活かし方について整理しておきたいと思います。また、J-CASTニュース 会社ウォッチ内『ウェブサイト拝見』でも関連記事を執筆させていただきました。あわせて、お役立ていただければと思います。 読了時間 : 3分 —– iPhoneをお持ちの皆さん、OSアップデートはお済みですか?最新は『iOS6
このサイト、Twitterでは日本国内外のウェブデザイン界隈で話題になっているようで、 「スクロールするという身体的な心地よさ×最後まで見たいという欲求。」 「Nissan’ın Note için tasarladığı inanılmaz internet sitesi」(トルコ語) 「Awesome Web hack」 と、ウェブデザインのプロの目も引くクオリティーだったようです。素晴らしいですね。 スクロール連動のコマ撮り、可能にしたのは「スクロールを操るjavascriptライブラリjquery-mousewheel」 では、このコマ送りスクロールサイトはどのように作られているのか。サイトの裏側を見てみましょう。今回はHTMLファイルの裏側を紹介します。 ページ内の一コマです。 大きく分けて、今回の表現のポイントは2つです。 ・コマ切れにした画像の配置 ・スクロールの制御によるコ
これから不定期ですが、HTML5でつくられたサイト事例を特徴とともにご紹介していこうと思います。第一弾は、アディダスが立ち上げた、フットボール向けシューズブランド「predator lethal zones」のキャンペーンサイト「predator lethal zones」を紹介します。このサイト、操作感がたまらなく気持ちいいです。ついつい、細部まで見てしまう、欲しくなってしまうサイトです。なにがそんなに気持ちいいのかを解説します。 軽くスムースなスクロール 普通のブラウザのスクロールよりも軽く、少ない力ですいすい進んでいきます。このスクロールは「iScroll」というjavascriptのライブラリを使用することにより実現しています。フリックに対してスクロールさせるときの加速度を大きくしています。 Webアプリにはめずらしい固定メニュー 右上のメニューボタンをタップすると、メニューが表示
iPhone、Androidアプリを両方つくるときに気になるのが “開発コスト”。 その開発コストを下げてくれるのが、iPhone、Androidアプリを同時に開発できるツールです。 同時開発ツールを使えば、開発工数の削減はもちろんのこと、Objective-CやJAVAプログラマでなくても開発できるため発注先の幅も広がります。 それぞれのツールの特徴と開発言語を捉えれば、大幅にコストを削減できるかもしれません。 開発ツールは多く存在しますが、その中でも現場でよく使われている4つのツールをご紹介します。 1.HTMLでウェブアプリまで同時に開発できるPhone Gap PhoneGapはHTML/CSS/javascriptで、iPhone/Androidアプリを開発することができるツールです。昨年、Adobe社に買収されました。 HTMLでiPhoneアプリがつくれるということで、敷居が
「iPhoneアプリにします?Androidアプリにします?」 「いや、ネイティブアプリじゃなくて、スマホのWebアプリで出来ないかな?」 最近、打ち合わせでよくあるやりとりです。 ネイティブアプリにすると、登録や更新の申請が大変(iPhoneアプリ)、開発コストが高い、インストールの障壁があるなどのイメージから”出来れば”Webアプリで行いたいと考えるお客さんが増えています。 今回はスマホアプリの定番機能、位置情報、カメラ、傾きの3つについて、スマホのWebアプリで実現できるのか解説していきたいと思います。(iPhone/Androidで標準で搭載されているブラウザについて言及しています) カメラ iPhone搭載ブラウザ:× Android搭載ブラウザ:△(Android4のみ) Android4のみブラウザからカメラを起動することが出来ます。 こちらの記事にサンプルアプリが紹介されて
今回はSNSアプリ『Path』のWebサイトを解析していきます。Pathは、フォローしあえる友人の数を150人までに制限しているクローズトなSNS。FacebookやTwitterで必要以上にひととつながりすぎて、「本当に親しい人」の間でのコミュニケーションを楽しめないひとのソーシャル疲れを解決してくれます。全世界でユーザー数200万人と公表されています。アプリの詳細やマーケティング視点での分析はJ-CASTの記事をご覧いただければと思います。 今回はこのPathの「Webサイト」がユニークなので解析したいと思います。このサイトの一番の特徴は、フルスクリーンの動画再生サイトであることです。サイトを訪れると背景すべてが動画のインターフェースになっていて、アプリを使用している動画が自動再生されます。 フルスクリーンの動画再生ウェブサイト このサイトのポイントは、「動画」です。背景がそのまま動画
スマホファーストの時代に重要性が高まってくるスキル、そのひとつが「UIデザイン」だと思っています。 PCと比較したときのスマートフォンの特徴、それはデバイスの制約条件でしょう。いわずもがな、PCとくらべてスマホは画面が小さい。そして、処理速度が遅い。すると自然と、一度で・求められる情報を・遷移させることなく、表示できるウェブアプリを設計できるひとが求められてきます。 このスキルは実はとても専門性が高い。見せられたウェブアプリのUIを評価することはできても、ゼロから自分で設計できるノウハウを持っているひとは多くないでしょう。そしてUIは、ウェブデザインとプログラミングの知識・(ある程度の)経験なくしては設計できません。なぜなら、UIはプログラミング言語による、実現可能性にも依存するからです。 私自身の職種はウェブデザイナーでも、プログラマーでもありません。しかし、彼らと同じ言葉でともに優れた
最近、iPhoneアプリのデフォルト「固定タブ」をなくせないかと思っています。 スマホアプリの難点は「画面が小さいこと」「処理速度が遅いこと」です。たしかにデフォルトの固定タブは遷移させずに表示されるコンテンツを切り替えるため、「処理速度が遅いこと」に対する解決策としては理にかなっています。 しかし、常に表示されているという点では、「画面が小さい」スマホには適していないといえるでしょう。どんなに表現力豊かなアプリでも、画面が小さくなってしまうのでは魅力も半減です。
世界中のFlasherを震撼させた『HTML5 CANVASサイト』にみる、 HTML5グラフィックの実力と、3つの課題 先週こんなニュースがありました。 アドビ、「Flash Player」の「Android 4.1」非対応を明言 これによって、スマホブラウザ向けのコンテンツにFlashを使うことは厳しくなりました。そこでスマホブラウザ向けの言語として注目を集めているのがHTML5です。HTML5とは、HTMLというWebサイトを開発する言語の新しいバージョンのことです。 今回は、そのHTML5で搭載された新しいタグ(HTMLではタグという要素でwebサイトを構築しています)「Canvas」を活用したサイトを紹介します。 HTML5のグラフィックをフルに活かした『HTML5 Canvas and Audio Experiment』 サイトを開いてしばらくすると、音楽とともにカラフルな円形
先日ブログでご紹介した『パララックス効果』、おかげさまで非常に好評だったのですが、あまりにもいろんなサイトで採用されているのでそろそろ新鮮味に欠けてきました。私が個人的に好きでぜひ流行ってほしい、それにウェブ技術の文脈的にも次に来るんじゃないかと思っているウェブデザインの表現が『背景フルスクリーン動画』です。文字通り、ウェブサイトの背景が全画面の動画になっています。 アプリの使い方を背景動画で紹介する『Path』のウェブサイト 『Path』はフォローしあえる友人の数を150人までに制限しているクローズトなSNSアプリ。サイトを訪れるとアプリを操作するひとの手と、挙動するアプリの画面を動画で映しています。 男女の学生がひたすら歌いつづける芸大のウェブサイト 東京藝術大学大学院映像研究科 メディア映像専攻 年次成果発表会「Media Practice11-12」のサイトでは、同研究科所属と思わ
先日、ブログで「背景フルスクリーン動画” のサイト」を紹介しました。 今回はこちらに続き、最近のWebトレンドで注目を集めているGIFアニメーションを紹介します。GIFアニメーションを使えば、リッチな表現を手軽に表現できます。 GIFアニメーションが有効に使われている事例 GIFアニメーションをふんだんに使ったお祭り感満載の「おしい!広島県」 このサイトは、広島の知られざる「おしい!」を紹介し、たくさんの人が実際に広島を訪れて「おいしい!」県になることを目指しています。 サイトについた「いいね!」は35,000以上、オフィシャル動画の再生回数は、64万回を超えています。 「おしい!広島県」には随所にGIFアニメショーンが使われ、一番の特徴である”サイトの賑やかさ”を演出しています。 以下のような、サイトの両サイドで動いている画像がGIFアニメーションです。 より詳しい解説はFlash一切な
「MUJI LIFE」は、サイト上の棚に「無印良品」のお気に入り商品を並べるインタレストグラフ型のSNSで、PC・iPhoneアプリで展開しています。 PC・iPhoneアプリに共通する機能としては、フェイスブックやツイッターなどSNSのアカウントで「MUJI LIFE」に登録すると、1日6回、アプリ上に「段ボール箱」が届きます。 箱を開け、無印良品アイテムを模したデジタルフィギュアが当たると、利用者はそれを「自分の棚」に好きなようにレイアウトできます。段ボール箱には、通販サイト・アマゾンの商品を並べられるチケットが入っていることもあり、チケットを使って本や音楽、映画なども陳列できる。「こんな部屋があればいいな」「こんなお店だったら通いたい」という理想が、バーチャルで実現できます。 iPhoneアプリ「MUJI LIFEチェックイン」に特有の機能としては、文字通りチャックイン機能がある。利
今日もスマホアプリのUIに関する記事です。2011 Apple Design Awardを受賞するなど、ウェブクリエイターの中ではその存在を知らないひとの方が少ないであろうiPhoneアプリ『Our Choice』をご紹介します。 『Our Choice』は、米国元副大統領でノーベル平和賞を受賞したアル・ゴア氏が、温暖化防止への具体的な解決策をまとめた書籍『Al Gore OUR CHOICE(邦題:私たちの選択 Al Gore OUR CHOICE 温暖化を解決するための18章』のiPhone版電子書籍アプリです。 なぜ『Our Choice』はこれほどまでに知られているのか?それは、書籍の内容が素晴らしいのはもちろんのことですが、電子書籍アプリのあるべきUI像を世界のクリエイターの脳裏に焼き付け、いまでも影響を与え続け、語り継がれているからではないでしょうか。
ナイキやアディダス、グーグルなど先進的なデジタルキャンペーンで知られる企業が先んじてウェブサイトに取り入れている表現手法があります。それが“パララックス効果”です。まずは、その効果を体験いただければと思います。 パララックス効果の名を世に知らしめた「NIKE BETTER WORLD」 このウェブサイトの役割は、ナイキのCSR活動を広くPRすること。米広告代理店「Wieden+Kennedy」や、デザインディレクターIan Coyle氏らが製作を手がけており、サイトでは環境負荷が小さくなるよう開発されたThe Free TR Fit、100%リサイクルされているシューズボックスなどが紹介されています。 人間の視点をずらすことで、奥行きを感じさせる 先ほどのNIKE BETTER WORLD、サイトに“奥行き”を感じませんでしたか?3D技術を使っているわけでもないのに、平面であるはずのウェブ
Flash一切なし!HTML / CSS / javascriptでできた、アニメーション満載の「おしい!広島県」 今回は、広島県が人気タレント有吉弘行さんを観光大使に起用したことで話題になっているウェブサイト「おしい!広島県」のコードを分解します。 このサイトは、広島の知られざる「おしい!」を紹介し、たくさんの人が実際に広島を訪れて「おいしい!」県になることを目指しています。サイトについた「いいね!」は28,000以上、オフィシャル動画の再生回数は、42万回を超えています。 今回のサイトの特徴はなんといっても、リッチな表現です。 具体的には、以下のようになります。 ・FLASHなしのHTMLサイト ・動画再生 ・豊富なアニメーション ・「おしいね」ボタン それぞれの特徴を解説していきます。 ・FLASHなしのHTMLサイト 今までは、このような非常に動的要素の多いWebサイトはFLASH
先日公開させていただいた「O2Oツール『Passbook』の使い方・作り方・活かし方まとめ」という記事が、おかげさまでご好評いただき、ありがとうございました。 あのあと、また一ユーザーとしてPassbookを利用して気づ [...]
私たち "tadashiku, Inc."について 私たちtadashiku, Inc.は、企業のブランディングを専門とするコミュニケーションカンパニーです。iPhone・アンドロイドアプリ、Facebookアプリ・ページ、mixiアプリなど、デジタル技術の進化により、新しい企業と生活者の接点が生まれ、浸透してきました。tadashiku, Incは、デジタルを通じたコミュニケーション戦略の立案、コンテンツの企画開発、クリエイティブの制作、PRサービスをワンストップで提供することが可能です。企業の魅力を正しく伝えるための戦略を練り、コンテンツを作るだけでなく、そのコンテンツをいかに拡散、浸透させていくか、までを設計・実行します。 PR実績 海外向けPR事例 FacebookアプリSNR海外向けPR 国内向けPR事例 javascriptライブラリjAction国内向けPR 開発実績 iPh
このページを最初にブックマークしてみませんか?
『tadashiku, Inc. | a communication company』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く