週刊Webテク通信

2015年7月第1週号 1位は,ナビゲーションの新たなトレンド「フルスクリーンメニュー」,気になるネタは,TumblrがGIFの検索と全画面表示ができる「Tumblr TV」をローンチ

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

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

1. Fresh Trend in Navigation: Full-Screen Menus - Designmodohttp://designmodo.com/full-screen-menus/

ナビゲーションの新たなトレンド,⁠フルスクリーンメニュー」について実例を元に紹介しています。

TOPページ全体が何分割かのメニューになっているものや,ボタンを押すとページ全体にメニューが覆い被さるものの大きく2パターンに分かれているようです。

最近よく使われている隠れたメニューとミニマルなナビゲーションバーは全てのサイトに合うわけではないとのことで,一方フルスクリーンメニューはほぼ全てのプロジェクトに適していると解説してありました。

図1 フルスクリーンメニューの実例を紹介

図1 フルスクリーンメニューの実例を紹介

2. Trendy Web Color Palettes and Material Design Color Schemes & Toolshttp://www.awwwards.com/trendy-web-color-palettes-and-material-design-color-schemes-tools.html

WebデザインのギャラリーサイトAwwwardsによる,大量のサイトのカラーパレットを分析した結果をもとにした,カラーパレットのトレンドに関する記事です。

以下の3つの項目に分けて紹介しています。

  1. ここ数ヶ月でよく使われているカラーパレット
  2. マテリアルデザインのカラーに関する理論とツール
  3. カラーパレットを作るためのツール

図2 膨大なサイトから導いたカラーパレットのトレンド

図2 膨大なサイトから導いたカラーパレットのトレンド

3. Designing for a Juicier Web - Mediumhttps://medium.com/@UserJourneys/designing-for-a-juicier-web-5549c6eb6008

「ジューシー」なWebデザインについての記事です。⁠ジューシー」とはゲームデザインの用語で,ユーザーの入力より多くのインタラクション(相互作用)を返すということで,つまりは楽しい経験をさせることだそうです。

モバイルアプリを中心に,アニメーションして現れるボタンなど,触っていて楽しいユーザーインターフェイスが流行ってきており,そういったものが「ジューシー」なWebデザインということです。

そういう動きのあるインターフェイスのモックアップを作る際に,Adobe After Effectsを使ってアニメーションを試作するのがオススメといった内容も紹介されていました。最近After Effectsを使ってWebサイトの動きを試作するという記事をよく見かけますね。

図3 ⁠ジューシー」なWebデザインについて

図3 「ジューシー」なWebデザインについて

4. What Does The Future Hold For Adobe Fireworks?http://marketblog.envato.com/opinion/future-adobe-fireworks/

Adobe CC 2015が最近リリースされましたが,開発が終了したAdobe Fireworksを取り上げた記事です。

優れた拡張機能もあり,まだまだ現役として使えるとのことで,拡張機能を探すのに役立つ4つのリンクが紹介されています。

セキュリティアップデートやバグ修正がなくなり,いつかは使えなくなる心配はあるものの,現状は使い続けつつ,代替ツールにも目を光らせておく必要があるだろうという結論でした。

図4 Adobe Fireworksの将来について

図4 Adobe Fireworksの将来について

5. Showcase of 20 Brilliant User Interface Designshttp://line25.com/inspiration/brilliant-interface-designs

ユーザーインターフェイスデザインのギャラリーです。モバイルとデスクトップの両方でのアプリやWebデザインのインターフェイスをまとめています。

アプリの操作は動画で紹介されているものへのリンクも多く,分かりやすいです。

図5 ユーザーインターフェイスデザインのギャラリー

図5 ユーザーインターフェイスデザインのギャラリー

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

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

Bootstrap Magic : Generate your own bootstrap theme quickly and easilyhttps://pikock.github.io/bootstrap-magic/

Bootstrap Magicは,Bootstrapのテーマを簡単に作れるサービスです。Bootstrapがあらかじめ用意している要素の,色やサイズを調整するためのツールとなっています。

Bootstrapのサイトにあるカスタマイズのページと同様に各パラメーターをテキストで変更していくのですが,色はカラーピッカーで選ぶことができます。そして,各要素をプレビューできるところが,本家のカスタマイズページにはない便利なところです。CSSだけでなく,LESSのファイルでも保存できるところもいいですね。

左下の「Apply」を押すと変更が適用され「Auto」をチェックしておくと自動で変更されます。わたしの環境では,ChromeではこのApplyが効かず,Safariでは大丈夫でした。

図6 Bootstrapのテーマを簡単に作れるサービス

図6 Bootstrapのテーマを簡単に作れるサービス

今週の気になるWebネタ

TumblrがGIFの検索と全画面表示ができる「Tumblr TV」をローンチ | TechCrunch Japanhttp://jp.techcrunch.com/2015/06/26/20150625tumblr-launches-tumblr-tv-a-gif-search-engine-with-a-full-screen-viewing-mode/

Tumblrから,GIFアニメを見て楽しむ「Tumblr TV」というサービスが登場しました。先日登場した,GIFを探して記事に挿入する機能とベースは同じだと思います。

検索結果のGIFが順番に再生されるだけなのですが,なかなかよくできています。検索結果待ちのときにテレビの砂嵐状態になるところや,再生しているGIFを背景にも表示することで余白をうまく埋めているところなど,結構考えて作られているなと感じました。

何回かループしてから次のGIFアニメに移るところもいいですね。Vineの検索結果は1回再生ごとに次の動画に行ってしまうのですが,ループするところが面白いというのもあるので,Tumblr TVの数回ループしてから次に行く仕様はいいなと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入