週刊Webテク通信

2013年1月第3週号 1位は,Webサイト制作においてスライドショーを使う際のヒント,気になるネタは,「Wi-Fiが繋がらないスポット」をあえてPRするキットカットの意表をついた広告

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

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

1. Tips for Using Slide Shows and User Experience on the Web. - Design for User Experiencehttp://designs4ux.com/tips-on-slides-shows-on-the-web-and-user-experience/

Webサイト制作においてスライドショーを使う際のヒントをまとめています。

以下の項目に分けて解説してありました。

  • Webサイトにおけるビデオとスライドショーの違い
  • タイミングが重要
  • ナビゲーションバーとスライドショーとの一体化
  • ユーザー登録やログインへの誘導としてスライドショーを使う
  • スライドを自動で動かすべきか否か
  • 入れ子あるいは階層に分かれたスライドショー
  • スライドショーと双方向性
  • スライドショーにどの程度のスペースを割り当てるか

図1 スライドショーを使う際の各種ヒント

図1 スライドショーを使う際の各種ヒント

2. 20+ inspirational fixed website navigations | Admire The Web - The very best web design inspirationhttp://admiretheweb.com/articles/20-inspirational-fixed-navigations/

スクロールしても画面上に固定されて残るナビゲーションメニューの,いろいろな例を紹介しています。

視差スクロールを使って1ページ完結で見せていくサイトの普及とともに,この手の固定メニューが定番になってきたように感じます。

図2 固定ナビゲーションのギャラリー

図2 固定ナビゲーションのギャラリー

3. 41 Examples of Sketches and Drawings in Website Layouts | SpyreStudioshttp://spyrestudios.com/41-examples-of-sketches-and-drawings-in-website-layouts/

Webレイアウトの要素にイラストを使用したサイトのギャラリーです。

イラストをただの背景イメージとして使うのではなく,ナビゲーションバーやボタン,検索窓などのUI要素に用いているサイトを紹介しています。

図3 UI要素としてイラストを使用したサイトいろいろ

図3 UI要素としてイラストを使用したサイトいろいろ

4. 25 Examples of Brilliant Responsive Web Designhttp://www.webdesignfact.com/2013/01/brilliant-responsive-web-design.html

レスポンシブWebデザインのショーケースです。PC用とモバイル用のレイアウトが並んで紹介されているのでわかりやすいですね。

モバイル用の幅が狭い画面になったときに,ロゴがセンター揃えになるパターンが流行のようです。

図4 レスポンシブWebデザインのショーケース

図4 レスポンシブWebデザインのショーケース

5. The Ultimate Collection Of Adobe Illustrator Actionhttp://designrshub.com/2013/01/adobe-illustrator-action.html

Adobe Illustratorのアクションを大量に紹介しています。テンプレートやブラシなどのデザイナー向け素材を販売しているGraphicRiverというサイトからセレクトしたものです。1つ3~5ドルくらいで販売しているようです。

Illustrator関連として,立体的で質感のあるIllustratorチュートリアルまとめという記事も参考になりそうです。

図5 Adobe Illustratorのアクションいろいろ

図5 Adobe Illustratorのアクションいろいろ

そのほか,最近の記事の中から,デザインに利用できる素材を紹介している記事3つです。

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

appetite.io - share & discover apps on your iPhonehttp://appetite.io/

iPhoneのスクリーンショットから自動でアプリ一覧を作ってくれるWebサービスです。

ブラウザ上でスクリーンショット画像をアップロードすると,あなたのホーム画面をはめ込んだiPhoneの写真と,アプリ一覧がレイアウトされたページが生成されます。

画像内にあるアプリのアイコンを認識して,アプリ情報を取得しているわけですね。アプリ一覧が生成されるまでほとんど時間がかかりませんし,精度も高いようです。

ただし,アメリカのApp Storeから情報を引っ張っているので,日本でしかリリースされていないアプリは認識されないはずです。もちろん表示も英語です。このサービスを日本語版にして,リンクをアフィリエイトリンクにできるものが登場すれば,大流行するんじゃないかと思いました。

図6 自分のiPhoneのアプリ一覧を作るサービス

図6 自分のiPhoneのアプリ一覧を作るサービス

図7 実際にappetite.ioで作ったアプリ一覧の画面

図7 実際にappetite.ioで作ったアプリ一覧の画面

今週の気になるWebネタ

「Wi-Fiが繋がらないスポット」をあえてPRするキットカットの意表をついた広告 | ブログタイムズBLOG 【海外広告事例】http://blogtimes.jp/blog/2013/01/22289.html

キットカットが「Have a break!」のキャッチフレーズと絡めて,Wi-Fiの繋がらないスポットを用意するというキャンペーンをオランダで行ったようです。ネットの繋がらない場所で一休みしましょうということです。

原文の英語の記事を読んだところ,半径5メートル以内は通信がつながらないスポットと書いてあるので,電波を遮断するような仕組みを導入しているのでしょう。

原文で気になったのは,⁠people could escape e-mails, updates, tags or likes」というフレーズです。この「tags or likes」というのは,Facebookでの「タグ付け」「いいね!」を指しているはずです。それだけオランダでもFacebookが浸透しているということですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入