週刊Webテク通信

2020年9月第1週号 1位は,ウェブアニメーションの基本ルール,気になるネタは,MS監修,Officeみたいなアプリを搭載したパソコン玩具,タカラトミーが発売 「在宅勤務の親と同じことを」

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

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

1. Ground Rules for Web Animations | CSS-Trickshttps://css-tricks.com/ground-rules-for-web-animations/

ウェブアニメーションの基本ルールを解説した記事です。

アニメーションを使うのに適した場面
  • UIブロックが切り替わるとき
  • コンテンツを読み込んでいるとき
  • ヒントを与えるとき
  • マイクロインタラクション
アニメーションを避けるべき場面
  • ページ遷移するとき
  • ページのコンテンツを最初に読み込むとき
  • 予想外のとき
  • ちゃんと動くかわからないとき
  • 目的が明確でないとき

図1 ウェブアニメーションの基本ルール

図1 ウェブアニメーションの基本ルール

2. Why and How You Should Create Wireframes With Others - Boagworld Showhttps://boagworld.com/season/lean-ux/episode/create-wireframes/

ワイヤーフレームを他の人と一緒に作ることがなぜ重要なのか,どのように作るべきかを紹介しています。

  • ワイヤーフレームとプロトタイプの違いは?
  • なぜ他の人と一緒にワイヤーフレームを作りたいのか
  • ワイヤーフレームを他の人と作る方法は?
  • ワイヤーフレームをテストするには
  • ワイヤーフレームを作ることで,やり取りが延々繰り返されるのを回避する

図2 ワイヤーフレームをなぜ,どのように他の人と一緒に作るのか

図2 ワイヤーフレームをなぜ,どのように他の人と一緒に作るのか

3. 10 Tips to Design Perfect Website Backgroundshttps://line25.com/articles/10-tips-to-design-perfect-website-backgrounds

完璧な背景をデザインするためのヒントを10項目紹介しています。

  1. 幾何学的要素
  2. 背景色
  3. グラデーション
  4. ラインを使う
  5. アニメーションを使う
  6. 画像を背景として使う
  7. テクスチャ背景を適用する
  8. コンテンツと背景をレイヤーに分ける
  9. コンテンツエリアにグラフィックスを使う
  10. 色の心理学に取り組む

図3 完璧な背景をデザインするためのヒント

図3 完璧な背景をデザインするためのヒント

4. 20 Freshest Web Designs, August 2020 | Webdesigner Depothttps://www.webdesignerdepot.com/2020/08/20-freshest-web-designs-august-2020/

新しさが感じられるウェブデザインのサイトを20個まとめています。どのサイトもアニメーションがうまく使われているとのことです。

スクロールに合わせてアニメーションする効果が入っているサイトが多い印象でした。

図4 新しさが感じられるウェブデザインいろいろ

図4 新しさが感じられるウェブデザインいろいろ

5. Awesome Demos Roundup #17 | Codropshttps://tympanus.net/codrops/2020/08/25/awesome-demos-roundup-17/

Codropsに投稿されたHTML+CSS+JSのテクニックから,とくに素晴らしいものを紹介しています。

Three.jsを使って立体的なルービックキューブを動かせるものがあり,ついつい遊んでしまいました。

図5 Codropsの素晴らしいデモいろいろ

図5 Codropsの素晴らしいデモいろいろ

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

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

Startup - Free Bootstrap Builder for Templates & Themeshttps://designmodo.com/startup/

Bootstrapをベースにしたランディングページやウェブサイトのビルダーです。以前からある人気のサービスで,最近バージョン4になったようです。

ヘッダー,ナビゲーション,フォーム,価格表,フッターなど項目別にいろいろなコンポーネントが用意されていて,それを積み重ねてレイアウトします。それぞれのコンポーネントは細かくカスタマイズできます。

素早くデザイン性の高いランディングページを作れそうです。Bootstrapのclassを指定してデザインをコントロールできるのも便利だと思います。基本的に有料のサービスで,無料で使えるコンポーネントはあまりありませんでした。

図6 Bootstrapベースのウェブサイトのビルダー

図6 Bootstrapベースのウェブサイトのビルダー

今週の気になるWebネタ

MS監修,Officeみたいなアプリを搭載したパソコン玩具,タカラトミーが発売 「在宅勤務の親と同じことを」 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2008/31/news149.html

タカラトミーから「スキルアップ タブレットパソコン スピカノート」というパソコン玩具が発売されます。ノートパソコンとタブレットの2WAYで,対象年齢は6~9歳ごろとのこと。

「パソコンスキル」アプリはマイクロソフト監修で,Word,Excel,PowerPointの特徴的な機能が体験できるとのこと。プリントアウト機能はありませんが,作ったデータをJPEG画像でマイクロSDカードに保存できます。

ECC監修の英語学習や,プログラミング,謎解きと子供向けのものをいろいろ詰め込んであり,頑張って開発したんだろうなと感じます。いまどきの小学生だったらiPadを使いこなしているだろうとも思いますが,自分用のパソコンでテレワークの親の真似ができるのもいいところなのでしょう。

著者プロフィール

芦之由(あしのよし)

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

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

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