週刊Webテク通信

2017年1月第4週号1位は、シンプルなデザインのための7つのルール、気になるネタは、Slackにスレッド機能 複数の会話が分かりやすく

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

1. 7 Rules for Creating a Simple Design | Design Shackhttps://designshack.net/articles/graphics/7-simple-design-rules/

シンプルなデザインのための7つのルールを紹介しています。

  1. 1つのページに1つの目的を設定する
  2. 2つのフォントファミリーしか使わないことにこだわる
  3. 一貫性を持って整列させる
  4. 階層構造を確立する
  5. 要素間のスペースを十分に取る
  6. コントラストを上げる
  7. 一貫性を持ったアイコンと要素を使う

ユーザーが疑問を持たず複雑な指示なしに直感的に使えれば、シンプルデザインだからといって面白い要素やユーザーインターフェイスの機能を減らす必要はないとのことです。

図1 シンプルなデザインのための7つのルール
図1 シンプルなデザインのための7つのルール

2. 4 Beautifully Simple Homepage Designs - SpyreStudioshttp://spyrestudios.com/4-beautifully-simple-homepage-designs/

シンプルで素晴らしいホームページデザインの実例集です。そのブランドを効果的に伝えているデザインのサイトを4つ掲載しています。

デザインやインタラクションに凝っているにも関わらず、わかりやすいインターフェイスという意味で「シンプル」なサイトが揃っていました。

図2 シンプルで素晴らしいホームページデザインの実例
図2 シンプルで素晴らしいホームページデザインの実例

3. How Designers Should Think About SVG – Design + Sketch – Mediumhttps://medium.com/sketch-app-sources/how-designers-should-think-about-svg-b2b92efc4d77#.37hpp59c3

SVGに対するデザイナーの考え方をまとめた、⁠SVGのススメ」といった感じの記事です。

  • SVGはなぜ素晴らしいのか
  • ビットマップ画像とどう違うのか
  • SketchからSVGを書き出す方法
  • SVGを使う上でのヒント

といった項目で、SVGについて解説しています。

図3 SVGについての解説記事
図3 SVGについての解説記事

4. 14 WordPress Themes to Getting 2017 off to a Good Start - Hongkiathttp://www.hongkiat.com/blog/wordpress-themes-getting-2017-off-good-start/

素晴らしいWordPressのテーマを14個紹介しています。

良いテーマを選ぶ上で、以下の項目を考慮したとのことです。

  • SEOのための機能を持つ
  • カスタマイズがしやすい
  • 優れたサポート
図4 素晴らしいWordPressのテーマ14選
図4 素晴らしいWordPressのテーマ14選

5. 20 Inspirational Dashboard Designs - noupehttp://www.noupe.com/design/20-inspirational-dashboard-designs.html

ダッシュボードデザインのギャラリーです。オンラインサービスなどでの、ログインしたあとの管理画面を作るときの参考になります。

実際にコーディングされたサイトではなく静止画レベルのものばかりですが、デザインの方向性やツールの配置などを考えるヒントになるでしょう。

図5 ダッシュボードデザインのギャラリー
図5 ダッシュボードデザインのギャラリー

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

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

The SVG Font Machine | Glyphterhttps://glyphter.com/

Glyphterは、SVGファイルを登録して独自のアイコンフォントを作成するサービスです。自分で作ったSVGファイルだけでなく、あらかじめ用意されているアイコンも利用できます。

作ったアイコンフォントをダウンロードすると、フォントを読み込ませる設定のCSSファイルも付いてきます。ユーザー登録なしで作成からダウンロードまでできるので、気軽に使えるところもメリットだと思います。

サイトの制作途中でアイコンフォントにアイコンを追加するケースは多いと思いますが、無料のユーザー登録をすればフォントを登録していつでも編集できます。無料プランでは1つのフォントしか扱えませんが、有料プランにすると数の制限なく複数のフォントを管理できるようになります。

図6 SVGから独自のアイコンフォントを作れるサービス
図6 SVGから独自のアイコンフォントを作れるサービス

おすすめ記事

記事・ニュース一覧