週刊Webテク通信

2014年11月第4週号1位は、バーガーアイコンの問題点と使用する際の注意点、気になるネタは、Apple、無料アプリの表示を「入手」

ネットで見かけた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純正のアプリでも使われています。

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

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

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

図1 ハンバーガーアイコンに関する問題点と使用する際の注意点
図1 ハンバーガーアイコンに関する問題点と使用する際の注意点

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. 便利な情報を提供する
図2 Webサイトの信頼性を高めるテクニック8種
図2 Webサイトの信頼性を高めるテクニック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デザインに使用する方法と理由を解説しています。

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

図3 大きな文字をWebデザインに使用する方法と理由
図3 大きな文字をWebデザインに使用する方法と理由

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

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

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

図4 Webデザインに役立つPhotoshopエクステンションいろいろ
図4 Webデザインに役立つPhotoshopエクステンションいろいろ

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

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

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

図5 コーポレートサイトやビジネスサイトのギャラリー
図5 コーポレートサイトやビジネスサイトのギャラリー

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

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

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

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

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

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

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

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

図6 Skillshareのデザインカテゴリの画面
図6 Skillshareのデザインカテゴリの画面

おすすめ記事

記事・ニュース一覧