週刊Webテク通信

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

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

ネットで見かけた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のデザインカテゴリの画面

今週の気になるWebネタ

Apple,無料アプリの表示を「入手」に 「アプリ内課金あり」も明示 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1411/20/news050.html

App storeなどAppleのアプリ販売のボタンの表記で,従来無料のアプリは「無料」というラベルだったのが「入手」に変わりました。ニュースなどでこのことを知る前に,iPhoneで「入手」ボタンを見たときの違和感はなかなか大きかったです。

IT用語やネット用語として,⁠入手」という言葉はあまり使わないので違和感があるのでしょうね。じゃあ,なじみの用語で言い換えると何かというと,⁠ダウンロード」⁠インストール」あたりでしょうか。これだと文字数が多すぎてスペース的に厳しそうです。漢字二文字だと,⁠追加」⁠⁠登録」が候補かなと思いますが,どちらも決め手に欠ける感じです。

まあ,どんな言葉でも慣れれば同じようにも思えますが,文字をなくしてアイコン的なものでもいいじゃないかとも考えられます。過去に入手したことのあるアプリを再度ダウンロードする場合は,雲の形と下矢印のアイコンが表示されるだけですからね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入