今回ご紹介するのは、最新技術「HTML5」を体験できる海外サイトです。

「HTML5」は、W3Cが2012年を目標に規格化を進めている、

次期バージョンのHTMLです。

HTMLとJavaScriptを組み合わせることで

Flashの様にアニメーションをマウスに反応しながら動かすこともできます。

>> HTML5 Canvas and Audio Experiment

※閲覧には、最新版のFireFox、Safari、Operaなどが必要です。

以前、ブログの記事でWebサイトの画面サイズとう記事を
書かせていただきました。

今回は、Yahooのリニューアルまであと１ヶ月をきったという事で
第2弾をお送りいたします。

Webサイトの画面サイズの歴史から、今後の主流が変わってきているという事には
以前触れておりますが、正直Web業界、Yahooがスタンダードな事は否めません。

来年以降急速に、画面サイズの変更が行われるかもしれません。

そこで、画面サイズを考える上で、必要な事の一つ、

【ブラウザのサイドバー】についてです。

ブラウザのサイドバーとは、ブックマーク機能や、検索、履歴を常にブラウザで
表示させておく機能になります。
IEであろうと、Firefoxであろうとこの機能は実装されております。

今までのブラウザは"IE6"が主流でした。
今でも、私はIEを標準で使う場合は、IE6を使っております。
（IE7は検証で、実際に常に使っているのはFirefoxです。。。）

IE6ではサイトバーについては、一度開くと、ブラウザを閉じた後に
ブラウザを再度開いても、開いた状態を維持するという仕様になっておりました。
ですので、画面サイズが大きいユーザーでも、サイドバーが開いてしまう為
横スクロールが発生し、ストレスを感じてしまうために
700pix前後が主流となっておりました。

しかし、IE7については、サイドバーを維持"しない"仕様になっております。
つまり、設定を変更しない限りは、サイドバーを開いていても、
ブラウザを開きなおすと、サイドバーを維持しない仕様になっております。

では、その仕様変更によって何が劇的に変わったかといいますと

・一般ユーザーの大半がブラウザはIEを使用しております。

・一般ユーザーの大半が、インストール時の標準仕様で使用します。

・毎回毎回、サイドバーが閉じてしまう仕様なので、設定をせずに
　そのまま放置してしまう。

結果、サイドバー開かないユーザーにとっては800pixを超える
Webサイトであっても、なんら問題のないWebサイトとして表示される事になります。

あくまで、自ら設定を変更したりするユーザーにとっては
横スクロールが発生するとかなりストレスになりますが

ターゲットをコンシューマーを想定した場合に、身近な周りのユーザーが
どれだけPCの設定を調整するでしょうか。
やはり多くのユーザーが標準インストールのままではないでしょうか。

一般ユーザーに定着してくれば、Webの主流もまた
進化していくと予想されます。

今後制作するWebサイトの横幅については

・ターゲットをよく想定する

主流に流れるのではなく、良く自社のサイトについて
考察し、分析し、その上で、Webサイトのサイズを決定しましょう。

JCOSでは、ログ解析や、ユーザープロファイル、ペルソナ手法から
最適なWebサイトの設計を行っております。

ジェイコスへ相談する　←別ウインドウで開きます。

HPを制作する際に、現在使われているコーディング技術には大きく２種類存在します。

文章などの内容をHTMLで実現し、
デザインなどの見た目をCSS（スタイルシート）で実現するCSSコーディング。

もう一つは、今現在もっとも多い、見た目もHTMLで実現するHTMLコーディングです。

※HTMLコーディングからCSSコーディングに移行段階の状態や、
レイアウトのみテーブルを併用する場合をハイブリッドコーディングと呼ぶこともあります。

既存のHPの多くはテーブルによるレイアウトなどが主流で行われているため、
HTMLに内容とデザインの両方が含まれているHTMLコーディングで、
制作されたサイトが目立ちます。

HTMLコーディングの場合、文章などの伝えたい（検索サイトに登録させたい）内容が
デザインを実現するための記述に埋もれてしまい、
検索サイトから正しい評価を得られない問題が出てきます。

また、プリントアウトへの対応が難しく、印刷用に専用ページを設けているような
Webサイトもあります。

CSSコーディングを行っているHPの場合は印刷に不要なコンテンツを非表示にしたり、
印刷用にレイアウトを調整することができるので、別ページは不要となります。

上記内容を踏まえて、SEO対策やアクセシビリティ、ユーザビリティを考慮しますと
「HTMLをシンプルに、かつデザインを利用者が変更できる」など、
多くの利点がある、CSSコーディングを今後はしていく事を推奨します。

が、制作会社によっては費用が高騰したり、コーディングの時間が倍以上かかったりと、
まだまだ課題が多いですが、現状HTMLコーディングでサイト運用をしている会社は
将来を見据えて是非検討してみてください。

HTML、アクセシビリティ調査サービスはこちら

Webサイトの進化とともに
パソコンや、ディスプレイの技術についても進化し続けています。

Webサイトの設計をする際に、サイトの横幅をどのくらいの幅にするのかが
一つ重要になってきます。

このブログをご覧になられる方はWebに携わっている方が多いと思いますので
ご存知の方は多いと思いますが、先日mixiがデザインリニューアルをいたしました。

そのサイトの横幅は950pixです。

サイトのサイズのセオリーとして
800×600の画面サイズをターゲットにする為に720pixなどで
制作するケースが多かったと思います。

1024×768pixのサイズの画面が多くなってきて
760pixや最大で800pixのサイト制作が多くなりました。

そこで現在の巨大ポータルサイトの
『800超え』のサイトサイズですが、如何でしょうか？

