週刊Webテク通信

2019年1月第2週号 1位は，評価が高いUIデザインのトレンド2019，気になるネタは，あけましてアップル・ショック 時価総額4位に後退

Webテク, Webデザイン, Web広告, モバイルアプリ, メール, CSS, UI

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

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

1. Top User Interface (UI) Design Trends For 2019 - MobileAppDailyhttps://www.mobileappdaily.com/top-ui-design-trends

評価が高い，モバイルアプリ向けユーザーインターフェイスデザインのトレンドを紹介しています。

  1. フレームのない背景画像
  2. グラデーション
  3. イラストを使ったインターフェイス
  4. 3Dグラフィックス
  5. 色のコントラスト
  6. タイポグラフィ
  7. 大きな画像を使う
  8. ミニマリズム
  9. アプリ内で使えるジェスチャー操作
  10. フルスクリーン
  11. AR（拡張現実）
  12. 生体認証
  13. カード
  14. 絵文字
  15. アニメーション

図1　評価が高いUIデザインのトレンド

図1　評価が高いUIデザインのトレンド

2. 5 Ways to Design for Large Viewports | Webdesigner Depothttps://www.webdesignerdepot.com/2019/01/5-ways-to-design-for-large-viewports/

大きな画面サイズ向けにレイアウトする方法を紹介しています。

  1. 大きな写真を入れる
  2. レイアウトを拡大する
  3. レスポンシブな文字サイズ
  4. 画面に表示するものを増やす
  5. ビデオを使う

図2　大きな画面サイズ向けにレイアウトする方法

図2　大きな画面サイズ向けにレイアウトする方法

3. Email Design Hacks: Creating a Functional Email Experiencehttps://www.business2community.com/email-marketing/email-design-hacks-creating-a-functional-email-experience-02156521

効果のあるメール（HTMLメール）をデザインする方法を解説した記事です。メールの構成要素ごとに，ノウハウを紹介しています。

たとえば，レイアウトについては大きく3種類を紹介し，上級者向けヒントとして以下の項目が載っていました。

  • 逆ピラミッドのレイアウトはプロモーションと大きな画像を使う場合に適している
  • ジグザグレイアウトはニュースレターに適している
  • 1コラムレイアウトはレスポンシブなメールを作るのに適している

図3　効果のあるメールをデザインする方法

図3　効果のあるメールをデザインする方法

4. 10 Dramatic Examples of Splash Screen Designhttps://speckyboy.com/splash-screen-design/

ドラマチックなスプラッシュスクリーンの事例を10個まとめています。

テキストや図形を使った，シンプルながらインパクトのある動きをするものが多いです。

図4　ドラマチックなスプラッシュスクリーンいろいろ

図4　ドラマチックなスプラッシュスクリーンいろいろ

5. Multi-Line Inline Gradient | CSS-Trickshttps://css-tricks.com/multi-line-inline-gradient/

複数行のテキストの背景に，ひとつながりのグラデーションを配置するCSSコーディング例を紹介しています。

なお，この記事を掲載しているCSS-Tricksのサイトデザインは最近リニューアルしたようです。グラデーションを使った大きなスクロールバーが目立ってますね。

図5　複数行テキストに背景グラデーションを入れる方法

図5　複数行テキストに背景グラデーションを入れる方法

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

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

UI Sound Inspiration for UX/UI Designhttps://uisounds.prototypr.io/

ユーザーインターフェイスに使われる音を集めたサービスです。Facebook，Twitter，Slackなどのアプリの効果音を聴くことができます。

どういう場面での音なのかの画面も出るので分かりやすいです。まだ登録されている音の数は少ないですが，今後増えていくと資料的な価値の大きなサービスになりそうです。

わざわざアプリを立ち上げて操作しなくても音を確認できるので（しかも何度も）⁠，アプリを使っているところのマンガを描くときなど，音を文字にする際に役立ちそうだと個人的には思いました。

図6　ユーザーインターフェイスに使われる音を集めたサービス

図6　ユーザーインターフェイスに使われる音を集めたサービス

今週の気になるWebネタ

あけましてアップル・ショック 時価総額４位に後退 | News & Views | QUICK Money Worldhttps://www.quick.co.jp/6/article/18562

アップルが時価総額ランキングで1位から4位に一気にダウンしたそうです。そして1位になったのは，なんとマイクロソフト。GAFAじゃなくてMが1位になりました。（⁠しかしその後，1月8日にはアマゾンが初の1位になっています）

アップルの株価は，2018年10月に過去最高値を付けて以来急落しており，3ヵ月で約48兆円が消失したそうです。まあ，それでも時価総額は70兆円以上なんですけどね。

ちなみにうちの中1の娘は，GAFAの各企業は知っていましたが，マイクロソフトの名前は聞いたことないとのこと。学校の技術の授業でWindowsパソコンを使っているのに…。わが家はMacを使ってるというのもあるでしょうが，普通に中高生に聞いてもマイクロソフトを知らない人は多いのかもしれません。

Webテク, Webデザイン, Web広告, モバイルアプリ, メール, CSS, UI

著者プロフィール

芦之由（あしのよし）

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

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

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