週刊Webテク通信

2017年3月第5週号 1位は,実験的なナビゲーションパターンいろいろ,気になるネタは,「Googleマップ」,駐車した場所を手動で保存可能に

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

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

1. Design Trend: Experimental Navigation Patterns | Design Shackhttps://designshack.net/articles/layouts/design-trend-experimental-navigation-patterns/

実験的なナビゲーションパターンを,実例とともに紹介した記事です。

  1. サイドナビゲーション
  2. 隠れた状態から飛び出すメニュー
  3. 水平スクロール
  4. ナビゲーション無し
  5. マーカーで遷移するシングルページ
  6. 端にある目立たないナビゲーション

ユーザーが素早く直感的に理解できるものであれば,実験的なナビゲーションでも楽しませることができるとのことでした。

特に小規模でコンテンツの少ないサイトの場合,ナビゲーションでユーザーの興味を引く効果も期待できます。

図1 実験的なナビゲーションパターンいろいろ

図1 実験的なナビゲーションパターンいろいろ

2. User Flows | 20 Inspiring Exampleshttp://www.webdesigndev.com/user-flows/

サイトのページ遷移を図にしたユーザーフロー/ワークフロー/サイトマップの事例を20個紹介しています。

ユーザーがWebサイトを操作中に発生するさまざまなシナリオを正常に作成する上で,こういったフロー図を作るのは重要とのことです。

どういうツールで作るかなどの解説はありませんが,表現の仕方などいろいろと参考になるはずです。

図2 ユーザーフロー図の事例20選

図2 ユーザーフロー図の事例20選

3. Button Hover Examples From CodePen - Freebie Supplyhttps://freebiesupply.com/blog/css-button-hover-effects/

ボタンのホバーエフェクトのコーディング例をまとめた記事です。

CSSアニメーションを使った,いろいろな効果のアイデアが揃っていました。

図3 ボタンのホバーエフェクトのコーディング例いろいろ

図3 ボタンのホバーエフェクトのコーディング例いろいろ

4. The Use of Shapes in Web Design with 30 Examples - Onextrapixelhttp://www.onextrapixel.com/web-design-30-examples/

最近のトレンドとしてたまに見かける,長方形以外の形を使ったWebデザインのギャラリーです。

装飾のために図形を配置しているケースもあれば,写真や文字などのコンテンツを斜めにパースを付けて表示しているサイトもありました。

図4 長方形以外の形を使ったWebデザインギャラリー

図4 長方形以外の形を使ったWebデザインギャラリー

5. The 10 Best Newsletters Web Designers & Developers Should Subscribe Tohttps://1stwebdesigner.com/best-newsletters-web-designers-developers/

Webデザイナー&開発者の役に立つニュースレター(メルマガ)を10個紹介しています。

WebサイトやTwitter,Facebookなどでも情報発信しているところが多いですが,中には今でもニュースレターだけしかやっていないところもありました。

図5 Webデザイナー&開発者の役に立つニュースレター

図5 Webデザイナー&開発者の役に立つニュースレター

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

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

Lisbon Azulejoshttp://www.lisbonazulejos.com/

パターン画像をSVG形式でダウンロードできるサービスです。矢印キーでパターンを切り替えたり拡大・縮小ができます。

ポルトガルの首都・リスボンのタイルが気に入った作者が,200種類あるというタイルから36のパターンをベクター化したとのことで,個性的な模様が揃っています。

実用性があるかどうかはちょっと疑問ではありますが,ポルトガル風のデザインが必要というケースがあれば役立つことでしょう。

図6 リスボンのタイルパターンをダウンロードできるサービス

図6 リスボンのタイルパターンをダウンロードできるサービス

今週の気になるWebネタ

「Googleマップ」,駐車した場所を手動で保存可能に - CNET Japanhttps://japan.cnet.com/article/35098493/

Android版のGoogle マップに,駐車した場所の位置とともにメモや写真を記録しておく「Parking Location」という機能が追加されたそうです。すでにGoogle Nowには駐車位置を自動で推測する機能があったそうですが,手動の方が便利なこともあるということですね。

この機能,駐車場だけでなく他の用途にも利用できそうだと思います。たとえば,荷物を預けたコインロッカーの位置の確認とか。この駐車場ロケーション情報を共有することでカーシェアリングに使えるかもしれません。

なお,Appleのマップにも駐車位置を自動記録する機能があるそうです。カーナビ/カーシステムとBluetoothでiPhoneを繋いでおけば,Bluetoothが切断された場所を駐車位置として認識するそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入