週刊Webテク通信

2018年2月第2週号 1位は,モバイルアプリでのUIデザインのトレンド,気になるネタは,Instagram,文字だけを投稿できる機能を追加

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

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

1. Top 9 UI Design Trends for Mobile Apps in 2018 – Muzli -Design Inspirationhttps://medium.muz.li/top-9-ui-design-trends-for-mobile-apps-in-2018-14b4fa350d3a

モバイルアプリでのUIデザインのトレンドを9つまとめた記事です。

  1. 重なり合う効果
  2. カラーグラデーション
  3. 透明度
  4. シンプルな曲線と幾何学模様
  5. より読みやすくするためのハッキリした色とフォント
  6. 独自のイラストを使ったインターフェイス
  7. 機能性を向上させるアニメーションとインタラクション
  8. 声で利用するインターフェイス
  9. 違ったトレンドを混ぜ合わせる

図1 モバイルアプリでのUIデザインのトレンド

図1 モバイルアプリでのUIデザインのトレンド

2. Web Design Trends to Try in 2018 - Designmodohttps://designmodo.com/web-design-trends-2018/

2018年に挑戦したいウェブデザインのトレンドを紹介しています。

  • ウェブでの(モバイルアプリのような)マイクロインタラクション
  • おすすめバッジ
  • 対角線と斜め
  • 文字のアニメーション
  • 大画面への対応
  • 3Dボタン効果
  • 真のアクセシビリティ
  • FlexboxとCSS Gridレイアウト

図2 2018年に挑戦したいウェブデザインのトレンド

図2 2018年に挑戦したいウェブデザインのトレンド

3. Designing For Trust: How to Add Elements of Trust to Your Layouts - Hongkiathttps://www.hongkiat.com/blog/designing-for-trust-add-elements-to-layouts/

ウェブデザインの信頼度を高めるための要素をまとめています。

  • 取引先のロゴを並べる
  • お客様の声
  • 一貫したブランドデザイン
  • プロにより設計されたUX

図3 ウェブデザインの信頼度を高めるための要素

図3 ウェブデザインの信頼度を高めるための要素

4. Easing Gradientshttps://larsenwork.com/easing-gradients/

イージングカーブを利用したより自然なグラデーションの作り方を解説しています。ただ段階的に変化するリニアなグラデーションに比べて色の境目が気にならなくなります。

イージンググラデーションを作るためのエディタも埋め込まれていて,このエディタが非常に使いやすくておすすめです。

図4 イージングカーブを利用したグラデーション

図4 イージングカーブを利用したグラデーション

5. Keeping aspect-ratio with HTML and no padding trickshttps://codeburst.io/keeping-aspect-ratio-with-html-and-no-padding-tricks-40705656808b

SVGとCSS Gridを使い,縦横比を決めたボックスの中心にコンテンツを配置する,シンプルだけど便利なテクニックです。

SVGが縦横比を維持できること,CSS Gridでは重なり合うアイテムがお互いのサイズに影響を与えることを利用しています。

図5 縦横比を固定したエリアを作るテクニック

図5 縦横比を固定したエリアを作るテクニック

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

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

Pigment by ShapeFactory | Easy to use color palette generatorhttps://pigment.shapefactory.co/

Pigmentは2ベースカラー色のカラースキームを作るサービスです。フリーの写真素材を提供しているUnsplashの写真を検索し,写真の中の色からカラースキームを生成する面白い機能もあります。

あらかじめ用意された色の組み合わせを元に,色を直接カスタマイズするのではなく,彩度(pigment=色素,顔料と表現しているので厳密には彩度とは違うようです)と明るさを調整することで好みのカラースキームを作ります。

1つのカラースキームを開くと,各色4段階の濃さで調整可能です。色は16進数コード,RGB値のほか,Pantoneの色番号でもコピーできます。あらかじめ使いたい色が決まっている場合,ベースの色を10色のカラーパレットから選べます。

図6 2色のカラースキームを作るサービス

図6 2色のカラースキームを作るサービス

今週の気になるWebネタ

Instagram,文字だけを投稿できる機能を追加 - 週刊アスキーhttp://weekly.ascii.jp/elem/000/000/410/410444/

Instagramで,背景+文字の画像を作ってストーリーズに追加できる機能が登場しました。たぶん誤解している人もいると思いますが,通常の投稿時の機能ではなく,24時間で消えるストーリーズでしか使えません。

Facebookのストーリーには既にあった機能ですが,相変わらずFacebookとは微妙に機能が違っています。ちなみに,Facebookでは通常の投稿時にも背景+文字の画像を作って投稿する機能が以前からあり,わたしの友達界隈では結構使われています。

Instagramのストーリーズで背景色+文字だけの投稿を見かけることはこれまでも多かったので,この機能で便利になるユーザーも少なくないはずです。ストーリーズで作った画像はカメラロールに保存できるので,画像制作のために使うユーザーもいるでしょう。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入