週刊Webテク通信

2013年2月第3週号 1位は,フラットデザインのデザインギャラリー,気になるネタは,手のひらサイズのロボット掃除機でスマホがきれい タカラトミー「オートミー」

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

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

1. 20 Great Examples of the Flat Trend in Web Designhttp://line25.com/articles/20-great-examples-of-the-flat-trend-in-web-design

現在流行中のフラットデザインのサイトのギャラリーです。

フラットデザインとは,ドロップシャドウ,テクスチャー,グラデーションを使わず,原色,クリーンなレイアウト,シャープなタイポグラフィを使ったWindows 8のメトロUIに似たものだと説明されています。

43 Inspiring Examples of Flat Designs in Web Designという同様のデザインギャラリーの方が取り上げてあるサイト数は多いのですが,ソーシャルメディアでシェアしないと全文が読めないという仕組みになっているのがやっかいです。

図1 フラットデザインのデザインギャラリー

図1 フラットデザインのデザインギャラリー

2. Simple Iconshttp://simpleicons.org/

フラットデザインのソーシャルメディアアイコンのセットです。

透過PNGファイルになっているので,CSSを使って背景色で好きな色を付けることができます。サンプルでは,それぞれのソーシャルメディアの公式カラーを使用しており,色の値のリストも掲載されていて便利です。

アイコンのサイズは16×16ピクセルから,なんと最大4096×4096ピクセルまで11段階もの豊富なサイズが用意されています。

関連して,シンプルなアイコンセットをまとめた20 Free Icon Sets | dsgnfeedという記事もありました。

図2 フラットデザインのソーシャルメディアアイコンセット

図2 フラットデザインのソーシャルメディアアイコンセット

3. Mobile Navigation Patternshttp://www.obox-design.com/view_item.cfm/title/mobile-navigation-patterns

モバイルサイトのナビゲーションパターンについて考察した記事です。

モバイルサイトでのスタンダードなナビゲーションアイコンは三本線のアイコンで,この三本線ボタンでナビゲーションを開閉するパターンのサイトが増えています。

違ったナビゲーションの例として,AmazonとOdeon(映画情報サイト)⁠Malmaison(ホテル)といった3つのECサイトが紹介されていました。

図3 モバイルサイトのナビゲーションパターンについて

図3 モバイルサイトのナビゲーションパターンについて

4. 32 Unique E-mail Contact Forms in Website Layouts | SpyreStudioshttp://spyrestudios.com/32-email-contact-form-designs/

お問い合わせフォームのデザインをまとめた記事です。

きっちり整然と組まれたものから,手書き風でラフな感じにしたものなど,フォームまでちゃんとサイトのイメージを引き継いでいると好感が持てますね。

図4 お問い合わせフォームのデザイン集

図4 お問い合わせフォームのデザイン集

5. 20 YouTube Tech Channels To Subscribehttp://www.hongkiat.com/blog/top-youtube-tech-channels/

テクノロジー関連のYouTubeチャンネルを紹介しています。

動画コンテンツの豊富さや見せ方は,アメリカのほうが進んでいるように思えますね。

図5 テクノロジー関連のYouTubeチャンネルいろいろ

図5 テクノロジー関連のYouTubeチャンネルいろいろ

そのほか,最近の記事の中から,じっくり読みたい記事3つを紹介します。

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

hhhhold!http://hhhhold.com/

ダミー画像を生成するWebサービスです。Webデザインのプロトタイプ作成時に便利です。

この手のサービスはいろいろあるのですが,人気のあるサイトは重くなってしまう宿命もあるようで,いざプレゼンという時に画像が表示されないことがないよう,複数のサービスを知っておくと安心だと思います。

ダミー画像生成サービスには,単色の上に文字が載った画像を生成するものと,写真を表示するものとがあります。このhhhhold!は後者で,おしゃれな写真が表示されます。

ピクセル数で縦横サイズを指定できるのはもちろんのこと,何ピクセルから何ピクセルの間と範囲を指定することも可能です。Pinterestのようなレンガ組みのレイアウト作成時に重宝しそうです。

なお,単色の上に文字が載った画像を生成するタイプとしては,Placehold.itDummyImage.comが有名です。

Placehold.itは,アクセス数を制限するためか,画像にアクセスするのにCAPTCHAによる認証が必要になっていました。Placehold.itはダミー画像内に日本語が表示できませんし,日本で使うのなら「DummyImage.com」の方がおすすめですね。

図6 ダミー画像を生成するWebサービス

図6 ダミー画像を生成するWebサービス

今週の気になるWebネタ

手のひらサイズのロボット掃除機でスマホがきれい タカラトミー「オートミー」3/28発売 - はてなブックマークニュースhttp://b.hatena.ne.jp/articles/201302/12626

スマートフォンやタブレットの画面の上で使う,ロボット掃除機の玩具が登場しました。方向転換しながらムラなく掃除でき,フチから落ちないようにもなっているという,なかなか賢いマシンのようです。

値段も1575円と手頃ですし,プレゼントにも喜ばれるんじゃないでしょうか。あ,でもスマホをカバーに入れている人には向かないかもしれません。カバーによっては,引っかかって端までうまく掃除できないんじゃないでしょうか。

小さい子どもにタッチデバイスを触らせると,画面が妙にベトベトになるという経験をお持ちの方も多いと思います。そんなときに,このロボット掃除機があれば,子どもと一緒に画面掃除の様子を楽しめそうです。まあ,掃除するために子どもがわざと画面を汚すようになるかもしれませんが。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入