週刊Webテク通信

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

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

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

1. What is the Future of Front End Web Development? | CSS-Trickshttps://css-tricks.com/future-front-end-web-development/

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

  • ユーザーの期待値が高くなっている
  • JavaScriptに新たな動きが生まれている
  • ページを作るのではなくシステムを作る
  • ネイティブアプリとWebの境界はぼやけてきている
  • URLは今でも重要なものである
  • パフォーマンスは重要な要素である
  • CSSはもっとモジュール化していく
  • CSSプリプロセッサーは徐々に消えていくだろう
  • HTMLとCSSをうまく使用することは重要であり続ける
  • ビルドプロセスが競争力につながる

図1 フロントエンドのウェブ制作者が今後必要な技術や考え方

図1 フロントエンドのウェブ制作者が今後必要な技術や考え方

2. How You Can Compete Against DIY Site Builders | Webdesigner Depothttps://www.webdesignerdepot.com/2017/05/how-you-can-compete-against-diy-site-builders/

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

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

図2 サイトビルダーにプロはどう対抗すべきか

図2 サイトビルダーにプロはどう対抗すべきか

3. Inspirational UI Design Ideas for Your Next Website Project — SitePointhttps://www.sitepoint.com/creative-ui-design-ideas-you-can-use-in-your-next-website/

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

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

図3 UIデザインのアイデアを実例を元に解説

図3 UIデザインのアイデアを実例を元に解説

4. 30 of Our Favorite CSS Resources from This Yearhttps://speckyboy.com/favorite-css-resources/

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

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

図4 CSS関連ツールいろいろ

図4 CSS関連ツールいろいろ

5. On-Scroll Morphing Background Shapes | Codropshttps://tympanus.net/codrops/2017/05/23/on-scroll-morphing-background-shapes/

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

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

図5 スクロールとともにモーフィングする背景図形のデモ

図5 スクロールとともにモーフィングする背景図形のデモ

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

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

The Ultimate Website Code Generatorhttps://webcode.tools/

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

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

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

図6 コードジェネレーターをまとめたサービス

図6 コードジェネレーターをまとめたサービス

今週の気になるWebネタ

Photoshopより簡単,オーストラリア発のデザインツールCanvaが日本上陸 | TechCrunch Japanhttp://jp.techcrunch.com/2017/05/24/canva-japan-launch/

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

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

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

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入