週刊Webテク通信

2018年7月第4週号 1位は，ウェブサイトを素早くデザインリニューアルする方法，気になるネタは，Google，自分と同じ姿勢の写真をリアルタイムに表示する「Move Mirror」公開

Webテク, Webデザイン, Web広告, WordPress, キーボードショートカット, 画像

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

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

1. Express Website Redesign: Using Pre-built Websites to Avoid a Laborious Rebranding Process - Designmodohttps://designmodo.com/express-website-redesign/

ウェブサイトを素早くデザインリニューアルする方法を解説した記事です。WordPressのテーマ「BeTheme」に用意された350種類以上のサンプルサイトを利用することで，時間をかけず簡単にリニューアルすることを勧めています。

時代遅れのウェブサイトに新鮮な外観を与える方法として，以下の7項目がまとめられていました。

  1. 動画，アニメーションでダイナミックにする
  2. 配色を変更する
  3. 情報アーキテクチャの再構成
  4. 見映えの良いビジュアルを大きく使う
  5. 完璧な買い物体験を作り上げる
  6. ポートフォリオサイトのアップグレード
  7. 情報が過密になったウェブサイトを簡素化する

図1　ウェブサイトを素早くデザインリニューアルする方法

図1　ウェブサイトを素早くデザインリニューアルする方法

2. How to Create Future-Proof Design System and Make it Easily Accessible for the Product Teamhttps://blog.daftcode.pl/how-to-create-and-share-a-design-system-nethones-case-study-eb837052f5b1

将来の使用に耐えうるデザインシステムの作り方と，そのデザインシステムをプロダクトチームで簡単にアクセスできるようにする方法をまとめています。

  1. 検査
  2. ビジュアル言語の確立
  3. UIコンポーネントライブラリの作成
  4. 仕様の共有
  5. 未来

図2　将来の使用に耐えうるデザインシステムの作り方

図2　将来の使用に耐えうるデザインシステムの作り方

3. 8 Ways to Make the Search Field Sexy with CSShttps://speckyboy.com/search-field-sexy-css/

検索窓のちょっと凝ったデザイン例を，コード共有サイトCodePenからまとめています。

虫眼鏡アイコンをクリックすると検索窓が広がるというパターンが多いようです。検索ボタンがないタイプが多いということも気になりました。

図3　検索フィールドのデザイン例いろいろ

図3　検索フィールドのデザイン例いろいろ

4. 4 Unique Placeholder Image Services for Designers | Design Shackhttps://designshack.net/articles/software/placeholder-image/

ダミー画像を生成するサービスを4つ紹介しています。実際の写真を表示するもの2つと，背景色＋テキストやアイコン画像を表示するもの2つに大きく分けられます。

4番目に紹介されているPlacehold.jpは，日本のサービスで日本語で使えるのでおすすめです。

図4　ダミー画像を生成するサービスを4つ紹介

図4　ダミー画像を生成するサービスを4つ紹介

5. Shortcuts.design | Every shortcut for designers in one place 🚀https://shortcuts.design/

デザイン系ツールを中心に，いろいろなアプリケーションのキーボードショートカットを確認できます。

GitHub上で共有されており，追加して欲しいツールのリクエストも受け付けています。

図5　キーボードショートカットをまとめたサイト

図5　キーボードショートカットをまとめたサイト

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

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

Placid.app - Generate your Social Share Images automatically https://placid.app/

Placidは，Facebook／Twitterでページをシェアしたときに表示されるアイキャッチ画像を作るサービスで，画像とともにコードも生成するのが特徴です。

Twitter cardのコードとFacebookのOpen Graph Protocolのコードを作る機能が付いたオンラインデザインツールといった感じですね。Placidのサーバーにある画像をそのまま利用するので，生成した画像を自分でFTPする必要はありません。

基本的には有料のサービスで，無料だとテンプレートの数が少ない，画像にクレジットが入るなどの制限があります。将来的にはデザインエディターの機能を強化して，Instagramの投稿やストーリーに使える画像も作れるようになるようです。

図6　SNSで表示されるアイキャッチ画像とコードを生成するサービス

図6　SNSで表示されるアイキャッチ画像とコードを生成するサービス

今週の気になるWebネタ

Google，自分と同じ姿勢の写真をリアルタイムに表示する「Move Mirror」公開 - Engadget 日本版https://japanese.engadget.com/2018/07/21/google-move-mirror/

Googleが，自分のポーズと同じ画像をリアルタイムに検索・表示する「Move Mirror」を公開しました。ウェブカメラで映した人間の身体を認識して，8万以上の画像データベースから似たポーズの画像を表示します。

最近では，この手のものを見ても驚く人が少なくなってしまいましたが，リアルタイムで8万以上の画像から瞬時に同じポーズの画像を探し出すというのは，なかなかすごいことなのでしょう。肖像権や著作権の関係なのか，出てくる写真が古めかしいものばかりなのも，この技術のすごさを演出するのにマイナスなのかもしれません。

人間のポーズの認識は見事にできているようなので，将来的には身体の動きで操作するゲームなどいろんな応用ができそうです。

Webテク, Webデザイン, Web広告, WordPress, キーボードショートカット, 画像

著者プロフィール

芦之由（あしのよし）

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

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

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