週刊Webテク通信

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

ネットで見かけた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サービス

おすすめ記事

記事・ニュース一覧