週刊Webテク通信

2017年6月第3週号 1位は,良いヒーローイメージ(メイン画像)を作るためのヒント,気になるネタは,アップル,Siri搭載スマートスピーカ「HomePod」を12月発売へ--まず米国などで

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

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

1. Best Practices For Hero Images | Creative Cloud blog by Adobehttps://blogs.adobe.com/creativecloud/best-practices-for-hero-images/

良いヒーローイメージ(メイン画像)を作るためのヒントを解説しています。

  1. 関連性を持たせる
  2. 中心的存在となる画像にする
  3. 感情に訴える説得力のあるイメージを選ぶ
  4. できるだけ速く読み込まれて表示される
  5. 高解像度のビジュアルのみを使う
  6. さまざまな画面サイズを考慮する
  7. コールトゥアクション(行動喚起)を強調する
  8. コントラストをつけるためにデザインする
  9. 本物の人物の写真を使う
  10. イラストを使うことも検討する

図1 良いヒーローイメージを作るためのヒント

図1 良いヒーローイメージを作るためのヒント

2. 10 Awesome CSS Button Libraries & Collectionshttps://speckyboy.com/css-button-libraries/

CSSボタンのライブラリやコレクションをまとめた記事です。簡単に実装できるボタンのCSSを多数掲載しています。

立体的なボタン,ホバー時にちょっとしたアニメーションをするボタンなどがありました。

図2 CSSボタンのライブラリやコレクションいろいろ

図2 CSSボタンのライブラリやコレクションいろいろ

3. 3 Essential Design Trends, June 2017 | Webdesigner Depothttps://www.webdesignerdepot.com/2017/06/3-essential-design-trends-june-2017/

3つの重要なデザイントレンドについて,実例とともに解説しています。

  1. 小さなテキスト
  2. 幾何学図形のレイヤー
  3. ぼかした画像

図3 3つの重要なデザイントレンド

図3 3つの重要なデザイントレンド

4. The Best Free Support Sites & Communities For Web Developershttps://1stwebdesigner.com/best-free-support-sites-web-developers/

ウェブデザイナーの問題解決に役立つサポートサイトやコミュニティを多数紹介しています。

ウェブデザインや開発者のためのQ&Aサイトやフォーラム,学べるサイトなどを掲載しています。Q&AサイトのStack Overflowは日本語版もありますね。

図4 Webデザイナーのためのサポートサイトやコミュニティ

図4 Webデザイナーのためのサポートサイトやコミュニティ

5. How to Create Medium-Like Floating Action Menu - Hongkiat.comhttp://www.hongkiat.com/blog/create-medium-floating-action-menu/

Mediumのようにテキストを選択するとその上に現れるメニューの作り方を解説しています。

選んだ文字列をTwitterにツイートするフローティングアクションメニューのコードが掲載されています。

図5 Mediumのようなフローティングアクションメニューの作り方

図5 Mediumのようなフローティングアクションメニューの作り方

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

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

Font-familyメーカー:標準フォント一覧からサクッと指定https://saruwakakun.com/font-family

「Font-familyメーカー」は,CSSのfont-familyの記述を簡単に行えるサービスです。フォントの一覧から使いたいものを選ぶだけでCSSを生成できます。

Windows,Mac,iPhone/iPadでの標準フォントがサンプルとともに並んでおり,Webフォントを使わずデバイスフォントだけを使用するケースで特に役立ちそうです。

Facebook,Twitterなど有名サイトのfont-family指定を読み込むこともできます。基本的には初心者向けのサービスで,⁠使い方」のリンク先ではfont-family指定について非常に丁寧に解説しています。

図6 CSSのfont-familyの記述を簡単に行えるサービス

図6 CSSのfont-familyの記述を簡単に行えるサービス

今週の気になるWebネタ

アップル,Siri搭載スマートスピーカ「HomePod」を12月発売へ--まず米国などで - CNET Japanhttps://japan.cnet.com/article/35102285/

AppleがWWDCでいろいろなものを発表し,Siriスピーカーなどと呼ばれていた家庭用スマートスピーカーは「HomePod」という名前で登場しました。

「iなんとか」⁠Appleなんとか」ではなく「なんとかPod」なネーミングだったわけですが,なるほどHomePodはAirPodsと同カテゴリの製品ということなんですね。

家庭内のスマート家電をコントロールするためのデバイスというより,AirPodsと同じ体験を据え置き型スピーカーでできるものと考えた方が,分かりやすいし位置付けがハッキリします。AirPodsもただのワイヤレスイヤホンじゃないんだと逆に気付かされました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入