週刊Webテク通信

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

ネットで見かけた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のテーマを簡単に作れるサービス

おすすめ記事

記事・ニュース一覧