週刊Webテク通信

2014年7月第4週号 1位は,ポップアップウィンドウを使う場合の手引き,気になるネタは,朝日新聞,ユーザーから取材依頼受けるニュースサイト「withnews」本格スタート

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

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

1. Using Popups on Your Website: Mini Guide - Web Design Fanatichttp://www.webdesignfanatic.com/using-popups-on-your-website-mini-guide/

Webサイトでポップアップウィンドウを使う場合の手引きをまとめた記事です。

なるべく使わない方がいいポップアップですが,使う場合は以下のルールを守ることを勧めています。

  • やりすぎない
  • 押しつけがましくしない
  • 便利な何かを提供する
  • ソーシャルメディアボタンをポップアップしない
  • ポップアップを閉じるボタンを隠したり無効にしたりしない

もしポップアップを使うなら,正しい使い方をしましょうということです。ポップアップで無理やり興味を引いても,ユーザーとのいい関係性は作れないと解説してありました。

図1 ポップアップウィンドウを使う場合の手引き

図1 ポップアップウィンドウを使う場合の手引き

2. 10 great text editors for web designers | Web design | Creative Bloqhttp://www.creativebloq.com/netmag/10-great-text-editors-web-designers-71412411

Webデザイナーのためのテキストエディタを10個紹介しています。Mac/Windows用はもちろん,iOS/Android用のものも掲載されていました。

また,似たような記事として,統合開発環境をまとめた11 Modern Code IDEs for Web Developersという記事もありました。

図2 Webデザイナーのためのテキストエディタ10選

図2 Webデザイナーのためのテキストエディタ10選

3. 20 Impressive CSS3 Techniques, Libraries and Examples | Tutorialzinehttp://tutorialzine.com/2014/07/20-impressive-css3-techniques-libraries-and-examples/

CSS3のテクニックやライブラリなどをまとめた記事です。

CSSの可能性を追求したテクニックも多く,一部ブラウザでしか動作しないものもありますが,刺激を受ける記事が数多く紹介されていました。

図3 CSS3のテクニックやライブラリのまとめ

図3 CSS3のテクニックやライブラリのまとめ

4. Waveshttp://publicis-indonesia.github.io/Waves/

Googleのマテリアルデザインに影響を受けた,押した場所からアニメーション効果が広がるボタンなどの要素です。

押した位置から変化があるのでより反応が分かりやすく,ロールオーバー時の変化はありません。どちらも,タッチデバイスを意識しての進化ということですね。

図4 Googleのマテリアルデザインに影響を受けたボタン類

図4 Googleのマテリアルデザインに影響を受けたボタン類

5. PatternBolthttp://buseca.github.io/patternbolt/

SVGで描画される背景パターンをCSSで提供しています。このサイト上でパターンの種類やサイズ,色を変更して試すことができます。

画像を使わずに背景にストライプなどを適用できるので,とても便利だと思います。写真の上にパターンを重ねるといった使い方も面白いですね。

図5 SVGで描画される背景パターン

図5 SVGで描画される背景パターン

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

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

MapClipperhttp://mapclipper.com/

MapClipperは,Googleマップの地図をEvernoteにクリップするためのWebサービスです。このサービスとEvernoteとを連携させて,好きな場所の地図を簡単にEvernoteのノートに貼り付けることができます。

新規のノートを作るか,既存のノートの最後に地図を追加するかを選べます。既存のノートは最新5つのノートから選べるようになっています。

クリップした地図はただの静止画なので,画面キャプチャを撮って貼るのと同じですが,Googleマップのその場所へのリンクが自動で張られるところが便利だと思います。

なお,MapClipperの画面上でのGoogleマップは日本語表記なのですが,キャプチャ画像では英語と日本語との併記になってしまいます。

図6 Googleマップの地図をEvernoteにクリップするサービス

図6 Googleマップの地図をEvernoteにクリップするサービス

今週の気になるWebネタ

朝日新聞,ユーザーから取材依頼受けるニュースサイト「withnews」本格スタート - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1407/22/news133.html

朝日新聞が,ユーザーからのリクエストに応えて取材した記事を中心としたニュースメディアを新たにスタートしました。ちゃんと取材していない記事が多いネットのニュースメディアに対するカウンターとして期待したいですね。

「本の要約サービスって合法なの?」⁠非営利パブリックビューイングでライセンス料?」⁠日本―コロンビア戦で映ったあの美女は?」など,すでに興味深いリクエストが「フカボリ」されています。

真偽不明なネタを拡散している多くのネットニュースメディアに対する脅威になるかと思ったのですが,むしろこのサイトをネタ元とした記事が様々なネットメディアで拡散されるケースが増えるのかもしれません。

個人ブロガーなら,

  1. 疑問に思ったことをある程度自力で調べてブログのエントリーにする
  2. 分からない部分は「withnews」で取材リクエストする
  3. 取材リクエストが採用されて記事になった場合,それを元にまたエントリーを書く

といった利用法もありそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入