週刊Webテク通信

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

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

ネットで見かけた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のコードを読みやすく変換するサービス

今週の気になるWebネタ

スマートフォンが机から浮いているように見えるスタンドMagic Phone Stand
■Magic Phone Stand by Martinka - Kickstarterhttps://www.kickstarter.com/projects/martinka/magic-phone-stand

「Magic Phone Stand」はスマホが宙に浮いているようにも見える充電スタンドです。ケーブルの方に仕掛けがあるんでしょうが,一見スマホ自体に浮き上がる力があるように感じられますね。

最初はただ単に人に見せて面白がる程度のものかと思ったのですが,考えてみるとスタンドとしてかなり便利そうです。自撮りでムービーを撮るときや,動画を見るときなど,いろんなシーンで活躍しそうです。

横置きにも対応する予定のようなので,スマートフォンを縦にも横にもセットするようにできれば,さらに便利に使えるんじゃないでしょうか。でもこれ,アイデアをパクってどこかがすぐに作っちゃいそうな気もしますが,実際作るのは難しいんでしょうか。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入