週刊Webテク通信

2018年7月第3週号 1位は,デザインシステムはなぜ重要で何を含めるべきか,気になるネタは,Facebook,AR(拡張現実)広告のテストを開始 口紅やサングラスを試せる

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

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

1. What is a Design System, Why It is Important and What to Include - Designmodohttps://designmodo.com/design-system/

デザインシステムとは何か,なぜ重要で何を含めるべきか,について解説した記事です。

以下のそれぞれの項目について,実例となるデザインガイドラインなどのリンクとキャプチャ画像を掲載しています。

  • グリッド
  • 間隔
  • エラーと検証
  • コード化されたコンポーネント
  • 命名規則
  • アイコン
  • タイポグラフィ
  • アクセシビリティ
  • 口調と声
  • ロゴと色
  • 揃え
  • 共通のUI要素
  • ジェスチャー
  • 動き

図1 デザインシステムはなぜ重要で何を含めるべきか

図1 デザインシステムはなぜ重要で何を含めるべきか

2. A UX/UI Case Study: Designing a Text-To-Speech App From The Ground Uphttps://blog.prototypr.io/a-ux-ui-case-study-designing-a-text-to-speech-app-from-the-ground-up-1fc95bd04a2b

UX/UIデザインのケーススタディとして,1つのアプリを制作する流れを紹介しています。

ユーザー調査や競合の分析から,サイトマップ,ユーザーフロー,スケッチ&ワイヤーフレームと初期の段階から順を追って具体的な内容を解説していて,とても参考になりそうです。

その後,プロトタイプ,ユーザビリティテスト,ビジュアルデザインと,ユーザー中心のデザインプロセスを一貫して行う様子が,実際のビジュアルとともにまとめられています。

図2 UX/UIデザインのケーススタディ

図2 UX/UIデザインのケーススタディ

3. UX Hacking Usability with Psychological Principles | The JotForm Bloghttps://www.jotform.com/blog/ux-hacking-usability/

ユーザビリティの向上について,心理学の法則を切り口としてまとめた記事です。

フォーム作成の新サービスJotForm Cardを開発するにあたり,シンプル・即時・美的の3つの重要なポイントに行き着いたとのことです。その3点について,心理学的な裏付けを基に細かく解説しています。

図3 ユーザビリティの向上について心理学の法則から解説

図3 ユーザビリティの向上について心理学の法則から解説

4. 10 years of the App Store: The design evolution of the earliest apps | 9to5Machttps://9to5mac.com/2018/07/10/app-store-10-years-design-evolution/

App Storeが10周年ということで,10年前から存在するアプリのデザインの変化をまとめた記事です。

iTunes Remote,Facebook,Things,OmniFocus,Evernote,eBay,Twitterrific,Instapaper,PCalc,Yelpの10個のアプリのアイコンデザイン,画面デザインの変遷は,時代を感じさせられます。

図4 Appストアのアプリの10年間のデザインの変化

図4 Appストアのアプリの10年間のデザインの変化

5. 20 Best New Portfolios, July 2018 | Webdesigner Depothttps://www.webdesignerdepot.com/2018/07/20-best-new-portfolios-july-2018/

ポートフォリオサイトのデザインギャラリーです。ミニマルなデザインのものが目立ちます。

各サイトには簡単な解説と,何のプラットフォームで作られているか(WordPressが多い)も紹介しています。

図5 ポートフォリオサイトのデザインギャラリー

図5 ポートフォリオサイトのデザインギャラリー

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

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

25+ Real-Life Tools for Web Designers and Developers | Design Shackhttps://designshack.net/articles/inspiration/25-real-life-tools-for-web-designers-and-developers/

今回は,ウェブデザイナーや開発者に役立つ様々なサービスをまとめた記事を紹介します。ウェブサイトビルダーやデザイン素材,WordPressのテーマなど,楽して作る系のものが多いようです。

uSocialはSNSボタンを簡単に設置できるサービスです。ページごとに入れる「いいねボタン」やSNSアカウントのフォローボタンなどを作成でき,デザインのカスタマイズ性も結構あります。

Notismはデザインフィードバックのサービスで,画像の任意の箇所にコメントを付けるなどの機能があります。動画にも任意の場所にコメントを付けられ,確かにこれからは動画の校正も重要になるはずだと納得しました。

図6 ウェブデザイナーや開発者に役立つ様々なサービスまとめ

図6 ウェブデザイナーや開発者に役立つ様々なサービスまと

今週の気になるWebネタ

Facebook,AR(拡張現実)広告のテストを開始 口紅やサングラスを試せる - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1807/11/news058.html

Facebookのニュースフィード上でのAR広告のテストが開始されました。機能自体は今さら珍しくないですが,たとえばインカメラで写した自分の顔にサングラスが合成されることで試着できるということですね。

そうして試した中で気に入ったものはキャプチャーして,そのまま投稿して広められるというのは,SNS広告ならではです。芸能人やインフルエンサーを使った仕掛けもできますね。

Instagramのストーリー広告でやった方が反応大きそうだと思いますが,まずはFacebookでテストしてから満を持してインスタでも展開するということかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入