週刊Webテク通信

2018年8月第3週号 1位は，スライドアウトメニューのオリジナルの手法を10個紹介，気になるネタは，「Alexa」が進化，「後で分かったらお知らせします」が可能に

Webテク, Webデザイン, Web広告, UI, YouTube, アニメーション, Flexbox, CSS, Alexa

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

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

1. 10 Original Ways to Slide Out a Menu in Web Design - Designmodohttps://designmodo.com/slide-out-menu/

スライドアウトメニューのオリジナルの手法を10個紹介しています。

実際にスライドするかどうかはともかく，通常隠れているメニューがボタンによって現れるタイプのもので，いわゆるハンバーガーメニューのことですね。

モバイルの小さい画面用に使われ始めたものが，PCの大画面でも使われるようになった珍しいケースだと解説してありました。

  1. 静的だけど楽しい
  2. 静的だけどおしゃれ
  3. 静的だけど大きい
  4. 魅力的なエフェクトを追加する
  5. 空間全体を占める
  6. 付随する情報が表示される
  7. ビジュアルコンテンツで遊ぶ
  8. アニメーションする背景を使う
  9. スライドアウトパネルを2番目のヒーローエリアにする
  10. 体験の不可欠な要素としてのスライドアウトメニュー

図1　スライドアウトメニューのオリジナルの手法を10個紹介

図1　スライドアウトメニューのオリジナルの手法を10個紹介

2. How to Design a User-Friendly SaaS Pricing Page with Exampleshttps://www.getcloudapp.com/blog/saas-pricing-page-design

ユーザーフレンドリーな価格表のデザインの仕方を，実例を使って解説した記事です。

Spotify，Google Drive，Dropbox，Adobeなどの価格表をもとに，特徴的な部分や工夫している点などを紹介しています。

図2　ユーザーフレンドリーな価格表デザインの方法

図2　ユーザーフレンドリーな価格表デザインの方法

3. 20 Must-Have Wireframe Templates and UI Kits for Your Design Libraryhttps://webdesign.tutsplus.com/tutorials/20-must-have-wireframe-templates-and-ui-kits-for-your-design-library--cms-31568

ワイヤーフレームのテンプレートとUIキットをまとめています。

ワイヤーフレームのテンプレートとUIキットとは違うものですが，コンテンツとしてはたびたび重なる部分があるので1つの記事にまとめたとのことです。

図3　ワイヤーフレームのテンプレート＆UIキットをまとめ

図3　ワイヤーフレームのテンプレート＆UIキットをまとめ

4. 12 YouTube Channels for Design and Development | Practical Ecommercehttps://www.practicalecommerce.com/12-youtube-channels-design-development

ウェブデザインと開発に役立つYouTubeチャンネルのリストです。

コーディング，デザインツール，ロゴとフォントデザイン，ケーススタディ，キャリアアドバイスに関するビデオチュートリアルが無料で見られます。

図4　ウェブデザインと開発に役立つYouTubeチャンネルのリスト

図4　ウェブデザインと開発に役立つYouTubeチャンネルのリスト

5. 100 days of Motion Design – UX Collectivehttps://uxdesign.cc/100-days-of-motion-design-463526af852f

100日間で50種類のベクターベースのアニメーションを作成したデザイナー＆アーティストの人によるレポートです。

ツールとしては最初の2週間はSketch ＋ Principleを使い，そのあとはIllustrator + After Effectsを使ったそうです。

この方はこれまで，落書き，レタリング，水彩画，ベクターイラストの100日間チャレンジをしてきているとのこと。刺激を受ける内容でした。

図5　モーションデザインの100日間チャレンジのレポート

図5　モーションデザインの100日間チャレンジのレポート

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

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

Learn Flexboxhttps://www.learnflexbox.org/

Learn Flexboxは，FlexboxのCSSをプレビューしながら生成できるサービスです。Flexboxのビルダー的なサービスはいろいろありますが，子要素も細かく設定できるのが特徴です。

子要素のgrow，shrink，basisは個別に設定でき，自動的にショートハンドの記述に反映されます。マージンなども指定できます。子要素の細かい設定ができるのですが，同じ設定の子要素を複数作る機能がないのがちょっと不便です。

親要素の設定は各プロパティをラジオボタンで選んでいきます。プロパティ名の横の三角形をクリックすると説明文が表示されます。CSSのコードはボタンを押すと表示され，表示しっぱなしにすればリアルタイムでコードを確認することも可能です。

図6　子要素も細かく設定できるFlexboxのCSSビルダー

図6　子要素も細かく設定できるFlexboxのCSSビルダー

今週の気になるWebネタ

「Alexa」が進化，「後で分かったらお知らせします」が可能に - CNET Japanhttps://japan.cnet.com/article/35123652/

Alexaに，分からなかった質問に対して，あとで分かったら教えてくれる「Answer Update」機能が追加されるそうです。まずは英語圏からの提供です。

答えがわかったら突然話しかけてくるわけではなく，Alexa端末に通知が届き，通知の内容を確認したら教えてくれるんですね。たまにはスマートスピーカーから話しかけてくれても面白いと思いますが…。

新製品の価格が決まったら教えてもらうような，未確定の情報を決まり次第教えてくれる目的がメインのようです。即答できない問題に対し，じっくりネットで調べて分かったら教えてくれるのかと想像したんですが，そういうわけじゃないんですね。

Webテク, Webデザイン, Web広告, UI, YouTube, アニメーション, Flexbox, CSS, Alexa

著者プロフィール

芦之由（あしのよし）

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

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

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