FC2ブログ

プロフィール

Takuma Saitou

Author:Takuma Saitou
■ 自己紹介 ■■■■■■
コンテンツデザイナー・ディレクター
将来の夢はデザインの出来るウルトラマンになること。

↓↓↓↓↓↓↓
プロフィール詳細

■ 個人HP ■■■■■■
個人のイラスト作品から、お気に入りの写真の掲載・壁紙・メッセンジャー画像 配布してます。

↓↓↓↓↓↓
Takuma Saitou Art Works


カテゴリー


最近の記事


月別アーカイブ


ブラウザ幅の近年のトレンド。
900pxぐらいといわれてますよね。
Takumaです。
 

【ブラウザー】
ウェブページを閲覧するためのソフト。米国マイクロソフト社のインターネットエクスプローラー、米国モジラファウンデーションのファイアフォックス、米国アップル社のサファリ、ノルウェーのオペラソフトウエア社のオペラ、米国グーグル社のグーグルクロームなど。(by Yahoo!辞書)

 

ネットを見る際に人は、ディスプレイを見ます。
モバイルだと画面は小さいですが、PCでもサイズは有る程度限られてきます。

例えば、モバイルサイトなら機種毎に仕様が多種多様な為、一列の文字数幅を対応機種の内の最大公約数で決めたりします。

では、パソコンは?


■ブラウザ幅900px以上は85%をどうみるか?■■■■■■■■■■■■■■■

パソコンでは、PC用ディスプレイの中に表示されるブラウザウィンドウが表示できる横幅を主にデザインや設計を行ないます。
諸説ありますが、
・昨今、多くなってきたネットブック
・オールインワンのちょっと大きめのノートパソコン
・大型ディスプレイを取り付けたマルチディスプレイ等の作業環境
等々、作られたサイトには様々な利用環境からの来訪想定されます。

その際に指標になるのが、以下のようなデータ。

▼ピックアップサイト▼
BROWSIZEの220万PVより集計、ブラウザ幅900px以上は85%に達した : akiyan.com

ブラウザには、スライドバーが多くのブラウザの場合「右」に表示され、全体的に枠があります。
この内側をここでは、「レンダリングエリア」と呼んでいます。

つまりは、来訪したサイトの中身が映し出される領域を「900px」でサイトを設計した場合。
一般的には全体の「85%」の人々が通常の内容(サイトの本文領域:BG要素除く)の領域を支障なく見られるというデータ。

これに加え、Googleでは縦幅も考慮した「ファーストビュー」でデータ集計がされています。

▼ピックアップサイト▼
Browser Size

この場合、縦幅「850px~950px」と横幅「450px×500px」の領域では、「95%」カバーできるとされています。


■ブラウザ幅残りの15%をどう考えるか?■■■■■■■■■■■■■■■■

この15%は、実のところ大きな数字です。
例えば、「100,000人」の来訪者がいるとしたら、その内の15%「15,000人」に
正しく情報を伝えられないという事になります。

よくありがちなのが、「3カラムの内の右カラムが描画領域外」になるという事例。
横スクロールをしてもらえれば、見てもらえるのですが当然、望ましくありません。
というわけで、優先順位的には低い要素を右カラムに置くのがセオリーとされています。

上記は主に固定幅コーディングで起こる問題ですが、「可変」といわれるように最低限の各カラム表示幅を設定した後に、広がる分にはウィンドウサイズを基に%で伸びたり縮んだりするコーディング手法もあります。
加えて、Ajaxで制御するという荒業もあります。(※あんまり、使われてませんがw)

▼takumart.net:過去記事▼
「リキッドレイアウトとAjaxの親和:前半」 | takumaの「デザインはあれでアートはそれで」in takumart.net
「リキッドレイアウトとAjaxの親和:後半」 | takumaの「デザインはあれでアートはそれで」in takumart.net

その他にも、「エラスティックレイアウトについて」という手法もあります。

