週刊Webテク通信

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

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

ネットで見かけた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 豊富な素材を元にアイコン画像ファイルを作れるサービス

今週の気になるWebネタ

これが新Foursquareだ―チェックインを分離してローカルスポット推薦サービスに生まれ変わる - TechCrunchhttp://jp.techcrunch.com/2014/08/07/20140806this-is-the-new-foursquare/

Foursquareが,位置情報を共有する「チェックイン」機能を別アプリに切り離し,⁠ローカルスポット推薦サービス」となりました。アイコンも一新し,Yelpに対抗するようなサービスになるようです。

ユーザーの好みに合わせてお店を紹介してくれるのですが,好みを分かってもらうためには使い込まないといけないでしょうし,ユーザー数もある程度の規模がないといいレコメンドができないでしょう。日本でのアクティブユーザーを増やすための仕掛けが欲しいところですね。

Yelpもそうですし,Foursquareも,海外の人が日本のお店の口コミ情報を充実させていくという面にも注目する必要があると思います。東京オリンピックに向けて海外からのお客さんもターゲットに考えるお店だったら,Yelp同様この新Foursquareも無視できない存在になりそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入