週刊Webテク通信

2020年4月第5週号1位は、説得力のあるランディングページの作り方、気になるネタは、隔離生活で求められる自然発生的なコミュニケーションを生むソーシャルアプリ

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

1. How To Create A Compelling Landing Page — Smashing Magazinehttps://www.smashingmagazine.com/2020/04/landing-page-design/

説得力のあるランディングページの作り方を紹介した記事です。

  • 価値命題を定義する
  • 行動を促すフレーズを決める
  • ユーザーからの反対意見を知る
  • 個性を形にする
  • ビジュアルによる階層構造を作る
  • モニタリング、反復、テスト
図1 説得力のあるランディングページの作り方
図1 説得力のあるランディングページの作り方

2. pattern.css - Background Patterns in CSShttps://bansal.io/pattern-css

CSSだけで実現した背景パターンのライブラリです。区切り線として使うこともできます。ドットや斜線、ストライプなどシンプルで使い勝手が良さそうなものが揃っています。

classの指定だけで色や大きさを変えられます。テキストに適用する方法、テキストの背景や画像の背景にずらして配置する方法など、使い方のヒントを紹介しているのも気が利いています。

図2 CSSだけで実現した背景パターンのライブラリ
図2 CSSだけで実現した背景パターンのライブラリ

3. SVG, Favicons, and All the Fun Things We Can Do With Them | CSS-Trickshttps://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/

ほとんどの最新ブラウザはSVGをファビコンとして使用できるそうで、その設定方法やメリット、アイデアを紹介しています。

SVGのテキストエレメントを使って絵文字をファビコンにする方法や、ダークモードのときにファビコンが変化するテクニックも興味深いです。

図3 SVGをファビコンとして使用する方法
図3 SVGをファビコンとして使用する方法

4. 20 Best Icon Search Engines For Web Designers - Hongkiathttps://www.hongkiat.com/blog/41-image-and-icon-search-engines-designers-should-know/

アイコンを探すのに役立つ、アイコン検索エンジン、アイコンライブラリ/コレクションをまとめた記事です。

無料で使えるアイコンを入手できるサイトもたくさんありますし、PNG、SVG、PSD、EPSなどいろいろな形式のものが探せるはずです。

図4 アイコン検索エンジンやライブラリいろいろ
図4 アイコン検索エンジンやライブラリいろいろ

5. 98.css - A design system for building faithful recreations of old UIshttps://jdan.github.io/98.css/

Windows 98のインターフェイスのようなデザインを実現するCSSです。実用性よりもジョークの意味合いが強いのでしょう。

ボタン、チェックボックス、ラジオボタン、テキストボックス、ドロップダウンがWindows 98風になります。また、Windows 98のウィンドウっぽい青いグラデーションのタイトルバーも使えます。

図5 Windows 98のような見た目を実現するCSS
図5 Windows 98のような見た目を実現するCSS

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

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

zmurl - Beautiful Website for Your Zoom Eventhttps://zmurl.com/

zmurlはZoomを使ったイベントやセミナーの招待ページを作るサービスです。課金機能を持ったページも作れるようです。

Zoomのミーティングから自動で情報を取り込むことで、簡単に見栄えのいい招待ページが出来上がります。最近話題のZoombombingと呼ばれるいたずら行為への対策もされています。

なお、このzmurlのサイト、課金機能の紹介ページはNotionを使い、埋め込まれている動画はLoomを利用するなど、外部サービスをうまく利用しているところも参考になりました。

図6 Zoomイベントの招待ページを作るサービス
図6 Zoomイベントの招待ページを作るサービス

おすすめ記事

記事・ニュース一覧