週刊Webテク通信

2013年5月第3週号 1位は,スタートアップのサイトに共通するWebデザインのトレンド,気になるネタは,Adobe,Web画像ツール「Fireworks」終了へ

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

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

1. Web Design Trends Found in Startup Homepages - Treehouse Bloghttp://blog.teamtreehouse.com/web-design-trends-found-in-startup-homepages

スタートアップのサイトから見つけた,Webデザインのトレンドについて解説しています。

Webサービスなどを提供するスタートアップ企業のサイトの多くに共通する要素として,次のような項目が紹介されていました。

  • 固定されたナビゲーション
  • アイコンを使った機能紹介
  • アニメーションで紹介する利用方法や直接試用できる機能
  • お客様の声の掲載や紹介記事へのリンク
  • 拡張されたフッタ

図1 スタートアップのサイトに共通するWebデザインのトレンド

図1 スタートアップのサイトに共通するWebデザインのトレンド

2. Fireworks後のツールとワークフロー : couldhttp://www.yasuhisa.com/could/article/fireworks-and-workflow/

Fireworksの開発終了を受けての記事です。代替候補となりそうなツールの紹介と,ワークフローをもっと柔軟にしようということが書かれています。

グラフィックツールでまずカンプを作るというワークフローを考え直そうということと,Fireworksの開発終了とはたしかにリンクしているように感じました。

最終的には,機能が特化された小さなツールをワークフローに合わせて選ぶという考え方を推奨しています。

また,PhotoshopでWebデザインを行う場合の設定方法に触れた以下の記事も参考になります。

図2 スタートアップのサイトに共通するWebデザインのトレンド

図2 スタートアップのサイトに共通するWebデザインのトレンド

3. Metro Style Scripts and Tutorials for Web Developershttp://inspiretrends.com/metro-style-scripts-and-tutorials-for-web-developers/

メトロスタイルのWebデザインのためのスクリプトやチュートリアルをまとめた記事です。

Windows 8風のUIを実現するためのjQueryライブラリなどが紹介されています。

図3 メトロスタイルのWebデザインのためのスクリプトやチュートリアルいろいろ

図3 メトロスタイルのWebデザインのためのスクリプトやチュートリアルいろいろ

4. 50 Sites with Pastel/Washed-Out Color Schemeshttp://speckyboy.com/2013/05/02/50-sites-with-pastelwashed-out-color-schemes/

パステルカラー,彩度が抑えめな色の配色をベースとした,Webデザインのギャラリーです。

カラフルな色使いとの相性がいい,フラットデザインのサイトも多数紹介されていました。

図4 パステルカラー,彩度が抑えめな色を使ったサイトのギャラリー

図4 パステルカラー,彩度が抑えめな色を使ったサイトのギャラリー

5. Web Design Trends of Video Backgroundshttp://smashinghub.com/web-design-trends-of-video-backgrounds.htm

ウィンドウいっぱいの動画が背面に配置されたWebサイトを各種紹介しています。

いきなり音がなるサイトもあるので,職場で見る場合はご注意を。最初は無音で,スピーカーアイコンを押すと音が出るサイトが気が利いていると個人的には思います。

図5 動画が背面に配置されたWebサイトいろいろ

図5 動画が背面に配置されたWebサイトいろいろ

そのほか,最近の記事の中から,便利なツール関連の話題を紹介します。

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

Shape Shifterhttp://www.kennethcachia.com/shape-shifter/

文字を入力すると,電車の電光掲示板のような粗いドット(丸)が集合してその文字が表示されます。ドットが集まる様子や揺れるような動きがかわいいです。Canvasで描写しています。

右上の「?」から表示されるヘルプで,機能紹介を見ることができます。カウントダウンや時計表示,アイコンフォントの表示などもできます。

「|」で区切って文字を入力すると,順番にアニメーションされるのが楽しいです。URLの末尾に「?a=」に続いて表示させたいテキストを入れると,自分の作ったアニメーションなどを人と共有することが可能です。

図6 Canvasでテキストをアニメーション表示するサービス

図6 Canvasでテキストをアニメーション表示するサービス

今週の気になるWebネタ

Adobe,Web画像ツール「Fireworks」終了へ - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1305/07/news030.html

Adobe,クリエイティブ製品群の定額制「Creative Cloud」への移行を発表 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1305/07/news029.html

Adobe Creative Suiteはバージョン6で終了になり,今後のクリエイティブツール類は定額制の「Creative Cloud」としてのみ提供されると発表されました。DTP業界ではCreative Cloudへの移行がトピックなんでしょうが,Web業界ではFireworks開発中止の話題で持ちきりです。

「Photoshop CS」から「Photoshop CC」のように各製品はCCとなるわけですが,FireworksはCCに移行しないツールのひとつとなっているそうです。Adobeのブログで発表された内容によると,今後もCreative Cloudファミリーのツールとして入手できるし,バグ修正やセキュリティアップデートは行われるようで,しばらくは使い続けられそうです。

Web業界は技術のトレンドの変化も激しいですし,機能をしぼったモジュール化されたツールをどんどん提供していくほうが確かにいいのでしょう。PhotoshopとIllustratorのWeb向け機能の強化と,そういったモジュール化されたツールとの組み合わせで,Fireworksの穴は埋められるのかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入