ネットで見かけた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. 体験の不可欠な要素としてのスライドアウトメニュー

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などの価格表をもとに，特徴的な部分や工夫している点などを紹介しています。

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つの記事にまとめたとのことです。

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

ウェブデザインと開発に役立つ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日間チャレンジをしてきているとのこと。刺激を受ける内容でした。

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

• 「Googleマップ⁠」⁠，現在地共有機能に相手のバッテリ残量表示 - CNET Japan
  バッテリーが切れて現在地の位置情報が更新されなくなる可能性を，事前に推測できるということですね
• LINE，「⁠Clovaスキルストア」オープン 60以上のスキルが利用可能に - ITmedia NEWS
  27社60以上のスキルが利用でき，今後も拡大する予定とのことです
• Facebook MessengerのビデオチャットでARゲームが遊べるように - CNET Japan
  ビデオチャット中に6人まで同時にARゲームが遊べるようになりました

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

Learn Flexboxhttps://www.learnflexbox.org/

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

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

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