gihyo.jpサイトのロゴ

週刊Webテク通信

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

2018-07-26

ネットで見かけた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で表示されるアイキャッチ画像とコードを生成するサービス

おすすめ記事

記事・ニュース一覧