週刊Webテク通信

2017年11月第4週号 1位は，CSSグラデーションのチュートリアルと3つの利用例，気になるネタは，ビジネスチャット「Slack」に待望の日本語版--国内向けに「送信ボタン」新設

Webテク, Webデザイン, Web広告, CSS, CSS Grid, アニメーション, モーションデザイン, 分割画面, Slack

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

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

1. How to Use CSS Gradients on the Webhttps://webdesign.tutsplus.com/tutorials/how-to-use-gradients-on-the-web--cms-29922

CSSグラデーションの使用方法について初歩から丁寧に解説したチュートリアルです。

また，実際にウェブデザインで利用する場合のヒントとして以下の3つのケースを紹介しています。

  1. メイン画像にグラデーションオーバーレイ
  2. 文字をグラデーションで塗る
  3. グラデーションのボーダー

図1　CSSグラデーションのチュートリアルと3つの利用例

図1　CSSグラデーションのチュートリアルと3つの利用例

2. Using CSS Grid: Supporting Browsers Without Grid – Smashing Magazinehttps://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/

CSS Gridに対応していない古いブラウザにも代替方法を用意してコーディングする方法をまとめた記事です。

floatやdisplay: table-cellを利用して，古いブラウザでも段組として表示できる「フォールバック」の考え方でのコーディングテクニックを詳しく解説しています。

図2　CSS Gridのフォールバックのコーディングテクニック

図2　CSS Gridのフォールバックのコーディングテクニック

3. 4 Tiny Trends in Applying Animations - Designmodohttps://designmodo.com/tiny-trends-animations/

アニメーションのちょっとしたトレンドを事例とともに紹介した記事です。

  1. 弾力性のあるアニメーション
  2. 変形するロゴタイプ
  3. 意味のあるローディングアニメーション
  4. アニメーションするハンバーガーメニューボタン

図3　アニメーションの小さなトレンド4つ

図3　アニメーションの小さなトレンド4つ

4. 10 Snippets for Creating Split Screen Layoutshttps://speckyboy.com/snippets-split-screen-layouts/

分割画面レイアウトのためのコーディング例を，コード共有サイトCodePenに掲載されているものから紹介しています。

ウィンドウ内を2つに分割して片側を固定サイドバーとして使う例や，分割された左右の要素が同時に切り替わる例，アニメーション効果として要素が分割される例などがありました。

図4　分割画面レイアウトのためのコーディング例いろいろ

図4　分割画面レイアウトのためのコーディング例いろいろ

5. 10 Beautiful Examples of Motion Design in Mobile Apps - 1stWebDesignerhttps://1stwebdesigner.com/motion-design-mobile-apps/

モバイルアプリ向けモーションデザインの優れた例をGIFアニメで紹介しています。

dribbbleなどから集められたアニメーションするUIのアイデアは，なかなか見応えがあります。

もっと見たいという人は，モバイルアプリのインタラクションのアイデアを100個集めた以下の記事はいかがでしょう。

図5　モバイルアプリ向けモーションデザインの優れた例

図5　モバイルアプリ向けモーションデザインの優れた例

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

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

Sarahahhttps://www.sarahah.com/

Sarahahは匿名でメッセージを受け取れるサービスです。メッセージ送信用のシンプルなフォームだけのページを自分専用に作れます。送られてきたメッセージはサイト上かモバイルアプリで読むことが可能です。

それだけのシンプルなサービスなのですが，なぜか日本のTwitterで現在流行中です。匿名で質問を受け付けてTwitter上で回答するという用途に使われており，IT業界の有名人などが利用していることから認知度が上がっているようです。

モバイルアプリで受信したメッセージの共有ボタンを押すと，メッセージ内容を含んだ画像を生成できます。Twitterと連動させればそのまま返事を書くことができ，質問内容は画像になっているので文字数制限を気にしなくていいので便利です。その辺が流行っている理由だと思います。

図6　Twitterで流行中の匿名でメッセージを受け取れるサービス

図6　Twitterで流行中の匿名でメッセージを受け取れるサービス

図7　Sarahahで作ったメッセージ送信ページの例

図7　Sarahahで作ったメッセージ送信ページの例

今週の気になるWebネタ

ビジネスチャット「Slack」に待望の日本語版--国内向けに「送信ボタン」新設 - CNET Japanhttps://japan.cnet.com/article/35110559/

ついにSlackが日本語化しました。単にメニューを日本語に切り替えられるだけでなく，slack.comのサイトやヘルプページなども完全に日本語化されています。

日本語変換時の誤送信を防ぐため，デフォルトではエンターキーでの送信機能をオフにして送信ボタンを使う設計になるなど，丁寧な日本語対応です。日本語でのサポートや日本円建てでの請求書発行など，日本企業向けに環境も充実させています。

モバイルアプリの説明文や紹介画像が日本語化されたのも，日本のユーザーに使ってもらう上では有効だと思います。とはいえ，使い始めるにはハードルが高い面もありますし，今後もじっくりと普及活動を進めていく必要があるでしょう。

Webテク, Webデザイン, Web広告, CSS, CSS Grid, アニメーション, モーションデザイン, 分割画面, Slack

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote