週刊Webテク通信

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

ネットで見かけた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でテキストをアニメーション表示するサービス

おすすめ記事

記事・ニュース一覧