SEO for スマートフォン [2] レスポンシブWebデザイン
前回記事『SEO for スマートフォン [1] Google のモバイルに対する考え方』の続きです。今回はレスポンシブWebデザインに対する考え方について。 レスポンシブWebデザインは検索順位的に有利なのか？ Googleが2012年6月に「Building Smartphone-Optimized Websites」という文書を公開して、スマートフォン対応サイトを検索エンジンに最適化させる方法についての Google の意見が表明されました。 この文書について、「Googleで検索順位を上げるためにはレスポンシブWebデザインを採用しなければならない」あるいは「レスポンシブWebデザインにしないと、順位が上がらなくなる」という間違った解釈をしているWeb制作会社やSEO会社を見かけます。これは大きな間違いです。 たとえば先に紹介した文書の冒頭を見ても、"Google supports
インフォメーション・アーキテクチャ（IA）について
インフォメーション・アーキテクチャ（IA） 前職で恥ずかしながらお客さんから聞いて初めて知った言葉です。 僕はWebサービスやスマートフォンアプリの開発に関してUI/UXへのこだわりを強く持っていますが、この言葉の存在を知ってから、その上位の概念に位置する情報アーキテクチャの設計こそが最も重要だと考えるようになりました。 下手なことを言うと突っ込まれそうなので嫌なのですが、僕はIAの設計とはWebサイトで言うサイトマップを作成する作業に近いと捉えています。 UIの設計に至るまでには、大きく以下のような3ステップがあると思います。 １）どんな機能/コンテンツが必要か洗い出す ２）それらをどうまとめるか考える ３）定義したまとまりの中で各機能/コンテンツの見せ方を考える IAの設計とは、この流れでいう２）にあたる部分です。 ※これがしっかりとできていると、経験上３）の作業はかなりスムーズに進行
ショッピングカートでは、クレジットカード情報の入力エリアをハイライトするとかご落ちを防げる
[対象: 全員] コンバージョン率を上げるために簡単にできる改善策を今日は紹介します。 クレジットカードの入力エリアを“視覚的に補強”する方法です。 Baymard InstituteのE-Commerce Checkout Usabilityで説明されていたやり方になります。 A（左）とB（右）を比べてみてください。※クリックで拡大 違いに気付きますか？ 2つ違ってますね。 背景色 セキュアバッヂ クレジットカードを入力するエリアだけがほかのエリアとは背景色が変えられていています。 またGeoTrust（ジオトラスト）のセキュアバッヂが置かれています（Aではページ右上に置かれているがBでは近くに移動してある）。 たったこれだけのことでセキュリティに対するユーザーの安心感が増すんだそうです。 SSLを使っていれば技術的にはクレジットカード情報を含むすべての情報は暗号化されたうえで送信されま
mixiのiPhoneアプリはここを改善すべきだ
mixi, Twitter, Facebook, Google+, Linkedin 2011年12月最新ニールセン調査 日本ではまだまだページビューや滞在時間においてはmixiが他のSNSを引き離しているようですが、上記リンク先でも言及されているように、それはあくまでもPCブラウザ経由でのサイトアクセスに限定した場合のようです。モバイル端末からのアクセスを含めるとどういう結果になるのか気になるところです。 …という流れで、最近mixiが公式でリリースしているiPhoneアプリを触ってみたのですが、これは現状では課題だらけだと思います。AppStoreでもサードパーティー製のmixiビューアーより評価が低い状況で、同社のスマートフォン展開に対する意識の低さが浮き彫りになっているように感じます。少なくともデザインやUIのクオリティに関しては、海外の競合SNSに大きく引き離されてしまっているの
CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説
CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
スマートフォン時代のWebサイト制作 第4回 画像の扱いと最適化 | デベロッパーセンター
スマートフォン向けサイトでは、デスクトップに及ばないスペックや接続回線を考慮し、いかに「軽い、表示が速い」サイトを作るかが重要です。一方で、様々な画面解像度の端末があり、高解像度の画面を搭載した端末向けには、そのサイズに対応した大きな画像が必要となる場合もあります。画像の扱いひとつをとっても、「パフォーマンス」と「見栄え」の双方を考慮しなければいけない難しさがあります。そこで今回は、前回のサンプルサイトを元に、画像関係の扱いや最適化などを解説します。 スマートフォンブラウザーはPNGに対応しています。デスクトップブラウザーでPNGを使う場合、Internet Explorer 6などの古いブラウザーに気をつける必要がありますが、スマートフォンブラウザーの場合は気にする必要がありません。 PNGは圧縮率が高く、容量を抑えることができます。また、アルファチャンネル（透過機能）を持つので、半透明
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド | コリス
