週刊Webテク通信

2018年2月第3週号1位は、ウェブデザインのためにやるべきこと、やってはいけないこと、気になるネタは、Twitter、初の黒字--第4四半期は予想上回る

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

1. The 12 Do’s and Don’ts of Web Design | Adobe Bloghttps://theblog.adobe.com/12-dos-donts-web-design-2/

ウェブデザインのためにやるべきこと、やってはいけないことを、それぞれ12個挙げています。

以下は、やってはいけない、として紹介されている12個です。

  1. 読み込み時に待たせない
  2. 内部リンクを新しいタブで開かない
  3. 多くの書体を使わない
  4. 多くの色を使わない
  5. すぐに自動的にポップアップを開かない
  6. 人物の写真に素材集を使わない
  7. 宣伝がコンテンツから視線を奪ってしまわないように
  8. BGMを流さない、音付きでビデオを自動再生しない
  9. スクロール機能をユーザーから奪わない
  10. 水平方向のスクロールを使わない
  11. 美しさのために使い勝手を犠牲にしない
  12. 点滅するテキストや広告を使わない
図1 ウェブデザインのためにやるべきこと、やってはいけないこと
図1 ウェブデザインのためにやるべきこと、やってはいけないこと

2. 7 Interesting Ways to Display Content Excerptshttps://speckyboy.com/interesting-content-excerpts/

コンテンツの概要(excerpts)を表示する面白い方法を7つ紹介しています。ブログ記事などに誘導するために、概要(記事の最初の何文字かを使用するケースが多い)を効果的に表示するコーディング例をまとめています。

  1. 概要をタブで切り替える
  2. スクロールすると概要から全文に切り替わる
  3. 1枚のカードの中で概要から全文に展開する
  4. 画像の上に記事の概要が現れる
  5. 通常時は見出しのみでホバー時に概要も表示する
  6. フルスクリーンのイントロ画面
  7. スポットライト効果
図2 コンテンツの概要(excerpts)を表示する面白い方法
図2 コンテンツの概要(excerpts)を表示する面白い方法

3. 10 Free CSS Ghost Button Code Snippets - 1stWebDesignerhttps://1stwebdesigner.com/ghost-button-snippets/

ゴーストボタン(枠だけのボタン)のコーディング例を10個まとめた記事です。ホバー時のアニメーション効果をその場で確認できます。

グラデーションを使った例がいくつかあって、目新しい感じを出すのに良さそうです。

図3 ゴーストボタンのコーディング例いろいろ
図3 ゴーストボタンのコーディング例いろいろ

4. 9 Best Free CSS Flexbox Tutorials - 1stWebDesignerhttps://1stwebdesigner.com/9-best-free-css-flexbox-tutorials/

CSS Flexboxのチュートリアルを9つ紹介した記事です。

Flexboxについてじっくり学びたいときや、リファレンス的な情報を求めている場合に役に立つと思います。

図4 CSS Flexboxのチュートリアル9選
図4 CSS Flexboxのチュートリアル9選

5. 40 Excellent Mini Icon Sets - Hongkiathttps://www.hongkiat.com/blog/mini-icon-sets/

ミニアイコンのセットを多数紹介しています。ベクターデータとしてダウンロードできるものが多いです。

最後に紹介されている300 Images From 1800 Sitesはアイコンを配布しているわけではなく、⁠矢印」⁠カート」などのアイコンを、いろんなサイトから集めた事例が見られるページでした。

図5 ミニアイコンのセットをまとめて紹介
図5 ミニアイコンのセットをまとめて紹介

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

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

JotForm Cards https://www.jotform.com/cards/

JotForm Cardsは、フォーム作成&管理サービスJotFormの新機能で、カード型レイアウトで複数の段階に分かれたフォームを作成できます。1質問につき1カードで、進捗バーも表示されます。

1ページの縦に長いフォームより、段階を追って入力してもらう方が離脱しにくいだろうという考えですね。特にモバイルでの使い勝手が良くなることを重視しているようです。

任意の画像を入れられる選択ボタンや、表情が変わる絵文字スライダーなど、ビジュアル面を配慮した機能が豊富で、分かりやすく飽きさせないフォームが作れそうです。

図6 カード型で複数ステップに分けたフォームを作成できるサービス
図6 カード型で複数ステップに分けたフォームを作成できるサービス

おすすめ記事

記事・ニュース一覧