週刊Webテク通信

2016年6月第4週号1位は、レスポンシブWebデザインでのやるべき事、やってはいけない事、気になるネタは、MicrosoftがLinkedInを262億ドルで買収

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

1. Mastering Responsive Web Design: The Dos and Dont'shttps://speckyboy.com/2016/06/16/mastering-responsive-web-design/

レスポンシブWebデザインでのやるべき事、やってはいけない事をまとめた記事です。

  • ○ レスポンシブWebデザインを理解する
  • × コンテンツを(プラットフォームによって)捨てたり見えなくしたりしない
  • ⁠画面サイズに合わせて)適応した画像を提供する
  • × タッチ操作を無視してデザインする
  • ○ モバイルでできること全てに力を入れる
  • × ファイルサイズを膨らませる
  • ○ クリエイティブである
図1 レスポンシブWebデザインの「べし・べからず集」
図1 レスポンシブWebデザインの「べし・べからず集」

2. Mobile UX Design: What Not To Do — UX Planethttps://uxplanet.org/mobile-ux-design-what-not-to-do-65f65b13a0b9#.xg2py4mfi

モバイル向けUXデザインで「やってはいけないこと」をまとめた記事です。

  • ほかのプラットフォーム(OS)のUIエレメントを真似てはいけない
  • プラットフォーム固有のアイコンをそのまま使ってはいけない
  • WebでのUIをそのままアプリに使ってはいけない
  • アプリに行き止まりがあってはいけない
  • ブラウザに移動させてはいけない
  • ダウンロードしてすぐのユーザーに評価を求めてはいけない
図2 モバイル向けUXデザインの「べからず集」
図2 モバイル向けUXデザインの「べからず集」

3. New Design Trends That Are Here To Stay | JUST™ Creativehttp://justcreative.com/2016/06/15/new-design-trends-that-are-here-to-stay/

Webデザインのトレンドから、現在定着したものをまとめています。

  1. 常にモバイルファースト
  2. AIのためのデザイン
  3. フラットデザインとミニマリズム
  4. はっきりしたタイポグラフィ
  5. 手描きのイラスト
  6. ロングスクロール(なぜファーストビュー信仰が終わったか)

2は、機械が理解できるセマンティックな設計といった意味です。

図3 定着したWebデザインのトレンド
図3 定着したWebデザインのトレンド

4. Unusual Navigation Websites Design - 30 Web Examples | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2016/06/unusual-navigation-in-webdesign/

変わったナビゲーションのサイトのギャラリーです。操作法が一見よく分からないサイトも多いですが、それを見つけるのも楽しいと思えるサイトならOKですね。

画面の四隅(四隅全部か四隅のどこか数カ所)にナビゲーションが配置されているケースが多く、四隅をうまく使うのがポイントだと感じました。

図4 変わったナビゲーションのサイトのギャラリー
図4 変わったナビゲーションのサイトのギャラリー

5. 13 Must-Have UX Tools for Designers - Mockplushttp://www.mockplus.com/blog/post/13-musthave-ux-tools-for-designers

デザイナーのためのUXツールを、オンラインツールとデスクトップアプリとの両方で多数紹介しています。

ドローツールやモックアップ/プロトタイプの作成ツール、ユーザーテストツールなどが掲載されていました。

図5 デザイナーのためのUXツールいろいろ
図5 デザイナーのためのUXツールいろいろ

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

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

Automated Workflow & Task Automation | Microsoft Flowhttps://flow.microsoft.com/ja-jp/

Microsoft Flowは、マイクロソフトが提供するIFTTTのような自動化ツールです。最近iOSアプリが公開されたことで話題となりましたが、Webアプリとしてブラウザからも使えます。

Office 365、OneDriveはもちろん、Twitter、Dropbox、Google Drive、Slackなど36種類のサービスと連携できます。Outlookのメールの添付書類を自動でOneDriveに保存する、特定のハッシュタグのツイートをSlackに投稿するなどの連携を設定できます。

操作はだいたいIFTTTと似たような感じですし、IFTTTと同様に既に用意されているテンプレート(IFTTTでのレシピ)を利用できます。この手のサービスは1つに絞らなくてもいいので、選択肢が増えることはうれしいですね。

図6 マイクロソフトが提供する自動化ツール
図6 マイクロソフトが提供する自動化ツール

おすすめ記事

記事・ニュース一覧