▼takumart.net:過去記事▼
「エラスティックレイアウトについて」 | takumaの「デザインはあれでアートはそれで」in takumart.net

ですが、最近のブラウザにズーム機能(文字サイズの変更のみでなく画面全体を等倍拡大)がついたので、実装優先順位は若干低めの手法です。

「可変」というWEBならでわのディスプレイ環境との補完手法。
ディスプレイのユーザー利用サイズ(正確には、解像度ですが)は大きくなる方向へ進んでいますが、初期設計からサイトを立ち上げる際には、チェックしたい事柄ですね。


■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
The BIO Agency

●んで、一言

「電球」をモチーフにした、サービスをイメージさせる内容を写しこむデザイン。
シンプルなモチーフだからこそ、内容に目がいきますし「電球」というモチーフの特色もうまく活用されているように思います。

海外のブランディング系サイトは軸がしっかりしていてインパクトもあるので勉強になりますね。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Googleメイン検索エンジンです。
インターフェース使い慣れてます。
Takumaです。
 

【検索】
[名](スル)調べて探しだすこと。文献・カード・ファイル・データベース・インターネットなどの中から必要な情報を探すこと。「―の便を図る」「索引で関係事項を―する」(by Yahoo!辞書)
 

今、2カラムのGoogleの検索結果画面。
Google利用者の方だと、この画面に馴染みがあると思います。

ちなみに、「検索ツールを表示」をクリックすると、検索の絞込みオプションが現れて「3カラム」になるというのもご存知の方も多いですよね。

■今、Googleが新しいUIのテストをやっています■■■■■■■■■■■■■

新しい、検索結果画面のテストを行なっているのですが、行なうには以下の手順が必要となります。

(Step.1)「http://www.google.com/」(クラシックホーム)にアクセスする。
※「co.jp」が表示される場合は、言語設定を「英語」にする。
※それでも「co.jp」が表示される場合は、フッターの「Google.com in English」をクリック。

(Step.2)ホームで、ブラウザのアドレスバーに以下のjavascriptをコピペして実行。

▼入力コード▼
--------------------------------------------------
javascript:void(document.cookie="PREF=ID=20b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com");
--------------------------------------------------

(Step.3)成功すると、いつもよりカラフルなGoogle画面が登場。

■どこが、変わったのか?■■■■■■■■■■■■■■■■■■■■■■■

「Googleの新しいユーザーインタフェース(UI)テスト」

この記事の文頭にて、「2カラム」と「3カラム」の話がありましたが。。。

(1)3カラムになって、検索オプションがデフォルト表示になった。
⇒Bingのように3カラムタイプに移行している。

(2)オプションに「images」「Video」「News」「Blog」等が追加された。
⇒Bingのように左カラムからの検索対象絞込みが出来るようになった。

(3)全体的にカラフルかつグラフィカルなボタンやアイコンが目立つようになった。

主に変更点、こんな感じですが、ネットリテラシーが全ユーザー的に多くなり、情報に対する「絞込み」のニーズが本格化したという側面があると思われます。
加えて、情報のセグメントが多様化してきている影響(時間軸やメディアの多様化)もあると考えられます。

Image検索や動画検索やMap等は、Googleの歴史からして、当然サーチエンジンサービスより後から実装されたサービスです。
今までは、そのシームレスな検索の統合方法を色々、あまり分かりづらいところで行なってましたが、それが統合&表面化するのが、このインタフェースだと思います。

「Yahoo!」「Bing」「Google」の内、「Bing」がこの3カラムスタイルに最初に移行しました。
もし、このGoogleのインターフェースが実装されれば、「Yahoo!」が「Bing」に統合されるので、最大手の「2社」が両方「3カラム」スタイルになることになります。

そうすると、SEOとしても各オプション検索表示条件化での、多様化と激化が本格化するでしょう。
一元的な上位表示だけでなく、各ニーズとひもづいた、検索結果表示SEOのアプローチが必要な時期がくるように思える今日この頃です。


■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
***六本木農園*** 全国の農家・こせがれが作る農業実験レストラン