実際に全世界で最大のPV数を誇るYahoo!JAPANも、リニューアルを予定して
ユーザーにテストで画面を利用させております。
こちらのサイズは950pixになっております。

ユーザーにとってのWebのスタンダードがYahoo!JAPANである今、サイトの横幅についても
変革期にあるのかもしれません。

こちらは弊社のサイトWebConsulting.jpのサイトの訪問ユーザーの画面解像度トップ10です。

弊社のターゲットユーザーであれば、最新のパソコンを導入されていたりしますので
このような結果が出ており、横幅を大きくしても良いかもしれません。

上記のようにサイトの横幅についても変革期にある時期ですが
Yahooがやっているから、mixiがやっているからという理由ではなく

あくまで、「ターゲット」とするユーザーがどのような画面を使っているのかを
データで取り、想定して制作する必要が大前提という事を忘れてはいけません。

ジェイコスではWebの潮流や、データに基づいたサイト設計をのコンサルティングを
行っております。
課題解決の第一歩にまずはご相談ください。

Webサイトについてジェイコスへ相談する　←別ウインドウで開きます。

Webサイトの制作でも専門のカメラマンを起用し
撮影を行う事も多いです。

ただ単に、カメラマンを使えば良いという訳ではありません。

まず大きな違いとして

・アマチュアとプロの違い

これはかなりの差があります。
スナップショットではなく、趣味でかなりカメラに没頭している方が撮影した場合も
それは良い撮影ができると思います。

が、プロのカメラマンについてはそれをも超えるクオリティを発揮します。
ですので、予算を組むときは、カメラは社内のあの人はカメラが得意だから・・・
といってしまわずに、プロの方に話を持ちかけてみてください。

・プロでの違い
第2段階として、プロでも違いがあります。
もちろん、料金もありますが、

専門としている撮影がなんなのか。

これが重要です。
モノを撮るのが得意な人、ヒトを撮るのが得意な人、景色を撮るのが得意な人と
いった様々な得意分野があります。
もちろん、カメラマンからしたらどれでも上手く撮影しますが本音ですが
実績を見せていただければ、わかると思います。

そのように、自社のWebサイトで撮影する場合の被写体と
カメラマンが得意とする撮影にマッチングするようにしましょう。

それだけでも、大きな差が出ます。

・Webと紙の違い
上記を達成したからといって、まだ満足をしてはいけません。
Webサイトの撮影の場合、あくまでWebディレクターが構成を考えると思いますが
撮影に関してはシロウトです。
なんとなくのイメージを具現化する必要があります。

そのイメージを共有して、撮影する場合でも
カメラマンの違いがでます。
サイトのどんな部分で使用するのかをイメージした場合に
カメラの枠のどこに被写体を写すのかを考えて撮影してくれるカメラマンと
そうでないカメラマンでも大きな違いがあります。

それは写真をその後、Webサイト用に加工して画像などでこぴーをいれたりした場合に
背景があまっていなくて、どうしよう・・・
フォトショップで空を書いてみた・・・
といった状況になりかねません。

このカットであれば、左寄せ、右寄せで撮った方が良い
これは人物の両脇に背景が写っていた方が良いなどを
計算して撮影をしてくださるカメラマンは貴重になります。

これらを満たしてこその撮影となります。
もしも、撮影を予定している場合は参考にしてください

先日とあるサイトを見ていて、非常に興味を持った記事がありました。

NIKKEI DESIGNの包装向上委員会というサイトですが、

ビールのパッケージから消費者がどのような印象を受けるかというアンケート結果です。

上記のサイトを見ていただくと分かるのですが、

特に注目したいのが「最も高級感を感じるビールとは？」の結果です。

この４種類の中では、以外にもブルーを大胆に使った

「プライムタイム」が健闘しています。

お店に並んだときも、黄金色のパッケージが並ぶ中で、

恐らくこのブルーの色はかなり目立つポイントになっていると思います。

今までの既成概念にとらわれない斬新なデザインには

時代の方向性を間違えなければ、存在意識に訴える力強さが感じられます。

ちょっと前の記事ですが、アメリカの新聞でよく使われているフォントのTOP10が紹介されています（Ascender Corporation社 調査）

新聞は、大衆向けに発行している媒体ですので、なるべく万人受けして、読みやすく、目立つフォントを使いたい！なんて時に、こういうデータはありがたいですね。

調査結果はこちらから

ウェブサイトを構築する際に入力フォームはほぼ採用されていると思います。

お問合せを増やす、会員数を増やすなど、目標を達成する為に
入力フォームの使い勝手にも注意しなくてはならないと思います。

あるサイトでは会員登録をする際、会員IDをユーザーに入力させます。
そこにJavascriptを利用してフォームを作成しております。

どのような効果をおこすかと言うと
会員IDを一文字入力する毎に動的にメッセージが表示されます。

例えば半角英数3文字以上の会員IDの条件とした場合
まず「j」と入力すれば『半角3文字以上入力してください』

そして「ｊｃ」こちらも同じメッセージになります。

3文字目「jco」と入力すると、『入力されたIDは利用できます』

既に登録者がいる場合は
『他の方が利用しております。数字や記号などいれると取得できる可能性が高まります』

とメッセージが出ます。
動作も通常の入力フォームとなんら変わりなく、
ユーザーにとって使い勝手を向上させていると思います。

その他にも、郵便番号を入力し、「郵便番号から住所を検索」ボタンを
郵便番号入力欄に付随させているケースが多いかと思います。

しかし、Ajaxを利用した入力フォームを構築すると
郵便番号を入力したら、自動で住所が表示されます。

技術的にも
JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。
郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行えます。

細かな所まで、気を配り、ターゲットユーザーの求めている使い勝手を
考え、作成していく事が、コンバージョンアップに繋がる要因かと思います。