週刊Webテク通信

2012年11月第3週号1位は、男性的なデザインと女性的なデザイン、気になるネタは、「LINE」公式アカウントの廉価版「LINE@」、月額5250円で提供

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

1. Design Stereotypes: Masculine and Feminine Design Techniques - DesignModohttp://designmodo.com/masculine-feminine-designs/

男性的なデザインと女性的なデザインについて、典型的な例などをまとめた記事です。

画像、フォント、色、形に分けて、Webデザインの実例とともに解説しています。

記事中の例の一部を以下に紹介します。

女性的なデザイン要素
  • 赤ちゃん、子犬、花、食べ物などの画像
  • パステル、ピンク色
  • 曲線、円、ハート型
男性的なデザイン要素
  • スポーツ、険しい景観、ガジェットなどの画像
  • 暗い色、青色
  • 正方形、三角形

こうやって並べてみると当たり前のようなことばかりですが、辞書的に参照するのに便利なのではないでしょうか。

図1 男性的なデザインと女性的なデザイン
図1 男性的なデザインと女性的なデザイン

2. CSS Preprocessors Compared: Sass vs. LESShttp://www.hongkiat.com/blog/sass-vs-less/

CSSメタ言語のSassとLESSとを比較した記事です。

  • インストール
  • エクステンション
  • 言語の記述方法
  • ドキュメント

に分けて比較しています。

この記事の作者は、5対3でSassの勝ちとしています。とはいえ、LESSも悪いものではないとフォローしています。

図2 SassとLESSとの比較
図2 SassとLESSとの比較

3. 30 FAQ Webpage Layouts with Effective User Experience | SpyreStudioshttp://spyrestudios.com/30-faq-webpage-layouts-with-effective-user-experience/

サポートページ/FAQページのデザインギャラリーです。

項目ごとに個別ページに分けてリンクする見せ方や、FAQの「答え」が展開して表示されるパターンなど、この手のページの表示例が網羅されていて参考になります。

図3 FAQページのデザインギャラリー
図3 FAQページのデザインギャラリー

4. 20 New Icon Sets (Including Icon Fonts)http://speckyboy.com/2012/11/07/20-new-icon-sets/

アイコンを配布しているページへのリンク集です。UIアイコンやピクトグラム、ソーシャルメディアアイコンなど、シンプルなアイコンセットが多数紹介されています。

一部、アイコンフォントも含まれています。

図4 アイコン配布ページへのリンク集
図4 アイコン配布ページへのリンク集

5. Web Design Trend Showcase: Blurred Backgroundshttp://line25.com/articles/web-design-trend-showcase-blurred-backgrounds

ぼかした画像を背景に使ったWebデザインのショーケースです。

紹介されているのは、iPhoneアプリ関連のサイトばかりですね。

図5 ぼかした画像を背景に使ったWebデザインのショーケース
図5 ぼかした画像を背景に使ったWebデザインのショーケース

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

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

Facebook カバー画像ジェネレータ | 青森のホームページ制作 バランテックhttp://www2.balantec.co.jp/fb_cover/

今回は、Facebookのカバー画像を生成するWebサービスを紹介します。

複数の写真を並べた画像を簡単に作ることが可能です。写真の配置のパターンは決まっており、画像の並び順もあとから変更することはできません。フレームや背景色を設定する機能もあります。

画像加工のできない人向けとしては、シンプルで使いやすいと思います。Facebookと連動して直接カバー画像を変更できると、より使い勝手が上がるんじゃないでしょうか。

図6 Facebookのカバー画像のジェネレーター
図6 Facebookのカバー画像のジェネレーター

おすすめ記事

記事・ニュース一覧