週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

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

1. Best Ways of Using Hero Images in Web Designhttp://designwebkit.com/inspiration/best-ways-using-hero-images-web-design/

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

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

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

イメージ
  • レスポンシブを考慮して,いろんな画面サイズで完璧に見えるようにする
  • 半透明の要素をかぶせると,そこに視点が集まる
  • にぎやかすぎる写真を使わない
テキスト
  • 太い書体を使う
  • 大きなサイズで細い書体を使うのが流行り
  • 色を使いすぎない
  • メニューや重要じゃない要素に大きな文字を使わない

図1 ヒーローイメージを使うときに気をつけること

図1 ヒーローイメージを使うときに気をつけること

2. Inspiration for Button Styles and Effects | Codropshttp://tympanus.net/codrops/2015/02/26/inspiration-button-styles-effects/

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

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

図2 CSSボタンのスタイル&エフェクトいろいろ

図2 CSSボタンのスタイル&エフェクトいろいろ

3. Best Practices for Accordion Interfaces in Web Design | Web Designhttp://webdesignledger.com/web-design-2/best-practices-accordions-in-web-design

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

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

図3 アコーディオンインターフェイスのまとめ

図3 アコーディオンインターフェイスのまとめ

4. Ultimate Guide to Designing Brand Guidelines - Vandelay Designhttp://www.vandelaydesign.com/brand-guidelines/

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

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

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

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

5. 35 Fresh Freebies for Web Designershttp://designposts.net/35-fresh-freebies-for-web-designers/

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

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

図5 Webデザインに役立つフリーの素材いろいろ

図5 Webデザインに役立つフリーの素材いろいろ

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

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

uinames.comhttp://uinames.com/

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

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

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

図6 ランダムに人名を生成するサービス

図6 ランダムに人名を生成するサービス

今週の気になるWebネタ

Google,「スマホ対応」をランキング要因に利用することを決定。4/21から導入。 | 海外SEO情報ブログhttps://www.suzukikenichi.com/blog/mobile-friendly-as-a-ranking-factor/

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

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

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

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入