週刊Webテク通信

2013年11月第3週号1位は、レスポンシブWebデザインに関する素材や情報源のまとめ、気になるネタは、「Pinterest」日本語版サービス開始、カテゴリーを日本向けに拡充

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

1. Ultimate Resources to Responsive Designhttp://www.9kdesigns.com/resources/ultimate-resources-to-responsive-design

レスポンシブWebデザインに関する素材や情報源をまとめて紹介した記事です。

以下の項目に分けて多数のサイトが掲載されています。

  • CSSフレームワーク
  • プラグイン(JavaScript、WordPress)
  • レスポンシブなナビゲーション
  • レスポンシブな画像(スクリプトとテクニック)
  • レスポンシブデザイン用のツール
図1 レスポンシブWebデザインに関する素材や情報源のまとめ
図1 レスポンシブWebデザインに関する素材や情報源のまとめ

2. Contact Pages - Good vs Bad - The Usabilla Bloghttp://blog.usabilla.com/good-vs-bad-contact-pages/

問い合わせページの良い例と悪い例とを解説した記事です。

良い問い合わせページ
  • 人間味がある
  • 見やすい
  • 探しやすく使いやすい
  • 信頼できる
悪い問い合わせページ
  • 人間味がない
  • 混乱させられる
  • 信頼できない

悪い例として、有名企業のサイトが取り上げられていますね。

図1 問い合わせページの良い例と悪い例
図1 問い合わせページの良い例と悪い例

3. Best Online Resources for Learning Web Design & Development | WebDesignerHub.comhttp://www.webdesignerhub.com/best-online-resources-learning-web-design-development/

Webデザインや開発に関して学べるサイトを多数紹介しています。

チュートリアルやテクニックがまとまったサイトや、有料のオンライン学習サービスなどが掲載されていました。

図3 Webデザインに関して学べるサイトいろいろ
図3 Webデザインに関して学べるサイトいろいろ

4. 20 Web Designs with Subtle Grain Texture Backgroundshttp://line25.com/articles/20-web-designs-with-subtle-grain-texture-backgrounds

背景に布や紙のようなテクスチャを使ったWebデザインのギャラリーです。フラットデザインでは排除されるテクスチャ類ですが、フラットデザイン全盛の中では逆に目立つのかもしれません。

Subtle(わずかな⁠⁠、Grainテクスチャということですが、Grainには(木材・石材・なめし皮・布などの)きめ、木目、石目などの意味があるようです。

図4 布や紙のようなテクスチャを使ったWebデザインのギャラリー
図4 布や紙のようなテクスチャを使ったWebデザインのギャラリー

5. Icons in web design - attention-getting, memorable and user-friendly | EntheosWebhttp://blog.entheosweb.com/ideas/web-design-ideas-using-icons

アイコンを使ったWebデザインのギャラリーです。

注目を集めやすい、記憶に残りやすい、操作がわかりやすいといったメリットがあると解説されています。

図5 アイコンを使ったWebデザインのギャラリー
図5 アイコンを使ったWebデザインのギャラリー

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

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

TweetDeck by Twitter - TweetDeckhttp://tweetdeck.com/

ツイッターが公式のツイートまとめ機能を発表しましたが、その「Custom timelines」はTweetDeckの機能として提供されています。ということで、今回はTweetDeckのCustom timelines機能を紹介します。

TweetDeckはMac/Windowsのデスクトップアプリとしても提供されていますが、今回紹介するのはWebサービス版です。左メニューの下の方にあるCustom timelinesボタンを押すと一列カラムが増えて、そこにツイートを追加できます。

ツイートはドラッグ&ドロップで追加していけます。しかし、追加した後での並べ替えはできず、常に最後に追加したものが一番上に来る仕様のようです。検索結果からドラッグすることもできないので、検索結果を「Add Column」でカラムに追加してから必要なツイートを登録する必要があります。

Custom timelinesをちょっと使ってみた感じでは、TogetterやNAVERまとめ、storifyなどに比べると機能は少ないようです。しかし、公式ツールという安心感もありますし、今後の機能強化に期待したいと思います。

図6 ツイートをまとめるCustom timelines機能が追加されたTweetDeck
図6 ツイートをまとめるCustom timelines機能が追加されたTweetDeck

おすすめ記事

記事・ニュース一覧