週刊Webテク通信

2019年1月第4週号1位は、コンテンツの区切り方について、気になるネタは、Slack、ブランドデザインのリニューアル第1弾としてロゴ変更

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

1. Separating Content – Tap to Dismiss – Mediumhttps://medium.com/tap-to-dismiss/separating-content-3bb83b868a71

コンテンツの区切り方について解説した記事です。

  • タップできることがわかるなどインタラクティブ性からの区切り
  • 見た目のデザインとしての区切り
  • アイテムの区切り線について
  • 例外的な区切り
  • セクションの区切り
図1 コンテンツの区切り方について
図1 コンテンツの区切り方について

2. Should design tools code? – UX Collectivehttps://uxdesign.cc/should-design-tools-code-3d6c79d64ef6

デザイナーはコーディングを学ぶべきかについて、最近のツールの進化を受けての考察です。

  • 人気のUIプロトタイピングツールとなったPrincipleは、コーディングの知識をほとんど必要としない
  • Airbnbなどの会社は、デザイナーが紙にスケッチしたUIからほんの数秒でコードを書き出す内部ワークフローを開発した
  • Framer XやModulzなどの新しいツールはUI patternsをReactコンポーネントに変換できる
  • Hadron Appなどデザインとコーディングを同時に行える複数のビューを持ったツールが登場した

これらの変化から、デザイナーはデザインに専念できる状況になってきているようです。

図2 デザイナーはコーディングを学ぶべきか
図2 デザイナーはコーディングを学ぶべきか

3. Logo trends 2019: what you should look out for Design your way https://www.designyourway.net/blog/graphic-design/logo-trends/

ロゴデザインのトレンドについてまとめています。

  • 鮮やかな色と面白いコントラスト
  • デザインより機能を優先
  • 単純な幾何学的図形
  • 大胆な色
  • 伝統的なアートのテクニックで描く
  • シンプルな形
  • 平行四辺形
  • わずかなグラデーション
  • 金色
  • 過剰気味な色使い
  • 線形グラデーション
  • 境界線
  • 切り抜き
  • ノスタルジー
  • デザイン要素として句読点を使う
  • アウトライン
  • レスポンシブなロゴ
  • 建築物を取り入れる
  • 活気に満ちたエネルギッシュなデザイン
  • 比喩を使う
  • 実験的な技法
  • グリッドベース
  • 色のマスキングと重ね合わせ
  • モノグラムと組み合わせたシンプルなタイポグラフィ
  • 幾何学的図形
  • オーバーラップ効果
  • 色の変化とグラデーション
  • 創造的なレタリング
  • ネガティブスペースを使う
図3 2019年のロゴデザインのトレンド
図3 2019年のロゴデザインのトレンド

4. anime.js • JavaScript animation enginehttps://animejs.com/

JavaScriptによるアニメーションエンジンのanime.jsがバージョン3になりました。

サンプルは派手なものが多いですが、もちろんシンプルな移動、変形などのアニメーションにも使えます。

図4 JavaScriptによるアニメーションエンジン
図4 JavaScriptによるアニメーションエンジン

5. Free Photoshop Tools for Web Designers https://line25.com/articles/free-photoshop-tools-for-web-designers

ウェブデザインにPhotoshopを使う際に便利なツールをまとめた記事です。

Photoshopのワークフローをウェブデザイン向けに改善し、効率を高めるためのツール、プラグインやアクション、ヒントやコツなどを紹介しています。

図5 ウェブデザインにPhotoshopを使う際に便利なツールいろいろ
図5 ウェブデザインにPhotoshopを使う際に便利なツールいろいろ

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

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

Tint and Shade Generatorhttps://maketintsandshades.com/

指定した色をベースに、濃淡のバリエーションを生成するサービスです。色のHEX値を入力すると、明るい色、暗い色をそれぞれ10%刻みで生成します。

基本色をベースに、グラデーション、境界線、背景、影などに使う色を決める際に利用することを想定しており、数値的に正確に10%刻みで色を作っていることが特徴とのことです。

複数の色の値をスペース区切りで入力すれば、一度にカラーパレットを複数作ることができます。以前紹介したウェブデザイン用のカラーパレットを作る方法Building Your Color Paletteを実践する際に便利なサービスだと思います。

図6 色の濃淡のバリエーションを生成するサービス
図6 色の濃淡のバリエーションを生成するサービス

おすすめ記事

記事・ニュース一覧