週刊Webテク通信

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

ネットで見かけた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

おすすめ記事

記事・ニュース一覧