週刊Webテク通信

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

ネットで見かけた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 ランダムに人名を生成するサービス

おすすめ記事

記事・ニュース一覧