Aggregator

2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、たにぐち まことさん、田代 豊さん（anygraphica）の『スマートデバイス時代のWebサイト構築術 LIVE』セッションのスライドなどを公開します。

• スライド

セッション 5「スマートデバイス時代のWebサイト構築術 LIVE」を担当させていただいた、anygraphica 田代とたにぐちです。

私たちからは、スマホサイト制作に活用できるツール類を、実際の作業フローに合わせてご紹介しました。説明が早口になってしまって申し訳ありませんでしたが、各ツールを使ってみていただき、便利なものは活用していただければ幸いです。

紹介したツール類です。

• Backlog
• Cacoo
• POP
• POPの動作デモ
• Bootstrap
• G600 MMO Gaming mouse
• Steer Mouse
• sliceGroup_Set.jsx
• Sublime Text 2
• CodeKit
• TextExpander
• Alfred
• SourceTree
• jQuery
• Coda
• Xcode
• Android Studio
• Winows Phone SDK
• Firefox OS Simulator
• Adobe Edge Inspector
• http://www.logicool.co.jp/ja-jp/product/illuminated-keyboard-for-mac-ipad-iphone

動作デモのムービー
http://www.youtube.com

また、アンケートの感想欄でいただいたご質問に回答いたします。

● jQueryは CDNではなく、ローカルに落とすことが推奨されているが、どう思われますか？

