週刊Webテク通信

2016年2月第2週号 1位は,Webデザインにおいて重要なデザインのバランスについて,気になるネタは,Facebook,12周年の2月4日を祝う「フレンズデー動画」を提供

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

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

1. Balance In Web Design And Why It Is Importanthttps://visualhierarchy.co/blog/balance-in-web-design-and-why-it-is-important/

Webデザインにおいて重要なデザインのバランスについて解説しています。

  • どのようにしてバランスを決めるか
  • 対称(シンメトリック)のバランス
  • 対称の分類(線対称/回転対称/並進対称)
  • 非対称のバランスとは
  • 放射状のバランスについて知っておくべきこと
  • モザイクのバランス
  • Webデザインにおけるバランス

バランスはWebデザインでの重要な原則の一つで,バランスが悪いと個々の要素が目立ってしまい,ユーザーがメッセージを受け取りにくくなるとのことでした。

図1 Webデザインにおけるバランスについて

図1 Webデザインにおけるバランスについて

2. Design Trend: Parallax With a Twist - Designmodohttp://designmodo.com/parallax-twist/

新しいデザイントレンドとして,ヒネリの利いた視差(パララックス)について紹介した記事です。

現在流行りの視差スクロールは,従来とは違い画面の概念がないところがポイントとのことです。スクロールとともに動的に背景色が変わり,アニメーションが動き,画面を移動する要素があり,現れたり消えたりする要素もあります。

紹介されている実際のサイトを訪れてみると,視差スクロールの最近の傾向が分かると思います。

図2 ヒネリの利いた視差スクロールについて

図2 ヒネリの利いた視差スクロールについて

3. Design trends: Flat Design 2.0 | Webdesigner Depothttp://www.webdesignerdepot.com/2016/02/design-trends-flat-design-2-0/

フラットデザインの進化形を「フラットデザイン 2.0」と称して解説した記事です。

フラットデザイン 2.0はマテリアルデザインとほぼ共通すると思うのですが,影やグラデーションを控え目ながらも使用することで,ユーザビリティを高めています。

図3 フラットデザインの進化形・フラットデザイン 2.0について

図3 フラットデザインの進化形・フラットデザイン 2.0について

4. UX Timeline, back to the past!http://uxtimeline.com/

いくつかの有名なオンラインツールのUXを時系列で振り返るサイトです。

サイトの歴史をスクリーンキャプチャで見ることができて,デザインの変遷を楽しめます。

図4 オンラインツールのUXを時系列で振り返れるサイト

図4 オンラインツールのUXを時系列で振り返れるサイト

5. 15 Beautifully Imperfect Free Brush Fontshttp://speckyboy.com/2016/02/04/free-brush-fonts/

最近海外では筆で手描きしたようなフォントが流行っているようで,その手のフリーフォントをまとめています。

こんな感じの日本語フォントもたくさんあるとうれしいのですが…。

図5 筆で手描きしたようなフリーフォントいろいろ

図5 筆で手描きしたようなフリーフォントいろいろ

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

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

Unique gradient generatorhttp://gradient.quasi.ink/

グラデーションを使った背景画像を生成できるWebサービスです。CSS3のグラデーションを使っているのではなく,画像をベースに生成しています。画像のごく一部を大きく表示することで,ブラウザの拡大表示のアルゴリズムによってグラデーションになるという仕組みです。

元にする画像は各種用意されていますが,自分でアップロードもできます。生成した画像はbase64エンコードされた状態でCSSに記述されているので,作ったグラデーションはCSSだけで設定できます。

キーボードの矢印キーで画像のどの部分を使うのか選べます。思い通りにグラデーションを作るのは難しいので,「R」キーを押してランダムに生成させ,気に入ったものを探すという使い方がよさそうです。

図6 グラデーションを使った背景画像を生成できるサービス

図6 グラデーションを使った背景画像を生成できるサービス

今週の気になるWebネタ

Facebook,12周年の2月4日を祝う「フレンズデー動画」を提供 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1602/04/news128.html

ときどきあっと言わせるツールを提供してくるFacebookですが,2月4日の12周年を祝い「フレンズデー動画」を作れるようになりました。自分と友達の写真を使い,写真を重ねていくような動画が生成されます。

フレンズデー動画の中に登場する選ばれた「友達」がその動画にコメントしたりして,盛り上がる仕掛けが見事でした。動画のクオリティも高く,写真のスライドショーの見せ方として標準装備してもらいたいくらいです。

ちなみにわたしは,Facebook上でたまに流行る診断系アプリなどはスルーするのですが,Facebook純正のものはなんでも試していました。しかし,このフレンズデー動画は「フレンズデー動画の作成に必要なコンテンツが不足しています」というエラーが出て何もできず寂しい思いをしています。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入