google

A collection of 13 posts

google

Material Designから学ぶデザインと技術の共通項

Google I/O 2014 では様々なデバイスが発表されて、ますます Google が日々の生活へ入り込んでいくのだなという印象を受けました。幾つかのプロダクトは興味深かったですが、プロダクトより気になったのが Material Design の発表です。現在 Android L と称されている次期バージョン Android で採用されているデザイン言語のガイドラインです。 Skeuomorphism が全面的に使われていたときは、画面上にあるオブジェクトを触っているような感覚を見た目で演出していましたが、Material Design ではアニメーションを通して触れているような感覚を作り出しています。ときにはカードのような実世界のオブジェクトを模擬していますが、それでもカードを操作しているような感覚を与えているのは見た目ではなく動きだったりします。 感覚からコードへの転換 Material Design で驚いたのは、感覚的なところをコードに落とし込んでいるところ。ガイドラインのアニメーションに関する項目を読むとそれに気付くはずです。 iOS のドキュメンテーションにもアニメーションに関する解説が掲載されていますが、アニメーションを実装するべきタイミングや役割を示すところで留まっています。一方、Material Design ではグラフまで見せて、Android であるべきアニメーションの姿を解説しています。 アニメーションをグラフまで用意して解説する Google

google

Waveから見えてくるGoogleの弱点