これは、私のセッションでそのように感じられたと言うことでしょうか？　それでしたら、分かりにくかったかも知れず申し訳ありません。CDNは積極的に使っていただいて良いと思います。私がデモ中で挿入した jQueryの参照コードはこちらです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script>window.jQuery || document.write(" title="<script src="shared/js/jquery-1.7.1.min.js"><\/script>">Easy Switch Keyboard</script>window.jQuery || document.write('<\/script>')

これは、最初に CDNから jQueryのロードを試みます。その後、正常にロードできていなければ、ローカル（shared/js/フォルダ内）の jQueryをロードするという2段階になっています。参考にしてくださいませ。

● Firefox OS・・・　まだ全然これからなんですね。

ごめんなさい、言葉が足りませんでした。これは Firefox OSのせいではありません。私たちがデモで使ったサイトが、WebKitのことのみを考えて作ったサイトであったため、Mozillaで崩れてしまったものでした。
スマートフォン専用サイトの場合、WebKitでしか確認していない Webサイトも多いため、表示が崩れることもあるかと思います。今後、確認をして調整をしていかなければならないかも知れません。

● Firefox OSをこれからフォローすべきでしょうか？

もちろん、フォローすることが「理想」ではありますが、対応するためには予算や手間がかかりますので、現実的にはこれからシェアなどを見ていきながら、クライアントとの判断になっていくかなと考えています。

ただ、シミュレーターは無料ですぐに利用できますので、まずは触ってみて、どんな風に崩れるのか、どんなクセがあるのかなどは見ておくのは良いと思います。

● Dreamweaverでのコーディングはもう古い？

そ んなことはありません。私たちも今も Dreamweaverは活用していて、ベースのHTMLコーディングなどでは Dreamweaverを利用します。ただ、SCSSを利用したり、jQueryを利用しようとしたときは、別の Sublime Textや Codaの方が優れているかなと思います。
ツールは「どれか1つ」に決める必要はないと思っています。それぞれのツールの良い所を使い分けて、一番最適な作業フローを作れるようにすると良いでしょう。

● どのように情報収集をしていますか？

基本的には、Facebookで友人がつぶやくのを見たり、Gunosyや Ziteなどのニュースアプリを活用しています。気になったニュースやアプリは、必ず試して評価をし、使えそうなものを随時ワークフローに組み入れて試しています。

• Gunosy
  
• Zite
  

気になったニュースは、今 Twitterで流していますので、よろしければフォローしてください。
https://twitter.com/seltzer

レスポンシブWebデザイン実践編 こもり まさあき from indd-jp on Vimeo.

2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、こもり まさあきさんの『レスポンシブWebデザイン実践編』セッションのスライドなどを公開します。

• スライド

CSS Nite LP, Disk 27に参加された皆様、10セッションの長丁場お疲れ様でした。
4番目のセッションを担当したこもりです。

今回は「レスポンシブWebデザイン実践編」ということで、実際の制作時の困った、レスポンシブだとこうなるから…という誤解をどうにか解けないかということで、設計時の考え方や全体的なワークフローには一切触れずに実装のみに話を絞りました。

「Content Choreography」の部分は、さまざまなデバイスで情報を適切に伝えるためにアクセシビリティのことも踏まえながら、コンテンツの順番や配置位置を設計段階で考えるといったことですが、現在のWeb制作ワークフローにおいては「企画、情報設計」「ヴィジュアルデザイン」「コードの実装」といったパートが分離していて、実装サイドが無理矢理どうにかしなければならない状況が多々あると考えています。

そういう無理な設計や注文を実装サイドでどうにかしたいときに、最悪「Flex Box Layout Module」を使うという方法もあるよ、ということで覚えておいていただければ。伊原さんのセッションであったようにスクリーンリーダーの利用の際に情報構造と表示内容に相違が出る、という問題はありますので、使いすぎというよりはむしろ使わないでも済むような方向で前段の設計をちゃんとしておいた方が良いでしょう。

レスポンシブに限った話ではないですが、セッション全体に流れていたように「無理をしない」というのが一番の解決策です。これまではデスクトップオンリーで済んだものが、端末毎の実装差異、バグを山ほどもった端末が今後次から次に発売されていくでしょう。

こもり自身、旧来の携帯電話向けのコンテンツ制作・運営などをやっていた経験もあり、端末がドンドン発売されるような状況での制作や運用対応の大変さは身をもって実感しています。参考までにお伝えしておくと、1日にFacebookにアクセスするデバイスは「7,000」種類といわれています。

これは世界レベルの話ですが、日本でも今後端末の発売は相次ぐでしょうし、機種変は進まないと思って良いのではないか？、さらにある日突然スマートフォン以外のデバイスが出てきて、携帯電話が突然消えてしまったような今の状況に近しいことになるかもしれません。

そういった部分はもちろん、サイトの性質、利用者のコンテキストを考慮しながら、どういった方法で実装するのが良いか、いま一度実装サイド以外のクライアントも含めたメンバーと考えていただれけばと思います。

以上、長くなりましたが、本セッションの一部でも皆様の今後の制作に役立てたら幸いです。

こもり

--

最後に「あのお化けアイコンは何だ？」という声をいただいてたのでご紹介まで。

• Ghostlab

Adobeの「Edge Inspect」と同様の機能をもったコンテンツの確認ツールです。これの特徴は「自分自身がローカルのProxyになってサーバを起動する」「特別なソフトや拡張機能、端末側のアプリのインストールが不要」「同一ネットワークにある端末から直接アクセスできる」「任意のディレクトリや外部のURLをホストすることができる」といったものです。もちろん、すべてが同期するので、面倒なフォームの入力もPC側からおこなうことができます。

2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、益子 貴寛さん（サイバーガーデン）の『スマートフォン向けサイト制作の基本』セッションのスライドなどを公開します。

• スライド

セッション3「スマートフォン向けサイト制作の基本」を担当したサイバーガーデンの益子です。

今回のイベントでは、それほど触れられていなかったパターンとして、あえてユーザーの利用シーンを絞ったスマートフォンサイトを提供する、という方法もあります。

ほかのイベントで紹介したことがあるかもしれません。
みそかつの「矢場とん」です（スマートフォンでアクセスしてみてください）。

コンテンツをかなり絞っているのはもちろん、とにかく「いますぐ矢場とんに行きたい人に向けて」というのが如実に感じられます（裏側から見れば、コンバージョン最優先ということ）。

予算が少ない、期間が短いなど制約が多い場合だけでなく、このように「あえて」という判断があって然るべきですし、もしかしたら今後増えていくのでは、と思っています。

最後に、ひとりの聞き手としても、すごく勉強になったイベントでした。みなさんにも同じように感じていただけたなら幸いです。

2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、矢野 りんさん（バイドゥ）の『モバイルデザインパターンの取り入れかた 』セッションのスライドなどを公開します。

• スライド

モバイルデザインパターンの取り入れ方　を担当した矢野です。
ご参加ありがとうございました。

セッションでは、ユーザーは基本的に文字の入力を避けるというお話をしました。

アンケートで「どんなフォームデザインなら（入力の）ハードルが下がるか」という質問がございましたので解答します。

フォームの目的にもよりますが、大きくは
・入力項目がすくないこと
・フォーム要素のサイズが大きいこと
・長文の入力が必要ない構成にすること
・プルダウンのような入力サポートを取り入れること
・手続きを小分けにすること
です。

そのような体裁であっても、オンラインアンケートのような基本、ユーザーの好意で操作してもらうようなコンテンツは機能しにくいです。
ユーザーの嗜好を知る手段はアンケートにたよらず、特定のコンテンツに対する興味などをログで確認、分析して把握するほうがよいでしょう。

今回のセッションは来場者属性に基づいて入門寄りの内容に整えました。ちょっと食い足りないというご意見もありましたので、今後の理解を深めるための情報も共有いたします。

『モバイルフロンティア よりよいモバイルUXを生み出すためのデザインガイド』

丸善出版 価格：?2,940
少々アカデミックな内容ながら、普遍的なUIのセオリーを扱っている書籍です。モバイルを扱うとき、何に注意を払うべきか、これからどうなっていくのか、について書かれています。翻訳メンバーにはCSS Niteに登壇されたこともあるインフォメーションアーキテクチャのオーソリティ佐藤伸哉氏も加わっています。

『スマートフォンデザイン見本帳』

MdN 価格：?2,625円
矢野の近著です。モバイルフロンティアが概念的な話だとすると、矢野の書籍はこうした概念にどのような服を着せればよいのかというスタイルの参考例を中心に解説しています。設計の話がメインになりがちなモバイルコンテンツデザインですが、やはり最後は視覚的な質がコンテンツの信頼感を左右するのはPCの時代と変わりません。カラーリングの美しさなどは常にデザイナーが責任を持つべき部分です。

モバイルインターフェースに関する考察は始まったばかりです。この先おこる変化を楽しみながら仕事をしましょう！

2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、神森 勉さん（KDDIウェブコミュニケーションズ）の『スマートフォン今昔物語』セッションのスライドなどを公開します。

• スライド

長い時間のイベントでしたが、ご参加いただいたみなさま、大変お疲れ様でした。
セッション1「スマートフォン今昔物語」を担当した、KDDIウェブコミュニケーションズの神森です。

セッションでは、駆け足でスマートフォンの今までの流れをご紹介しました。
普段なにげなく使っているスマートフォンですが、Android端末に関しては、最新のOSと提供される端末では約半年ほどのずれがあります。細かなバージョンアップでより使いやすいOSになってきているものの、現在の国内に限っては、新しいOSを搭載した端末を手にする機会のずれは、常に意識しておくことで、実装時に起こる思わぬトラブルは多少なりとも回避できると思います。

また、画面サイズに至っては、今年は4.7?5インチサイズが主流となり、フルHD解像度の端末がどんどん増えてくるでしょう。それに伴い、コンテンツリッチなサイトがどんどん増えてくるとは思います。LTEにより、通信環境の高速化が進んできますが、まだしばらくは一世代前の3G環境との併用になるでしょう。LTEカバーエリアではLTEで、それ以外は3Gで接続するので、LTEの高速通信を見越した大きな画像などをやたらと貼り付けるのは、3G環境で接続した際には非常にストレスになります。また、携帯各事業者のLTE向け料金プランに関しては、どの事業者も7GBの通信制限を設けています。これは、一ヶ月の中で、7GBを超える通信を行うと、通信制限がかかってしまうというものです。大量のデータを受信すればするほど、通信量は増え、上限に達してしまう可能性は否定できません。
そうした理由から、画像の最適化やサイトの最適化はこれまで同様行っていくことが大切だと思います。

作る立場では非常に悩ましいスマートフォンサイトですが、スマートフォンを使うという立場になると、非常に楽しいガジェットです。是非、楽しいスマートフォンライフを送っていただければと思います。
ありがとうございました！

最後に、今回のセッションで参考にさせていただいたサイトなどをいくつかご紹介いたします。

• スマートフォンデータベース
  2008年3月から2013年10月までのスマートフォンに関する情報が網羅されたサイトです。OS別や、端末の販売時期、色やディスプレイ、OSの種類、そして携帯事業者ごとに絞り込んでの検索ができます。現在最強のスマートフォンデータベースだと思います。
• IDC Japan
  世界で有名なIT専門の調査会社。
• Kanter Worldpanel
  世界主要各国のスマートフォンOSシェアのデータシートはこのサイトからダウンロードしました。以下のページにあります。
  http://www.kantarworldpanel.com/global/News/Android-set-to-spike-with-HTC-One-and-Samsung-Galaxy-S4-launches
• MM総研
  国内の調査会社。調査データと予測データが非常に参考になります。
• TCA
  国内の携帯電話の契約数などはここに集約されています。
• 価格.com
  意外かもしれませんが、端末リリース時期のOSを調べるのは、ここをフル活用しました。事業者のサイトでは、古い端末を調べるのに一苦労なのですが、ここだと端末の型番さえわかれば、ほぼ一発で結果が出てきます。

著者情報の利用に関してよく聞かれる疑問に対する回答をGoogleのウェブマスター向け公式ブログが公開した。合計7つの、上級者向けのFAQ。

- Google著者情報(rel=author)によくある7つの質問 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM

ご無沙汰してます。ディレクターの竹本です。

ページのコンテンツ作り、ライティングにはターゲットユーザーが「検索する言葉」が重要です。タイトルや検索結果に表示されるディスクリプションにユーザーが検索する言葉がダイレクトに入っているほど訴求力、誘導力は間違いなく高まります。

自社での呼称が統一されていたり、さまざまな諸事情から、言葉の表現に制約がある場合もあると思いますが、許される限り、より一般的にユーザーが使用する言葉をWebページの中に入れましょう。

今回はページコンテンツ、ライティングに盛り込もうと思っている想定キーワードの検索ニーズを把握する方法、ツールをご紹介したいと思います。

これを使って検索ニーズを把握し、Webページや記事の中に入れる言葉を選択しましょう。

Google AdWordsを利用されている方はご存知だと思いますが、リスティング広告などを出稿する際のキーワードの調査や見積もりを主に行える、無料で提供されているツールです。

Google AdWordsのサービスですので、基本的には広告出稿者の為に提供されているツールですが、Googleのオーガニック検索におけるキーワードのデータベースですので、Web上のニーズの調査や、Webライティングの参考としても、とてもおすすめのツールです。

Google AdWordsの「キーワード プランナー」

※従来より提供されていた「キーワードツール」は数か月の間に提供が中止されます。ほぼ同じ機能が「キーワード プランナー」に引き継がれます。「キーワード プランナー」の利用はGoogle AdWordsへの登録、ログインが必要です(無料)。

ターゲットの「検索する言葉」を意識してライティングに挿入する。

例えばこの記事の中でいうと、以下のグループで、正式名称が一般的か、通称が一般的か、認知度はどうか、アルファベットが一般的か、カタカナが一般的か、と言ったことを意識して調査の上、できるだけボリュームの多いワードを使用しています。

「キーワード プランナー」というワードは検索ボリュームが少なく、「キーワードツール」での検索ボリュームが多いのがわかります。それぞれのツールの機能が近いことから、「キーワードツール」で検索するユーザーのニーズは、「キーワード プランナー」を検索するユーザーと同様の可能性がありますので、記事の中に「キーワードツール」のワードも見出しや註釈に意識的に追加しています。

※()内は「キーワード プランナー」で調査した月間検索ボリューム

• Web ライティング    (260)
• ウェブ ライティング    (70)
• 記事 書き方     (170)
• 記事の書き方    (260)

• オーガニック検索    (720)
• 自然検索     (90)
• オーガニックサーチ     (22)

• キーワードツール     (14,800)
• キーワードアドバイスツール     (3,600)
• キーワードプランナー     (データ不足)

• Webページ     (1,600)
• ウェブページ     (590)

使い方

1.Google AdWordsにログインします。(URL：https://adwords.google.com/)

2.グローバルメニューの「ツールと分析」から「キーワード プランナー」を選択します。

グローバルメニューからキーワードプランナーを選択

3．キーワード プランナーのトップページメニューから「キーワードと広告グループの候補を検索する」を選択します。

「キーワードと広告グループの候補を検索する」を選択する。

4.(Ａ)の入力欄に調べたいキーワードを入力します。地域で絞る、使用言語で絞るなどターゲットの設定をする場合は(B)の項目で選択できます。キーワードの入力、ターゲットの設定が完了したら(C)の「候補を取得」をクリックします。

キーワードの入力と設定し候補を取得ボタンを押します。

 5．結果のページが表示されたら、「キーワード候補」タブをクリックで各キーワードの検索ボリュームを確認できます。

「キーワード候補」タブをクリックで結果を取得できます。

もちろん記事内のすべてのワードを調査、チューニングする必要はありません。記事内の内容を構成する重要なワードはチェックしてチューニングしましょう。

そうすることでユーザーにとってアクセスしたくなる、より良質で有益な情報になります。