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

1. Styling SVG (Scalable Vector Graphic) with CSS | RealcomBizhttp://www.realcombiz.com/2014/10/styling-svg-scalable-vector-graphic.html

SVG画像をCSSでデザインする方法を解説した記事です。SVG画像はCSSを使って、塗りや枠線を色／グラデーション／パターンで設定できます。

インラインスタイルとしてsvgタグ内に直接スタイルを記述できるほか、HTML内にCSSを記述するか外部ファイルとしてCSSをリンクする方法があります。

また、SVGに対しても「:hover」「⁠:active」などの疑似クラスも使用できます。「⁠transition」「⁠transform」と組み合わせることで、マウスオーバーでじわじわと色が変わるSVG図形などを作ることも可能とのことで、デモも用意されていました。

レスポンシブにSVG画像を配置するテクニックも紹介されています。

2. 7 Bootstrap Editors for Rapid Development of Responsive Websites - BootstrapBayhttp://bootstrapbay.com/blog/bootstrap-editors/

Bootstrapをベースとした、Webデザイン制作のエディターやビルダーをまとめた記事です。

Webサイトのプロトタイプを迅速に作る際に役立つツールが各種紹介してあり、有料のものが多いようです。

3. 36 Examples of Web Design Homepage Layout Conceptshttp://designwoop.com/2014/10/36-examples-web-design-homepage-layout-concepts/

WebサイトのTOPページデザインの、いろいろなパターンを集めています。

Dribbbleに参加しているデザイナーの作品をまとめており、実在するサイトもあればデザイン案だけのものもあります。

4. Mobile Editing Apps - iOS Code Editorshttp://haeckdesign.com/blog/favorites/technology/mobile-editing-apps

モバイルでWebページのコードを編集できるアプリをまとめています。iOS向けのものがほとんどですが、Android用のものもありました。

まず最初に紹介されているのが、Mac版Web制作アプリCodaでおなじみのPanic社によるiPad版のDiet Codaで、このアプリは絶賛されています。

iPhoneも6/6 plusで大型化したので、iPadではなくiPhoneでのコード編集も現実味が出てくるかもしれませんね。

5. 35 New Clean & Minimalist Websites | Splashnology.comhttp://mag.splashnology.com/article/clean-minimalist-websites/13146/

ミニマルでシンプルなWebデザインのギャラリーです。

「≡」のボタンを押すとメニューが出現するハンバーガーメニューを使用しているサイトが目立ちますが、シンプルな画面だとハンバーガーメニューも目立ちますし、UI的に問題ないように思えます。

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

• Twitpic、「⁠やっぱり終了します。ごめんなさい⁠」⁠ 10月25日までにエクスポートを - ITmedia ニュース
  「⁠終了しません」宣言ではなく「しないかも」宣言だっただけのようです
• KDDIが「中心のない」新ポータル Syn. 構想発表。12社13サービスに共通サイドメニューを設置 - Engadget Japanese
  アプリに共通メニューを採用して囲い込みということですね
• iPad版「LINE」が登場 スマホとのマルチデバイス利用が可能に - ITmedia Mobile
  今さら？と思う人もいるでしょうが、PC以外でのマルチデバイスに対応したのがポイントです

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

BeeFree | Free email editor to build responsive design messageshttps://beefree.io/

あらかじめ用意されたテンプレートを利用して、レスポンシブなHTMLメールを簡単に作成できるサービスです。HTMLメールの場合、様々なメーラーへの対応を考えるとシンプルなレイアウトしかできないので、このサービスだけで必要十分な機能があると感じました。

PC版とモバイル版の2種類のプレビューができ、HTMLメールとして指定したメールアドレスにテスト配信できるのも便利です。

テスト配信ではBeeFreeのサーバー上の画像がリンクされていましたが、完成後ダウンロードしたHTMLでは画像リンクは相対パスで記述されています。実際に配信する場合は、画像をどこかのサーバーに上げて、HTML上のパスを書き換える必要がありますね。

このBeeFreeを提供しているのはMailUpというメール配信や管理のサービス業者で、このMailUpで配信するためのエディタという位置付けでした。MailUpのユーザーを増やすためのものでしょうが、今後も無償で提供してくれることを期待します。