●んで、一言

「農家のこせがれネットワーク」さん達の実家の食材の美味しさや農業の大切さ、楽しさを体験して語れる実験的レストランのサイトだそうです。
デザイン的はシンプルモダン(白と黒と色とりどりな料理)ですが、家紋のようなマークが印象的なつくりになっています。

日本的に縦に組まれた文字列とタイポグラフィが印象的なサイトですね。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
googleメインの検索エンジンです。
でも文字読むの苦手なんですよね。
Takumaです。
 

【キャプチャー】
コンピューターのディスプレーに表示された静止画や動画をデータとして保存すること、またはその機能。ディスプレー画面全体やウインドーに表示された内容を静止画像のデータとして保存することをスクリーンキャプチャーといい、他の映像機器などから動画データをコンピューターに取り込むことをビデオキャプチャーという。(by Yahoo!辞書)

 

ちょっと前の話になりますが、googleにサイトキャプチャ表示機能追加されましたね。

「google検索にサイトキャプチャ表示機能追加

▼ピックアップサイト▼
Google Japan Blog: Google 検索にスクリーンショット表示機能が登場

「へー、米国版で確認されていたPage Previewsの正式リリースなんだー」
とちょい調べて、放置気味にしてたんですが。

googleの検索でこれが検索オプションとはいえ、追加されたのって、大きな変化なんですよね。

■将来的に基本機能になったらどうするか■■■■■■■■■■■

これが頭をよぎった瞬間に、いざとなったらやらねばならない事が頭を駆け巡った。
ユーザー心理からいったら、文字を読まずに絵/画像(キャプチャ)に目線が行くのは自然な事。

つまりは、

(1)トップページデザインのテイストでユーザーの信頼度により影響する。
(2)トップのファーストビューがより重要なデザイン領域になる。
(3)サイトキャプチャに合わせた、左寄せの領域が重要になる。
(4)キャプチャでも読めるメッセージをデザインに組み込まねばならない。
等々

設計フェイズからデザインだけでも、さっとこれだけある。
動的要因がトップのメインになってあったら、ある意味賭けになる。

当然、今のままデフォルト機能になるわけでは無いだろうが、それでもSEOの側面とトップページデザインがより連動しないと、ユーザーからの第一印象的信頼度は勝ち取れなくなる。

HTML(マークアップ)の適正化だけが基本SEOでない時代が、近くまできているように感じた。


■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
タイ国政府観光庁テクテクタイランド

●んで、一言

タイの観光キャンペーンサイト。通常フルFlashで動画とかフォトギャラリーとか使う事が多いのですが、このサイトはちょっと変わっています。

基本的に、オススメの観光コースを提示しているのですが、GoogleMapと連動したやり方になっています。しかも画面内をバックリ3カラムに割ってしまって。
しかも、縦スクロールで展開する各観光地の写真に対して、そのMapが完全連動して自動的に読み込みなおします。

改めて、Googlemapの画像がビジュアルとして強みがいまだにあると再認識したサイトです。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Yahoo!なんだかんだ使ってます。
突然ある日2カラムに!?ビックリ。
Takumaです。
 

【トップページ】
インターネットのウェブサイトを構成するページのうち、最も上位にある「入り口」に相当するページ。(Yahoo!辞書)
 

takumaは、Firefoxをメインでつかっています。
Yahoo!をホームページに設定しているのですが。

先日、突然Yahoo!トップが「2カラム」に!?
まさかと、いろいろ深読みしてたのですが・・・


■家帰ったら3カラムだった ■■■■■■■■■■■■■■■■■■■■■■

新規サイトを構築する事がおおくUI設計等もやっているので、カラム問題には過剰反応するtakuma。
軽いパニック状態に。

なぜだ!?

▼takumart.net:過去記事▼
「リキッドレイアウトとAjaxの親和:前半」 | takumaの「デザインはあれでアートはそれで」
「リキッドレイアウトとAjaxの親和:後半」 | takumaの「デザインはあれでアートはそれで」

