週刊Webテク通信

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

ネットで見かけた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 ユーザーインターフェイスに使われる音を集めたサービス

おすすめ記事

記事・ニュース一覧