<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>トレンドウォッチ | デジパ株式会社</title>
        <link>http://digiper.com/trend/</link>
        <description>ウェブサイト制作やインターネットに関する最新の話題を不定期で更新しています。</description>
        <language>ja</language>
        <copyright>Copyright 2015 digiper Inc. All Rights Reserved.</copyright>
        <lastBuildDate>Wed, 11 Mar 2015 09:25:18 +0900</lastBuildDate>
        <docs>http://www.rssboard.org/rss-specification</docs>
        
        <item>
            <title>文字情報の最適化 UDフォント</title>
            <description>[総務省の発表](http://www.stat.go.jp/data/topics/topi721.htm)（2013年9月）によれば65歳以上の高齢者は総人口に占める割合の25％となり日本人の4人に1人が高齢者となりました。インターネットユーザーのシニア層は全体からみればごくわずかであるものの今後も増加していくことが予想でき、ものづくりの現場においてできる限り多くの人への配慮が求められています。

フォントの分野では、モリサワフォントリサーチ2014のアンケート結果によると、UDフォント利用率は2011年が29%、2012年が36%、2013年が44%（引用：[PJ web news【印刷ジャーナル】](http://www.pjl.co.jp/issue/cat/post_207.html)）と年々増加しており、こうした社会構造の変化に対応するためユニバーサルデザインの考え方を取り入れる動きが加速しています。

##UDフォントとは

視覚情報の多くは文字によるものとされています。正確に情報を伝達するため視力の衰えや障がいの有無など幅広い身体能力に対応させ、見やすく読みやすい文字情報に近づけるためにUDフォントは役立っています。ではUDフォントとはどのようなコンセプトで作られているのでしょうか。

* 認識しやすい（視認性）
* 誤読しにくい（判読性）
* 文章が読みやすい（可読性）

UDフォントの特徴として、文字情報を読みやすくするために視認性・判読性・可読性を高める様々な工夫が施されています。書体デザインは比較的簡素なものが多く、類似する文字を判別しやすいようにはっきりと区別していたり、アキをしっかりと確保することでふところが深くなるため、文字が細かくかすれたり潰れにくいというのもUDフォントのもつ性質といえます。

##主なUDフォント

###イワタUDフォント

イワタUDフォントはパナソニックとの共同開発により2006年に発表されたUDフォントの先駆けです。

[http://www.iwatafont.co.jp/ud/](http://www.iwatafont.co.jp/ud/)

###モリサワ UDフォント

国内最大手のフォントメーカー、モリサワによるUDフォント。幅広い用途に対応する豊富なラインアップが特徴です。

[http://www.morisawa.co.jp/font/about/knowledge/ud/](http://www.morisawa.co.jp/font/about/knowledge/ud/)

###ヒラギノUDフォント

Mac OS X および iOS の標準日本語フォントであるヒラギノのユニバーサルデザイン書体です。

[http://www.screen.co.jp/ga_product/sento/](http://www.screen.co.jp/ga_product/sento/)

###モトヤ UDフォント

Google の Chrome OS に採用されたモトヤフォントを有する老舗フォントメーカーのモトヤによるユニバーサルデザイン書体です。

[http://www.motoyafont.jp/images/shotai_sample/motoyaud_font.html](http://www.motoyafont.jp/images/shotai_sample/motoyaud_font.html)

###その他のUDフォント

* [TYPE C4](http://www.type-c4.com/)
* [TypeBank](http://www.typebank.co.jp/fonts/ud/)

##UDフォントを使った事例

前述のとおりUDフォントの利用率は増加傾向にあり、公共施設のサインや出版物、電化製品など多種多様な分野で用いられています。

![株式会社イワタ　イワタUDフォント](/trend/upload_docs/20150311_02.png)

（引用：[株式会社イワタ　イワタUDフォント](http://www.iwatafont.co.jp/ud/jirei_01.html)）

また食品の成分表示や取扱説明書、CSRレポートといった企業の説明責任を問われるケースにおける活用事例も多くみられ、コーポレートサイトなどWebにおいてもUDフォントの導入は非常に有効な手段といえるのではないでしょうか。

![株式会社イワタ　イワタUDフォント](/trend/upload_docs/20150311_01.png)

（引用：[株式会社イワタ　イワタUDフォント](http://www.iwatafont.co.jp/ud/jirei_08.html)）

SEIYUのコーポレートサイトではUD新ゴをWebフォントとして採用しています。

![合同会社 西友 コーポレートサイト](/trend/upload_docs/20150311_03.png)

[合同会社 西友 コーポレートサイト](http://www.seiyu.co.jp/)

##最後に

社団法人ユニバーサルコミュニケーションデザイン協会とイワタ、電通が共同開発したUDフォント「[みんなの文字](https://minmoji.ucda.jp/)」は、Webフォント版のみ無償で提供されています。Web制作者にとってはUDフォントを手に取りやすくなり、単なる美しさだけでなく読みやすさを追求したフォントは情報格差の是正に大きく寄与していくのではないでしょうか。<![CDATA[<p class="article-author">この記事は <strong>デザイナー 星野</strong> が執筆しています。</p>]]></description>
            <link>http://digiper.com/trend/article/286.shtml</link>
            <guid>http://digiper.com/trend/article/286.shtml</guid>
            
            
            <pubDate>Wed, 11 Mar 2015 09:25:18 +0900</pubDate>
        </item>
        
        <item>
            <title>構造化データ活用度の調査 OGPの実装</title>
            <description><![CDATA[<style>
.pageContent p {
	text-align: left;
}
</style>

前回、コーポレートサイトにおいて構造化データがどの程度用いられているか、という[調査結果](http://digiper.com/trend/article/283.shtml)をご紹介しました。

今回は、それらの構造化データがどのように実装されているかを調査しましたのでご紹介したいと思います。

まずは、最も多くのウェブサイトが採用していた<abbr title="Open Graph
Protocol">OGP</abbr>の実装のされ方について調べてみました。

### OGP基本の4情報

OGPの公式ページ<a href="http://ogp.me/">The Open Graph protocol</a>ではBasic
Metadata(基本的なメタ情報)として下記の4つが挙げられています。

<dl>
<dt><code>og:title</code></dt>
<dd>ページのタイトル</dd>
<dt><code>og:type</code></dt>
<dd>ページのタイプ</dd>
<dt><code>og:image</code></dt>
<dd>ページに関連する画像</dd>
<dt><code>og:url</code></dt>
<dd>ページのURL</dd>
</dl>

自分が実装する際も、少なくとも上記は実装するようにしていますが、今回の調査でOGPを採用していた161社はどの程度実装していたのでしょうか。

<table>
<caption>OGP採用161社のBasic Metadata実装数</caption>
<thead>
<tr>
<th>og:title</th>
<th>og:type</th>
<th>og:image</th>
<th>og:url</th>
</tr>
</thead>
<tbody>
<tr>
<td>130(80.7%)</td>
<td>129(80.1%)</td>
<td>139(86.3%)</td>
<td>129(80.1%)</td>
</tr>
</tbody>
</table>

いずれのプロパティもほとんどのページで採用されていました。傾向を見ると基本4つを設定しているページはほとんど実装されていましたが、実装してないページは<code>fb:app_id</code>などの特定のもののみの実装となっていました。

たいていの場合、<code>og:title</code>がせっていされていなくても<code>title</code>から取得してくれるのですが、一番利用が想定されているであろうFacebookでは、<code>og:title</code>がない場合は、<code>title</code>から取得せずURLが表示されてしまい味気ない表示になってしまいますので注意が必要です。

### Object Type

Facebookでは<code>og:title</code>の他に<code>og:type</code>の実装が必須となっています。<code>og:type</code>も8割のページが採用していましたが、具体的にどのtypeを設定しているのでしょうか。

<figure>
![websiteが95ページで最も多く、設定なしが53ページ、articleが18、companyが13ページでfoodが2ページあった](/trend/upload_docs/20150304.png)
<figcaption>
<code>og:type</code>の設定
</figcaption>
</figure>

今回の調査の対象が、コーポレートサイトのTOPページでしたので、ほとんど<code>website</code>であろうと推測していましたが、まさにそのとおりになりました。

一部、<code>company</code>が残っているのは、昔Facebookがサポートしていた時の名残では無いかと思います。現在では<code>website</code>として認識されます。

現在では[ビジネスタイプ](https://developers.facebook.com/docs/reference/opengraph/object-type/business.business/)が<code>business.business</code>として指定できますが、詳細な住所（<code>og:business:contact_data</code>）や、緯度経度（<code>og:place:location</code>）が必須となり、少し実装にはコストがかかりそうです。

<code>food</code>も同じく昔Facebookがサポートしていた名残ではないかと考えられますが、こちらも現在はサポートされていません。

### まとめとツールの紹介

採用されている企業も多いOGPでしたので、実装についても多くは基本が抑えられている結果となりました。ただし一部ではプロパティが十分でないケースも見られました。

実装が正しいかどうかは[FacebookのDebugger](https://developers.facebook.com/tools/debug/)が役に立ちますが、都度URLを入力するのは面倒なので、Google
Chromeをお使いの方は[OGP
Checker](https://chrome.google.com/webstore/detail/ogp-checker/aahaelhkejkacfahbognphmanapkalab)というツールがお勧めです。

合わせて冒頭で紹介した、OGPの公式ページ<a href="http://ogp.me/">The Open Graph protocol</a>や[Facebookのリファレンス](https://developers.facebook.com/docs/reference/opengraph/)もチェックし、正しく実装をして様々な場所でリッチな表示を実現しましょう。]]><![CDATA[<p class="article-author">この記事は <strong>マークアップエンジニア 桝田</strong> が執筆しています。</p>]]></description>
            <link>http://digiper.com/trend/article/285.shtml</link>
            <guid>http://digiper.com/trend/article/285.shtml</guid>
            
            
            <pubDate>Wed, 04 Mar 2015 17:56:45 +0900</pubDate>
        </item>
        
        <item>
            <title>レスポンシブEメールデザインを使ったマルチデバイス対応</title>
            <description><![CDATA[スマートフォン、タブレット端末が普及し、PC以外でWebサイトを閲覧することが増えていますが、メールもモバイルデバイスで確認する機会が増えてきているのではないでしょうか。しかしメールはWebサイトに比べマルチデバイス対応がまだ進んでいないと思います。

そこで今回はHTMLメールをマルチデバイス対応させる手法の「レスポンシブEメールデザイン」ついて紹介します。

## レスポンシブEメールデザインの必要性
![](/trend/upload_docs/20150218_01.jpg)
<br>[litmus 53% of Emails Opened on Mobile; Outlook Opens Decrease 33%](https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33)

こちらはlitmus社の調査結果です。

+ Eメールの48％はモバイルデバイスで開かれているが、多くのメールがデスクトップでの表示設計をしている。モバイルデバイスでは、テキストは読むのがしばしば困難で、画像は細部が見えずらく、リンクがクリックしづらい。<br>
80％の人がモバイルデバイスで見づらいEメールを削除している。（[The How-To Guide to Responsive Email Design](https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic/)）
+ レスポンシブ対応、非対応でA/Bテストした結果、レスポンシブ対応したHTMLメールのクリック率が130％上がった。（[Responsive Design A/B Testing Leads to a 130% Increase in Clicks](https://litmus.com/blog/responsive-design-ab-testing-leads-to-a-130-increase-in-clicks)）

PCに比べスマートフォンのほうが日常触る回数が圧倒的に多く、その分メールを読む、クリックする機会は増えると予測されるので、この調査結果は納得できるのではないでしょうか。

そしてこの結果からWebサイト同様にメールもマルチデバイス対応をしなければ、機会損失につながってしまうことがわかります。

## レスポンシブEメールデザインで覚えておくべきこと

レスポンシブEメールデザインといっても基本的にはtableレイアウトで作成します。

そして様々な制約も発生します。（HTMLメールの制約も含まれます）

+ メールクライアントやメールアプリによってサポートされているHTMLの要素、CSSのプロパティが違う
+ レスポンシブWebデザインの際に使うMedia Queryがサポートされていない場合もある
+ 多くのメールクライアントの初期状態が画像表示Offになっている
+ PNGの表示をサポートしていない環境がある
+ デバイス幅を変えても表示が変わらない
+ 画像を使いすぎると、モバイルデバイスで重くなり逆効果になる
+ CSSをインラインスタイルとして書く必要がある

以上のことから、レスポンシブWebデザインのようには制作できないのが現状で、レスポンシブEメールデザインを制作する際にはシンプルなレイアウト（1カラム、2カラム）をお勧めします。

また、レスポンシブEメールデザインのテンプレートが数多くあります。これを元に制作していくのも一つの手ではあります。

+ [Cerberus](http://tedgoas.github.io/Cerberus/)
+ [email-blueprints](https://github.com/mailchimp/Email-Blueprints)
+ [Ink](http://zurb.com/ink/)
+ [Antwort](http://internations.github.io/antwort/)
+ [Stamplia Email Templates](https://litmus.com/blog/go-responsive-with-these-7-free-email-templates-from-stamplia)
+ [Zurb: Responsive Email Layouts](http://zurb.com/playground/responsive-email-templates)

気をつける点としては、テンプレートを使ったとしても正しく表示できている確認をする必要があります。
数多くのメールクライアントやメールアプリを確認するには困難ですが、HTMLメールの検証サービス（有料）として2つ紹介します。

+ [litmus](https://litmus.com/email-testing)
+ [Email on Acid](http://www.emailonacid.com/)

検証サービスを使ったとしてもすべてを網羅するには限界があり、最初にサポートする環境を絞り込むことも大切です。

## まとめ
レスポンシブEメールデザインは難しい印象がありますが、多様化していく環境の中では取り入れる必要がある手法だと考えます。Webサイトと同様に様々なデバイス、環境で見ても、読みやすく、画像が表示されない場合でも読み取れ（altを入れる）、リンクが分かりやすいなど受信者に優しいものを作るという点が大切です。]]><![CDATA[<p class="article-author">この記事は <strong>フロントエンドエンジニア 村松</strong> が執筆しています。</p>]]></description>
            <link>http://digiper.com/trend/article/284.shtml</link>
            <guid>http://digiper.com/trend/article/284.shtml</guid>
            
            
            <pubDate>Wed, 18 Feb 2015 12:03:45 +0900</pubDate>
        </item>
        
        <item>
            <title>コーポレートサイトにおける構造化データ活用調査</title>
            <description><![CDATA[ウェブサイトに掲載するデータ（情報）を機械が読み取りやすくするために、HTMLによるマークアップを拡張する形で情報を構造化することが出来ます。機械が読み取れることで、例えば検索エンジンがそのページのコンテンツをより詳細に把握して、より分かりやすい検索結果の表示（リッチスニペット）が出来たり、Webサービス上でページのリンクが共有された際に、より詳細な情報を表示することが出来ます。

例：Googleによるレシピ検索のリッチスニペット

![](/trend/upload_docs/20150211_02.png)

例：Facebookによるリンクの情報の表示拡張

![](/trend/upload_docs/20150211_01.png)

昨今のウェブサービスは構造化データを利用していなくても、適した情報を表示してくれるほどには進化しているのですが、より正しく詳細に情報を読み取ってもらうためにはデータを構造化することが必要です。

弊社では企業のコーポレートサイトを受託することが多いのですが、コーポレートサイトではどの程度構造化データが活用されているのでしょうか。東証一部上場企業を中心に調査してみましたので、その結果を報告します。

### 調査概要

#### 調査対象ページ
東証一部上場企業のコーポレートサイト1601サイト<small>トップページのみ</small>

#### 調査対象構造化データ

+ [OGP(Open Graph)](http://ogp.me/)
+ [Twitterカード](https://dev.twitter.com/ja/cards/overview)
+ [Microdata(schema.org)](http://schema.org/)

#### 調査方法

スクリプトを利用した自動抽出。HTML中に下記のいずれかの記載があれば、構造化データを使用とみなした。

<dl>
<dt>OGP</dt>
<dd><code>property</code>の値が<code>og:</code>で始まる<code>meta</code>要素</dd>
<dt>Twiiterカード</dt>
<dd><code>property</code>の値が<code>twiter:</code>で始まる<code>meta</code>要素</dd>
<dt>Microdata(schema.org)</dt>
<dd><code>itemscope</code>属性を持つ要素</dd>
</dl>

### 調査結果
<table>
<caption>東証一部上場企業コーポレートサイトにおける構造化データ採用数<br
/><small>()内は比率、トップページのみ</small></caption>
  <tbody>
    <tr>
      <th>構造化データを採用</th>
      <th>OGP</th>
      <th>Twitterカード</th>
      <th>schema.org</th>
    </tr>
    <tr>
      <td>171サイト(10.6%)</td>
      <td>161サイト(10.1%)</td>
      <td>6サイト(0.4%)</td>
      <td>12サイト(0.7%)</td>
    </tr>
  </tbody>
</table>

#### 調査結果から考察

いずれかの方法で構造化データを採用している企業は全体の10%強とまだ多くの企業が活用しているとは言えない結果でした。

個別に構造化データの手法を見ますと、OGPを採用している企業が多く見られました。理由としては、企業におけるSNS(特にFacebook)の活用が進んでいたり、日本語のドキュメントが豊富で導入が用意であったりする点が考えられます。

ただしOGPを設定しているページでも、記述されているのがそのページや記事の管理者情報(<code>fb:app_id</code>など)のみで、必須項目のページタイトル(<code>og:title</code>)やページの種類(<code>og:type</code>)を含むページのデータを構造化する記述がないページも幾つか見られました。

Facebookの開発者向けサイトではOGPが正しく設定できているかどうか検証することが出来ますので、設定する際は検証をおすすめします。

<a href="https://developers.facebook.com/tools/debug/">Debugger</a>

TwitterカードについてFacebookと比較して、極端にTwitterが活用されていないとは考えられないのですが、Twiiterカードが採用されてないのは、利用に際してTwitter社に申請が必要であるため、利用のハードルが高いからかもしれません。

schema.orgに関しては、申請が必要ではないのですが、冒頭で紹介したレシピのような特定の用途でのリッチスニペット以外に具体的なメリットが少ないためか、導入されている企業は少ない結果となりました。

> 現時点では、Googleが掲載順位を決定するためにマークアップを使用することはありません。ただし、リッチスニペットによってウェブページが検索結果の上位に表示されるようになる場合もあるため、トラフィックが増える可能性があります。

<dl>
  <dt>出典</dt>
  <dd><a href="https://support.google.com/webmasters/answer/1211158?hl=ja">schema.orgに関するよくある質問</a></dd>
</dl>

Googleの公式見解としては、現時点では検索結果の順位に影響は無いとしていますが、上記のようにリッチスニペットが表示される場合は順位に反映される可能性もあるため、今後の動きに注目しておくと良いのではないでしょうか。]]><![CDATA[<p class="article-author">この記事は <strong>マークアップエンジニア 桝田</strong> が執筆しています。</p>]]></description>
            <link>http://digiper.com/trend/article/283.shtml</link>
            <guid>http://digiper.com/trend/article/283.shtml</guid>
            
            
            <pubDate>Wed, 11 Feb 2015 13:39:19 +0900</pubDate>
        </item>
        
        <item>
            <title>Androidの視覚的言語、Material Designとは</title>
            <description><![CDATA[2014年6月、Google が開催した開発者向けのイベント [Google I/O](https://www.google.com/events/io) において、今後の UX デザインの指標となる [Material Design](http://www.google.com/design/spec/material-design/introduction.html) の概要を明らかにしました。

最新モバイル OS である Android 5.0 Lollipop や iOS版 Google アプリ、Evernote の最新バージョンのアプリなど既に様々なデバイスやサービスにこのガイドラインに則ったデザインが採用されており、Material Design の本格的な普及が始まっています。では Material Design とは何なのでしょうか。

###Material Design とは

<iframe width="593" height="334" src="//www.youtube.com/embed/Q8TXgCzxEnw" frameborder="0" allowfullscreen></iframe>

Apple の iOS7 の UI や Microsoft が Windows Phone 7 から採用した Modern UI など、各社写実的なスキューモーフィズムをできる限り廃したフラットなデザインに移行してきています。

そのような中 Material Design はビジュアルの決まり事を定めたものというよりは、Google の目指すデザインの考え方や思想を視覚的な言語として包括的に定義しています。

####Material Design の目的

> We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

伝統的かつ古典的なデザイン原則と技術的な革新をうまく融合するための視覚言語を作成することを基本方針としており、仕様が発展し続ける限り書き変わる生きたドキュメントであるとガイドライン上で述べられています。

ですからスマートフォンのみならず、あらゆるプラットフォームやデバイスに一貫性のあるユーザー体験を提供し続けることが目的といえます。

####Material Design を表す3つの基礎原則

![Material design Principles](/trend/upload_docs/material_design_01.png)

* Material is the metaphor - マテリアルはメタファーである
* Bold, graphic, intentional - 大胆に、生き生きと、意図的に
* Motion provides meaning - 動きは意味を提供する

Material Design は現実世界に存在する自然の原理とモーションの仕組みを参考にしており、光や表面の質感、動作などの物理的な法則に基づいたマテリアルをメタファーとして、ユーザーがストレスなく操作する上での手がかりを示しています。

見た目を模倣することで機能性や操作感の説明を補うスキューモーフィックデザイン、それに対して Material Design は余計な情報や装飾は詰め込まずに、物理的で自然なアフォーダンスからコンテンツを中心とした UI を提供しようとしていることから、スキューモーフィズムの認知心理の感覚とは近いようで異なるアプローチといえます。

また、外観を見る限りではフラットなデザインテイストが色濃く出ているようにも感じますが、上記のような原則を突き詰めてビジュアルを落とし込むなかで、結果としてフラットなデザインテイストに寄っていったと考えることができます。

###Material Design が解決すること

今年の Google I/O では、Material Design とともに Android Ware, Android Auto, Android TV などの新たなプラットフォームも発表されました。

デバイスの多様化に合わせて、固有の画面サイズに依存せずに UI の根幹として横断的に作用し、一貫した UX で操作性統一の実現を期待されています。今後もスマートフォンやタブレット以外にも、Google が開発を進めるあらゆるプラットフォームに Material Design が適用されていくことが予想できます。

そしてこれからやってくるモバイルの時代に向けて、モバイルを前提としたコンテンツが主体となる考え方や思想は Web パフォーマンスにも寄与し、ユーザーが情報そのものに集中できることが大きな恩恵となるのではないでしょうか。

###最後に

Google が公式に提供しているフロントエンドフレームワーク [Polymer](https://www.polymer-project.org/) を活用すれば手軽に Material Design のルールに則った UI を構築することができます。

ただし、使い手にとって Material Design であるということは重要ではなく、わかりやすく使いやすいデザインを求めていることに他なりません。

スキューモーフィックデザインやフラットデザインにもいえることですが、表面的にトレンドを追うのではなく Material Design が示したアフォーダンスの仕組みや特徴などを深く理解した上での意図的な活用が作り手に求められているのではないでしょうか。]]><![CDATA[<p class="article-author">この記事は <strong>デザイナー 星野</strong> が執筆しています。</p>]]></description>
            <link>http://digiper.com/trend/article/282.shtml</link>
            <guid>http://digiper.com/trend/article/282.shtml</guid>
            
            
            <pubDate>Thu, 05 Feb 2015 10:21:05 +0900</pubDate>
        </item>
        
        <item>
            <title>情報を「読む」から「見る」へ インフォグラフィックの全体像</title>
            <description>情報やデータの視覚化表現であるインフォグラフィック。近年日本においても利用例が増加しており、今後Webでも目にする機会が多くなると思います。

情報量の供給過多に伴い、発信者は単なる文字情報の羅列だけではなく、受け取り手に対して「情報をデザイン」する工夫や配慮が必要になったことがその背景にあります。読んでもらえず日々埋もれていく情報を可視化することで、魅力的で明確に伝わる伝達手法として注目を集めています。

###インフォグラフィックの特徴

意外にもその歴史は古く、先史時代の洞窟壁画が原点とされているインフォグラフィックですが、言語の代わりとなったり補うことのできるビジュアル表現なので、人種や国籍を問わず活用できるユニバーサルデザイン的な面も備えています。

そのため、私たちに身近な道路標識や鉄道の路線図なども広義にインフォグラフィックとして定義することができます。

また、心理的な訴求効果が大きいのも特徴であり、ストーリーをもたせた仕掛けにより人を引きつけ、興味関心の薄い対象をも取り込めることから今後も活用用途が広がっていくことを期待されています。

###構成要素別事例

####ダイアグラム

イラストを中心とした図解表現です。

構造解説や製品説明などによく使われています。その際の視点設定は非常に重要なので、形づくる段階で入念に最適な位置を模索する必要があります。

![Google Glassのインフォグラフィック](/trend/upload_docs/infographics_01.png)

- [Google Glassのインフォグラフィック](https://infogra.me/ja/infographics/10931)

####チャート

相互関係を視覚的に整理した表現です。

過程を表すフローチャートは時をつなぐ役割があります。また、相関図や組織図のように時系列は関係なく要素同士の関係を示すものもあります。

![スター・ウォーズ人物相関図](/trend/upload_docs/infographics_02.png)

- [スター・ウォーズ人物相関図](https://infogra.me/ja/infographics/10822)

####表

縦軸・横軸上に区分する表現です。

物事を規則的に分類したり、年表のような時間経過の視覚化にも適しています。

![各国で暮らすコストがわかるインフォグラフィック！](/trend/upload_docs/infographics_03.png)

- [各国で暮らすコストがわかるインフォグラフィック！](https://infogra.me/ja/infographics/10107)

####グラフ

変化や推移、割合を示す表現です。

棒グラフが最も利用頻度が高く、イラスト化することにより直感的な理解を助けるアプローチが可能となります。

![世界のビール消費量TOP20と代表的なビール](/trend/upload_docs/infographics_04.png)

- [世界のビール消費量TOP20と代表的なビール](https://infogra.me/ja/infographics/10020)

####地図

あるエリアにおける位置関係を整理した表現です。

案内図や路線図をはじめ数多くのケースがあります。できる限り文字を使わず、必要な情報の絞り込みで見やすくわかりやすいマップとなります。

![常時観測が必要な火山](/trend/upload_docs/infographics_05.png)

- [常時観測が必要な火山](https://infogra.me/ja/infographics/14937)

####ピクトグラム 

文字に頼らずに絵や記号で直感的に伝達する表現です。

イラストとは異なり固有のものを明示的に描くのではなく、汎用性を持っているのがピクトグラムの特徴です。

![Facebookのインフォグラフィック](/trend/upload_docs/infographics_06.png)

- [Facebookのインフォグラフィック](https://infogra.me/ja/infographics/10162)

###活用用途別事例

####ハウツー

料理の作り方や植物の育て方、職業紹介のロードマップまで様々な方法をわかりやすく述べたいときにインフォグラフィックは役立ちます。イラストを多用したチャート表現で手順を紐解く事例が多くみられます。

![美マナー花嫁レッスン 結納ってどうやるの？](/trend/upload_docs/infographics_07.png)

- [美マナー花嫁レッスン 結納ってどうやるの？](https://infogra.me/ja/infographics/11973)

####レポート

利用実態や調査結果、シェア率などをフレンドリーな数字の取り扱いで、簡潔で明確な情報発信を助けます。また、グラフのピクトグラムへの置き換えなどで無機質なデータを楽しくみせることができます。

![Flipboardのことがよくわかるインフォグラフィック！](/trend/upload_docs/infographics_08.png)

- [Flipboardのことがよくわかるインフォグラフィック！](https://infogra.me/ja/infographics/10142)

####タイムライン

歴史や軌跡、プロセスなどタイムライン上に付随情報を並べて流れや経緯を読み取りやすくなり、前後関係も容易に認識させることができます。

![Google Chromeの歴史](/trend/upload_docs/infographics_09.png)

- [Google Chromeの歴史](https://infogra.me/ja/infographics/10117)

####比較

情報を対に配置して、相対的に性質や量の価値を見出すことができます。歴史を切り口に年表を使ったタイムライン表現も多くみられました。

![日本とロサンゼルス　人気地ビール比較](/trend/upload_docs/infographics_10.png)

- [日本とロサンゼルス　人気地ビール比較](https://infogra.me/ja/infographics/14863)

####まとめ

ランキングや分類を示す資料は、マッピングなどの手法を使って可視化することによって、より一覧性の高く第一印象で人を引き付ける情報へと変貌します。

![【完全版】タブレットを導入したら押さえておきたいビジネスアプリ100選](/trend/upload_docs/infographics_11.png)

- [【完全版】タブレットを導入したら押さえておきたいビジネスアプリ100選](https://infogra.me/ja/infographics/11765)

###最後に

人が外から受け取る情報量の8割が視覚によるものとされています。

情報を「見る」ものとして、インフォグラフィックの特性を活かした表現により楽しさを与え、且つ心を揺さぶる印象に残る情報を届けることができます。

日本における事例はまだ少ないですが、英国BBCは [INTERACTIVES AND GRAPHICS](http://www.bbc.com/news/11628973) インフォグラフィック専門のカテゴリーを設けるなど、世界的な潮流としてメディアや組織の広報、PR活動などにも活用の場が広がっています。

また、最近ではブリティッシュ・カウンシルが公開した [3つのブリティッシュ・カウンシル～英国とあなたをつなぐ架け橋～](http://www.britishcouncil.jp/60th-anniversary/overview/) のようにスタティックな画像の枠を超えWebページ全体をキャンバスと捉えた試みも多く、インタラクティブなコンテンツとの相性が良いことも伺えます。魅力ある伝わる情報づくりはデザインの本質的な価値なのかもしれません。今後の動向が楽しみです。<![CDATA[<p class="article-author">この記事は <strong>デザイナー 星野</strong> が執筆しています。</p>]]></description>
            <link>http://digiper.com/trend/article/281.shtml</link>
            <guid>http://digiper.com/trend/article/281.shtml</guid>
            
            
            <pubDate>Tue, 27 Jan 2015 22:22:00 +0900</pubDate>
        </item>
        
        <item>
            <title>Webサイトパフォーマンスの重要性と改善のための調査方法</title>
            <description>[Yahoo!ニュース](http://staffblog.news.yahoo.co.jp/newshack/yahoo100pv_pc.html)で今年の6月に、月単位で初めてスマートフォンからのPV（ページ・ビュー）がPCからのPVを上回ったというニュースがありましたが、モバイルデバイスの普及に伴い最近ではPCより、モバイルデバイスでサイトを見る回数が増えてきています。

また、[ニールセンの調査結果](http://www.netratings.co.jp/news_release/2014/10/Newsrelease20141021.html)によると、2013年4月から2014年4月の1年間でスマートフォンからのインターネット利用者数が1,172万人（41%）増加したのに比べ、PCは522万人（−9%）減ってるというデータがあります。

このことから、従来通りのPCのみを考えたWebサイト制作ではなく、マルチデバイス対応がより一層必要となってきているのが分かります。

さて、マルチデバイス対応で問題となるのがパフォーマンスです。

モバイル端末はPCに比べて処理速度も遅く、回線も不安定ですが、ユーザーはPCと同じ様な速度で表示されることを期待していると言われます。しかし、それに反してWebサイトは、レスポンシブデザイン、JavaScriptを使ったWebアプリケーションなどの登場で、複雑化、リッチ化が進み、ファイルサイズも増え続けています。

その様な中では、サイトパフォーマンスの向上まで手が回らないといった状況があるのではないでしょうか。

### Webサイトパフォーマンスがもたらす影響

ではサイトパフォーマンスが落ちるとどのような影響があるのでしょうか。

サイト表示速度の影響としまして、以下の調査結果があります。

#### Google

サイト表示が0.5秒遅くなると、検索数が20%減少する

#### Amazon

サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する

#### Aberdeen Groupの調査結果

表示速度が1秒遅くなるとページビューが11%低下、コンバージョン率が7%低下、顧客満⾜度が16%低下する

また、Webユーザビリティの第一人者・ヤコブ・ニールセン博士は、[「Website Response Times」と題した記事（英語）](http://www.nngroup.com/articles/website-response-times/)で、反応速度について以下のように述べています。

- 0.1秒までのなら応答が瞬時に返ってきたという印象を与える
- 1秒までならユーザーの思考は途切れなく流れる。
- 10秒までならユーザーの注意力は続く。
- 10秒遅延してしまうと、ユーザーが即、サイトから離れてしまうことも多くなる

以上のことからサイトパフォーマンスが向上しなければ、コンバージョン率のアップ、ユーザビリティの実現は難しいことが分かります。そして、サイトパフォーマンスを上げることは、サイトの品質向上の1つだということが言えるのではないでしょうか。

### Webサイトパフォーマンスを改善するには

ここでは大きく2つのカテゴリに分けて紹介したいと思います。

#### ページロード

ユーザーがWebページを見ることができる状態になるまでの表示速度です。

表示速度を調べるツールの代表的なものを紹介します。

- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
- [Website Speed Test](http://tools.pingdom.com/fpt/)
- [Googleアナリティクス](https://support.google.com/analytics/answer/1205784)

これらのツールで指摘される多くはフロントエンド側での対応が可能です。

主に以下の項目の対応が必要と指摘されます。

- リソース（HTML、CSS、JavaScript）を圧縮する
- 画像を最適化する
- gzipによるファイル圧縮
- リンク先ページでリダイレクトを使用しない

指摘された箇所を対応すれば一般的なWebサイトのページロードでの目標は達成できるはずですが、問題になるものがあるとすれば画像です。いくらHTML、CSS、JavaScriptファイルを圧縮しても、重たい画像を何枚も読み込んでいては意味がありません。

そこで、画像にする必要性があるのかもう一度考えることも大切ではないでしょうか。

最近ではCSS3でグラデーションであったり、角丸などを表現することができます。また、アイコンなどの画像は、CSSスプライトにするか、SVG、Webフォントの選択肢もあります。

#### 実行時のパフォーマンス

ユーザーが何か操作をした際のリアクション速度のことです。

ボタンを押した際、スクロールした際にユーザーを待たせずに、応答することが必要となります。これにはブラウザのレンダリング処理やJavaScriptの実行速度などが関わってきます。

問題となる代表的なものとしては以下のものがあります。

- border-radius、box-shadowの組み合わで組まれたものがスクロースした際に、ブラウザの処理が追いつかず重くなる
- GPUを使った処理で関係ない部分まで巻き込んでしまう
- スマートフォンではclickイベントが300ms遅れる

このようなパフォーマンスを調べるにはブラウザの開発者ツールを利用するのが一般的です。

以上、2つのカテゴリを紹介しましたが、パフォーマンスを改善する際に、重要なことはやりすぎないことです。

パフォーマンスを低下させている箇所を知り、適切に修正する必要があります。それにはデータを測り続けることが大切です。そこで初めてパフォーマンス改善の施策を打つことができるのではないでしょうか。<![CDATA[<p class="article-author">この記事は <strong>マークアップエンジニア 村松</strong> が執筆しています。</p>]]></description>
            <link>http://digiper.com/trend/article/279.shtml</link>
            <guid>http://digiper.com/trend/article/279.shtml</guid>
            
            
            <pubDate>Wed, 17 Dec 2014 16:23:51 +0900</pubDate>
        </item>
        
        <item>
            <title>アイコンフォントのアクセシビリティと適切な利用方法</title>
            <description><![CDATA[モバイル端末をはじめとして高解像度ディスプレイを搭載した端末が普及したことにより、ウェブサイトでも高解像度でも劣化しないで表現が可能なベクター形式のデータが用いられることが増えてきました。

ベクターデータの中で最も用いられているのはフォントデータではないでしょうか。フォントデータは複雑な色の表現が難しいとはいえ、スタイルシートのみで大きさや色をコントロールしやすいということもあり、アイコンなどの形状をフォントとして登録したアイコンフォントも多く使われています。

独自のフォントデータを配信するウェブフォントも、古くからブラウザにて実装されていたことや <a href="http://fortawesome.github.io/" target="_blank">Font Awesome</a> など、使用しやすいライセンスで提供されているデータが増えていることも活用の後押しとなっています。

簡単なHTMLを挿入するだけで高品質のアイコンが使用できるので多くのウェブサイトでも使用されていますが、そのまま使用するだけではアクセシビリティを損なう可能性もあります。

### アイコンのアクセシビリティ

まずフォントや画像データで配信するに限らず、アイコンを使用するにあたって留意すべき点としてアイコンは視覚的な認知に限るという点です。

例えば下記の例で言えば、視覚的にはTwitterというウェブサービスだと認識でき、リンクが設定されている場合は、該当する人や組織のTwitterアカウントへのリンクだというところまで推測できそうです。（Twitterのロゴの認知度はこの場合置いておきます）

<p class="imgC"><img src="/trend/upload_docs/twitter_logo_blue.png" width="250" alt="Twitterのロゴ" /></p>

しかし視覚的な認知が出来ない場合（視覚障害者に限らず、検索エンジンなどの機械も含む）やアイコンが何らかの原因で表示できない場合には、意図する情報が伝わりません。そのような場合を考慮して、<code>alt</code>属性に代替テキストを設定したり、近接する位置にテキストを追加したりすることが望まれます。

<p class="imgC icon-add-txt"><a href="https://twitter.com/digiper" target="_blank"><img src="/trend/upload_docs/twitter_logo_64x64.png" width="32" alt="Twitterのロゴ" /> digiperをTwitterでフォローする</a></p>

### アイコンフォントの場合

画像でアイコンを提供する場合は、多くの場合<code>alt</code>属性を利用して、代替手段を提供することが多いかと思いますが、アイコンフォントを利用する場合は提供されるHTMLのサンプルでは十分に代替手段が提供されていないことが多くあります。

例えば、通常使うような文字にアイコン形状が割り当てられているケースでは、アイコンは &quot;t&quot; の一文字のみで表現されますので、Twitterであることの認知が出来ないどころか、ノイズにもなりかねません。

<pre><code>&lt;style&gt;
  .icon-font {
    font-family: &quot;アイコンフォント名&quot;; /* フォントはダミー */
  }
&lt;/style&gt;
&lt;span class=&quot;icon-font&quot;&gt;t&lt;/span&gt;</code></pre>

上記の問題をさけるために多くのライブラリは、CSSの擬似要素を使用したり、ユニコードの <a href="http://ja.wikipedia.org/wiki/Unicode%E6%96%87%E5%AD%97%E3%81%AE%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0#.E7.A7.81.E7.94.A8.E6.96.87.E5.AD.97" target="_blank">私用文字</a> を利用したりする方法が取られています。

<pre><code>&lt;style&gt;
  .fa-twitter:before {
    content: &quot;\f099&quot;; /* Font Awesome */
  }
&lt;/style&gt;
&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;</code></pre>

ただし、上記の例でもそれだけでは代替手段が用意されているわけでは無く、また最近のスクリーンリーダーや検索エンジンはCSSを理解し擬似要素で生成するテキストも理解しようと務めているためノイズが無くなる問題も解決しきれていません。

#### アイコンフォントで代替手段を用意する

フォントとして提供する以上は、通常使用する文字や私用文字に限らず何かしらのテキストデータを必要とします。その場合に考えられる解決策は主に下記の二つです。

- アイコンに割り当てれられている文字でも意図が伝わる
- アイコンに割り当てられている文字を認識させず、別途テキストを用意する

前者の「アイコンに割り当てられている文字でも意図が伝わる」ようにするには、リガチャ（合字）の機能を使用したアイコンフォントを使用します。例えば、<a href="https://symbolset.com/" target="_blank">Symbolset</a> というライブラリがあります。

リンク先のテキスト入力欄で"time"や"user"と入力すると意味がわかるかと思いますが、ある文字の組み合わせに対してアイコンの形状を割り当てているので下記のHTMLでアイコンが表示されます。

<pre><code>&lt;style&gt;
  .ss-icon {
    font-family: &quot;SSStandard&quot;;
  }
&lt;/style&gt;
&lt;span class=&quot;ss-icon&quot;&gt;time&lt;/span&gt;</code></pre>

ただし必ずしも利用したいアイコンがリガチャ機能を持っているとは限りません。その場合は、後者の「アイコンに割り当てられている文字を認識させず、別途テキストを用意する」方法を取ります。

その場合、WAI-ARIAの仕様にある<code>aria-hidden</code>や<code>aria-label</code>を使用します。

<code>aria-hidden</code>は、スクリーンリーダーなどの機械に対し認識しなくていいという情報を提供し、<code>aria-label</code>は、認識すべきテキストを提供します。

下記は、<code>aria-hidden</code>でアイコンフォントのテキストを隠し近接するテキストを追加した例です。

<pre><code>&lt;style&gt;
  .icon-font {
    font-family: &quot;アイコンフォント名&quot;;
  }
&lt;/style&gt;
&lt;span class=&quot;icon-font-twitter&quot; aria-hidden=&quot;true&quot;&gt;t&lt;/span&gt;
digiperをTwitterでフォロー</code></pre>

下記は、<code>aria-label</code>で認識させたいテキストを追加した例です。

<pre><code>&lt;style&gt;
  .fa-twitter:before {
    content: &quot;\f099&quot; /* Font Awesome */;
  }
&lt;/style&gt;
&lt;i class=&quot;fa fa-twitter&quot; aria-label=&quot;digiperをTwitterでフォロー&quot;&gt;&lt;/i&gt;</code></pre>

### まとめ

これまで注意点ばかりを述べてきましたが、画面解像度などで劣化せず、CSSなどでコントロールしやすいアイコンフォントはユーザにとっても制作者にとってもメリットは大きい技術です。使用する際には、そのアイコンが表示されないケースのことに気を払って使ってみてはいかがでしょうか。]]><![CDATA[<p class="article-author">この記事は <strong>マークアップエンジニア 桝田</strong> が執筆しています。</p>]]></description>
            <link>http://digiper.com/trend/article/278.shtml</link>
            <guid>http://digiper.com/trend/article/278.shtml</guid>
            
            
            <pubDate>Wed, 26 Nov 2014 15:03:08 +0900</pubDate>
        </item>
        
        <item>
            <title>ウェブアクセシビリティ推進団体が障害者差別解消法の方針について内閣府へ意見書提出</title>
            <description>国内のウェブアクセシビリティを推進する二つの団体（[ウェブアクセシビリティ推進委員会](http://www.jwac.or.jp/)、[ウェブアクセシビリティ基盤委員会](http://waic.jp/)）が、7月31日付けで障害者差別解消法の基本方針に対する意見書を内閣府へ提出しました。

障害者差別解消法とは国連の「障害者の権利に関する条約」の締結に向けた国内法制度の整備の一環として整備された法律であり、「障害者の権利に関する条約」の第九条「施設及びサービス等の利用の容易さ」では、障害者の方のインターネット利用についても触れられています。

日本より先に法整備が進んでいる多くの主要先進国が法律でウェブアクセシビリティへの対応を義務付けており、日本においても障害者差別解消法の基本方針がウェブアクセシビリティを推進するきっかけとなり得ることから、二つの団体は日本におけるウェブアクセシビリティ対応方針について意見を提出したと見られます。

両団体ともウェブ上で意見書を公開していますので、詳しくは下記のリンクから意見書をご覧ください。

- [障害者差別解消法の基本方針に関する意見書 ： ウェブアクセシビリティ基盤委員会（WAIC）](http://waic.jp/news/20140804.html)
- [内閣府障害者政策委員会事務局に対する意見提供について ： ウェブアクセシビリティ推進協会](http://www.jwac.or.jp/activity/collaboration.html)</description>
            <link>http://digiper.com/trend/article/275.shtml</link>
            <guid>http://digiper.com/trend/article/275.shtml</guid>
            
            
            <pubDate>Thu, 07 Aug 2014 20:07:43 +0900</pubDate>
        </item>
        
        <item>
            <title>旧バージョンの Movable Type 利用に関する注意喚起</title>
            <description><![CDATA[<a href="http://www.jpcert.or.jp/" target="_blank">JPCERT コーディネーションセンター</a> （JPCERT/CC） より、長い間バージョンアップされずに利用されている古いバージョンの Movable Type を対象にした攻撃による Web サイトの改ざん被害などについて注意喚起が出されています。

<blockquote>

JPCERT/CC では、古いバージョンの Movable Type を使用している Web サイトが改ざんされるインシデントの報告を多数受領しています。

受領した報告では、Movable Type の既知の脆弱性を使用した攻撃により、不正なファイルが Web サイトに設置されたり、Web サイトの既存のコンテンツ内に、攻撃サイトへと誘導する iframe や難読化された JavaScript が埋め込まれたりする事例を確認しています。

今回の古いバージョンの Movable Type を使用している Web サイトの改ざん事例の全てが、脆弱性に起因するものであるとは確認できていませんが、脆弱性を内在した状態で運用を行っている場合、攻撃者によって脆弱性を突かれ、Web 改ざんなどの被害を受ける可能性があります。未然防止の観点から、Movable Type だけでなく、OS やその他のソフトウエアも含め、最新の状態にアップデートすることをお勧めします。

</blockquote>

また、開発元のシックス・アパート社は Movable Type を安全に利用するためのアドバイザリを公開しています。

<ul>
<li><a href="http://www.movabletype.jp/blog/secure_movable_type.html" target="_blank">Movable Type を安全に利用するためにできること ： MovableType.jp</a></li>
</ul>]]><![CDATA[詳しくは下記のリンク先記事をご覧ください。

元記事： <a href="http://www.jpcert.or.jp/at/2014/at140024.html" target="_blank">旧バージョンの Movable Type の利用に関する注意喚起 ： JPCERT/CC</a>]]></description>
            <link>http://digiper.com/trend/article/273.shtml</link>
            <guid>http://digiper.com/trend/article/273.shtml</guid>
            
            
            <pubDate>Fri, 16 May 2014 13:07:11 +0900</pubDate>
        </item>
        
        <item>
            <title>IE の脆弱性に対するセキュリティ更新プログラムが提供開始</title>
            <description><![CDATA[当社加藤のブログ記事より。Internet Explorer （IE） の全バージョン、IE6 ～ IE11 における、リモートコードが実行される脆弱性に関して、Microsoft 社はセキュリティ更新プログラムを緊急のセキュリティパッチとして提供開始。2014年4月9日をもってサポートが終了した Windows XP も例外的にセキュリティ更新プログラム配布の対象にするとのこと。

<blockquote cite="http://hyper-text.org/archives/2014/05/ie_security_updates.shtml">

マイクロソフトは先日、Internet Explorer （IE） の全バージョン、IE6 ～ IE11 における、リモートコードが実行される脆弱性に関するセキュリティアドバイザリ（2963983） を発表しましたが、この脆弱性に対するセキュリティ更新プログラムを緊急のセキュリティパッチとして提供開始するとのこと。

今回は対応が早いですね。ちなみに先日サポートが終了した Windows XP 上の IE に対しても例外的にセキュリティ更新プログラムが提供されるそうです。

</blockquote>]]><![CDATA[続きは当社加藤のブログ記事をご覧ください。

元記事： <a href="http://hyper-text.org/archives/2014/05/ie_security_updates.shtml" target="_blank">IE の脆弱性に対するセキュリティ更新プログラムが提供開始、XP も対象に ： WWW WATCH</a>]]></description>
            <link>http://digiper.com/trend/article/272.shtml</link>
            <guid>http://digiper.com/trend/article/272.shtml</guid>
            
            
            <pubDate>Mon, 05 May 2014 13:01:10 +0900</pubDate>
        </item>
        
        <item>
            <title>OpenSSL の脆弱性に関する Q&amp;A の翻訳</title>
            <description><![CDATA[暗号化通信のための SSL プロトコル・TLS プロトコルのオープンソースな実装として広く利用されている OpenSSL に重大な欠陥が見つかった件で、セキュリティ企業の Codenomicon 社がこの脆弱性に関する詳細を解説するサイト <a href="http://heartbleed.com/" target="_blank">heartbleed.com</a> を公開しました。

当社加藤のブログ記事では、heartbleed.com に掲載された脆弱性に関する Q&amp;A の中から、特に重要な部分について翻訳し解説しています。

<blockquote cite="http://hyper-text.org/archives/2014/04/openssl_heartbleed_bug_qa.shtml">

どのバージョンの OpenSSL が影響を受けるの？

<ul>
<li>OpenSSL 1.0.1 ～ 1.0.1f には脆弱性があります。</li>
<li>OpenSSL 1.0.1g で問題は修正されました。</li>
<li>OpenSSL 1.0.0 にはこの脆弱性は影響しません。</li>
<li>OpenSSL 0.9.8 にはこの脆弱性は影響しません。</li>
</ul>

この脆弱性は 2011年 12月から存在し、2012年 3月 14日に OpenSSL 1.0.1 がリリースされて以来、初めて発見、公表されました。2014年 4月 7日にリリースされたOpenSSL 1.0.1g でこの脆弱性は修正されています。

</blockquote>]]><![CDATA[続きは当社加藤のブログ記事をご覧ください。

元記事： <a href="http://hyper-text.org/archives/2014/04/openssl_heartbleed_bug_qa.shtml" target="_blank">OpenSSL の脆弱性 （Heartbleed Bug） に関する Q&amp;A ： WWW WATCH</a>]]></description>
            <link>http://digiper.com/trend/article/271.shtml</link>
            <guid>http://digiper.com/trend/article/271.shtml</guid>
            
            
            <pubDate>Wed, 16 Apr 2014 12:05:50 +0900</pubDate>
        </item>
        
        <item>
            <title>スマートフォン保有者の半数がテレビ視聴中にスマートフォンを利用</title>
            <description><![CDATA[メディア視聴行動分析サービスを提供するニールセン株式会社が発表した、スマートフォン利用者の所謂「ながら利用」に関する実態データによると、複数デバイスを保有するユーザーの6割が同時利用を経験し、スマートフォン保有者の半数がテレビ視聴中にスマートフォンを利用。特に若年層でこの傾向が強いことがわかったとのことです。

<blockquote cite="http://www.netratings.co.jp/news_release/2013/11/Newsrelease20131112.html">

複数デバイスを保有するユーザーの61%がデバイスの同時利用を経験していました。男女間に差は見られないものの、年代別では若年層の同時利用率が顕著に高く10代、20代では約80%のユーザーが同時利用をしていました（図表1）。その際に利用されるスクリーンは、「テレビ」と「パソコン」の組み合わせが最も多く74%、次いで、「テレビ」と「スマートフォン」（46%）となりました。

</blockquote>]]><![CDATA[詳しくは下記のリンク先記事をご覧ください。

元記事： <a href="http://www.netratings.co.jp/news_release/2013/11/Newsrelease20131112.html" target="_blank">ニールセン、生活者のマルチスクリーン利用動向を分析~テレビ視聴中にスマートフォンで行われているのはゲームやチャット ： ニールセン株式会社</a>]]></description>
            <link>http://digiper.com/trend/article/262.shtml</link>
            <guid>http://digiper.com/trend/article/262.shtml</guid>
            
            
            <pubDate>Wed, 13 Nov 2013 23:11:45 +0900</pubDate>
        </item>
        
        <item>
            <title>Internet Explorer 7～10 に新たな未解決の脆弱性</title>
            <description><![CDATA[ITmedia エンタープライズの記事によると、Internet Explorer（IE）の 7～10 に未解決の新たな脆弱性が発見され、「水飲み場型攻撃（ユーザーが信頼して集まるサイトに不正なコードを仕込んで待ち受け、アクセスしてきたユーザーにマルウェアなどを感染させる攻撃）」に利用されている例が確認されたとのことです。

<blockquote cite="http://www.itmedia.co.jp/enterprise/articles/1311/12/news035.html">

セキュリティ企業のFireEyeは、これまで知られていなかったInternet Explorer（IE）の未解決の脆弱性を発見したと発表した。Webサイトに不正なコードを仕込んで閲覧したユーザーにマルウェアを感染させる「水飲み場型攻撃」に利用されているという。

IEを巡っては、Microsoftが11月5日付で未解決の脆弱性に関する情報を公表している。しかし、今回FireEyeが発見したのはこれとは別のもので、新たな脆弱性だという。

FireEyeが11月8日と10日のブログで伝えたところでは、新手の攻撃はIEの境界外メモリアクセスの脆弱性と、情報流出の脆弱性を悪用してコードを実行する仕掛けになっている。境界外メモリアクセスの脆弱性はIE 7～10に存在。情報流出の脆弱性はWindows XPとIE 8およびWindows 7とIE 9の組み合わせが影響を受ける。

</blockquote>]]><![CDATA[詳しくは下記のリンク先記事をご覧ください。

元記事： <a href="http://www.itmedia.co.jp/enterprise/articles/1311/12/news035.html" target="_blank">IEにまた新たな脆弱性、「水飲み場型攻撃」で悪用も ： ITmedia エンタープライズ</a>]]></description>
            <link>http://digiper.com/trend/article/261.shtml</link>
            <guid>http://digiper.com/trend/article/261.shtml</guid>
            
            
            <pubDate>Tue, 12 Nov 2013 21:03:01 +0900</pubDate>
        </item>
        
        <item>
            <title>Windows 7 向け IE11 が正式リリース</title>
            <description><![CDATA[当社加藤のブログ記事より。Microsoft 社からの正式なアナウンスにより Windows 7 向け、IE11 正式リリースの案内がされました。Windows 7 ユーザー向け自動更新も近日開始される予定とのこと。

<blockquote cite="http://hyper-text.org/archives/2013/11/windows7_ie11_release.shtml">

IE10 の際は、自動更新無効化ツールキット配布開始から自動更新開始までの期間が海外で 1.5ヶ月程度、日本向けだと 3ヶ月程度の猶予（1月末にツールキット配布 → 日本での自動更新開始が 5月初旬） があったのですが、今回は 1か月程度 （IE11 向け自動更新無効化ツールキット配布開始のアナウンスが 10月 12日だった） で全世界なので、以前よりもサイクルが早いですね。

</blockquote>]]><![CDATA[続きは当社加藤のブログ記事をご覧ください。

元記事： <a href="http://hyper-text.org/archives/2013/11/windows7_ie11_release.shtml" target="_blank">Windows 7 向け IE11 が正式リリース。自動更新も週内に開始予定 ： WWW WATCH</a>]]></description>
            <link>http://digiper.com/trend/article/260.shtml</link>
            <guid>http://digiper.com/trend/article/260.shtml</guid>
            
            
            <pubDate>Tue, 12 Nov 2013 17:51:23 +0900</pubDate>
        </item>
        
    </channel>
</rss>