週刊Webテク通信

2018年4月第3週号1位は、デザインにグラデーションを使う10個の理由、気になるネタは、打倒LINEは可能なのか 「+メッセージ」導入の狙いを読み解く

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

1. 10 Reasons to Love (and Use) Gradients in 2018 | Webdesigner Depothttps://www.webdesignerdepot.com/2018/04/10-reasons-to-love-and-use-gradients-in-2018/

デザインにグラデーションを使う理由を10個解説した記事です。

フラットデザインを経て復活したカラーグラデーションの活用法を、サンプルと共に紹介しています。

  1. 背景に使うと目を引く
  2. 文字にグラデーションを使うと焦点が決まる
  3. グラデーションをかぶせると味のあるイメージになる
  4. 視点の移動を誘導する
  5. 記憶に残りやすくなる
  6. ブランドカラーを強調する
  7. 作るのが簡単
  8. 自然に感じる
  9. すばらしいビジュアルがなくてもイメージが作れる
  10. 流行っている
図1 デザインにグラデーションを使う10個の理由
図1 デザインにグラデーションを使う10個の理由

2. 5 Website Navigation Best Practices All Designers Should Followhttps://line25.com/inspiration/website-navigation-best-practices

ウェブサイトのナビゲーションで気をつけるべきことをまとめています。

  1. 訪問者が目的を果たすのを手助けする
  2. 今どこにいるかを常に知らせる
  3. 一般的なアイコンと用語を使う
  4. メニュー項目を7つ以上にしない
  5. コンテンツの量によってメニューを決める
図2 ナビゲーションで気をつけるべきこと
図2 ナビゲーションで気をつけるべきこと

3. 7 Tips for Using Background Textures in Web Design | Design Shackhttps://designshack.net/articles/graphics/tips-for-using-background-textures-in-web-design/

ウェブデザインで背景テクスチャを活用するための7つのヒントを紹介した記事です。

  1. シンプルで控え目に
  2. 大きく分かりやすく
  3. トレンドを取り入れる
  4. 画像を使う
  5. 色の変化を利用する
  6. グラデーションを使う
  7. アニメーションさせる
図3 背景テクスチャを活用するための7つのヒント
図3 背景テクスチャを活用するための7つのヒント

4. How and When to Create a Website with a Black Background Designhttps://kolosek.com/a-website-with-a-black-background-design/

黒い背景のウェブサイトをデザインする際のヒントや、どんなケースで有効かなどをまとめています。

読みにくい、信頼性が低く見られるなど黒い背景は使いにくいのですが、以下の場合には有効ではないかとのことです。

  • ポートフォリオサイト
  • デザイン事務所のウェブサイト
  • 独占的な製品のPR
  • 独創的ではないコンテンツ
図4 黒い背景のウェブサイトをデザインする際のヒント
図4 黒い背景のウェブサイトをデザインする際のヒント

5. Museum of Websites - Kapwinghttps://www.kapwing.com/museum-of-websites

有名サイトのデザインの歴史を振り返るギャラリーサイトです。Google、Amazon、Pinterestなどの昔のウェブデザインをまとめて見られます。

ウェブサイトのアーカーブで有名な「Wayback Machine」からの画像をまとめているようで、画面キャプチャ画像からWayback Machineへリンクしています。

図5 有名サイトのデザインの歴史を振り返るギャラリーサイト
図5 有名サイトのデザインの歴史を振り返るギャラリーサイト

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

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

oorjahttps://oorja.io/

oorjaはシンプルな共同作業用サービスです。ビデオチャット、チャット、一緒にゲーム、リッチテキストエディタ共有、コードエディタ共有の機能があり、それぞれをタブで切り替えられます。

SNS認証すると自分用のルームが作られるので、そのリンクで相手を招待します。最大人数はわからなかったのですが、紹介画像を見る限り3人での共同作業は可能なようです。レスポンシブデザインになっていて、スマホの縦長画面も考慮されています。

Chromeの拡張機能をインストールすると、ビデオチャットのときに画面共有が可能になって便利です。作った文書やチャットの内容などを保存する機能はないなど、もう一工夫ほしいところもありますが、まだベータ版ですし個人開発ということで今後に期待したいサービスです。

図6 ビデオチャット、チャットなどができる共同作業用サービス
図6 ビデオチャット、チャットなどができる共同作業用サービス

おすすめ記事

記事・ニュース一覧