週刊Webテク通信

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

ネットで見かけた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 シンプルで簡単なブログサービス

おすすめ記事

記事・ニュース一覧