週刊Webテク通信

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

ネットで見かけた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にクリップするサービス

おすすめ記事

記事・ニュース一覧