週刊Webテク通信

2017年10月第1週号1位は、暗い色のUIを使うことの良い点と悪い点、気になるネタは、実名制Q&Aサイト「Quora」日本語版β公開

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

1. Dark UIs. The Good and the Bad. Dos and Don’ts. | Toptalhttps://www.toptal.com/designers/ui/dark-ui

暗い色のUIを使うことの良い点と悪い点、すべきこととしてはいけないことをまとめた記事です。

暗いUIを使っても良い場合
  • ブランドのカラースキームとマッチするとき
  • デザインがミニマルでコンテンツの種類が少ないとき
  • 夜に利用するエンターテインメントアプリのように内容と用途が適している場合
  • 長い時間使用する解析ページなどで目の負担を減らす
  • ミステリーのような内容で感情を呼び起こすため
  • 印象的で劇的な外観を作り出すため
  • 高級感と品位を作り出すため
  • 見た目の優先順位を付けるため
使わない方がいい場合
  • テキストが多い場合
  • 1画面に色々なコンテンツが一緒に表示される場合
  • たくさんのフォーム、コンポーネント、ウイジェットが使われたBtoBのアプリケーション
  • 幅広い色が使われている場合
図1 暗い色のUIを使うことの良い点と悪い点
図1 暗い色のUIを使うことの良い点と悪い点

2. Top Prototyping Tools You Should Use to Save Timehttps://line25.com/ui-ux-design/top-prototyping-tools-use-save-time

時間短縮にも役立つプロトタイピングツールをまとめた記事です。

プロトタイピングが重要な理由もまとめてありました。

  1. プロトタイプを段々と進化させていくことはデザインのチェックを手助けする
  2. うまくいくもの、うまくいかないもの、何がうまくいってないのかをプロトタイプは見せてくれる
  3. 本番に近いプロトタイプは、サイトのUXに悪影響を及ぼす可能性のある問題の発見と解決に役立つ
  4. プロトタイプはデザイン確認のための共有方法として有効
図2 プロトタイピングツール紹介とプロトタイプの重要性の解説
図2 プロトタイピングツール紹介とプロトタイプの重要性の解説

3. CSS Grid PlayGround | Terminology | Mozillahttps://mozilladevelopers.github.io/playground/

CSSグリッドレイアウトについての入門的な内容です。

Mozillaが提供しているコンテンツで、Firefoxのデベロッパーツールを使ってCSSグリッドレイアウトのデバッグをする方法も解説しています。

図3 Mozillaが提供するCSSグリッドレイアウト入門
図3 Mozillaが提供するCSSグリッドレイアウト入門

4. 10 Super Useful Code Generators for Web Designershttps://speckyboy.com/code-generators-web-designers/

CSSやJavaScriptなどのコードジェネレーターを紹介しています。

CSSのメディアクエリの設定を簡単に記述するものや、レスポンシブなグリッドレイアウトのテンプレートを作るものなど、便利なジェネレーターがいろいろと掲載されていました。

図4 便利なコードジェネレーターいろいろ
図4 便利なコードジェネレーターいろいろ

5. 10 Inspirational Websites with Angled Graphicshttp://www.webdesigndev.com/10-inspirational-websites-with-angled-graphics/

斜めになったグラフィックを使ったウェブデザインを10個紹介しています。

大きなタイポグラフィと斜めの線がウェブサイトをより目立たせるとのことで、斜めの要素をうまく使ったウェブデザインの実例を確認できます。

図5 斜めのグラフィックを使ったウェブデザインのギャラリー
図5 斜めのグラフィックを使ったウェブデザインのギャラリー

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

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

Good Web Designhttp://www.goodweb.design/

ウェブデザインをパーツ毎に見られるギャラリーサイトです。ランディングページやウェブサービスのトップページのような1ページで完結しているページをターゲットとしています。

以下の項目ごとにデザインの実例を閲覧できます。

  • ナビゲーション
  • ヒーローイメージ
  • 機能紹介
  • 社会的な信頼の裏付け要素(メディア掲載や利用者の声)
  • 値段表
  • コールトゥアクション(ボタンなど行動喚起の要素)
  • FAQ
  • フッタ

パーツ画像をクリックするとページ全体を画像で確認できます。また、各パーツの右下の「source」ボタンからそのサイトにリンクしています。

ランディングページに必要な要素を確認しつつ、デザインのインスピレーションを得られる便利なサービスだと思います。

図6 ウェブデザインをパーツ毎に見られるギャラリーサイト
図6 ウェブデザインをパーツ毎に見られるギャラリーサイト

おすすめ記事

記事・ニュース一覧