週刊Webテク通信

2018年3月第2週号1位は、画像最適化のための10のヒント、気になるネタは、犬目線のストリートビューで、戌年を楽しもう

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

1. 10 Must Know Image Optimization Tips - Image SEOhttps://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips

画像最適化のための10のヒントをまとめた記事です。画像サイズについてだけでなく、画像のSEOについても解説しています。

  1. わかりやすいファイル名を付ける
  2. Alt属性を慎重に最適なものにする
  3. 画像の大きさや商品の角度を賢く選ぶ
  4. 画像のファイルサイズを減らす
  5. 正しいファイル形式を選ぶ
  6. 最適なサムネイルを作る
  7. 画像サイトマップを利用する
  8. 装飾のための画像に気をつける
  9. CDNを使う場合は注意する
  10. テストする

画像サイトマップまでは作ったことありませんでした。ECサイトで商品画像をGoogle画像検索に載せたい場合などには、作った方が良さそうですね。

図1 画像最適化のための10のヒント
図1 画像最適化のための10のヒント

2. 30 Seconds of CSShttps://atomiks.github.io/30-seconds-of-css/

30秒で理解できるCSSの便利なコード集です。レイアウト/ビジュアル/アニメーション/インタラクティビティの4つのカテゴリにわけてリスト化しています。

HTML/CSS/デモ/説明/ブラウザサポートの順に紹介してあり、CodePenへのリンクもありました。

図2 30秒で理解できるCSSの便利なコード集
図2 30秒で理解できるCSSの便利なコード集

3. Prototyping inside Sketch 49 — Learn how it works and what you can dohttps://medium.com/sketch-app-sources/prototyping-inside-sketch-49-how-it-works-and-what-you-can-do-7a48c829f282

Sketchに新機能として搭載された、プロトタイプ作成&共有機能について解説した記事です。

リンクとホットスポットの作り方や、プレビューする方法、共有の仕方などが一通りまとめてあります。

作ったプロトタイプは、Sketch Cloudを使って共有できて、コメントをもらったりできるそうです。

図3 Sketchに新たに搭載されたプロトタイプ作成機能の解説
図3 Sketchに新たに搭載されたプロトタイプ作成機能の解説

4. 12 Landscape Scenes Built Entirely With CSS & SVGhttps://speckyboy.com/landscape-scenes-css-svg/

画像ファイルを使わず、SVGとCSSで描いた風景をCodePenから多数紹介しています。

ほとんどのものはアニメーションしており、JavaScriptを併用して実装しているものが多いです。

図4 SVGとCSSで描いた風景いろいろ
図4 SVGとCSSで描いた風景いろいろ

5. Titanic - CSS Puns T-shirt 👕 & Mugs ~ Saijo Georgehttps://saijogeorge.com/css-puns/titanic/

CSSを知っている人ならわかる、イラストとコードで表現したジョークを見られるサイトです。

気に入ったCSSジョークはSNSでシェアするだけでなく、Tシャツやマグカップなどにして購入できるようになっています。

図5 イラストとコードで表現したCSSジョークのサイト
図5 イラストとコードで表現したCSSジョークのサイト

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

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

MockingBot - Mobile prototyping without headacheshttps://mockingbot.com/

MockingBotは様々なデバイスに対応した、プロトタイプ制作のサービスです。画面遷移のあるプロトタイプがドラッグ&ドロップ操作で簡単に作れます。

作ったプロトタイプをシェアするのも簡単です。URLが生成されるので、それを教えるだけでプロトタイプにアクセスできます。セキュリティが気になる場合は、権限を与えたユーザーだけに共有したり、パスワードをかけることも可能です。

Sketchのプラグインが用意されていて、Sketchファイルとの同期もできるそうです。無料プランでも、3プロジェクト20画面(1プロジェクトあたり)まで作れるのもうれしいところです。

図6 様々なデバイスに対応したプロトタイプ制作サービス
図6 様々なデバイスに対応したプロトタイプ制作サービス

おすすめ記事

記事・ニュース一覧