週刊Webテク通信

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

Webテク, Webデザイン, Web広告, CSS

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

ネットで見かけた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　カード型で複数ステップに分けたフォームを作成できるサービス

今週の気になるWebネタ

Twitter，初の黒字--第4四半期は予想上回る - CNET Japanhttps://japan.cnet.com/article/35114483/

Twitter社が上場以来初の黒字を達成しました。動画広告が好調なことや，経費削減の効果が出たとのこと。地域別の売り上げでは，日本は34％増で，Twitterの売り上げ全体の15％を占めるそうです。

でも，Twitterは日本が支えていると思っているユーザーにとっては，15％は少なく感じる数字ではないでしょうか？ 日本語は対象外だった，140文字から280文字への制限文字数の変更もエンゲージメントの増加につながったそうです。

日本のおかげでの黒字化という雰囲気はあまりなく，日本のユーザーが口を揃える「仕様を元に戻せ」という声は，アメリカ本社にはなかなか届かなそうですね。

Webテク, Webデザイン, Web広告, CSS

著者プロフィール

芦之由（あしのよし）

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

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

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