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

1. Much Ado About Hamburger Icons -Telerik Developer Networkhttp://developer.telerik.com/featured/much-ado-hamburger-icons/

ハンバーガーアイコンの問題点と使用する際に気をつけることをまとめた記事です。ハンバーガーアイコンをタップするとメニューが開閉するUIについては、これまでも問題点が指摘されていました。

特にこの記事では、画面全体が水平方向にスライドしてメニューが出現するオフキャンバス（Off-Canvas）について考察しています。

オフキャンバスの代わりとして、タブストリップ（TabStrip）とポップオーバーするツールバーとが推奨されていました。タブストリップとは、インスタグラムでフィルターを選ぶときに使われている水平方向にスクロールしていくメニューで、Apple純正のアプリでも使われています。

確かに、タブストリップだと、オフキャンバスの欠点として挙げられていた以下の点をクリアしていますね。

• 開いてみないとメニューの内容が分からない
• 現在行っている作業と脈略のない別の内容へと誘導することになる
• メニュー項目を選ぶまでに踏む段階が多い
• ハンバーガーアイコンと「閉じるボタン」とが同じ左上に表示されると混乱しやすい

もちろん、ハンバーガーアイコンによるオフキャンバスを完全に否定しているわけではなく、上記の問題を考慮しつつ使用するヒントも紹介されていました。

2. 8 proven techniques that build trust in your website | Webdesigner Depothttp://www.webdesignerdepot.com/2014/11/8-proven-techniques-that-build-trust-in-your-website/

Webサイトの信頼性を高めるテクニックを解説しています。

1. バッジやエンブレムを作って表示する
2. クライアントのロゴを表示する
3. 決済サービスのロゴを表示する
4. 強力なAboutページを用意する
5. 顔写真を表示する
6. ソーシャルメディアでのフォロワー数を表示する
7. お客様の声を表示する
8. 便利な情報を提供する

3. The Hows and Whys of Using Large Type in Web Design & Exampleshttp://www.onextrapixel.com/2014/11/19/the-hows-and-whys-of-using-large-type-in-web-design-examples/

大きな文字をWebデザインに使用する方法と理由を解説しています。

どのように大きな文字を使うかのサンプルとして、サイトの実例も多数紹介されていました。

4. 25 Free Adobe Photoshop Extensions for Designers l BytesWireBytesWirehttp://www.byteswire.com/25-free-adobe-photoshop-extensions-for-designers/

デザイナー向けのフリーのPhotoshopエクステンションをまとめた記事です。

スライスに関する作業効率化など、Webデザインに役立つものも多数掲載されています。

5. 75+ Awesome Examples of Business Website Designhttp://www.inspireyourway.com/corporate-business-website-design/

最近賞を獲ったコーポレートサイトやビジネスサイトのデザインギャラリーです。

一部、アフィリエイトとしてWordPressのテーマファイルが混じっていますが、基本的には実存するサイトが紹介されています。

そのほか、最近の記事の中から、役立つ素材や資料を3つ紹介します。

• mydevice.io common smartphones and tablets devices values
  スマートフォン、ファブレット、タブレットの様々なデバイスの物理的ピクセル数とCSSピクセル数などの表です
• 25 Free & Beautiful Photography Mockup Templates For Designers | Freebies
  モバイルデバイスなどの、はめ込み合成写真が作れるモックアップ素材を多数紹介しています
• Double Tap, Check, Swipe: 25 Free Gesture Icons Packs for Your Mobile App - noupe
  指によるジェスチャー操作を示すアイコン素材を多数紹介しています

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

Skillshare - School LandingPageshttp://www.skillshare.com/

Skillshareは、オンラインでいろいろなスキルを学べるサービスです。新しいWebサービスではありませんが、デザインに関する講義の動画がなかなか充実していたので紹介します。

• Skillshareのデザインカテゴリ

Adobe Illustrator／Photoshopなどのアプリケーション名や、Web Design／Web Developmentといったサブカテゴリから講義を探すこともできます。

講座の告知や募集をしたい人と学びたい人とのマッチングをする、ストリートアカデミーのようなサイトとして始まり、現在では動画での講座のプラットホームとなっているようです。

フリーミアムのモデルとなっており、無料会員には制限がありますが、無料でもそれなりに利用できそうです。

講師として活躍すれば報酬を受け取れるようですので、教える側として利用することにも興味がありますね。