週刊Webテク通信

2017年2月第3週号1位は、Bechanceに投稿されたデザインから2017年のトレンドを予想、気になるネタは、新しいメンバーを迎えるのにも一役買う「Dropbox Paper」

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

1. 2017 Design Trends Guide on Behancehttps://www.behance.net/gallery/47810259/2017-Design-Trends-Guide

2016年にBechanceに投稿されたデザインの傾向を元に、2017年のデザイントレンドを予想した記事です。

ちょっと長いですが22種類のトレンドを以下に掲載します。

  1. 半フラットデザイン
  2. シネマグラフ
  3. もっと3D
  4. アニメーション
  5. ランディングページ
  6. 幾何学的な図形、パターン、線、
  7. 勇気のある配色
  8. 革新的なスクロールと視差スクロール
  9. 色の変化
  10. モバイルブラウジング(レスポンシブデザイン)
  11. オリジナルで制作したグラフィックスやイラスト
  12. グリッドにとらわれない不規則なレイアウト
  13. ストーリーテリング
  14. 遅延ロード
  15. 分割されたコンテンツ
  16. フルスクリーンのフォーム
  17. どこにでもビデオを使用
  18. SEOを重視
  19. 隠れたナビゲーション
  20. 細部に焦点を当てたデザイン
  21. ロゴデザインのトレンド(として12項目紹介しています)
  22. タイポグラフィのトレンド(として8項目紹介しています)
図1 Bechanceに投稿されたデザインから2017年のトレンドを予想
図1 Bechanceに投稿されたデザインから2017年のトレンドを予想

2. 7 unique design decisions | Webdesigner Depothttp://www.webdesignerdepot.com/2017/02/7-unique-design-decisions/

独創的な手法を用いたWebデザインの実例を紹介しています。

  1. 変わったカルーセル
  2. グリッドから外れたデザイン
  3. 固定されたレイアウトで写真だけがスクロールする
  4. 商品のいろんな角度からの写真を一目で見られるような工夫
  5. 社員が登場する人物写真を使う
  6. ちょっとしたアニメーションの利用
  7. 地図の統合
図2 独創的な手法を用いたWebデザインの実例7選
図2 独創的な手法を用いたWebデザインの実例7選

3. Excercise Caution When Using These Web Design Trendshttps://speckyboy.com/excercise-caution-using-web-design-trends/

使用するときに気をつけた方がいいWebデザインのトレンドについてまとめた記事です。

以下の項目について、気をつけるべきことを解説しています。

  • 不十分なホワイトスペース
  • ハンバーガーメニュー
  • トップページのカルーセル(スライドショー)
  • ポップアップ
  • 無限スクロールとフッターコンテンツの組み合わせ
  • 読み込みが遅い
  • 不必要に複雑なタイポグラフィ
  • フローティングボタンなどページの上に浮いている要素
  • 視差スクロール
図3 使用するときには気をつけるべきWebデザインのトレンド
図3 使用するときには気をつけるべきWebデザインのトレンド

4. HTML & CSS Is Hard | A friendly web development tutorialhttps://internetingishard.com/html-and-css/

HTMLとCSSについて、全くの初心者が学ぶための無料のチュートリアルです。図やダイアグラムのクオリティが高く、それらを見ていくだけでも内容が頭に入ってきます。

基礎的なことをあらためて確認するのもいいですし、人に教える上での教え方の参考にもなるでしょう。

図4 HTMLとCSSについて、全くの初心者向けに細かく解説
図4 HTMLとCSSについて、全くの初心者向けに細かく解説

5. 77 CSS Formshttp://freefrontend.com/css-forms/

フォームをHTML+CSSでコーディングした例を大量にまとめた記事です。

コード共有サイトのCodePenからコードを読み込むようになっているので、その場でCSSを確認したり編集してみることも可能です。

図5 フォームのコーディング例を大量に紹介
図5 フォームのコーディング例を大量に紹介

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

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

Scaley.io - Super simple image processing and deliveryhttps://scaley.io/

Scaley.ioは、画像を加工・生成するサービスです。このサービスで生成した画像を、直リンクでWebページに貼ることができます。キャッシュを利用したCDNによる画像配信を無料プランでも利用可能で、画像の読み込み元がhttpsになるところもポイントです。

「i.scaley.io/(処理内容)/(画像URL⁠⁠」といったURLで加工ができ、処理内容の部分には「300×200」⁠300×200pxにリサイズ&切り抜き)⁠200-min」⁠短い辺が200px)のような処理内容が入ります。回転・反転・ばかしなども加工や複数の処理の同時適用もできるので、柔軟性のあるサムネイル作成に役立つはずです。

無料プランはサインアップ無しで利用でき、月2,000画像まで処理できる(ドメイン単位で数をカウントするのでしょう)ようになっており、画像点数やドメイン数によって3段階の有料プランが用意されています。

図6 画像を加工・生成してWebページに貼れるサービス
図6 画像を加工・生成してWebページに貼れるサービス

おすすめ記事

記事・ニュース一覧