週刊Webテク通信

2019年2月第2週号1位は、2019年に目にすることが増えそうなウェブデザインのトレンド、気になるネタは、「Google+」終了は4月2日に決定 2月4日から新プロフィール作成不能に

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

1. Six visual web design trends set to be big in 2019 – Econsultancyhttps://econsultancy.com/six-visual-web-design-trends-set-to-be-big-in-2019/

2019年に目にすることが増えそうな、ウェブデザインのトレンドを6つ紹介しています。

  1. カラフルなグラデーションで塗られた抽象的な形
  2. カラフルな図形
  3. 大きく、実験的なタイポグラフィ
  4. 暗い背景
  5. 全画面の動画
  6. パステル調の色合い
図1 2019年に目にすることが増えそうなウェブデザインのトレンド
図1 2019年に目にすることが増えそうなウェブデザインのトレンド

2. Pure CSS lettering, a bad and fun idea • Kenneth Ormandyhttps://kennethormandy.com/journal/pure-css-lettering-a-bad-and-fun-idea/

CSSの描画機能を使って文字を描くというアプローチで作られた、CSSフォントと呼ばれるものをまとめた記事です。

日本人が2015年に作ったCSS SANSを、最も完全に実現された例として紹介しています。

最近では、CSSans ProというカラーのCSSフォントも話題になっていました。

図2 CSSの描画機能で作られたCSSフォントのまとめ
図2 CSSの描画機能で作られたCSSフォントのまとめ

3. CSS Position Sticky - How It Really Works! – Elad Shechter – Mediumhttps://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46

CSSの「position: sticky」を使って要素を固定させる方法について、詳しく調べた結果を解説した記事です。

「position: sticky」の要素が親要素の中の唯一の要素の場合は固定されないことや、画面の上部ではなく下部に固定させる方法などを紹介しています。

図3 CSSのPosition Stickyについての詳細解説
図3 CSSのPosition Stickyについての詳細解説

4. 12 Examples of Nature Illustrations in Web Design - 1stWebDesignerhttps://1stwebdesigner.com/12-examples-of-nature-illustrations-in-web-design/

自然に関連するイラストを使ったウェブデザインのギャラリーです。

イラストをレイヤーに分けて用意して、スクロールに合わせた視差効果を適用したサイトも多く、そういう使い方をしやすいのもイラストのメリットだと感じました。

図4 自然に関連するイラストを使ったウェブデザインのギャラリー
図4 自然に関連するイラストを使ったウェブデザインのギャラリー

5. SocialSizes.io - Image and Video sizes for Social Mediahttps://socialsizes.io/

各種ソーシャルメディアで扱える画像、動画のサイズ一覧です。Facebook、Instagram、Twitterなどの投稿、ストーリー、プロフィールに使えるサイズを確認できます。

また、Sketch、Adobe XD、Photoshop用のテンプレートファイルも用意されており、ダウンロードして利用可能です。

図5 各種ソーシャルメディアで扱える画像、動画のサイズ一覧
図5 各種ソーシャルメディアで扱える画像、動画のサイズ一覧

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

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

User flow design inspirationhttps://pageflows.com/

各種アプリ上でユーザーが一連の作業を行うときの流れを、動画と静止画で見られるサービスです。ユーザーフローをデザインする上での参考となることを目的としています。

「ユーザー登録の仕方」⁠メッセージの送り方」といった一連の作業を、実際に使ってみなくても動画と静止画で確認できるので便利です。動画での作業紹介にはテキストでの解説もあり、シーンごとに頭出しできるなど作り込まれています。

プラットフォーム別、アプリ別、フロー別で探すことができます。基本的に有料のサービスですが、ログインしていない状態でもある程度は見ることができます。

図6 デザインの参考のためにアプリのユーザーフローを集めたサービス
図6 デザインの参考のためにアプリのユーザーフローを集めたサービス

おすすめ記事

記事・ニュース一覧