週刊Webテク通信

2020年7月第2週号 1位は，ボタンデザインの良い例・悪い例，気になるネタは，NAVERまとめ終了 11年の歴史に幕

Webテク, Webデザイン, Web広告, Twitter, ブログ, まとめサイト

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2020年6月29日～7月5日の間に見つけた記事のベスト5です。

1. Design Better Buttons - NextUX - Mediumhttps://medium.com/nextux/design-better-buttons-6b64eb7f13bc

ボタンデザインの良い例・悪い例を画像を使って解説しています。

  1. 同じタイプのボタンは同じスタイルにする
  2. ボタンの現在の状況を視覚的にわかるようにする
  3. 種類によってボタンを区別する
  4. ボタンのスタイルを統一する
  5. ボタンじゃないものがボタンに見えないように
  6. 大文字小文字の使い方に一貫性を持たせる
  7. 使いどころではアイコンを使う
  8. 長いラベルテキストは避ける
  9. ラベルテキストで行動を明確に伝える
  10. リンク同士の間に空白を
  11. ラベルテキストを折り返さない
  12. ラベルテキストがボタンの幅より長くてはいけない

図1　ボタンデザインの良い例・悪い例

図1　ボタンデザインの良い例・悪い例

2. Grid Cheatsheethttps://yoksel.github.io/grid-cheatsheet/

CSS Gridの使い方がまとまったページです。プレビューを見ながら，各プロパティの値を切り替えて確認することができます。

1枚の長いページになっていて，左のメニューから該当箇所に移動できます。

図2　CSS Gridについてまとめたチートシート

図2　CSS Gridについてまとめたチートシート

3. 3 Essential Design Trends, July 2020 | Webdesigner Depothttps://www.webdesignerdepot.com/2020/06/3-essential-design-trends-july-2020/

要チェックなデザイントレンドを3つまとめた記事です。

  1. テキストのハイライトとアンダーライン
  2. 幾何学的形状
  3. 影とグラデーションアイコン

図3　デザイントレンドを3つ紹介

図3　デザイントレンドを3つ紹介

4. 4 unique 'About Me' page ideas to inspire your own | Dribbble Design Bloghttps://dribbble.com/stories/2020/06/30/about-me-design-portfolio-ideas

わたしたちについて（About Me）ページのアイデアを4つ紹介しています。

  1. インタラクティブにする
  2. ビジュアルを捨てる
  3. 自分の要素で自分自身を紹介する
  4. 情報のハブとなるものを作る

図4　About Meページのアイデア4つ

図4　About Meページのアイデア4つ

5. The Return of the 90s Web | Max Böckhttps://mxb.dev/blog/the-return-of-the-90s-web/

最近のウェブの傾向を見ていて，ウェブの初期のころのアイデアを見直す時期ではないかと気づいたという記事です。

以下の項目について，90年代のものと今のものとを取り上げながら解説しています。

  • サーバーサイドレンダリング
  • コードを記述しないで作れるツール
  • 個人サイト
  • キュレーションされたRSSフィードと発見
  • 小規模なコミュニティと収益化

図5　90年代のウェブの復活

図5　90年代のウェブの復活

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

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

Micro.bloghttps://micro.blog/

Micro.blogはシンプルで簡単なブログサービスです。SNSではなく自分のコントロールできるところにコンテンツを置こうというコンセプトのようです。広告など表示されず無料で使い始められます。

Twitterっぽく表示されるタイムライン表示ができてSNS的な要素もあるんですが，単独の自分のブログページとしても公開できます。ただし，ブログとしてのホスティングは有料プランとなっています。

有料プランは月額5ドル，10ドル，20ドルのプランがあります。一番安いプランでも，Twitterへの同時投稿やカスタムCSS，独自ドメイン，SSLが利用でき，WordPressからのインポートも旧URLからのリダイレクト込みでできるそうです。

図6　シンプルで簡単なブログサービス

図6　シンプルで簡単なブログサービス

今週の気になるWebネタ

NAVERまとめ終了 11年の歴史に幕 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2007/01/news081.html

NAVERまとめが今年の9月30日にサービスを終了すると発表されました。2009年にスタートし，2014年にはサイト全体で月間23億PVを達成と人気でした。

実はわたしもインセンティブ目当てで一時期まとめ記事を作っていました。言うほど儲かりませんでしたが，1記事何万ビューも見られることの快感はあったと思います。それほどサイト自体に集客力がありました。

ほとんど引用だけで成り立っている記事が多く，オリジナルの記事へのトラフィックもそれほど生んでなかったこともあり，アンチも多いサービスでした。健全な方向に行こうと努力していたようですが，勢いを取り戻すのは無理と判断したのでしょう。

Webテク, Webデザイン, Web広告, Twitter, ブログ, まとめサイト

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote