週刊Webテク通信

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

Webテク, Webデザイン, Web広告, CSS, ソーシャルメディア, Google, アプリ

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

ネットで見かけた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　デザインの参考のためにアプリのユーザーフローを集めたサービス

今週の気になるWebネタ

「Google+」終了は4月2日に決定 2月4日から新プロフィール作成不能に - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1901/31/news078.html

Google+の一般ユーザー向けサービスの終了が2019年4月2日に決定しました。ユーザーにはメールでの連絡が来ているはずです。これまでのデータは削除されますが，必要なユーザーは自分のコンテンツをダウンロードできます。

早速ダウンロードのページに行ってアーカイブ作成の処理をしましたが，用意ができたらメールで連絡が来るそうで，1週間かかると表示されました。これまでの投稿などがHTML形式で入手できるようです。

なお，G Suiteユーザーは，引き続きG Suite アカウント用Google+ を利用できるとのこと。Googleから来たメールによると「新しいデザインや機能を近日中に公開いたします」とあったので，どういう展開を見せるのか気になります。

Webテク, Webデザイン, Web広告, CSS, ソーシャルメディア, Google, アプリ

著者プロフィール

芦之由（あしのよし）

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

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

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