週刊Webテク通信

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

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

ネットで見かけた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イベントの招待ページを作るサービス

今週の気になるWebネタ

隔離生活で求められる自然発生的なコミュニケーションを生むソーシャルアプリ | TechCrunch Japanhttps://jp.techcrunch.com/2020/04/25/2020-04-18-clubhouse-app-chat-rooms/

時間を決めてのオンライン会議ではなく,自由なタイミングで交流するツール/アプリが注目されているそうです。このTechCrunchの記事で紹介されているツールはどれも興味深いものばかりです。

新型コロナの影響で世界的にリモートワークが増える中,オフイスの給湯室で偶然顔を合わせた同僚と軽い会話を交わすような,自然発生的なコミュニケーションをネット上で実現する方法が模索されているんですね。

紹介されているツールの多くに共通しているのが,ビデオチャットのときの映像は小さめということ。確かに自宅の背景を見せる必要はないですし,バーチャル背景もビジネスの場では違和感あったりするので,この傾向は今後主流になるはずだと感じました。

著者プロフィール

芦之由(あしのよし)

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

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

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