週刊Webテク通信

2018年4月第4週号 1位は，UIデザインの重要なトレンド，気になるネタは，Alexa Blueprintsで誰でもカスタムAlexaスキルが作れる

Webテク, Webデザイン, Web広告, UI, Facebook, アプリ, Alexa

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2018年4月16日～4月22日の間に見つけた記事のベスト5です。

1. 9 Essential UI Design Trends You Should Stick to in 2018https://uxdesign.cc/9-essential-ui-design-trends-you-should-stick-to-in-2018-26f33d1fe980

UIデザインの重要なトレンドについて，ウェブとモバイルそれぞれで解説しています。

ウェブUIのトレンド
  • シームレスなインターフェイス
  • タイポグラフィ
  • グラデーションの遷移
  • 独自のイラスト
  • WebGL
  • ビデオ
モバイルUIのトレンド
  • UXに重点を置く
  • インタラクション
  • 落ち着いた色

図1　UIデザインの重要なトレンド

図1　UIデザインの重要なトレンド

2. Web Design Trends 2018: The Complete Guide for Designershttps://www.uxpin.com/studio/web-design/web-design-trends-2018-the-complete-guide-for-designers/

2018年のデザイントレンドをまとめた記事です。

  1. コンポーネントベースのデザインシステム
  2. 多角形と幾何学のレイヤー
  3. 触れられそうなリアルなデザイン
  4. デスクトップ版は複雑に／モバイル版はシンプルに
  5. 近代的なレトロデザイン
  6. シンプルなホームページ

図2　2018年のデザイントレンド

図2　2018年のデザイントレンド

3. Tips For Using Images in Web Design: 20 Examples | SpyreStudioshttp://spyrestudios.com/tips-for-using-images-in-web-design-20-examples/

ウェブデザインでの画像の扱い方についてまとめた記事です。

以下の2点について，それぞれいくつかのヒントを紹介しています。

  • サイトに画像を追加するときに考慮すること
  • 画像を使ってどうコンバージョンを上げるか

図3　ウェブデザインでの画像の扱い方のヒント

図3　ウェブデザインでの画像の扱い方のヒント

4. The most impressive redesign examples of the brands you lovehttps://futuramo.com/blog/impressive-redesign-examples-brands-you-love/

有名サービス・ブランドの，デザインの変化が印象的な例を紹介しています。

Facebook，Twitter，Airbnb，Uberなどのウェブサイトの初期のデザインと今のデザインを見比べてみると，最近のデザインの傾向も分かってくるようです。

図4　有名サービス・ブランドのリ・デザインの事例いろいろ

図4　有名サービス・ブランドのリ・デザインの事例いろいろ

5. 10 Tips for a Perfect Facebook Cover Image | Design Shackhttps://designshack.net/articles/graphics/facebook-cover-image-tips/

良いFacebookカバー画像を作るためのヒントをまとめています。

画像をどう作るかと，ボタンを設定するなどFacebookの機能を活用する方法とについて解説しています。

図5　良いFacebookカバー画像を作るためのヒント

図5　良いFacebookカバー画像を作るためのヒント

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

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

Solis For Mac - A Live Design Output that integrates seamlessly with your favourite code editor for true live code previewing.https://solisapp.com/

今回は，WebサービスではなくMac用のアプリを紹介します。Solisという好きなエディタと組み合わせて使えるリアルタイムプレビューツールです。レスポンシブなページ作成のとき，複数の画面サイズを同時に表示できます。

たとえばBracketsのようなローカルサーバーでリアルタイムプレビューできるエディタなら，ファイル保存しなくてもエディタ上での変更をリアルタイムで複数の画面サイズでプレビューできるので便利です。

Solisのウィンドウ上には，好きな位置に自由に複数のビュー（画面）を配置できます。あらかじめ各種スマホやタブレットの画面サイズは用意されていますし，任意のサイズのビューも作れます。Solis上でデベロッパーツールを開くことも可能です。

図6　複数画面サイズをリアルタイムプレビューできるMacアプリ

図6　複数画面サイズをリアルタイムプレビューできるMacアプリ

今週の気になるWebネタ

Alexa Blueprintsで誰でもカスタムAlexaスキルが作れる | TechCrunch Japanhttps://jp.techcrunch.com/2018/04/20/2018-04-19-amazons-new-alexa-blueprints-let-anyone-create-custom-alexa-skills-and-responses/

Alexaスキルをプログラミングの知識がなくても作れるAlexa Skill Blueprintsというサービスが発表されました。英語版のみですが，Alexaアプリの言語設定を米国の英語に変更すれば使うことはできるようです。

Skill Blueprintsのページでテンプレートを見ることができて，端末を持ってなくてもAmazonのアカウント（米国版）でログインすれば，作るところまでできるようです。これが日本語版でもできるようになることを想像するとワクワクします。

Q＆Aのテンプレートを使えば，決まった質問に対し決まった答えを返すスキルが作れるので，それだけでも楽しそうです。単語帳（flash cards）を作れば，Alexa相手に勉強ができるんでしょうね。子供の勉強に使って見たいと思いました

Webテク, Webデザイン, Web広告, UI, Facebook, アプリ, Alexa

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote