週刊Webテク通信

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

ネットで見かけた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によるループアニメーションに一時停止の設定を行うサービス

おすすめ記事

記事・ニュース一覧