週刊Webテク通信

2016年6月第3週号 1位は,サイトをプロっぽく魅力的にする21の方法,気になるネタは,Siriを人前で使うのはわずか3%──米調査結果

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

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

1. 21 ways to make your site look professional and super attractive | Pierre Bastillehttps://pierrebastille.com/site-professional-attractive/

サイトをプロっぽく魅力的にする方法をまとめた記事です。プロではない人でもプロっぽくという内容ですが,プロにも参考になると思います。

  1. シンプルにする
  2. 一貫性を持たせる
  3. 魅力的なカラーパレットを使う
  4. 美しいフォントと適切なフォントサイズを選ぶ
  5. レスポンシブなテーマを選ぶ
  6. わかりやすくはっきりしたナビゲーション
  7. 美しく関連性のある画像を使う
  8. SSL証明書を追加する
  9. 独自のドメイン名を使う
  10. アニメーションを追加する
  11. 独自のキャッチフレーズを書く
  12. ブログ記事には著者の経歴を書く
  13. ファビコンを追加する
  14. パーマリンクをわかりやすい構造にする
  15. 細かくスタイルを定義する
  16. 適切な行間と段落の間隔を持たせる
  17. 検索結果で表示される説明文をページや記事に合わせたものにする
  18. スペルチェックする
  19. 一貫性のあるアイコンを使う
  20. 広告を入れない
  21. 押しつけがましくしない

図1 サイトをプロっぽく魅力的にする21の方法

図1 サイトをプロっぽく魅力的にする21の方法

2. A Comprehensive Prototyping Guide for Rookies | Articles | Graphic Design Junctionhttp://graphicdesignjunction.com/2016/06/a-comprehensive-prototyping-guide-for-rookies/

初心者のためのプロトタイピングの総合ガイドです。

  • プロトタイプの4つのタイプ
  • プロトタイピングの手法
  • プロトタイピングのツール

といった項目に分けて解説しています。

図2 初心者のためのプロトタイピングの総合ガイド

図2 初心者のためのプロトタイピングの総合ガイド

3. 15 Interesting JavaScript and CSS Libraries for June 2016 | Tutorialzinehttp://tutorialzine.com/2016/06/15-interesting-javascript-and-css-libraries-for-june-2016/

JavaScriptとCSSのライブラリを多数紹介しています。

軽量でシンプルに使えるCSSフレームワークのPicnicや,絵文字やGoogleマップ,YouTubeビデオやTwitterなどを簡単にページに埋め込めるEmbed.jsなどが紹介されていました。

図3 JavaScriptとCSSのライブラリいろいろ

図3 JavaScriptとCSSのライブラリいろいろ

4. AOS: CSS-Driven "On Scroll" Animation Library | CSS-Trickshttps://css-tricks.com/aos-css-driven-scroll-animation-library/

スクロールに合わせていろいろなアニメーション効果を与えられる「AOS」というライブラリを取り上げています。

WOW.jsと同じようなライブラリですが,細かいコントロールがしやすく,JavaScriptではなくCSSだけでアニメーションをコントロールできるところも特徴です。

図4 スクロールに合わせてアニメーション効果をつけるライブラリの紹介

図4 スクロールに合わせてアニメーション効果をつけるライブラリの紹介

5. Getting Started With CSS Flexbox Using Practical Exampleshttps://speckyboy.com/2016/06/08/getting-started-css-flexbox/

CSSのFlexboxを使った実用的なサンプルを紹介した記事です。

レスポンシブに対応した,ナビゲーションバー,画像サムネイル,フォームと,固定フッタのコーディング例と解説が掲載されています。

図5 Flexboxを使った実用的なサンプル

図5 Flexboxを使った実用的なサンプル

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

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

WAIT! Animatehttp://waitanimate.eggbox.io/

WAIT! Animateは,ループするCSSアニメーションにおいて,一時停止させる設定を行えるサービスです。指定した秒数停止した後また動き出すというループアニメーションを簡単に作れます。

アニメーションの全体の長さと移動するタイミングとを調整することで,CSSだけで動きにインターバルを持たせています。Font Awesome Animationライブラリを元にしていて,豊富なアニメーションから動きを選べます。

動き自体をカスタマイズすることもできたり,SASSのミックスインも用意してあったりと,シンプルながら気の利いたサービスです。

図6 CSSによるループアニメーションに一時停止の設定を行うサービス

図6 CSSによるループアニメーションに一時停止の設定を行うサービス

今週の気になるWebネタ

調査リポート:Siriを人前で使うのはわずか3%─⁠─米調査結果 - ITmedia Mobilehttp://www.itmedia.co.jp/mobile/articles/1606/07/news084.html

アメリカのスマートフォンユーザーを調査したところ,iPhoneユーザーの98%はSiriに呼び掛けたことがあり,人前で使ったことがあるのは3%だったそうです。調査はAndroidユーザーも含めてのもので,⁠OK Google」の方は使ったことがあるのが94%,人前では12%とのことでした。

日本では音声での操作を使う人は少ない印象があります。街中でスマホに音声で命令している人も見たことありませんね。機能がそれほど認知されていないという理由もありそうです。お年寄りや子どもが使いこなす上でも,音声での操作は将来性があるはずだとも思います。

子どもは家でも外でも平気でSiriに話しかけているので,小さい頃から音声操作に慣れた世代が増えてくると,人前で使うのも当たり前になってくるのでしょう。とはいえ,日本ではスマホを使うシチュエーションといえば電車の中が多いので,マナーの点からも音声操作は普及しないかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入