モニターの画面がネットブックの登場で大きくなるだけという方向以外の対応か!?。

ベータテストに勝手に対応させられらたのか!?

設定機能が追加されて設定がおかしくなったのか!?

Yahoo!からの局所的ないやがらせか!?


■推奨ブラウザでないだけだった■■■■■■■■■■■■■■■■■■■■

お恥ずかしい。


会社のFirefox君のバージョンアップがアカウントの制限で出来ておらず、Yahoo!側で推奨しているブラウザでなかっただけであった。


「Yahoo!トップのレイアウトが勝手に2カラムに!?」

「書いてあんジャン!?」でっかくね!!

あはは、バージョンアップ申請ださなきゃw


■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
UD style:TOTO


●んで、一言
UDってなんやねん。ユニバーサルデザインだそうです。略してUDね。

ホンワカイラスト系のTOTOのユニバーサルデザインキャンペーンサイト。
雰囲気からUDの略しかたが一瞬わからんかった。

TOTOといえば水周りの商品が中心ですが、キッチンバスルーム、洗面所にレストルーム(トイレ)の各場面で、ターゲット別に特化している又は、親切設計になっている点を紹介している。
「ハナコさん」と「お父さん&娘」と「おばあちゃん」の3ターゲットセグメントだ。

どうやら、おじいさんは他界している設定のようだ。

日本のインダストリアル系の製品が、どれだけ生活の中で、多くのユーザーに対してベターな使い心地を考慮され作られているかを垣間見れる。
サイトはホンワカだけどね。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
10本の指があります。
もっと自由に入力で活用できたら。
Takumaです。
 

【両手】
1 左右両方の手。もろて。「―利き」
2 その指の数から10の数。(by Yahoo!辞書)

 

先日、CEATEC JAPAN 2009という先端IT技術の展覧会のピックアップを本ブログで行いました。

▼takumart.net:過去記事▼
「感じるユーザーインターフェイスへ:前半」 | takumaの「デザインはあれでアートはそれで」
「感じるユーザーインターフェイスへ:後半」 | takumaの「デザインはあれでアートはそれで」

どれも、次世代または次々世代の興味が絶えない情報ハードやインフラについての多くのアイデアや技術がありました。

当然ながら、先端IT技術の展覧会ですから、PC以外のハードや最新インターフェースが大半だったわけでして、次世代にはまだまだPCの多様性がなくなるわけでも無いわけでして。

PC大好きっ子のtakumaとしては、PCという極めて固定的な情報入力端末(キーボード&マウス)から脱却してこの右手の腱鞘炎(デザイン作業をハイペースで行うと軽く痛い)が発生しない入力危機&インターフェースが実現してほしいなって思っている矢先。。。


■次世代マルチタッチインターフェース■■■■■■■■■■■■

様々な革新的な技術の中でも実装レベルが現実味を帯びてきたマルチタッチインターフェースとハード。
・iphoneをはじめとするモバイル情報端末&スマートフォン
・Windows 7のマルチタッチ対応

▼takumart.net:過去記事▼
「Windows7の目玉はマルチタッチ技術」 | takumaの「デザインはあれでアートはそれで」

等々、当初モバイルから一般化したこのインターフェース技術もPCという市場に本格的に浸透しようとしている昨今。より、現実的に日々利用できそうなマルチタッチインターフェースが提案されたようです。その名も「10/GUI」。

「次世代マルチタッチインターフェース 10/GUI」

▼ピックアップサイト▼
10/GUI

正直ムービーをみて「驚いた!!」という印象は正直少ない感じ。

しかし、これなら日常利用に耐えうる可能性で「納得!!」が強かったです。

■10/GUIの提案■■■■■■■■■■■■■■■■■■■■■■■

まずは、ちょっと長いが一見の価値があるこの動画。

10/GUI from C. Miller on Vimeo.



簡単に「10/GUI」の提案を租借してみる。