発表された当時から「なんかスゴそうだけど何かよく分からない」と言われていたGoogle Wave。常に細かな改善はされていましたし、今年の 5 月に開催された Google I/O 2010 では Wave を利用したカンファレンスの整理や情報交換に利用されていました。私も先月開催されたセミナー&ワークショップで Wave を利用していたわけですが、発表されてわずか1年でGoogle Wave 開発中止になりました。 一般公開されている Public Wave を見てみると結構盛んなやりとりをされているものも少なくなく、利用者の使い方を反映してどう改善していくのか楽しみだっただけに少し残念です。Wave の技術や学んだことは Chrome OS へ受け継がれるでしょう。 Waveが残したもの 開発が中止になったとはいえ、すべてが無駄だったとは言いきれません。デザインや技術的なところで学べるところはたくさんあります。以下に Wave がもたらしたインパクトをポジティブとネガティブに分類してまとめてみました。 ポジティブな点 HTML5の可能性を提示 Waveの功績は HTML5 に脚光を浴びせたところでしょう(

google

Google が考えるよりよいユーザー体験とは

先月開催された Google I/O 2010 は、WebMプロジェクト、Chrome Web Store、Google TV などなど興味深い話題が目白押しだったわけですが、デザイン関連でもおもしろい講演があったのも見逃してはいけません。Google とデザインはかけ離れていると考える方もいるかもしれませんが、そんなことはありません。装飾的な意味でもデザインはないかもしれませんが、彼等は高いデザイン意識をもって開発をしています。その例として以前紹介した Google のデザインガイドライン10項目が挙げられます。 Google I/O では「Beyond design: Creating positive user experiences」というUXの話題で講演を行っています。動画とスライドデータが公開されているので、興味はある方はぜひダウンロードしてみてください。 デザインガイドラインとかぶりますが、Google は以下の項目に注力することでよりよいユーザ体験を実現しています。 より早く ページの表示速度だけでなく、タスクを達成させるための手軽さも含まれる 自分らしく ちょっとしたことでも良いので個性をもたせる 対話に参加する

google

Google Font API で手軽に始めるフォント遊び

Say Hello to Google Font API 昨日開催された WDE ex -vol9 (Twitter TL) の懇親会で「Google がフォントのホスティングやれば良いじゃないか」という話題が出ていたのですが、朝起きたら Google Font API として現実的なものとなっていました。Web Font をホスティングしているサービスは海外で既に幾つかありますが、ほとんどが JavaScript のコードを貼付ける方法が採用されており、中には body 内に記述しなければならないものもあり、エレガントな方法とはいえませんでした。 今回公開された Google の API は JavaScript を使うのではなく、CSS をリンクするだけ。使いたいフォントをディレクトリから選び、リンクした CSS ファイルに変数としてフォント名を記述するだけになります。

google

価値のあるコンテンツを提供しているかを調べる方法

以前 Google のウェブマスターツールを利用して簡単にコンテンツが最適化されているかを見る方法を紹介しました。自分のサイトがどのようなキーワードを通して露出しているのかを知るのに手軽で便利なツールですが、検索エンジン (Google) からみた視点なので、訪問者全体を表しているわけではありません。そこで Google Analytics を利用して、読者がどのコンテンツを好むかを調べることが出来ます。機能が多い Analytics ですが、今回紹介する方法はほんの数分でできます。 Analytics の右側のメニューにある「コンテンツ」から「タイトル別のコンテンツ」を選択すればどのコンテンツが見られているのかを調べることが出来ます。ディフォルトの状態だとページビューでランキングされますが、これでは単なる人気順です。読者が好むと思われるコンテンツの配信したいという目的があるわけですから、ロイアリティの高い読者(リピーターやブックマークしている方)がどの記事を読んでいるのかを把握しておきたいところです。 そこで、アドバンスセグメントにある「リピーター」を選択して、リピーターがどのコンテンツを読んでいるのかを表示します。グラフの下に表示されるパフォーマンスを示すデータテーブルでは、デォフォルトビューではページビューや滞在時間など、リピーターの傾向を示すデータを書き出してくれますが、新規ユーザーとの比較が見え難いです。そこで、データの表示方法をテーブルからピボットに切り替えます。ピボットの値を「ユーザーの種類」に切り替えると、新規ユーザーとリピーターに分けてアクセスされているコンテンツを並べてくれます。

google

Google Waveがもたらす心理の変化

数日前に Google Wave の招待状をいただき、いろいろ使ってみました。従来からあるメール、IM、Wiki そして WebExのような Web 会議システムが混ざり合った独特の形といえます。具体的に何が出来るのか知りたい方は、動画や記事を確認してください。ブレインストーム、レビュー、共同で文書作成などコラボレーションをする際に使えそうな印象があります。 多くのサイトで既に語られている Google Wave ですが、技術的やことや、機能紹介に集中しています。従来のメールを今の技術で作り直したらどういう形になるかと考えて開発された Wave。メールのような要素が UI に残っているものの、使い心地は全く違います。つまり使い勝手が変わるだけでなく、使う人の心理にも変化が起こりうるサービスだと思います。 Wave でまず変わるのが人と人との会話の仕方でしょう。メールはその名のとおり手紙のやりとりに似ています。挨拶から始まり、挨拶で終わる部分が正にそれです。会話らしくなるだけでなく、形式ばらない会話をしやすい環境を作っているのが Wave です。例えば、文字入力をしている際もリアルタイムで相手に言葉が伝わる機能があります。会話をするという意味では IM

google

Googleが考える新聞の生き残る道

随分前になりますが、今年の 4 月に Google の Eric Schmidt が Newspaper Association of America の集会で演説を行いました。また、別のサイトで質疑応答の筆記録も公開されています。新聞の発行部数も広告収入も急激に落ちて来ているアメリカでは、Web サイトに様々なコンテンツを掲載し、開けた印象を作り始めています。質疑応答のほうでは良くも悪くも Google 視点な見解と提案がなされていますね。以下に要約をリストアップしておきます。 いずれかひとつではなく、広告、購読、マイクロペイメントの3つが収入源になるだろう。しかし、数円から支払えるようなマイクロペイメントを可能にする優れたシステムがない。現状は無料にするか、月額購読という選択肢しかないが今後は変わるだろう Google News は信頼ある発行者の情報のみ検索するシステムだが、Web 検索ではすべての情報が同じアルゴリズムの中でランキング付けされている。信頼出来る情報でも、有名ブランドではないということで下のランキングになる場合もあるが、こうした課題は慎重に取り扱って行きたい 新聞は早くから Web への取り組みをしているが、導入後の考慮が足りない。

google

Chrome Frame はひとつのソリューション

今週リリースされた Chrome のように JavaScript や HTML5 レンダリングを実現することが出来る IE 向けプラグイン、Chrome Frame。プラグインをインストールしているブラウザのみ認識するたった一行の meta を記入するだけなので、制作者にもやさしい仕組みになっています。Techcrunch あたりでは、「笑える」「スマート爆弾」だとおもしろおかしく Chrome Frame を表現していますし、「IE を乗っ取った」と書いている方も見かけますが、個人的にこれは素晴らしいデザインソリューションとして見ています。 まず、構造からして「乗っ取り」ではなく、利用者を意識した配慮がなされています。Chrome Frame は Browser Helper Object (つまり IE 公式の仕組み) として提供されており、IE の

google

簡単にコンテンツが最適化されているかを見る方法

サイト運営側が「こうみられたい」と考えて作ったコンテンツでも、実際は異なる捉え方をされている場合があります。外からどのように捉えられるかを調べる方法のひとつとして Google のウェブマスターツールがあります。サイトがインデックスされているか、そして検索結果にどのように表示されているのか、調べることが出来ます。取得出来る幾つの情報の中に「上位の検索クエリ」という統計があります。 統計データは2つの順位表に分かれています。左側がサイトのページの表示に最も多く使用された検索クエリ。そして右側が実際のクリックに繋がったクエリになります。地域や検索の種類、そして期間で絞り込んだ結果を出すことも出来ます。サイトに記載されているキーワードがランキングで表示されているので、利用者からみたサイトのイメージを漠然と捉えることが出来ます。このデータから2つの可能性と対策が考えられます。 これらがあなたのサイト (もしくは企業サイト) を象徴するキーワードになっているかどうか。ズレが生じているのであればコンテンツのテーマを絞り込んだり再検討が必要とされます。 特定のキーワードが検索結果の上位には来ているものの、あまりクリックがされていないのはあるかどうか。この場合、タイトルや概要の表現がよくない場合があります。 このサイトは、そのときの旬ネタで多少動きを見せるときがありますが、ウェブデザイン関連のキーワードが多数を占めているので、悪くないかと思います。ひとつの参考資料としてウェブマスターツールは使えるのでぜひ試してみてください。 PS: 個人的にビックリしたのが、2年前の CSS Nite Okinawa でデモをした水産庁のページが異様に高い点。デモとはいっても、

google

感性によるデザイン データによるデザイン

3年前に Doug Bowman が Google に参加したニュースを聞いたときは、意外な組み合わせだと感じると同時に今後どう Google が変化するのか楽しみになりました。彼がどのように Google に関わったかどうかは知りませんが、表に出る出ない関係なく様々なレイヤーにおいて影響を及ぼしたと思います。そして、先日 Goodbye Google というエントリーで Google を去ることになったと告げています。次どのような活動をされるのか楽しみではありますが、エントリー内には気になる部分も幾つかあります。 彼は文中で「エンジニアばかりの企業になると、問題をいかに処理 (engineering) するかが話の中心になる」と書いています。主観をすべて省いてデータから答えを探るアプローチ。Google はどの青が良いのかインハウスで決めず41種類の青を使って、利用者がどの青を好むのかデータを収集したそうです。デザイン案を提案する際もなぜそうしたのかをデータで示す必要があったとか。 彼が遭遇した『壁』はエンジニアが中心にいる Google のような巨大企業だけでなく、Webサービスやコマースを構築している方であれば一度は似たような経験したことがあるのではないでしょうか。アクセスの分析やユーザテストを行ってレイアウトを調整することはよくあることです。レイアウトを少し調整するくらいのことで「デザイナーの意思を尊重していない」というのも違うと思いますが、サイトのコアになる部分を崩してまでデータに頼り切るのも疑問を感じます。

google

Gmailのテーマ機能とGoogleブランドについて

ウェブサイトにおいて機能やページの表示速度と同じくらいビジュアルデザインは重要ですし、ビジュアルデザインがより良いユーザー体験の提供に繋がることもあります。以前 Googleのデザインガイドライン10項目を紹介したことがありますが、この中に「魅力的」「美しい」といったビジュアルデザインに関係したキーワードがあるのは気になりますね。Google はビジュアルデザイン以外の部分(例えばシンプルさやスピード)を徹底的に追求することで高いユーザー体験を提供しているサービスというイメージがあります。 しかし、そういったイメージを覆すかのように、ここ 1,2年はビジュアルデザインにも力を入れていますね。例えば Analytics や Docs のビジュアルはミニマムではありますが、非常に洗練されていて魅力的です。先週 Gmail が複数のテーマを提供し始めましたが、これも Google はビジュアルにも力を入れているという表れなのかもしれません。今までなかったのも不思議だと言わている機能ではありますが、同時に気になる点もあります。 まず、Analytics, Docs におけるビジュアルデザインと Gmail のテーマ提供は少し違います。Gmail のテーマの提供はあくまでカスタマイズの一環としてであり、Gmail の機能をより引き出すためのビジュアルデザインとはいえないでしょう。どちらかというと、利用者により近い関係を作るパーソナライズ機能であり、利用者の感情へ響く部分といえます。

google

Google のデザインガイドライン10項目

以前 Google の UX プロセスというエントリーで、Google が考えるユーザー体験を向上するための対策を紹介しました。Google のような数多くのサービスを運営している大企業でなかったとしても、参考になる項目が幾つかありましたが、先日 Google Operating System で Google’s Design Guidelines という記事が掲載されました。Google アプリケーションのユーザー体験を担当する Jon Wiley 氏が WritersUS Conference で語った Google のデザインガイドライン10項目がリストされています。 使える: 人々の生活、仕事、夢にフォーカスする 早い: ミリ秒でも早くする シンプル: 簡略化することの重要性 魅力的: 初心者にも上級者も引きつける何かをつくる 先進的: 新しいものを生み出すことに意欲的になる ユニバーサル:

google

Google の UX プロセス

今では小さなチームによるアジャイルソフトウェア開発はそれほど珍しくはないですが、Google は随分前からそれを実践している企業のひとつです。よりよいものを作ることであれば、時には今まで辿って来た道も変えてしまうこともあるダイナミックな環境でどのようなプロセスが存在するのでしょうか。David Sherwin さんのブログで、Google のユーザーインターフェイスデザイナーである Jake Knapp さんのセッションに関するレポートが掲載されています。 Knapp さんのセッション内で、ダイナミックに変わる環境化の中で、よりよいユーザー体験をもったサイトを構築するための8の対策を紹介したそうです(細かく別けると全部で17)。以下に簡単にですが紹介しておきます。 確固たるプロジェクトの基盤をもつ チームが小さい分、フォーカスしなければならない プロジェクトのもつ影響力は? 他のプロジェクトではなく、それを選ぶ理由を考える ビジネスインパクトを知る UXの向上が会社全体にどのように影響を与えるか UXがどれだけ影響力があるか見極める 複雑なシステムの表現は時間とフォーカスが必要になる チーム内で活躍することに積極的であるかどうか 自分の能力をチームメンバーに知ってもらうという姿勢がチームを円滑に動かす原動力にもなる コードそのものがモックアップになる ホワイトボードに描かれたものをすぐに形にするスピード。今まで使ったコードも積極的に再利用してスピードを重視 研究や調査は社内で密に共有 調査が重複していないかの確認にもなる。調査結果は社内の人間であればアクセス出来るようにする デザイナーは印象に残るプレゼンをすること チームメンバーになぜそうなったのかをきちんと伝えれる能力。UXがフォーカスの場合は、見た目についての議論にならないような工夫も必要