週刊Webテク通信

2014年8月第2週号1位は、Googleによるモバイルサイト設計25の指針、気になるネタは、これが新Foursquareだ―チェックインを分離してローカルスポット推薦サービスに生まれ変わる

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

1. Inside AdSense : モバイル サイト設計 25 の指針http://adsense-ja.blogspot.jp/2014/08/25.html

Googleでユーザビリティテストを行った結果をまとめた、⁠モバイルサイト設計の25の指標」がPDFで提供されています。

ユーザーの満足度とコンバージョンの促進という観点からの指標がまとめられており、この記事ではその中から、以下の7つのヒントが掲載されていました。

  1. メニューは短く簡潔に
  2. トップページには簡単に戻れるように
  3. すぐに目につく場所にサイト内検索を設置
  4. シンプルな入力方法を提供する
  5. 拡大・縮小いらずで見やすく表示
  6. 最適な画面の向きを知らせる
  7. 別のウィンドウに移動させない

また、PDF版では、以下の項目に分けて25個の指標と5つのチェック項目が紹介されています。

  • ホームページとサイトの操作性
  • サイト内検索
  • コマースとコンバージョン
  • フォーム入力
  • モバイルサイトの特性と使いやすさ
  • 技術的なチェック項目
図1 モバイルサイト設計25の指針
図1 モバイルサイト設計25の指針

2. Useful Adobe Fireworks Resources: Tutorials, Articles And Freebies (Part 2) | Smashing Magazinehttp://www.smashingmagazine.com/2014/08/07/useful-adobe-fireworks-resources-tutorials-articles-freebies-part2/

Adobe Fireworksのチュートリアルや、役立つ情報、素材などをまとめた記事です。

  • チュートリアル
  • テクニック記事や他のツールとの比較記事
  • テンプレートやスタイルなどの素材

の項目に分けてリンクが紹介され、最後に以下の2項目で締めていました。

  • Fireworksにはまだ価値があるか
  • 代替となりそうなツールの紹介
図2 Fireworksのチュートリアルや情報・素材
図2 Fireworksのチュートリアルや情報・素材

3. A collection of useful tools for a resourceful web designerhttp://www.webresourcesdepot.com/a-collection-of-useful-tools-for-a-resourceful-web-designer-3/

Webデザインに役立つツールや素材などを多数紹介しています。

Webサイトビルダー、WordPressテーマ、デザイン素材、フォント、ストックフォト、アイコン、ECサイト構築ソリューションなどが掲載されていました。

図3 Webデザインに役立つツールや素材
図3 Webデザインに役立つツールや素材

4. Big Responsive Photo Background Websites ‐ 25 Web Design Examples | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2014/08/websites-with-big-responsive-photo-background/

ウィンドウ幅に合わせて可変する背景画像を使ったWebサイトのギャラリーです。

ウィンドウ幅一杯の画像を使うことで、ユーザーの目を惹きつけ、そのWebサイトのデザインに没頭させることができるとのことです。

図4 レスポンスブな背景画像を使ったWebサイトのギャラリー
図4 レスポンスブな背景画像を使ったWebサイトのギャラリー

5. 12 Best Color Palette Generator | SmashingApps.comhttp://www.smashingapps.com/2014/08/07/12-best-color-palette-generator.html

オンラインのカラーパレット作成ツールを多数紹介した記事です。

既に出尽くした感はありますが、定番のものを含め多数のツールが紹介されています。

図5 オンラインのカラーパレット作成ツールいろいろ
図5 オンラインのカラーパレット作成ツールいろいろ

そのほか、最近の記事の中から、気になるサービスやツールの記事を紹介します。

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

PNGify Me | Icon Creator, Generate and Download Icons, Mobile Iconshttp://pngify.me/

豊富に用意されたアイコン素材を元に、背景色やサイズをカスタマイズしたアイコンを作れるサービスです。作成したアイコンは、背景が透過したPNG形式でダウンロードできます。

アイコンを選び、サイズ(16~256pixelまでの6段階⁠⁠、背景画像(丸か四角か⁠⁠、アイコンの色と背景色、アイコンと背景画像との間隔(要するにアイコン部分の大きさ)を設定します。

アイコンの種類がとても多いのが魅力です。アイコンはカテゴリ毎に閲覧したり、フリーワード検索で探すこともできます。

図6 豊富な素材を元にアイコン画像ファイルを作れるサービス
図6 豊富な素材を元にアイコン画像ファイルを作れるサービス

おすすめ記事

記事・ニュース一覧