週刊Webテク通信

2018年3月第3週号 1位は,良い事例から学ぶランディングページを改善するためのヒント,気になるネタは,LINEのタブに「LINEウォレット」が出現--決済・金融サービスを集約

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

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

1. Improve your landing page by learning from the besthttps://medium.com/sketch-app-sources/improve-your-landing-page-by-learning-from-the-best-ddb431aa1c04

ランディングページを改善するためのヒントを,良い実例から学ぼうという記事です。 Airtable,Intercom,Slackのランディングページ(サービスにログインしていない状態でのトップページ)を解析して,現在良く使われる構成やテキストの傾向などを研究しています。

Intercom,Slackは日本語ページもあるので,日本語での見出しなどのコピーライティングやボタンのテキストなどを参考にできるでしょう。

これら良い事例から導き出した結果を元に,この記事の作者の会社が作ったランディングページも紹介されています。リニューアルすることでコンバージョンの数値が上がり,イラストや動画が長く見られるようになったそうです。

図1 良い事例から学ぶランディングページを改善するためのヒント

図1 良い事例から学ぶランディングページを改善するためのヒント

2. 3 Essential Design Trends, March 2018 | Webdesigner Depothttps://www.webdesignerdepot.com/2018/03/3-essential-design-trends-march-2018/

2018年3月の重要なデザインのトレンドを3つ紹介しています。

  1. ポスタースタイル(全画面&ナビゲーションやテキスト要素少なめ)のホームページ
  2. むらさき色のカラーパレット
  3. グラデーションカラーのテキスト

2は,PANTONEが今年の流行色を「ウルトラバイオレット」としたことも影響しているようです。

図2 重要なデザインのトレンド3つ

図2 重要なデザインのトレンド3つ

3. Good to great UI animation tips – UX Collectivehttps://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5

優れたUIアニメーションのヒントをまとめています。

  • タブで切り替わるコンテンツをスライドさせる
  • カードの2つの状態に連動性を持たせる
  • 次々と連続的に変わる効果を使う
  • コンテンツがほかの要素を押し出す
  • メニューが状況に合わせて出現する
  • ボタンを状況を表示する用途にも使用する
  • 重要なものに注意を引かせる

図3 優れたUIアニメーションのヒント

図3 優れたUIアニメーションのヒント

4. 8 Websites To Find Free Creative Commons Icons For Design Projects - 1stWebDesignerhttps://1stwebdesigner.com/creative-commons-icons/

フリーのクリエイティブ・コモンズライセンスのアイコン素材を探せるサイトを8つ紹介しています。

GitHubにも,SVGやPNGとして利用可能なアイコンのリポジトリがたくさんあるとのことです。

図4 フリーのアイコン素材を探せるサイト8選

図4 フリーのアイコン素材を探せるサイト8選

5. Best of Interaction Design — Mar 2018 – Product Disrupt Bloghttps://blog.productdisrupt.com/best-of-interaction-design-mar-2018-35f77cf8a600

インタラクティブデザインの優れた事例をまとめた記事です。

UberやDropboxの新たなデザインアイデアや,アプリのコンセプトデザインなどを,アニメーションで紹介しています。

図5 インタラクティブデザインの優れた事例

図5 インタラクティブデザインの優れた事例

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

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

CSS Gradient Generatorhttps://cssgradient.io/

CSS Gradient Generatorは,CSSグラデーションを簡単に作成できるサービスです。非常に直感的に使え,CSSのコードも常に表示されていて,迷うところがありません。

もちろん,線形,円形どちらのグラデーションも作れますし,色数を増やして複数色のグラデーションにもできます。色や開始位置,終了位置,途中の位置は数値でも入れられますが,CSSを直接編集はできませんでした。

既に作られたグラデーション見本やグラデーションを使ったウェブデザインの例も用意されており,ほかにもCSSグラデーションの記述方法やパターンを作る方法など,関連コンテンツも充実しています。

図6 CSSグラデーションを簡単に作成できるサービス

図6 CSSグラデーションを簡単に作成できるサービス

今週の気になるWebネタ

LINEのタブに「LINEウォレット」が出現--決済・金融サービスを集約 - CNET Japanhttps://japan.cnet.com/article/35115760/

決済・金融サービスを集約した「LINEウォレット」が開始され,LINEアプリの一番右端のタブが「その他」からお財布アイコンの「ウォレット」に変更されました。

「LINE Pay」⁠LINEポイント」⁠LINEコイン」の残高が確認でき,LINE Payにより個人間送金や,お買い物や公共料金の支払いができるとのこと。3月6日開始の「LINE Pay 請求書支払い」では,公共料金や通販等の「請求書のバーコード」を読み込んで支払いができるそうです。

今ひとつキャッシュレス化が進まない日本においての起爆剤となりそうですが,おじさん層を中心にアンチLINE派が結構存在することも普及の足かせになるかもしれません。おじさんたちは取り残されるのか,日本ではやっぱりキャッシュレス化は普及しないのか,今後が気になります。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入