週刊Webテク通信

2018年4月第1週号 1位は，ユーザーの時間を奪わないためのウェブデザインのヒント，気になるネタは，「Alexa，子供服はどこで取り扱っている？」 池袋PARCOで「Amazon Echo」が館内案内

Webテク, Webデザイン, Web広告, レスポンシブウェブデザイン, アプリ, モバイル, Amazon Echo

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

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

1. 7 Tips for Creating a Time-Saving Design for Users | Design Shackhttps://designshack.net/articles/layouts/7-tips-for-creating-a-time-saving-design-for-users/

ユーザーの時間を奪わないためのウェブデザインのヒントをまとめた記事です。

  1. ミニマルで考える
  2. ビジュアルコンテンツで行動を促す
  3. 複雑な要素を分割する
  4. フォームを簡潔にする
  5. コールトゥアクションを目立たせる
  6. しっかり編集する
  7. 一貫性を保つ

図1　ユーザーの時間を奪わないためのウェブデザインのヒント

図1　ユーザーの時間を奪わないためのウェブデザインのヒント

2. 10 Pure CSS Responsive Navigation Code Snippetshttps://speckyboy.com/pure-css-responsive-navigation/

レスポンシブなナビゲーションのコーディング例をまとめています。

ハンバーガーメニューの開き方のパターン集といった感じのラインナップですが，垂直メニューが水平メニューに変わるものもありました。

図2　レスポンシブなナビゲーションのコーディング例いろいろ

図2　レスポンシブなナビゲーションのコーディング例いろいろ

3. Design Tips For Extra Large Website Footers - Onextrapixelhttps://onextrapixel.com/extra-large-footers/

大きなフッタをデザインするためのヒントと実例を紹介しています。

  • リンク階層を整理する
  • コンタクトフォームに誘導する
  • ロゴやキャラクターなどブランディング要素を加える
  • 関連コンテンツを勧める
  • メールアドレスを集める

図3　大きなフッタをデザインするためのヒントと実例

図3　大きなフッタをデザインするためのヒントと実例

4. 12 Fixed Sticky Navbars That'll Grab Your Attention | Webdesigner Depothttps://www.webdesignerdepot.com/2018/03/12-fixed-sticky-navbars-thatll-grab-your-attention/

固定ナビゲーションメニューをうまく使った実例を12サイトまとめて解説した記事です。

画面上のスペースを使ってしまうことから賛否ある固定メニューですが，ユーザーはページのどこにいてもナビゲーションのリンクにアクセスできるという良さがあります。

図4　固定ナビゲーションをうまく使った実例いろいろ

図4　固定ナビゲーションをうまく使った実例いろいろ

5. Mobbin - Latest Mobile Design Patternshttps://mobbin.design/

モバイルアプリのデザインパターンのギャラリーサイトです。それぞれのアプリごとにたくさんのスクリーンショットが載っています。

SNS認証でログインすると，アプリ／パターンのカテゴリ別に絞り込む機能が使えるようになります。

図5　モバイルアプリのデザインギャラリー

図5　モバイルアプリのデザインギャラリー

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

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

STUDIO | デザイン，公開，運用がひとつになった，Webデザインプラットフォームhttps://studio.design/ja

STUDIOはウェブサイトを簡単に作れる日本製のサービスです。WixやJimdoなどと競合するサービスですが，デザイナーをターゲットとしたプロ向きのツールという方向性のようです。

デザインはWYSIWYGエディタで行えますが，HTMLコードやマージン・パディングなどの数値を意識した編集ができるようになっており，ある程度ウェブデザインを分かっている人が使うことを想定していることがうかがえます。

作ったページを公開前にメンバーに確認してもらう機能が用意されているのも特徴です。デザインするまでは完全無料で，公開することでお金が発生する（月9ドルからと安価）という仕組みも面白いと思います。月27ドルからの一番上のプランにだけあるCMS機能も気になるところです。

図6　国産のWebデザインプラットフォーム「STUDIO」

図6　国産のWebデザインプラットフォーム「STUDIO」

今週の気になるWebネタ

「Alexa，子供服はどこで取り扱っている？」 池袋PARCOで「Amazon Echo」が館内案内 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1803/30/news116.html

池袋PARCOでAmazon Echoを使っての音声対話による案内が始まりました。行きたいお店を聞く（チックタックに行きたい）⁠／買いたい商品を聞く（子供服はどこ？）⁠／館内施設を聞く（ATMはどこ？トイレはどこ？）といったことができるそうです。

このパルコ用のスキルはAmazonのAlexaスキルストアにもあるので，自宅で試すこともできます。店舗案内用のスキルとしては，ほかにも東急ハンズのスキルもありました。店舗用にスキルを用意するのが今後流行るんでしょうか。

スキルストアを見てみると，まだ数が少ないようで個人開発レベルのものを見かけることも多く，初期のApp Storeのような玉石混交な感じが面白いです。スキルは基本全て無料ですが，高パフォーマンス・高エンゲージメントのものには作者に報酬が支払われるようで，一攫千金を狙う人は今がチャンスかもしれません。

Webテク, Webデザイン, Web広告, レスポンシブウェブデザイン, アプリ, モバイル, Amazon Echo

著者プロフィール

芦之由（あしのよし）

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

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

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