週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけた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ページに貼れるサービス

今週の気になるWebネタ

新しいメンバーを迎えるのにも一役買う「Dropbox Paper」 - Dropbox Business Blog | マイナビニュースhttp://news.mynavi.jp/news/2017/02/08/375/

正式リリースされたDropbox Paperについて,共同作業の便利さを中心に紹介した記事がありました。わたしも今,Dropbox Paperに注目しています。

Google ドキュメント,Evernote,iOS/Macのメモアプリなど,同じジャンルのツールはいろいろありますが,共同作業の機能をはじめうまく独自性を出しているように感じました。

なんといっても,使っていて気持ちがよく,予測した操作が期待を裏切らないUIが素晴らしいです。そのへんは,Slackに通じるものがあるように感じました。Paperで作ったページを,そのままWebサイトとして公開するサービスが出てくるような予感がします。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入