2017年6月第1週号 1位は、フロントエンドのウェブ制作者が今後必要な技術や考え方、気になるネタは、Photoshopより簡単、オーストラリア発のデザインツールCanvaが日本上陸

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

フロントエンドのウェブ制作者が、近い未来のために必要な技術や考え方をまとめています。

ウェブサイトを誰でも作れるようなSquarespaceやWixのようなツール（サイトビルダー）に、プロはどう対抗していくべきかを解説しています。

「サイトビルダーは、見た目が良いウェブサイトができれば十分だと思っている、分かっていない人向けのもの」という表現が、核心を突いていると感じました。

UIデザインのアイデアを、実例を元に詳しく解説した記事です。

斜めのストライプをCSSで作る方法や、ちょっとしたアニメーション効果について、コード共有サービスCodePenにあるコードの例なども使って説明しています。

今年リリースされたCSSライブラリ、フレームワーク、ツールを30種類紹介しています。

最近のCSSのトレンドに合った Flexbox、CSS Grid、CSSアニメーションのツールやライブラリなども豊富に掲載されていました。

スクロールとともに背景の図形がモーフィングするデモと解説です。SVGの図形が変形していきます。

前面の要素が、ホバー時にパララックス的な動きをするのも面白いです。

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

ソフト開発ツール販売サイト「GitHub Marketplace」開設--ツール入手を一元化 - CNET Japan
プロジェクト管理からコードレビューまで、開発プロセス全般で使えるツールを販売するサイトです
なぜ今更？ Hulu日本版、リニューアルで「Silverlight」導入のワケ - ITmedia NEWS
実はNetflixやAmazonビデオでも同様に「Windows 7＋IE 11」で視聴する場合はSilverlightが必要とのこと
ユーザーローカル、マストドン検索に参入 - ITmedia NEWS
複数のインスタンスを横断検索、しかもマストドンには元々ない全文検索です

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

The Ultimate Website Code Generatorは、CSS3やHTML5などのコードジェネレーターをまとめたサービスです。メタタグやOpen Graph、Twitter Cardなども生成できます。

CSS3が出たてのころ、角丸やシャドウなどをプレビューしながらパラメーターを設定し、CSS3のコードを作るビルダーが流行ったことがありましたが、そういうのがたくさん集まっています。

普段使わないようなHTMLやCSSの要素を使う場合に参照したり、メタタグやOpen Graphの項目を確認する用途などにも便利だと思います。

クラウド上で使える画像編集ツール「Canva」のUIが日本語化され、28種類の日本語フォントの搭載や日本語に適切なテンプレートを用意するなどして、日本での本格的なサービスが開始しました。

KDDIウェブコミュニケーションズが提供するとのことで、同社オリジナルのブログサービス「g.o.a.t （ゴート）」との連携も期待できそうです。ちなみに、たぶんCanvaを参考にしたと思われるPicky-Picsという日本発のサービスは、既に2014年7月にリリースされています。

CanvaはデザインもUIも素晴らしく、使っていて気持ちいいツールです。Command-Z（Ctrl+Z）での取り消しや矢印キーでの移動、デリートキーでの削除などグラフィックツールの「あたりまえ」がWebアプリなのにちゃんと通用するので、違和感なく作業ができると思います。