週刊Webテク通信

2018年4月第2週号1位は、ボタンのステータス(状況)よるデザインのヒント、気になるネタは、「Alexa」、決済機能「Amazon Pay」米非営利団体への寄付が可能に

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

1. Designing Button States - Cloud Fourhttps://cloudfour.com/thinks/designing-button-states/

ボタンのステータス(状況)による変化をどうデザインするかについて、良い例、悪い例を挙げて解説しています。

標準時/ホバー時/押せないときなどの状況を正しく伝えるためのヒントがまとめられていて参考になります。

図1 ボタンのステータス(状況)によるデザインのヒント
図1 ボタンのステータス(状況)によるデザインのヒント

2. 25 Best Responsive Business Website Design Exampleshttps://business.tutsplus.com/articles/best-responsive-business-website-design-examples--cms-30734

レスポンシブデザインの企業サイトの良い例を25サイト紹介しています。

見た目が素晴らしいレスポンシブなウェブサイトを作るためのヒントがまとめられていました。

  • 魅力的なデザイン
  • 最適化された画像
  • ライトボックス(画像クリックでの全面表示)をモバイル端末では無効にする
  • 全ての端末でフォームのフィールドの大きさをテストする
  • ポップアップをモバイル端末では無効にする
  • レスポンシブなシェアボタンを使う
図2 レスポンシブデザインの企業サイトの良い例いろいろ
図2 レスポンシブデザインの企業サイトの良い例いろいろ

3. 3 Essential Design Trends, April 2018 | Webdesigner Depothttps://www.webdesignerdepot.com/2018/04/3-essential-design-trends-april-2018/

最近のデザイントレンドを3つ紹介しています。

  1. 泡&どろっとしたかたまり
  2. 浮いている四角形
  3. 文字の形に切り取られた画像
図3 最近のデザイントレンド
図3 最近のデザイントレンド

4. Try the most efficient UX/UI Tools in 2018 | Web Resources | WebAppershttp://www.webappers.com/2018/04/05/try-efficient-uxui-tools-2018/

最近やらたと増えてきたUX/UIデザインツールを7つ紹介した記事です。

共同作業、プロトタイピング、インタラクティブデザイン、ユーザーテストの手助けになるようなツール類がまとめられています。

図4 UX/UIデザインツールのまとめ
図4 UX/UIデザインツールのまとめ

5. Mockup Photos - High quality mockup templates from around the worldhttps://mockup.photos/

スマホやPCの画面に自分の作った画像を入れ込んだ、ハメコミ合成写真を作れるサービスです。デジタルデバイスだけではなく、ノートなどアナログな写真素材もあります。

フリーの素材もそれなりに揃っていますが、月額19ドルの有料プランにすると450近くの素材が使えます。この手の画像を毎月作るニーズはそんなに多くないと思うので、単品購入もできると良いかと思いますが…。

図5 デジタルデバイスなどのハメコミ合成画像を作れるサービス
図5 デジタルデバイスなどのハメコミ合成画像を作れるサービス

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

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

Logobook - Discover the worlds finest logos, symbols and trademarkshttp://www.logobook.com/

Logobookはロゴ、シンボル、トレードマークをいろいろな切り口で探せるサービスです。モノクロのマークが大量に集められています。

文字、形、もの、自然、ビジネスといった大カテゴリに分かれており、それぞれの小カテゴリからロゴを絞り込むことができます。たとえば、⁠A」をモチーフにしたロゴ、三角形を使ったロゴ、鳥をモチーフにしたロゴ、ホテルのロゴ、スポーツ関連企業のロゴ、などの探し方ができます。

クオリティが高いものばかりではない印象を受けますが、いろいろなカテゴリでマークがまとまっていて面白いです。眺めていると、ほとんどのパターンは出尽くしているように感じてきますが…。日本のロゴやマークを集めたこういったサイトがあると便利だと思いました。

図6 ロゴ、シンボル、トレードマークをいろいろな切り口で探せるサービス
図6 ロゴ、シンボル、トレードマークをいろいろな切り口で探せるサービス

おすすめ記事

記事・ニュース一覧