週刊Webテク通信

2011年1月第5週号1位は、Facebookの企業ファンページのデザインギャラリー、気になるネタは、SCE、次世代携帯ゲーム機「NGP」発表

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

1. 20 Top Well Designed Facebook Pages Designhttp://slodive.com/inspiration/showcase/top-well-designed-facebook-pages-design/

Facebook内の企業ファンページのデザインギャラリーです。

ファンページでは、ユーザーに「Like」ボタン(日本語では「いいね!」ボタン)を押してもらうことが最初の目的なので、それを意識したデザインが目立ちます。

プロフィール画像の縦方向は結構大きくてもOKなので、バナー広告風など凝ったものも少なくありません。

ファンページは、HTMLとCSS、そして独自のFBMLという言語によって作成できます。デザインに関する自由度は高いので、そこにWebデザイナーの仕事の種があるんじゃないかと感じています。

図1 Facebookの企業ファンページデザイン
図1 Facebookの企業ファンページデザイン

2. Tips for Creating an Effective Online Design Portfolio | Web Design | instantShifthttp://www.instantshift.com/2011/01/21/tips-for-creating-an-effective-online-design-portfolio/

効果的なオンラインのデザインポートフォリオを作るためのヒントが紹介されています。

  • ターゲットをしぼる
  • 自分の仕事を強調する
  • ブログ、メール、SNSなどいろいろな場所で作品を宣伝する
  • 代表作を目立つように表示する場所をホームページ上に作る
  • もっとも良くできた、適切な作品に焦点を当てる
  • レイアウトはシンプルに
  • 適切なテクノロジーを使用する
  • 初めての連絡を取りやすくする
  • わかりやすい問い合わせ情報を
  • 「わたしを雇って」ページを作る
  • 取引先を載せる
  • SEOを利用する

といった内容について解説されていました。

図2 効果的なオンラインデザインポートフォリオのヒント
図2 効果的なオンラインデザインポートフォリオのヒント

3. 50+ Awesome CSS3 Techniques for Better Designs | Webdesigner Depothttp://www.webdesignerdepot.com/2011/01/50-awesome-css3-techniques-for-better-designs/

すばらしいCSS3のテクニックを多数紹介したまとめ記事です。

  • 画像を使わずCSS3だけで表現したイラスト
  • テキスト、レイアウト、カラー
  • 3Dエフェクト
  • CSS3アニメーション

といったカテゴリに分けて大量の記事が掲載されています。

図3 CSS3のテクニックいろいろ
図3 CSS3のテクニックいろいろ

4. 25 Excellent Examples of Forms in Web Design | Inspirationhttp://webdesignledger.com/inspiration/25-excellent-examples-of-forms-in-web-design

優れたフォームデザインの事例集です。

重要な要素でありながら扱いが難しいフォームを、うまくデザインした作例が並んでいます。

図4 フォームデザインの事例集
図4 フォームデザインの事例集

5. Fresh & Gorgeous Examples of Green Websites | HybridLavahttp://www.hybridlava.com/inspiration/fresh-gorgeous-examples-of-green-websites/

緑色を基調としたWebデザインのギャラリーです。やはり緑ということで、植物をモチーフにしたものが多いですね。

図5 緑色ベースのWebデザインのギャラリー
図5 緑色ベースのWebデザインのギャラリー

そのほか、先週の記事の中から、サービスに関するものを紹介します。

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

Shared * Links on Facebookhttp://fb-shared.com/

Facebook上でシェアされた人気のリンクなどが見られるサービスです。

Facebookでは、近況や写真、リンクなどを投稿することが「シェア」となっています。Twitterでの「ツイート」ボタンが、Facebookでは「シェア」ボタンというわけですね。ちなみに、シェアする対象を「すべてのユーザー」⁠友達のみ」などから投稿時に選ぶことができます。

このシェアの中で「リンク」に関するものだけを拾って、ランク付けしたのがこのサービスです。Facebookのユーザーでなくても見ることができます。

Facebookのアカウントでこのサービスにログインすると、自分の友達がシェアしたリンクの一覧や、自分がシェアしたリンク一覧が見られます。

Facebookでシェアされたリンクのランキング等サービス「Shared」を公開してます! - ゆーすけべー日記でサービスの作者による解説を読むことができます。

図6 Facebookでシェアされたリンクのランキングサービス
図6 Facebookでシェアされたリンクのランキングサービス

おすすめ記事

記事・ニュース一覧