週刊Webテク通信

2019年7月第2週号 1位は, 実はHTMLだけでできること,気になるネタは,LINEの「クリエイターズスタンプ使い放題」で,スタンプ制作者のビジネスはどう変わる?

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

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

1. HTML can do that? - DEV Community 👩‍💻 👨‍💻https://dev.to/ananyaneogi/html-can-do-that-c0n

実はHTMLだけでできることをまとめた記事です。

  1. ドロップダウンで選べ,文字も打てる検索窓
  2. ダイアログボックス
  3. プログレスバー
  4. 開閉する要素
  5. モバイル環境で入力欄のタイプに合わせたソフトウェアキーボードを出す
  6. シンプルなカラーピッカー
  7. テキストのハイライト
  8. 電話をかけるリンク
  9. 削除/挿入したテキスト
  10. ページ内のコンテンツを編集する

図1 実はHTMLだけでできることいろいろ

図1 実はHTMLだけでできることいろいろ

2. User Experience: Best Practices on Effective Visual Hierarchyhttps://design4users.com/best-practices-on-visual-hierarchy/

効果的な見た目での階層構造を作るテクニックを解説しています。

  • 常にビジネスでの目標を考える
  • 人の目がスキャンするパターンを考慮する
  • 機能を優先する
  • 空白もビジュアルの要素だと覚えておく
  • 黄金比を使う
  • グリッドを使う
  • いくつかの色を追加する
  • フォントにも注意を払う
  • ウェブでは3つの階層,モバイルでは2階層

図2 見た目での階層構造を作るテクニック

図2 見た目での階層構造を作るテクニック

3. 7 Best CSS Optimization Tips for Better Page Load Times - Onextrapixelhttps://onextrapixel.com/best-css-optimization-tips/

読み込み速度を上げるためにCSSを最適化する,7つの方法を紹介しています。

  1. パフォーマンスのボトルネックを見つける
  2. CSSファイルの最小化と圧縮
  3. FlexboxとCSSグリッドを使う
  4. @importの代わりにlinkタグを使う
  5. 画像の代わりにCSSでのグラデーションやSVGファイルを使う
  6. !importantを使わない
  7. リファクタリング(コードの手直し)をする

図3 CSSを最適化する7つの方法

図3 CSSを最適化する7つの方法

4. 3 Essential Design Trends, July 2019 | Webdesigner Depothttps://www.webdesignerdepot.com/2019/07/3-essential-design-trends-july-2019/

今月の,3つの重要なデザイントレンドをまとめた記事です。

  • 読みにくいテキスト
  • 顔写真を使う
  • 全てのテキストを左側に配置

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

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

5. 8 Websites that Effectively Utilize Monochrome Colorshttps://speckyboy.com/monochrome-colors-hero-areas/

メインイメージにモノクロの画像を使ったウェブサイトの実例を多数紹介しています。

白黒ではなく,同系色の色しか使っていないビジュアルが中心です。Instagramでも同系色でまとめた写真が流行っているので,その影響もあるのかもしれません。

図5 モノクロ画像を使ったウェブサイトの実例

図5 モノクロ画像を使ったウェブサイトの実例

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

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

Placeit | Make Mockups, Logos, Videos and Designs in Secondshttps://placeit.net/

Placeitといえば,スマホの画面に手持ちの画像を合成するなどモックアップを作るサービスとして有名です。そのPlaceitがいつの間にかグレードアップして,ロゴの作成やレイアウトデザイン,動画制作までできるようになっていました。

デザイン作成では,各種SNS用に投稿するのに適したサイズのビジュアルや,カバー画像などがテンプレートをベースに簡単に作れます。動画制作はビデオ編集ではなく,SNSでの投稿用にちょっとした動くコンテンツを作りたいという用途向けです。InstagramやFacebookのストーリー用の動画を作るのに便利そうです。

基本的には有料のサービスで,ダウンロードし放題のサブスクリプションと,各コンテンツごとに料金を払う形式が選べます。ざっと見た感じ,画像は1点2ドル,動画は1点9ドルとそれほど高くありません。いかにもアメリカ的なデザインのテンプレートで日本語フォントも使えませんが(日本語表示はできます)⁠いざというとき重宝しそうなサービスです。

図6 ロゴ作成やレイアウトデザイン,動画制作までできるようになったPlaceit

図6 ロゴ作成やレイアウトデザイン,動画制作までできるようになったPlaceit

今週の気になるWebネタ

LINEの「クリエイターズスタンプ使い放題」で,スタンプ制作者のビジネスはどう変わる? (1/2) - ITmedia ビジネスオンラインhttps://www.itmedia.co.jp/business/articles/1907/02/news081.html

LINEのクリエイターズスタンプが月額240円(学生は120円)で使い放題になるサービス「LINEスタンプ プレミアム」が開始されます。スタンプのクリエイターは使い放題の対象にするかどうかを選べ,利用人数に応じた分配金を得られるそうです。

スタンプの使われた回数は関係なく,使った人数がカウントされるとのこと。ロングランで使い続けられるスタンプであれば,継続的な収入に繋がりそうですね。

また,LINE Creators Studioというスマホアプリで作ったスタンプは,自分で作ったスタンプを購入しなくても使えるようになったと同時に,売り上げの分配金ももらえなくなりました。ほとんどの人は,最低支払金額の1000円を超えないと思われるので,無料で自分のスタンプをダウンロードできる方が良いのでしょう。

著者プロフィール

芦之由(あしのよし)

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

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

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