週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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デザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入