週刊Webテク通信

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

ネットで見かけた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 リスボンのタイルパターンをダウンロードできるサービス

おすすめ記事

記事・ニュース一覧