週刊Webテク通信

2017年4月第2週号1位は、コンテンツを台無しにしてしまうデザインの間違い7選、気になるネタは、Macのコーディング用テキストエディタ「Espresso」v3として帰ってきた!

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

1. 7 Design Mistakes That Can Ruin Your Content | Design Shackhttps://designshack.net/articles/inspiration/7-design-mistakes-that-can-ruin-your-content/

コンテンツを台無しにしてしまうデザインの間違いを7つまとめた記事です。

  1. 手抜きのタイポグラフィ
  2. すべてが同じサイズ
  3. 階層構造を忘れている
  4. 基本を無視している
  5. 文字が多すぎる
  6. 解像度の低い画像ばかり
  7. 仕掛けが多すぎる

それぞれに対し、良い例のサイトが1つずつ紹介されています。

図1 コンテンツを台無しにしてしまうデザインの間違い7選
図1 コンテンツを台無しにしてしまうデザインの間違い7選

2. Bad Design vs. Good Design: Learn From The Worst Web Designshttp://anthonynealmacri.com/bad-design-vs-good-design-learn-worst-web-designs/

こちらは、悪いデザインと良いデザインとを比較して、悪いデザインからウェブデザインを学ぼうという記事です。

以下の3項目について、悪い例&良い例と解説が載っています。

  1. 情報が多すぎる
  2. 見た目ですぐにわからないナビゲーション
  3. アニメーションし過ぎ
図2 悪いデザインからウェブデザインを学ぶ
図2 悪いデザインからウェブデザインを学ぶ

3. 3 trends in landing page design – Muzli -Design Inspirationhttps://medium.muz.li/3-trends-in-landing-page-design-5cf900f2c90f

ランディングページのトレンドを実例とともに紹介しています。

  1. 斜めのレイアウト
  2. 波打った形
  3. ブロック毎の区切りが明確ではない

特に解説などはないのですが、紹介されているそれぞれのページのクオリティが高く参考になります。

図3 ランディングページのトレンド3選
図3 ランディングページのトレンド3選

4. 20 Playful Click & Hold, Drag & Gesture Interactions in Web Designhttps://www.awwwards.com/click-and-hold-drag-and-gesture-interactions-in-web-design.html

クリック長押しやドラッグ&マウスジェスチャーで操作する、インタラクション性の高いサイトを多数掲載しています。

凝った面白い動きをするサイトばかりでウェブデザインの可能性を感じられますが、真似をするにはかなりハードルが高そうです。

図4 インタラクション性の高いサイトいろいろ
図4 インタラクション性の高いサイトいろいろ

5. 15 Interesting JavaScript and CSS Libraries for April 2017 | Tutorialzinehttp://tutorialzine.com/2017/04/15-interesting-javascript-and-css-libraries-for-april-2017/

JavaScriptとCSSのライブラリをまとめています。ElementというVue.js 2.0ベースのUIフレームワークが良さそうです。

Vue.jsやReactがらみのものが多く、フロントエンドのJavaScriptのトレンドが変わったことを今さらながら実感しました。

図5 JavaScriptとCSSのライブラリまとめ
図5 JavaScriptとCSSのライブラリまとめ

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

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

Color Tool - Material Designhttps://material.io/color/

「Color Tool⁠⁠ は、マテリアルデザインのアップデートとともに登場した、マテリアルデザイン向けカラーパレットを作るためのGoogleが提供するツールです。

プライマリーカラーとセカンダリーカラーを選ぶと、配色は自動的に作られます。また、プライマリー/セカンダリーカラーの上に載った場合の文字色も指定できます。

マテリアルデザインの6種類のUI上での見た目がすぐに確認できて便利です。アクセシビリティについて診断する機能もあり、文字の可読性についての判断と、何パーセントの透明度までOKかをアドバイスしてくれます。

図6 マテリアルデザイン向けカラーパレット作成ツール
図6 マテリアルデザイン向けカラーパレット作成ツール

おすすめ記事

記事・ニュース一覧