2015年3月第1週号 1位は、ヒーローイメージを使うときに気をつけること、気になるネタは、Google、「スマホ対応」をランキング要因に利用することを決定。4/21から導入

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2015年2月23日～3月1日の間に見つけた記事のベスト5です。

ヒーローイメージを使用する際のノウハウをまとめた記事です。

ヒーローイメージとは、Webサイトのトップページに使われる大きな写真や画像です。日本では、メインビジュアル、キービジュアルなどと呼ばれていますね。Bootstrapにも「Hero unit」と名付けられたコンポーネントがあるように、よく使われる表現のようです。

ヒーローイメージを使うときに気をつけることが、以下のようにまとめられていました。

イメージ

テキスト

CSSボタンのスタイル＆エフェクトの実例とコードの紹介です。

一見シンプルながらホバー時に面白い効果が加わるものばかりで、使ってみたくなるものがたくさん見つかると思います。

アコーディオンインターフェイスに関してまとめた記事です。開閉するメニューで、基本的に同時に一つの項目だけが開くようになっています。ほかの項目を開くと、今まで開いていた項目が閉じるという挙動をします。

このアコーディオンインターフェイスがどういう用途で使われるのかを解説するとともに、実装するためのコードを提供している実例の数々を紹介しています。

ブランドのガイドラインを作成するための手引きです。

スタイルガイドやブランドブックなどとも呼ばれるブランディングガイドを作る重要性と記述する内容について、実例を取り上げながら解説しています。

Webデザインに役立つフリーの素材が大量に紹介されています。

アイコン、フォント、テンプレート、モックアップ、UIパックなどが掲載されていました。

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

グノシーが「少年ジャンプ＋」と連携--業界初のコミック配信 - CNET Japan
グノシーに日替わりで「少年ジャンプ＋」と「週刊少年ジャンプ」の作品が配信されるそうです
6秒ループ動画「Vine」が日本に熱視線--過去3カ月でユーザー数3倍に - CNET Japan
やっぱり、Vne動画で有名な女子高生の大関れいかさんについて触れられていました
アップル、絵文字に人種と肌の色の違いを導入。iOS 8.3 / OS Xベータから - Engadget Japanese
「⁠Unicodeでは従来の絵文字はそのままに、肌の色を指定する識別文字を追加して二文字並べる方法が提案されていました」とは知りませんでした

先週の気になるWebサービス

UINamesは、ランダムに人名を生成するWebサービスです。ページにアクセスして、スペースバーを押す（タッチデバイスの場合はタップする）と、次々と名前が表示されます。

左上に並ぶアイコンメニューから地球のアイコンを選ぶと国を選択することができ、Japan、Chinaも含まれていました。日本人名は、一般的な苗字で若者風の名前が生成されますね。アイコンメニューから、男か女かを限定することもできます。

APIも用意されていて、右上の「≡」メニューから使い方を見ることができます。国名と件数とを指定してJSONで人名データを取得することができるので、ダミーの人名データをプロトタイプなどで利用する際に役立ちそうです。

Googleでのモバイル検索において、サイトが「モバイルフレンドリー」かどうかをランキング要素として使用し始めると発表されました。既に、モバイル検索では「スマホ対応」という表示のあるなしでモバイルフレンドリーかどうかを確認できましたが、これが検索順位にも影響を与えるということです。

Google ウェブマスター向け公式ブログで紹介されているように、「⁠モバイルフレンドリーテスト」のサイトでチェックするか、ウェブマスターツールの「モバイルユーザビリティレポート」で、モバイル対応について確認することができます。

4月21日までの猶予があるので、その間に対応したいという企業も多そうです。Webサイト制作者にとっては、モバイルフレンドリー特需があるかもしれませんね。