●モニター上でタッチ操作をさせず、手元にタッチパネルを別実装
⇒手が邪魔でスクリーンが見えにくい状態を解消させる。

●固定的なマウス上の指の役割を解放する
⇒右利きの場合、人差し指と中指の利用率が高いマウス操作。
10本の指を利用できることでより自由な画面操作が可能になる。

●スライドタイプで移動するウィンドウ選択
⇒まるでブラウザのタブ自体がウィンドウになっているかのようなインターフェイス。
重なるウィンドウ選択のわずらわしさに、スライド式の整頓というアプローチがかけられており、全体像を把握するためのウィンドウグループ全体の縮小確認ができる。

おおー、具体的だ。具体的に腱鞘炎(手首負担)を始め首の負担にまで言及されている。
が、テキスト入力されている光景がムービーにない。

手元のタッチスクリーンで文字入力のキーボードを表示させるのだろうか?
もしくは、別の入力機器をプラスするのか?(←これは希望しないな~)


■一体化されたハードのイメージ像!?■■■■■■■■■■■■

これをノートパソコンの形で実装できそうな提案が「CEATEC JAPAN 2009でのSONYブース」にあった。

▼ピックアップサイト▼
曲げることも可能な「フレキシブル有機EL」ディスプレイを使ったVAIOや腕時計型ウォークマンなどのコンセプトモデル - GIGAZINE

曲げることができるようになった薄くて軽くて柔らかい「フレキシブル有機ELディスプレイ」を採用したVAIOである。画面だけでなくキーボード側までもがディスプレイとなっているところをみると、この領域がタッチパネルか、マルチタッチである可能性に期待が持てる。

「10/GUI」に近いインターフェスを受け入れるハード側の次世代像は、これに近いのかもしれない!?


■まとめ■■■■■■■■■■■■■■■■■■■■■■■■■■

少し話がかわるが先日、友人のデザイナーと夜に軽い勉強会を行った。
彼は、紙のデザイナーであり有名企業のパンフレットデザインも行っているような、メイン級のデザイナーである。

彼がデジタルサイネージについて話を切り出したのは先月の事。

そして先日、彼との帰り道に見た「不動産情報」を検索できる街頭でのタッチパネル組み込み型のデジタルサイネージ。

目の前に、将来の物と認識されていたものが実装されている光景に驚いた彼と共に(別の場所ですでに体験済みだったが)興奮の共有する自分。一方、下記のイメージビデオを知っていた自分の中に二極化した印象がそこにはあった。

▼takumart.net:過去記事▼
「10年後は、どんな世界なのだろうか?」 | takumaの「デザインはあれでアートはそれで」

「10/GUI」のようなインターフェースが実装される時代もそう遠くはないだろう。
目の前にその実物が現れた時、彼とどのような会話をするのかが今から楽しみだ。


■参考記事■■■■■■■■■■■■■■■■■■■■■■■■■

次世代マルチタッチインターフェース『10/GUI』がなかなか興味深い - IDEA*IDEA ~ 百式管理人のライフハックブログ

10/GUIとマルチタッチインターフェイスの可能性 : could

10/GUI:未来のGUIはこうなるかも | Happy My Life

「Windows7のマルチタッチ技術の評論」 | takumaの「デザインはあれでアートはそれで」

「Windows 7の販売製品と実装インターフェース/機能」 | takumaの「デザインはあれでアートはそれで」

「Windows7スクリーンショット」 | takumaの「デザインはあれでアートはそれで」


■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
ジアスニュース Thinking about the Earth

●んで、一言

企業、NPO、行政、市民などがお互いに協力をつなぐ第三者機関による環境専門ニュースサイト・ジアスニュースというサイト。

日本のサイトではあまり見ないポップさを残しつつ、写真を白黒にした重厚感のバランスが面白いデザインのサイトです。カラー写真がありませんw

なかなか思い切ったデザインアプローチですが、そのサイトとしてのメッセージカラーは他のサイトにない統一間で訴えてくる印象です。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

Powered by FC2 Blog