週刊Webテク通信

2014年6月第2週号1位は、モバイルアプリのUIデザインパターンを実例を元に解説、気になるネタは、スマートフォンが机から浮いているように見えるスタンドMagic Phone Stand

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

1. Fresh UI Design Patterns Gaining Tractionhttp://www.onextrapixel.com/2014/06/05/fresh-ui-design-patterns-gaining-traction/

モバイルアプリのUIデザインパターンについて、実例を元に解説しています。

以下にいくつかをピックアップして紹介します。

  • Snapchatはヘッダをタップすることで隠れている情報(受信数と未読数)を表示できる
  • LinkedInはロゴを押すとメインメニューが現れる(通常の三本線のメニューアイコンの代わりに)
  • Pinterestはカード型のUIを普及させた
  • PinterestとSpotifyは「+」ボタンが「×」ボタンに変わることで、ピンやフォローをキャンセルできることが分かりやすい
  • Mailboxはメールクライアントでの左右のスワイプアクションを普及させた
  • InstagramはダブルタップでLikeをするといった、通常より素早くできるアクションが用意されている
  • SnapchatとFacebook Messengerは、スワイプすることでその場面で必要な機能にアクセスできる
  • SongkickとFlipboardは、何かをフォローするUIの良い見本
  • Mediumはシェアボタンをたくさん並べず一つのボタンに統合した
  • YouTubeは何段階かのレーティングではなく好きかキライかの二択の評価としている

UXPinというUI/UXデザインのためのWebアプリケーションの関係者が書いた記事で、UXPinの宣伝にもなっています。紹介しているUIデザインパターンの一部を、UXPinでワイヤーフレーム化したものを見ることができます。

図1 モバイルアプリのUIデザインパターンを実例を元に解説
図1 モバイルアプリのUIデザインパターンを実例を元に解説

2. 20 Web Design Learning Resources You Should Know ? 1stwebdesignerhttp://www.1stwebdesigner.com/design/web-design-learning-resources/

Webデザインや開発について学べるサイトをまとめた記事です。

1つ目に紹介されているUdemyは、Webデザインに限らずいろいろなノウハウを動画で学べるオンライン教育プラットフォームで、講師として講義を提供して報酬を得ることもできます。

2つ目のLynda.comは「Webデザイン」という言葉が使われ始めたころからノウハウを提供している老舗サイトですね。

図2 Webデザインについて学べるサイトまとめ
図2 Webデザインについて学べるサイトまとめ

3. Inspiration for Inline Anchor Styles | Codropshttp://tympanus.net/codrops/2014/06/04/inspiration-for-inline-anchor-styles/

テキストリンクのホバー時の効果のバリエーションが多数紹介されています。

これらはあくまでもインスピレーションのための作例で、ブラウザによってはうまく表示されないものもあるとのことです。最後の二つの効果はSVGを利用しています。

図3 テキストリンクのホバー時の効果の作例いろいろ
図3 テキストリンクのホバー時の効果の作例いろいろ

4. 12 Best Free Websites for Taking Screenshots | Resourceshttp://www.designerledger.com/12-best-free-websites-taking-screenshots/

Webページのスクリーンショットを撮れるサービスをまとめています。撮った画像に矢印や文字などを追加できるものもあります。

ちなみに、最近はスクロール時の効果などギミックのあるサイトが多く、スクリーンショットを撮るのに苦労することがよくあります。

図4 Webページのスクリーンショットを撮れるサービスのまとめ
図4 Webページのスクリーンショットを撮れるサービスのまとめ

5. 20 Stunning Websites of Design Agencieshttp://despreneur.com/20-stunning-websites-of-design-agencies/

デザインエージェンシーのWebサイトのデザインギャラリーです。

クライアントの興味を引き、スキルを見せつけるための、デザイン性の高いサイトが多数紹介されています。

図5 デザインエージェンシーのWebサイトのギャラリー
図5 デザインエージェンシーのWebサイトのギャラリー

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

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

JS NICE: Statistical renaming, Type inference and Deobfuscationhttp://www.jsnice.org/

JS NICEは、難読化や軽量化されたJavaScriptのコードを、読みやすく変換するサービスです。

ただ見やすく整形するだけでなく、より適切な変数の識別子を提案したり、自動で注釈を付けたりと、なかなかの優れものです。

歯車マークの設定メニューから「Interactive renames」を選ぶと、変数部分に三角形のマークが現れて、識別子を好きなように変更できます。もちろん、JavaScript内の同じ識別子の部分は自動で変更されるのでミスを防げますね。

人の作ったコードを読みやすく変換するだけでなく、自分でJavaScriptをコーディングする際にも役立つサービスのようです。

図6 JavaScriptのコードを読みやすく変換するサービス
図6 JavaScriptのコードを読みやすく変換するサービス

おすすめ記事

記事・ニュース一覧