週刊Webテク通信

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

ネットで見かけた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グラデーションを簡単に作成できるサービス

おすすめ記事

記事・ニュース一覧