週刊Webテク通信

2018年3月第5週号 1位は,ランディングページを良くするための10個のヒント,気になるネタは,Google,虚偽ニュース対策とメディア企業支援の「News Initiative」に3億ドル投入

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

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

1. 10 Tips for Designing Landing Pages That Don’t Suck | Design Shackhttps://designshack.net/articles/layouts/landing-page-design-tips/

ランディングページを良くするためのヒントをまとめています。

  1. 1つの明確な目的を持つ
  2. ターゲットユーザーのためにデザインする
  3. 強力なイメージを使う
  4. 魅力的なコピーを作る
  5. ナビゲーション要素によってキーワードを伝える
  6. CTA(コールトゥアクション)をハッキリさせる
  7. 可能な場合,コンテンツを通常のページからカスタマイズする
  8. 本サイトのブランドイメージとはっきりわかる関連性を持たせる
  9. どこからリンクしてきたかを考慮する
  10. 階層構造とユーザーを誘導するフローを確立する

ユーザーとの初めての接触となる場所だということを念頭に置き,目的を持ってデザインすることが重要とのことでした。

図1 ランディングページを良くするための10個のヒント

図1 ランディングページを良くするための10個のヒント

2. Icon Design: 5 Essential Tips to Get You Started | NOUPEhttps://www.noupe.com/design/icon-design-5-essential-tips.html

アイコンデザインに不可欠なテクニックを紹介しています。

  1. 明確で理解しやすいもの
  2. 描き始める前にリサーチすることが重要
  3. Less is More - アイコンを過剰なものにしない
  4. 1つのスタイルを選びそれにこだわる
  5. ピクセルパーフェクトにしてテキストはあきらめる

図2 アイコンデザインに不可欠なテクニックを5つ

図2 アイコンデザインに不可欠なテクニックを5つ

3. Designing Accessible Navigations – UX Planethttps://uxplanet.org/designing-accessible-navigations-3b1a151d3bd7

アクセシブルなナビゲーションデザインのヒントを紹介した記事です。

  • コンテンツをスキップできるようにする
  • アクセシビリティメニューを追加する
  • キーボードショートカットを検討する
  • 適切な構造とラベル要素

図3 アクセシブルなナビゲーションデザインのヒント

図3 アクセシブルなナビゲーションデザインのヒント

4. 10 Javascript Libraries For Frontend ! | SpaceSwordhttps://spacesword.in/2018/02/02/10-javascripts-library-for-frontend/

フロントエンドのためのJavaScriptライブラリを10個紹介しています。CodePenの埋め込みでその場で確認できて便利です。

3Dデザインの追加,スクロールに合わせたアニメーション効果,背景でのビデオ再生などを実現するライブラリが掲載されていました。

図4 フロントエンドのためのJavaScriptライブラリ

図4 フロントエンドのためのJavaScriptライブラリ

5. 10 most inspiring whitespace designs for web designershttps://www.justinmind.com/blog/10-examples-of-white-space-design-websites-youll-want-to-copy/

ホワイトスペースをうまく使ったウェブデザインの実例を10個まとめた記事です。

ホワイトスペースを使うことで,メッセージを強調表示したり,シンプルさを伝えたり,不要な注意をデザインから取り除くことができるとのことでした。

図5 ホワイトスペースをうまく使ったウェブデザインの実例

図5 ホワイトスペースをうまく使ったウェブデザインの実例

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

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

Timeline for Sketchhttps://timeline.animaapp.com/

今回は,ウェブサービスではないのですがSketchでアニメーションを作るプラグイン「Timeline for Sketch」を紹介します。

Sketch上で,Adobe AfterEffectsのようにタイムラインとキーフレームを使ってアニメーションを設定します。作ったアニメーションはmp4ムービーかアニメーションGIFで書き出すことが可能です。

このプラグインはクラウドファンディングで資金を集めて開発に至ったとのことです。将来的にはCSSアニメーション,Lottieなどのコードフォーマットにエクスポートできる予定と書いてありました。なお,InVision Studioには標準でアニメーション機能があります。

図6 Sketchでアニメーションを作るプラグイン

図6 Sketchでアニメーションを作るプラグイン

今週の気になるWebネタ

Google,虚偽ニュース対策とメディア企業支援の「News Initiative」に3億ドル投入 - ITmedia NEWS http://www.itmedia.co.jp/news/articles/1803/21/news022.html

Googleが「Google News Initiative」を立ち上げました。この話題の記事をいくつか読んだのですが,記事によって書いていることが微妙に違っているように感じました。取り組みの発表で具体的ではない部分も多いのでしょうがないのでしょう。

「虚偽ニュースへの対策」⁠メディア企業支援」を進めることで,ネットのジャーナリズムを良いものにしていくことは間違いないようです。Google検索結果などのコンテンツ信頼性を高めるために必要なんですね。

わかりやすいのはGoogleアカウントでニュースメディアの有料記事購読申し込みができる「Googleで購読」⁠Subscribe with Google)です。この決済にはGoogle Payを使っているようでした。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入