週刊Webテク通信

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

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

ネットで見かけた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 様々なデバイスに対応したプロトタイプ制作サービス

今週の気になるWebネタ

Google Japan Blog: 犬目線のストリートビューで,戌年を楽しもうhttps://japan.googleblog.com/2018/02/blog-post_28.html

秋田犬の発祥の地である秋田県大館市の企画で,Google マップのストリートビューに 犬目線の “ドッグビュー” が登場しました。秋田犬と一緒に散歩しているようで面白いです。

メイキングムービーを見ると,秋田犬の背中に360度カメラを背負わせて撮影しているのが分かります。360度カメラはそんな大掛かりなものではなく,リコーのTHETAのようです。

ストリートビューは誰でもアップできるとのことで,つまり同じようなストリートビューは,その気になれば誰でも作れるということですね。アイデア次第で地域活性化にもつながりそうですし,制作請け負いをビジネスにすることもできそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入